tum 2 gadi atpakaļ
vecāks
revīzija
69700dcab4

+ 6 - 2
src/components/Course.vue

@@ -1,6 +1,6 @@
1 1
 <template>
2 2
   <ion-card :router-link="'/tabs/course_detail/'+courseObj.id">
3
-    <img alt="Silhouette of mountains" :src="feature_img"  v-if="feature_img" />
3
+    <ion-img alt="Silhouette of mountains" :src="feature_img"  v-if="feature_img" class='img_16_9' />
4 4
     <ion-card-header>
5 5
       <ion-card-title>{{ courseObj.name }}</ion-card-title>
6 6
     </ion-card-header>
@@ -9,7 +9,7 @@
9 9
 </template>
10 10
 
11 11
 <script setup lang="ts">
12
-  import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonIcon, onIonViewWillEnter, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent } from '@ionic/vue';
12
+  import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonIcon, onIonViewWillEnter, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent, IonImg } from '@ionic/vue';
13 13
 
14 14
 import { getTrainers, listCourses, BASE_URL } from '@/composable/settings';
15 15
   import { ref, onMounted } from 'vue'
@@ -38,4 +38,8 @@ import { getTrainers, listCourses, BASE_URL } from '@/composable/settings';
38 38
 ion-card-title {
39 39
   font-size:1em;
40 40
 }
41
+.img_16_9 {
42
+  aspect-ratio: 16/9 auto;
43
+  object-fit:cover;
44
+}
41 45
 </style>

+ 6 - 1
src/components/CourseMat.vue

@@ -1,6 +1,6 @@
1 1
 <template>
2 2
   <ion-card :router-link="'/tabs/mat_detail/'+obj.id">
3
-    <ion-img alt="Silhouette of mountains" :src="thmb"  v-if="thmb" style='width:100%' />
3
+    <ion-img alt="Silhouette of mountains" :src="thmb"  v-if="thmb" class="img_16_9"/>
4 4
     <ion-card-header>
5 5
       <ion-card-title>{{ name }}</ion-card-title>
6 6
     </ion-card-header>
@@ -55,4 +55,9 @@ import { getTrainers, listCourses } from '@/composable/settings';
55 55
 ion-card-title {
56 56
   font-size:1.5em;
57 57
 }
58
+.img_16_9 {
59
+  width:480px;
60
+  height:270px;
61
+  object-fit:cover;
62
+}
58 63
 </style>

+ 14 - 3
src/components/CourseSchedule.vue

@@ -1,19 +1,23 @@
1 1
 <template>
2 2
   <ion-card :router-link="'/tabs/course_detail/'+courseObj.id">
3
-    <img alt="Silhouette of mountains" :src="feature_img"  v-if="feature_img" />
3
+    <ion-img alt="Silhouette of mountains" :src="feature_img" class="img_16_9" v-if="feature_img" />
4 4
     <ion-card-header>
5 5
       <ion-card-title>{{ courseObj.name }}</ion-card-title>
6 6
     </ion-card-header>
7 7
 
8 8
      <ion-card-content>
9
-       {{ fromTime.substring(0, 5) }} - {{ toTime.substring(0,5) }}
9
+       <div>
10
+         <ion-icon :icon="timer" size="small"></ion-icon> {{ fromTime.substring(0, 5) }} - {{ toTime.substring(0,5) }}</div>
10 11
     </ion-card-content>
11 12
 
12 13
   </ion-card>
13 14
 </template>
14 15
 
15 16
 <script setup lang="ts">
16
-  import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonIcon, onIonViewWillEnter, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent } from '@ionic/vue';
17
+  import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonIcon, onIonViewWillEnter, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent, IonImg } from '@ionic/vue';
18
+
19
+import { logoIonic, timer } from 'ionicons/icons';
20
+
17 21
 
18 22
 import { getTrainers, listCourses, BASE_URL } from '@/composable/settings';
19 23
   import { ref, onMounted } from 'vue'
@@ -44,4 +48,11 @@ import { getTrainers, listCourses, BASE_URL } from '@/composable/settings';
44 48
 ion-card-title {
45 49
   font-size:1em;
46 50
 }
51
+.img_16_9 {
52
+  aspect-ratio: 16/9 auto;
53
+  object-fit:cover;
54
+}
55
+ion-icon {
56
+  vertical-align:middle;
57
+}
47 58
 </style>

+ 7 - 3
src/components/Post.vue

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

+ 25 - 5
src/components/SearchItem.vue

@@ -1,14 +1,15 @@
1 1
 <template>
2 2
   <ion-item :router-link="'/tabs/mat_detail/'+obj.id">
3 3
     <ion-thumbnail slot="start">
4
-      <img alt="Silhouette of mountains" :src="thmb"  v-if="thmb" />
4
+      <ion-img alt="Silhouette of mountains" :src="thmb"  v-if="thmb" />
5 5
     </ion-thumbnail>
6
-    <ion-label>{{ name }} {{ dt }}</ion-label>
6
+    <ion-label>{{ name }} <br><span class='small'><ion-icon :icon="timer" size="small" />{{ dt }}</span></ion-label>
7 7
   </ion-item>
8 8
 </template>
9 9
 
10 10
 <script setup>
11
-  import { IonItem, IonLabel, IonThumbnail } from '@ionic/vue';
11
+  import { IonItem, IonLabel, IonThumbnail, IonImg, IonIcon } from '@ionic/vue';
12
+import { logoIonic, timer } from 'ionicons/icons';
12 13
   import { ref, onMounted } from 'vue';
13 14
   import moment from 'moment';
14 15
   
@@ -23,10 +24,15 @@
23 24
   onMounted(() => {
24 25
     const obj = props.obj
25 26
     let temp  = obj.display_datetime || obj.vimeo_created || obj.created_at 
26
-    dt.value = moment(temp).format('LLL'); 
27
+    dt.value = moment(temp).format('L'); 
27 28
 
28 29
     if( obj.gifs && obj.gifs.length > 0 ) {
29
-      thmb.value = obj.gifs[0].sizes[2].link
30
+      console.log(obj.gifs)
31
+      if(obj.gifs[0].sizes.length > 2 ) {
32
+        thmb.value = obj.gifs[0].sizes[2].link
33
+      }else {
34
+        thmb.value = obj.gifs[0].sizes[0].link
35
+      }
30 36
     }else {
31 37
       thmb.value = obj.course_image
32 38
     }
@@ -34,3 +40,17 @@
34 40
   })
35 41
 
36 42
 </script>
43
+
44
+<style scoped>
45
+.small {
46
+  font-size:0.8em;
47
+  color:#888;
48
+  text-align:right;
49
+  width:100%;
50
+  display:block;
51
+  margin-top:0.3em;
52
+}
53
+ion-icon {
54
+  vertical-align:middle;
55
+}
56
+</style>

+ 10 - 2
src/views/CourseDetailPage.vue

@@ -15,6 +15,9 @@
15 15
           <ion-title size="large" v-if="course">{{ course.name }}</ion-title>
16 16
         </ion-toolbar>
17 17
       </ion-header>
18
+        <template v-if="processing">
19
+            <ion-progress-bar type="indeterminate" class='ion-margin-vertical'></ion-progress-bar>
20
+        </template>
18 21
       <ion-grid>
19 22
         <ion-row>
20 23
           <ion-col size="12" size-md="4" size-lg="2" v-for="c in mats">
@@ -30,7 +33,7 @@
30 33
 import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent,   IonNavLink,
31 34
     IonButton,
32 35
     IonButtons,
33
-    IonBackButton, onIonViewWillEnter, IonRow, IonGrid, IonCol } from '@ionic/vue';
36
+    IonBackButton, onIonViewWillEnter, IonRow, IonGrid, IonCol, IonProgressBar } from '@ionic/vue';
34 37
 import { useRoute } from 'vue-router';
35 38
 import { listCourseMats, getCourse } from '@/composable/settings';
36 39
 import { ref } from 'vue';
@@ -41,8 +44,13 @@ const { id } = route.params;
41 44
 
42 45
 const mats = ref([])
43 46
 const course = ref()
47
+const processing = ref(false)
44 48
 onIonViewWillEnter(async () => {
45 49
   getCourse(id).then( (data) => course.value = data )
46
-  listCourseMats(id).then( (data) => mats.value = data )
50
+  processing.value = true
51
+  listCourseMats(id).then( (data) => { 
52
+    mats.value = data;
53
+    processing.value = false
54
+  })
47 55
 })
48 56
 </script>

+ 2 - 1
src/views/SearchPage.vue

@@ -30,7 +30,7 @@
30 30
 
31 31
 <script setup lang="ts">
32 32
 import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonButton, onIonViewWillEnter, IonList, IonSearchbar, IonLabel,
33
-IonItem, IonBackButton, IonProgressBar } from '@ionic/vue';
33
+IonItem, IonBackButton, IonProgressBar, IonButtons } from '@ionic/vue';
34 34
 import ExploreContainer from '@/components/ExploreContainer.vue';
35 35
 import { defineComponent, onMounted } from 'vue';
36 36
 import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';
@@ -51,6 +51,7 @@ const handleInput = async (event) => {
51 51
   if(query == "") {
52 52
     results.value = []
53 53
   }else {
54
+    results.value = []
54 55
     //results.value = data.filter((d) => d.toLowerCase().indexOf(query) > -1);
55 56
     processing.value = true;
56 57
     const r = await searchMat(query)

+ 18 - 30
src/views/Tab1Page.vue

@@ -19,8 +19,8 @@
19 19
       <template v-if="liveObj && liveObj.result">
20 20
         <div v-html="liveObj.result.embed_html"></div>
21 21
       </template>
22
-      <div class='ion-padding'>
23
-      <h2>Today Programs</h2>
22
+      <div class=''>
23
+      <h2 class='ion-margin-start'>Today Programs</h2>
24 24
       <swiper :slides-per-view="2" :loop="true" v-if="todays" class='ion-no-margin'>
25 25
       <swiper-slide v-for="m in todays">
26 26
         <CourseSchedule :course-obj="m.course_level.course" :from-time="m.from_time" :to-time='m.to_time'  />
@@ -28,9 +28,9 @@
28 28
       </swiper>
29 29
       </div>
30 30
       <template v-if="posts">
31
-        <div class='ion-padding'>
32
-          <h2>Muaythai Techniques</h2>
33
-          <swiper :slides-per-view="2"  :loop="true"  class='ion-no-margin' id="post_slide">
31
+        <div class=''>
32
+          <h2 class="ion-margin-start">Muaythai Techniques</h2>
33
+          <swiper :slides-per-view="'auto'"  :loop="true" >
34 34
           <swiper-slide v-for="m in posts" class='ion-no-padding'>
35 35
             <Post :obj="m" />
36 36
           </swiper-slide>
@@ -48,30 +48,7 @@
48 48
         </ion-row>
49 49
       </ion-grid>
50 50
       </template>
51
-      <ion-button router-link="/tabs/detail/3/" router-direction="forward">Click Me</ion-button>
52
-
53
-      <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> 
54
-      <!--
55
-        <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> -->
56
-
57
-        Video
58
-
59
-
60
-        <div id="made-in-ny" ref='video'></div>
61
-
62
-        <ul>
63
-          <li v-for="(item, index) in items">
64
-            {{ item.msg }}
65
-          </li>
66
-        </ul>
67
-        <ion-item v-for="t in trainers" :router-link="'/detail/'+t.id">
68
-          <ion-thumbnail slot="start" v-if="t.photo">
69
-            <img alt="Silhouette of mountains" :src="t.photo" />
70
-          </ion-thumbnail>
71
-          <ion-label class='ion-text-wrap'>{{ t.name }}</ion-label>
72
-        </ion-item>
73
-        <ion-icon icon="heart"></ion-icon>
74
-        <ion-button @click="scrollToBottom">Scroll to Bottom</ion-button>
51
+
75 52
     </ion-content>
76 53
   </ion-page>
77 54
 </template>
@@ -238,6 +215,17 @@ const getDeliveredNotifications = async () => {
238 215
 
239 216
 <style scoped>
240 217
 #post_slide {
241
-   aspect-ratio: 16/9 auto;
218
+   aspect-ratio:4/3 auto;
219
+}
220
+.img_16_9 {
221
+  width:480px;
222
+  height:270px;
223
+  object-fit:cover;
224
+}
225
+.swiper-slide {
226
+  width: 90% !important;
227
+	&:last-child {
228
+	  width: 100% !important;
229
+	}
242 230
 }
243 231
 </style>

+ 8 - 4
src/views/Tab2Page.vue

@@ -11,6 +11,9 @@
11 11
           <ion-title size="large">Courses</ion-title>
12 12
         </ion-toolbar>
13 13
       </ion-header>
14
+        <template v-if="processing">
15
+            <ion-progress-bar type="indeterminate" class='ion-margin-vertical'></ion-progress-bar>
16
+        </template>
14 17
       <ion-grid>
15 18
         <ion-row>
16 19
           <ion-col size="6" size-md="4" size-lg="2" v-for="c in courses">
@@ -23,15 +26,16 @@
23 26
 </template>
24 27
 
25 28
 <script setup lang="ts">
26
-import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonGrid, IonRow, IonCol, onIonViewWillEnter } from '@ionic/vue';
29
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonGrid, IonRow, IonCol, onIonViewWillEnter, IonProgressBar } from '@ionic/vue';
27 30
 import Course from '@/components/Course.vue';
28 31
 import { ref } from 'vue';
29 32
 
30 33
 import {listCourses} from '@/composable/settings';
31
-const courses = ref([])
32
-
34
+const courses = ref([]);
35
+const processing = ref(false);
33 36
 onIonViewWillEnter(async () => {
34
-
37
+  processing.value = true;
35 38
   courses.value = await listCourses()
39
+  processing.value = false;
36 40
 })
37 41
 </script>