Merge pull request #16 from os2ulf/feature/OS2UOL-134

OS2UOL-134: Changed HTML markup and div classes to optimize responsiv…
os2ulf · May 22, 2024 · ea34bf3 · ea34bf3
2 parents 354682e + 7fbd28e
commit ea34bf3
Showing 1 changed file with 59 additions and 91 deletions.
diff --git a/components/view-components/VideoComponent.vue b/components/view-components/VideoComponent.vue
@@ -36,73 +36,68 @@ const props = defineProps({
 
 <template>
   <div class="video-component">
-    <div class="container">
-      <div class="row">
-        <!-- layout type = flex -->
-        <div
-          class="video-component__layout-flex"
-          v-if="props.layoutType === 'flex' && data?.videoArr?.length == 1"
-        >
-          <div
-            class="col-xs-12 col-sm-12 col-md-6 video-component__layout-flex__remove-padding--left"
-          >
-            <VideoContent
-              class="video-component__layout-flex__video-content"
-              v-if="data.videoTitle || data.videoDescription"
-              :data="{
-                videoTitle: data.videoTitle,
-                videoDescription: data.videoDescription,
-              }"
-            />
-          </div>
-          <div
-            class="col-xs-12 col-sm-12 col-md-6 video-component__layout-flex__remove-padding--right"
-          >
-            <VideoPlayer v-if="data?.videoArr" :videoArr="data.videoArr" />
-          </div>
-        </div>
+    <div
+      class="row video-component__layout-flex"
+      v-if="props.layoutType === 'flex' && data?.videoArr?.length == 1"
+      >
+      <div
+        class="col-xs-12 col-sm-12 col-md-6"
+      >
+        <VideoContent
+          class="video-component__layout-flex__video-content"
+          v-if="data.videoTitle || data.videoDescription"
+          :data="{
+            videoTitle: data.videoTitle,
+            videoDescription: data.videoDescription,
+          }"
+        />
+      </div>
+      <div
+        class="col-xs-12 col-sm-12 col-md-6"
+      >
+        <VideoPlayer v-if="data?.videoArr" :videoArr="data.videoArr" />
+      </div>
+    </div>
 
-        <!-- layout type = carousel -->
-        <div
-          v-else-if="
-            props.layoutType === 'carousel' && data?.videoArr?.length > 1
-          "
-          class="video-component__layout-carousel"
-        >
-          <div
-            class="col-xs-12 col-sm-12 col-md-8 video-component__layout-carousel__remove-padding"
-          >
-            <VideoContent
-              v-if="data.videoTitle || data.videoDescription"
-              :data="{
-                videoTitle: data.videoTitle,
-                videoDescription: data.videoDescription,
-              }"
-            />
-          </div>
+    <!-- layout type = carousel -->
+    <div
+      v-else-if="
+        props.layoutType === 'carousel' && data?.videoArr?.length > 1
+      "
+      class="row video-component__layout-carousel"
+    >
+      <div
+        class="col-xs-12 col-sm-12 col-md-8"
+      >
+        <VideoContent
+          v-if="data.videoTitle || data.videoDescription"
+          :data="{
+            videoTitle: data.videoTitle,
+            videoDescription: data.videoDescription,
+          }"
+        />
+      </div>
 
-          <div
-            class="col-xs-12 col-sm-12 col-md-12 video-component__layout-carousel__remove-padding"
+      <div
+        class="col-xs-12 col-sm-12 col-md-12"
+      >
+        <Swiper
+          :modules="modules"
+          :slides-per-view="1"
+          :space-between="30"
+          :breakpoints="breakpoints"
+          navigation
+          :scrollbar="{ draggable: true }"
+          class="video-component__layout-carousel__swiper"
+        >
+          <SwiperSlide
+            v-for="item in data.videoArr"
+            :key="item.id"
+            class="video-component__layout-carousel__slide"
           >
-            <Swiper
-              :modules="modules"
-              :slides-per-view="1"
-              :space-between="30"
-              :breakpoints="breakpoints"
-              navigation
-              :scrollbar="{ draggable: true }"
-              class="video-component__layout-carousel__swiper"
-            >
-              <SwiperSlide
-                v-for="item in data.videoArr"
-                :key="item.id"
-                class="video-component__layout-carousel__slide"
-              >
-                <VideoPlayer :videoArr="item" />
-              </SwiperSlide>
-            </Swiper>
-          </div>
-        </div>
+            <VideoPlayer :videoArr="item" />
+          </SwiperSlide>
+        </Swiper>
       </div>
     </div>
   </div>
@@ -111,42 +106,15 @@ const props = defineProps({
 <style lang="postcss" scoped>
 .video-component {
   &__layout-flex {
-    display: grid @(--md) flex;
-
-    &__remove-padding {
-      &--left {
-        padding-left: 0;
-
-        @media (--viewport-md-max) {
-          padding: 0;
-        }
-      }
-
-      &--right {
-        padding-right: 0;
-
-        @media (--viewport-md-max) {
-          padding: 0;
-        }
-      }
-    }
-
     &__video-content {
       padding-top: 0 @(--sm) 36px;
-      padding-right: 0 @(--sm) 20px @(--md) 20px @(--lg) 0;
     }
   }
 
   &__layout-carousel {
-    display: contents;
-
     &__title {
       line-height: 48px;
     }
-
-    &__remove-padding {
-      padding: 0;
-    }
   }
 }
 </style>