drone services removed, load more btn videos

adamsochorec · Feb 14, 2025 · 213b22a · 213b22a
1 parent c0329c1
commit 213b22a
Show file tree

Hide file tree

Showing 9 changed files with 75 additions and 44 deletions.
diff --git a/backend/dist/models/video.js b/backend/dist/models/video.js
@@ -42,7 +42,8 @@ const videoSchema = new mongoose_1.Schema({
     title: { type: String, required: true, maxlength: 200 },
     url: { type: String, required: true, maxlength: 100 },
     year: { type: String, required: true, maxlength: 4 },
-    desc: { type: String, maxlength: 100 },
+    desc: { type: String, required: false, maxlength: 100 },
+    opacity: { type: Number, required: false, maxlength: 3 },
 });
 exports.videoSchema = videoSchema;
 const video = mongoose_1.default.model("video", videoSchema);

diff --git a/backend/package-lock.json b/backend/package-lock.json
diff --git a/backend/src/models/video.ts b/backend/src/models/video.ts
@@ -17,7 +17,8 @@ const videoSchema = new Schema({
   title: { type: String, required: true, maxlength: 200 },
   url: { type: String, required: true, maxlength: 100 },
   year: { type: String, required: true, maxlength: 4 },
-  desc: { type: String, maxlength: 100 },
+  desc: { type: String, required: false, maxlength: 100 },
+  opacity: { type: Number, required: false, maxlength: 3 },
 });
 
 const video = mongoose.model<video>("video", videoSchema);

diff --git a/frontend/src/components/company-timeline.vue b/frontend/src/components/company-timeline.vue
@@ -9,11 +9,10 @@ const isDataLoaded = ref<boolean>(false);
 // SHOW MORE START
 const EVENTS_INCREMENT = 6;
 const eventsToShow = ref(EVENTS_INCREMENT);
-// SHOW MORE END
-
 const loadMoreEvents = () => {
   eventsToShow.value += EVENTS_INCREMENT;
 };
+// SHOW MORE END
 
 onMounted(async () => {
   await getAllEvents();

diff --git a/frontend/src/components/nav-bar.vue b/frontend/src/components/nav-bar.vue
@@ -101,7 +101,9 @@ function header() {
           />
         </router-link>
         <span class="page" v-if="pageTitle">
-          <router-link :to="titlePath" class="gradient">{{ pageTitle }}</router-link>
+          <router-link :to="titlePath" class="gradient">{{
+            pageTitle
+          }}</router-link>
         </span>
 
         <button
@@ -116,17 +118,26 @@ function header() {
         </button>
         <ul class="menu-left" role="menubar">
           <li role="none">
-            <span class="menuitem"
+            <span
+              class="menuitem"
               @click="toggleDropdown"
               role="menuitem"
               aria-haspopup="true"
               :aria-expanded="showDropdown"
               aria-controls="services-dropdown"
             >
               <span class="pi pi-sitemap"></span>Services&nbsp;&nbsp;
-              <span :class="{'pi pi-angle-down': true, rotated: showDropdown}" style="font-size: 10px"></span>
+              <span
+                :class="{ 'pi pi-angle-down': true, rotated: showDropdown }"
+                style="font-size: 10px"
+              ></span>
             </span>
-            <ul id="services-dropdown" class="dropdown" :class="{ show: showDropdown }" role="menu">
+            <ul
+              id="services-dropdown"
+              class="dropdown"
+              :class="{ show: showDropdown }"
+              role="menu"
+            >
               <li role="none">
                 <router-link to="/services/photo" role="menuitem">
                   <span class="pi pi-camera"></span>Photo
@@ -137,17 +148,12 @@ function header() {
                   <span class="pi pi-video"></span>Video
                 </router-link>
               </li>
-              <li role="none">
-                <router-link to="/services/drone" role="menuitem">
-                  <span class="pi pi-bolt"></span>Drone
-                </router-link>
-              </li>
               <li role="none">
                 <router-link to="/services/post-production" role="menuitem">
                   <span class="pi pi-image"></span>Post Production
                 </router-link>
               </li>
-            </ul>          
+            </ul>
           </li>
           <li role="none">
             <a
@@ -195,7 +201,7 @@ function header() {
   padding: 5px var(--grid-gap-1);
   margin-left: var(--grid-gap-1);
 }
-.menuitem{
+.menuitem {
   width: 100%;
 }
 .dropdown {
@@ -220,10 +226,11 @@ function header() {
 .rotated {
   transform: rotate(180deg);
 }
-.pi-angle-down, .rotated {
+.pi-angle-down,
+.rotated {
   transition: transform var(--transition-2);
 }
-.menu-left ul a{
+.menu-left ul a {
   padding: 10px;
   font-size: var(--font-size-7);
 }
@@ -247,18 +254,18 @@ header .container {
   padding: 0 var(--homepage-padding);
   max-width: 100%;
 }
-header a,  
+header a,
 span.menuitem {
   text-decoration: none;
   color: rgba(var(--white-color), 1);
 }
 header a :focus,
-header a:hover,  
-span.menuitem:focus,  
+header a:hover,
+span.menuitem:focus,
 span.menuitem:hover {
   color: rgba(var(--white-color), 1);
 }
-.menu-left a:not(.menu-left ul a),  
+.menu-left a:not(.menu-left ul a),
 span.menuitem {
   display: inline-block;
   position: relative;
@@ -268,14 +275,14 @@ span.menuitem {
   font-size: var(--font-size-6);
   padding: 17px var(--grid-gap-1);
 }
-.menu-left a:hover,  
+.menu-left a:hover,
 .menuitem:hover {
   background-color: rgba(var(--primary-color), 0.4);
 }
 .menu-left a,
-.menu-left a:hover,  
-.menuitem,  
-.menuitem:hover{
+.menu-left a:hover,
+.menuitem,
+.menuitem:hover {
   -webkit-transition: var(--transition-1);
   -o-transition: var(--transition-1);
   transition: var(--transition-1);
@@ -340,7 +347,7 @@ header {
   background-color: var(--dark-grey-color-full);
   will-change: transform;
   -webkit-transition: background var(--transition-2);
-  -o-transition:background var(--transition-2);
+  -o-transition: background var(--transition-2);
   transition: background var(--transition-2);
   -ms-transform: translateY(0);
   transform: translateY(0);
@@ -453,11 +460,11 @@ ul.menu-left.collapse {
     display: none !important;
   }
   .dropdown {
-  position: absolute;
-  -webkit-box-shadow: var(--box-shadow-1);
-          box-shadow: var(--box-shadow-1);
-  background-color: rgba(var(--dark-grey-color));
-  border-radius: 0 0 var(--border-radius-1) var(--border-radius-1);
+    position: absolute;
+    -webkit-box-shadow: var(--box-shadow-1);
+    box-shadow: var(--box-shadow-1);
+    background-color: rgba(var(--dark-grey-color));
+    border-radius: 0 0 var(--border-radius-1) var(--border-radius-1);
   }
 }
 @media only screen and (max-width: 850px) {
@@ -479,9 +486,9 @@ ul.menu-left.collapse {
   .dropdown a {
     margin-left: 20px;
   }
-.dropdown{
-  border-left: 2px solid rgba(var(--white-color), 0.3)
-}
+  .dropdown {
+    border-left: 2px solid rgba(var(--white-color), 0.3);
+  }
 }
 @media only screen and (min-width: 1020px) {
   header .container {
@@ -493,5 +500,4 @@ ul.menu-left.collapse {
     clear: both;
   }
 }
-
-</style>
+</style>
diff --git a/frontend/src/components/swiper-services.vue b/frontend/src/components/swiper-services.vue
@@ -38,7 +38,7 @@ onMounted(async () => {
           slidesPerView: 3.5,
         },
         1000: {
-          slidesPerView: 4,
+          slidesPerView: 3,
         },
       },
       direction: "horizontal",

diff --git a/frontend/src/views/Video.vue b/frontend/src/views/Video.vue
@@ -11,10 +11,20 @@ const { state: serviceState, getSpecificService } = services();
 const { state: videoState, getAllVideos } = video();
 const isDataLoaded = ref<boolean>(false);
 const router = useRouter();
+
+// SHOW MORE START
+const EVENTS_INCREMENT = 4;
+const eventsToShow = ref(EVENTS_INCREMENT);
+const loadMoreEvents = () => {
+  eventsToShow.value = videoState.videos;
+};
+// SHOW MORE END
+
 // REQUEST A PROPOSAL ID
 const showRequestAProposal = (identifier: string) => {
   eventBus.emit("showRequestAProposal", identifier);
 };
+
 onMounted(async () => {
   await Promise.all([getSpecificService("video"), getAllVideos()]);
   isDataLoaded.value = true;
@@ -80,7 +90,8 @@ router.beforeEach((to, from, next) => {
         <!-- VIDEO -->
         <div id="video-gallery" class="gallery" aria-label="Video Gallery">
           <galleryItem
-            v-for="video in videoState.videos"
+            :value="videoState.videos.slice(0, eventsToShow)"
+            v-for="video in videoState.videos.slice(0, eventsToShow)"
             :key="video._id"
             :flag="video.flag"
             :img="video._id"
@@ -92,6 +103,15 @@ router.beforeEach((to, from, next) => {
             :desc="`${video.desc} ⋅ ${video.year}`"
           />
         </div>
+        <div class="flex-center">
+          <button
+            v-if="eventsToShow < videoState.videos.length"
+            @click="loadMoreEvents"
+            class="cta reveal"
+          >
+            Show More
+          </button>
+        </div>
         <hr class="reveal" role="separator" />
 
         <!-- COLOUR GRADING START-->
@@ -173,6 +193,7 @@ h1 {
 #video-gallery .gallery-item {
   height: 9/16 !important;
 }
+
 @media only screen and (max-width: 375px) {
   .gallery-item {
     height: 120px;

diff --git a/frontend/src/views/article.vue b/frontend/src/views/article.vue
@@ -211,11 +211,13 @@ const copyHref = (href) => {
             <galleryItem
               v-for="video in state.article.videos"
               :key="video._id"
+              :flag="video.flag"
               :img="`${video._id}`"
               icon="video"
               :title="video.title"
+              :opacity="video.opacity"
               :url="`https://vimeo.com/${video.url}`"
-              :desc="`${video.year}`"
+              :desc="`${video.desc} ⋅ ${video.year}`"
               :alt="video.title"
             />
           </div>

diff --git a/frontend/src/views/post-production.vue b/frontend/src/views/post-production.vue
@@ -33,7 +33,7 @@ router.beforeEach((to, from, next) => {
 <template>
   <article class="main" style="margin-top: 120px">
     <section class="wrapper-wide">
-      <!-- PAGE INTRO -->
+      <!-- PAGE ABSTRACT START -->
       <div class="grid-container caption-container">
         <div class="grid-item">
           <h1 class="reveal" aria-label="Video Services">
@@ -68,6 +68,8 @@ router.beforeEach((to, from, next) => {
           </button>
         </div>
       </div>
+      <!-- PAGE ABSTRACT END -->
+
       <br />
       <swiperColourGrading></swiperColourGrading>
       <div id="video-edit"></div>