Merge pull request #4 from devfestindia/home-layout-changes

Home page UI updated.
devfestindia · Sep 19, 2023 · 09e29d6 · 09e29d6
2 parents a701010 + e5b8747
commit 09e29d6
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 39 deletions.
diff --git a/src/assets/img/devfest-about-banner.png b/src/assets/img/devfest-about-banner.png
diff --git a/src/components/common/devFestInfoDialoge.vue b/src/components/common/devFestInfoDialoge.vue
@@ -11,7 +11,7 @@
           "
           class="py-n5 ma-0"
         >
-          <v-card ripple flat class="px-2 py-2 google-font" rounded="lg" style="border-radius:15px">
+          <v-card ripple flat class="px-2 py-2 google-font" rounded="lg" style="border-radius:15px;border: 1px solid #5f6368 !important;">
             <v-img
               :src="require('@/assets/img/devfest-cover.png')"
               :lazy-src="require('@/assets/img/devfest-cover.png')"

diff --git a/src/components/core/appToolbar.vue b/src/components/core/appToolbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-app-bar flat fixed app class="px-md-5 px-0" color="white" style="background-color: #F3F6FB !important;box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2)!important;">
+  <v-app-bar flat fixed app class="px-md-5 px-0" color="white" style="background-color: #fff !important;box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2)!important;">
     <v-app-bar-nav-icon
       class="d-md-none d-lg-none"
       @click="toggleDrawer"

diff --git a/src/components/home/devfestMoments.vue b/src/components/home/devfestMoments.vue
@@ -3,38 +3,41 @@
       <v-row>
         <v-col class="">
           <p
-            class="google-font mb-2"
-            style="font-size: 3.5vh;line-height: 1.22;font-weight:500"
+            class="google-font gdg-h1 mb-4 grey--text text--darken-4 text-center"
           >
-            devFest Moments'22 Shots
+            Devfest India Moments'22 Shots
           </p>
           <p class="google-font" style="font-size: 110%">
           </p>
         </v-col>
       </v-row>
       <v-row class="ma-0 pa-0">
         <v-col md="12">
-          <v-slide-group
-            v-model="model"
-            class="pa-4"
-            active-class="success"
-            show-arrows
-          >
-            <v-slide-item
-              v-for="(item, index) in imgs"
-              :key="index"
-              style="height:400px"
-              v-slot:default="{ active, toggle }"
-            >
-              <v-img
-                class="ma-4"
-                :color="active ? undefined : 'grey lighten-1'"
-                :src="require('@/assets/img/2019/'+item.img)"
-                style="width: 10%;"
-                @click="toggle"
-              ></v-img>
-            </v-slide-item>
-          </v-slide-group>
+          <v-carousel> 
+            <div v-for="(item, index) in imgs" :key="index"> 
+              <v-carousel-item>
+         <div class="text-center" v-if="loading">
+          <v-skeleton-loader
+            style="border-radius: 15px;height: 360px !important"
+            class="mx-auto"
+            type="image"
+          ></v-skeleton-loader>
+        </div> 
+        <iframe
+          v-show="!loading"
+          @load="load"
+          width="100%"
+          height="360"
+          :src="item.src"
+          title="DevFest India 2022 is here!"
+          frameborder="0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowfullscreen
+          style="border-radius: 15px; border: 0px solid black"
+        ></iframe>
+              </v-carousel-item>
+            </div>
+            </v-carousel>
         </v-col>
       </v-row>
     </v-container>
@@ -44,28 +47,35 @@
   export default {
     data: () => ({
       model: null,
+      loading: true,
       imgs: [
         {
-          name: "",
-          img:"",
+          src: "https://www.youtube.com/embed/K6W9Usve6hI"
         },
         {
-          name: "",
-          img:
-            "",
+          src: "https://www.youtube.com/embed/K6W9Usve6hI"
+
         },
         {
-          name: "",
-          img:
-            "",
+          src: "https://www.youtube.com/embed/K6W9Usve6hI"
+
         },
          {
-          name: "",
-          img:
-            "",
+          src: "https://www.youtube.com/embed/K6W9Usve6hI"
+
         },
       ],
     }),
+    methods: {
+    load() {
+      this.loading = false;
+    },
+  },
   };
   </script>
+  <style>
+  .v-carousel__controls {
+    display: none !important;
+  }
+</style>
 
diff --git a/src/components/home/hero.vue b/src/components/home/hero.vue
@@ -21,7 +21,7 @@
           allowfullscreen
           style="border-radius: 15px; border: 0px solid black"
         ></iframe> -->
-        <img src="../../assets/img/devfestindia23-banner.gif" alt="devfest banner image" class="banner-img"/>
+        <img src="../../assets/img/devfest-about-banner.png" alt="devfest banner image" class="banner-img"/>
       </v-col>
       <v-col md="6" cols="12" order-md="1" order="1" class="pr-12">
         <p
@@ -64,7 +64,7 @@ export default {
 
 <style>
 .banner-img {
-  height: 320px;
+  height: 350px;
 }
 @media only screen and (max-width: 768px) {
   .banner-img {

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
@@ -12,6 +12,8 @@
     <technologiesVue class="my-15"/>
     <!-- Technologies -->
 
+    <!-- <DevfestMoments /> -->
+
     <!-- social info -->
     <SocialInfo />
     <!-- social info -->
@@ -23,6 +25,7 @@ import heroVue from "@/components/home/hero.vue";
 import overviewVue from '@/components/home/overview.vue';
 import technologiesVue from '@/components/home/technologies.vue';
 import SocialInfo from '@/components/home/socialInfo.vue';
+// import DevfestMoments from '@/components/home/devfestMoments.vue';
 
 
 export default {