tab2

src/components/Course.vue

 <template>
   <ion-card :router-link="'/tabs/course_detail/'+courseObj.id">
-    <img alt="Silhouette of mountains" :src="feature_img"  v-if="feature_img" />
+    <ion-img alt="Silhouette of mountains" :src="feature_img"  v-if="feature_img" class='img_16_9' />
     <ion-card-header>
       <ion-card-title>{{ courseObj.name }}</ion-card-title>
     </ion-card-header>
 </template>
 
 <script setup lang="ts">
-  import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonIcon, onIonViewWillEnter, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent } from '@ionic/vue';
+  import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonIcon, onIonViewWillEnter, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent, IonImg } from '@ionic/vue';
 
 import { getTrainers, listCourses, BASE_URL } from '@/composable/settings';
   import { ref, onMounted } from 'vue'
 ion-card-title {
   font-size:1em;
 }
+.img_16_9 {
+  aspect-ratio: 16/9 auto;
+  object-fit:cover;
+}
 </style>

src/components/CourseMat.vue

 <template>
   <ion-card :router-link="'/tabs/mat_detail/'+obj.id">
-    <ion-img alt="Silhouette of mountains" :src="thmb"  v-if="thmb" style='width:100%' />
+    <ion-img alt="Silhouette of mountains" :src="thmb"  v-if="thmb" class="img_16_9"/>
     <ion-card-header>
       <ion-card-title>{{ name }}</ion-card-title>
     </ion-card-header>
 ion-card-title {
   font-size:1.5em;
 }
+.img_16_9 {
+  width:480px;
+  height:270px;
+  object-fit:cover;
+}
 </style>

src/components/CourseSchedule.vue

 <template>
   <ion-card :router-link="'/tabs/course_detail/'+courseObj.id">
-    <img alt="Silhouette of mountains" :src="feature_img"  v-if="feature_img" />
+    <ion-img alt="Silhouette of mountains" :src="feature_img" class="img_16_9" v-if="feature_img" />
     <ion-card-header>
       <ion-card-title>{{ courseObj.name }}</ion-card-title>
     </ion-card-header>
 
      <ion-card-content>
-       {{ fromTime.substring(0, 5) }} - {{ toTime.substring(0,5) }}
+       <div>
+         <ion-icon :icon="timer" size="small"></ion-icon> {{ fromTime.substring(0, 5) }} - {{ toTime.substring(0,5) }}</div>
     </ion-card-content>
 
   </ion-card>
 </template>
 
 <script setup lang="ts">
-  import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonIcon, onIonViewWillEnter, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent } from '@ionic/vue';
+  import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonIcon, onIonViewWillEnter, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent, IonImg } from '@ionic/vue';
+
+import { logoIonic, timer } from 'ionicons/icons';
+
 
 import { getTrainers, listCourses, BASE_URL } from '@/composable/settings';
   import { ref, onMounted } from 'vue'
 ion-card-title {
   font-size:1em;
 }
+.img_16_9 {
+  aspect-ratio: 16/9 auto;
+  object-fit:cover;
+}
+ion-icon {
+  vertical-align:middle;
+}
 </style>

src/components/Post.vue

 <template>
   <ion-card :router-link="'/tabs/post_detail/'+obj.id" >
-    <img alt="Silhouette of mountains" :src="feature_img"  v-if="feature_img" class='img-crop'/>
+    <ion-img alt="Silhouette of mountains" :src="feature_img"  v-if="feature_img" class='img_16_9'/>
     <ion-card-header>
-      <ion-card-title>{{ obj.name }}</ion-card-title>
+      <ion-card-title class='ion-text-start'>{{ obj.name }}</ion-card-title>
     </ion-card-header>
 
   </ion-card>
 </template>
 
 <script setup lang="ts">
-  import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonIcon, onIonViewWillEnter, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent } from '@ionic/vue';
+  import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonIcon, onIonViewWillEnter, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent, IonImg } from '@ionic/vue';
 
 import { getTrainers, listCourses, BASE_URL } from '@/composable/settings';
   import { ref, onMounted } from 'vue'
 .img-crop {
    aspect-ratio: 4/3 auto;
 }
+.img_16_9 {
+  aspect-ratio: 16/9 auto;
+  object-fit:cover;
+}
 </style>

src/components/SearchItem.vue

 <template>
   <ion-item :router-link="'/tabs/mat_detail/'+obj.id">
     <ion-thumbnail slot="start">
-      <img alt="Silhouette of mountains" :src="thmb"  v-if="thmb" />
+      <ion-img alt="Silhouette of mountains" :src="thmb"  v-if="thmb" />
     </ion-thumbnail>
-    <ion-label>{{ name }} {{ dt }}</ion-label>
+    <ion-label>{{ name }} <br><span class='small'><ion-icon :icon="timer" size="small" />{{ dt }}</span></ion-label>
   </ion-item>
 </template>
 
 <script setup>
-  import { IonItem, IonLabel, IonThumbnail } from '@ionic/vue';
+  import { IonItem, IonLabel, IonThumbnail, IonImg, IonIcon } from '@ionic/vue';
+import { logoIonic, timer } from 'ionicons/icons';
   import { ref, onMounted } from 'vue';
   import moment from 'moment';
   
   onMounted(() => {
     const obj = props.obj
     let temp  = obj.display_datetime || obj.vimeo_created || obj.created_at 
-    dt.value = moment(temp).format('LLL'); 
+    dt.value = moment(temp).format('L'); 
 
     if( obj.gifs && obj.gifs.length > 0 ) {
-      thmb.value = obj.gifs[0].sizes[2].link
+      console.log(obj.gifs)
+      if(obj.gifs[0].sizes.length > 2 ) {
+        thmb.value = obj.gifs[0].sizes[2].link
+      }else {
+        thmb.value = obj.gifs[0].sizes[0].link
+      }
     }else {
       thmb.value = obj.course_image
     }
   })
 
 </script>
+
+<style scoped>
+.small {
+  font-size:0.8em;
+  color:#888;
+  text-align:right;
+  width:100%;
+  display:block;
+  margin-top:0.3em;
+}
+ion-icon {
+  vertical-align:middle;
+}
+</style>

src/views/CourseDetailPage.vue

           <ion-title size="large" v-if="course">{{ course.name }}</ion-title>
         </ion-toolbar>
       </ion-header>
+        <template v-if="processing">
+            <ion-progress-bar type="indeterminate" class='ion-margin-vertical'></ion-progress-bar>
+        </template>
       <ion-grid>
         <ion-row>
           <ion-col size="12" size-md="4" size-lg="2" v-for="c in mats">
 import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent,   IonNavLink,
     IonButton,
     IonButtons,
-    IonBackButton, onIonViewWillEnter, IonRow, IonGrid, IonCol } from '@ionic/vue';
+    IonBackButton, onIonViewWillEnter, IonRow, IonGrid, IonCol, IonProgressBar } from '@ionic/vue';
 import { useRoute } from 'vue-router';
 import { listCourseMats, getCourse } from '@/composable/settings';
 import { ref } from 'vue';
 
 const mats = ref([])
 const course = ref()
+const processing = ref(false)
 onIonViewWillEnter(async () => {
   getCourse(id).then( (data) => course.value = data )
-  listCourseMats(id).then( (data) => mats.value = data )
+  processing.value = true
+  listCourseMats(id).then( (data) => { 
+    mats.value = data;
+    processing.value = false
+  })
 })
 </script>

src/views/SearchPage.vue

 
 <script setup lang="ts">
 import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonButton, onIonViewWillEnter, IonList, IonSearchbar, IonLabel,
-IonItem, IonBackButton, IonProgressBar } from '@ionic/vue';
+IonItem, IonBackButton, IonProgressBar, IonButtons } from '@ionic/vue';
 import ExploreContainer from '@/components/ExploreContainer.vue';
 import { defineComponent, onMounted } from 'vue';
 import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';
   if(query == "") {
     results.value = []
   }else {
+    results.value = []
     //results.value = data.filter((d) => d.toLowerCase().indexOf(query) > -1);
     processing.value = true;
     const r = await searchMat(query)

src/views/Tab1Page.vue

       <template v-if="liveObj && liveObj.result">
         <div v-html="liveObj.result.embed_html"></div>
       </template>
-      <div class='ion-padding'>
-      <h2>Today Programs</h2>
+      <div class=''>
+      <h2 class='ion-margin-start'>Today Programs</h2>
       <swiper :slides-per-view="2" :loop="true" v-if="todays" class='ion-no-margin'>
       <swiper-slide v-for="m in todays">
         <CourseSchedule :course-obj="m.course_level.course" :from-time="m.from_time" :to-time='m.to_time'  />
       </swiper>
       </div>
       <template v-if="posts">
-        <div class='ion-padding'>
-          <h2>Muaythai Techniques</h2>
-          <swiper :slides-per-view="2"  :loop="true"  class='ion-no-margin' id="post_slide">
+        <div class=''>
+          <h2 class="ion-margin-start">Muaythai Techniques</h2>
+          <swiper :slides-per-view="'auto'"  :loop="true" >
           <swiper-slide v-for="m in posts" class='ion-no-padding'>
             <Post :obj="m" />
           </swiper-slide>
         </ion-row>
       </ion-grid>
       </template>
-      <ion-button router-link="/tabs/detail/3/" router-direction="forward">Click Me</ion-button>
-
-      <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/880005259?badge=0&amp;autopause=0&amp;quality_selector=1&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Muay Thai Advance"></iframe></div> 
-      <!--
-        <vue-core-video-player src="https://player.vimeo.com/progressive_redirect/playback/880005259/rendition/720p/file.mp4?loc=external&signature=5ddad1430211b33f65824444a3137fc0ec6fe61183d39997036d2dd3b78654f9"></vue-core-video-player> -->
-
-        Video
-
-
-        <div id="made-in-ny" ref='video'></div>
-
-        <ul>
-          <li v-for="(item, index) in items">
-            {{ item.msg }}
-          </li>
-        </ul>
-        <ion-item v-for="t in trainers" :router-link="'/detail/'+t.id">
-          <ion-thumbnail slot="start" v-if="t.photo">
-            <img alt="Silhouette of mountains" :src="t.photo" />
-          </ion-thumbnail>
-          <ion-label class='ion-text-wrap'>{{ t.name }}</ion-label>
-        </ion-item>
-        <ion-icon icon="heart"></ion-icon>
-        <ion-button @click="scrollToBottom">Scroll to Bottom</ion-button>
+
     </ion-content>
   </ion-page>
 </template>
 
 <style scoped>
 #post_slide {
-   aspect-ratio: 16/9 auto;
+   aspect-ratio:4/3 auto;
+}
+.img_16_9 {
+  width:480px;
+  height:270px;
+  object-fit:cover;
+}
+.swiper-slide {
+  width: 90% !important;
+	&:last-child {
+	  width: 100% !important;
+	}
 }
 </style>

src/views/Tab2Page.vue

           <ion-title size="large">Courses</ion-title>
         </ion-toolbar>
       </ion-header>
+        <template v-if="processing">
+            <ion-progress-bar type="indeterminate" class='ion-margin-vertical'></ion-progress-bar>
+        </template>
       <ion-grid>
         <ion-row>
           <ion-col size="6" size-md="4" size-lg="2" v-for="c in courses">
 </template>
 
 <script setup lang="ts">
-import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonGrid, IonRow, IonCol, onIonViewWillEnter } from '@ionic/vue';
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonGrid, IonRow, IonCol, onIonViewWillEnter, IonProgressBar } from '@ionic/vue';
 import Course from '@/components/Course.vue';
 import { ref } from 'vue';
 
 import {listCourses} from '@/composable/settings';
-const courses = ref([])
-
+const courses = ref([]);
+const processing = ref(false);
 onIonViewWillEnter(async () => {
-
+  processing.value = true;
   courses.value = await listCourses()
+  processing.value = false;
 })
 </script>