Improved empty-state

hotwax · Jan 5, 2024 · d002023 · d002023
1 parent 5a4161a
commit d002023
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 10 deletions.
diff --git a/src/theme/variables.css b/src/theme/variables.css
@@ -265,3 +265,18 @@ http://ionicframework.com/docs/theming/ */
     display: none;
   }
 }
+
+.empty-state {
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+}
+.empty-state>img{
+  object-fit: contain;
+}
+.empty-state>p {
+  text-align: center;
+}
diff --git a/src/views/TimezoneModal.vue b/src/views/TimezoneModal.vue
@@ -13,17 +13,14 @@
     </ion-toolbar>
   </ion-header>
 
-  <!-- Empty state -->
-  <ion-content class="ion-text-center">
+
+  <ion-content class="ion-padding">
+    <!-- Empty state -->
     <div class="empty-state" v-if="filteredTimeZones.length === 0">
-        <ion-row class="ion-align-items-center ion-justify-content-center" style="height: 50vh;">
-         <ion-col size="auto">
-            <ion-spinner name="crescent" ></ion-spinner>
-         </ion-col>
-         <ion-col size="auto">
-            <p>{{ $t("Fetching time zones")}}</p>
-         </ion-col>
-      </ion-row>  
+      <ion-item lines="none">
+        <ion-spinner name="crescent" ></ion-spinner>
+        <p>{{ $t("Fetching time zones")}}</p>
+      </ion-item>      
     </div>   
 
     <!-- Timezones -->