Merge pull request #26 from os2ulf/feature/OS2UOL-107

Feature/os2 uol 107

components/globals/navigation/HeaderItem.vue

@@ -55,6 +55,7 @@ const config = useRuntimeConfig().public;
     cursor: pointer;
     border: 2px solid transparent;
     transition: all 0.2s;
+    height: 100%;
 
     &:hover {
       border: 2px solid var(--color-primary-lighten-4);

components/globals/navigation/TheHeader.vue

@@ -216,7 +216,6 @@ onBeforeUnmount(() => {
   width: 100%;
   height: var(--navigation-bar-height);
   background: var(--color-primary-lighten-3);
-  border-bottom: 1px solid var(--color-gray-11);
   transition: transform 0.3s ease-in-out;
 
   &--fixed {

components/globals/navigation/TheMetaMenu.vue

@@ -77,7 +77,7 @@ const closeOffCanvas = () => {
                   class="meta-menu__item--arrow"
                   filled
                   name="chevron-down"
-                  v-if="metaItem.below.length > 0"
+                  v-if="metaItem.below.length > 0 && !metaItem.url"
                   :class="{
                     'meta-menu__item--rotate-arrow': activeNavItem === metaItem,
                   }"

components/page-header/PageHeader.vue

@@ -0,0 +1,207 @@
+<script setup lang="ts">
+import { Navigation, Scrollbar, A11y } from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/vue';
+
+const modules = [Navigation, Scrollbar, A11y];
+const breakpoints = {
+  768: {
+    slidesPerView: 2,
+  },
+  992: {
+    slidesPerView: 2,
+  },
+  1200: {
+    slidesPerView: 3,
+  },
+};
+
+const props = defineProps({
+  pageBlockHeaderData: {
+    type: Object,
+    required: false,
+  },
+});
+</script>
+
+<template>
+  <div v-if="props.pageBlockHeaderData" class="page-header__container">
+    <div class="page-header">
+      <div class="container">
+        <div class="row">
+          <div class="col-xs-12 col-sm-12 col-md-8 col-xl-7">
+            <div class="page-header__content-wrapper">
+              <h1>
+                {{ props.pageBlockHeaderData?.field_title }}
+              </h1>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="page-header__image-wrapper">
+        <div class="page-header__image-container">
+          <img
+            class="page-header__image"
+            :src="pageBlockHeaderData?.field_background_image?.src"
+          />
+          <!-- TODO: When images transformed use the one below -->
+          <!-- <BaseImage
+            class="page-header__image"
+            v-if="pageBlockHeaderData?.field_background !== null"
+            :image="pageBlockHeaderData?.field_background"
+            :component-type-class="pageBlockHeaderData?.bundle"
+            /> -->
+        </div>
+      </div>
+      <div class="page-header__card-container">
+        <div class="container">
+          <div class="row">
+
+            <div class="col-xs-12 col-sm-12 col-md-10 col-md-offset-2 col-lg-10 col-lg-offset-2">
+              <!-- carousel -->
+              <Swiper
+                :modules="modules"
+                :slides-per-view="1"
+                :space-between="30"
+                :breakpoints="breakpoints"
+                navigation
+                :scrollbar="{ draggable: true }"
+                class="page-header__swiper"
+              >
+                <SwiperSlide
+                  v-for="item in props.pageBlockHeaderData
+                    ?.field_paragraph_cards"
+                  :key="item"
+                  class="page-header__slide"
+                >
+                  <div class="page-header__item-content">
+                    <PageHeaderCard :card-item="item" />
+                  </div>
+                </SwiperSlide>
+              </Swiper>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.page-header {
+  position: relative;
+  padding-top: 36px @(--md) 64px;
+  padding-bottom: 0 @(--sm) 116px;
+
+  &__container {
+    background-color: var(--color-primary);
+  }
+
+  &__content-wrapper {
+    color: var(--color-white);
+
+    h1 {
+      font-size: 38px @(--md) 48px @(--lg) 58px;
+      line-height: 1.1;
+      margin-bottom: 24px @(--sm) 36px;
+    }
+  }
+
+  &__image-wrapper {
+    position: relative;
+    width: 100%;
+    height: 250px @(--sm) 560px;
+    margin-bottom: 24px @(--sm) 0;
+  }
+
+  &__image-container {
+    position: absolute;
+    top: 0;
+    right: 0 @(--sm) 16.66667% @(--xl) calc(50% - (1632px / 12 * 4));
+    bottom: 0;
+    left: 0;
+    overflow: hidden;
+  }
+
+  &__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  &__card-container {
+    position: relative @(--sm) absolute;
+    bottom: auto @(--sm) 0;
+    left: auto @(--sm) 0;
+    width: 100%;
+  }
+
+  &__item-content {
+    height: 100%;
+  }
+
+  &__swiper {
+    padding: 0 0 40px @(--sm) 0 0 140px;
+  }
+
+  /* Filthy Swiper styling for this component */
+  :deep(.swiper-wrapper) {
+    @media (--viewport-ms-max) {
+      flex-flow: column;
+      transform: translate3d(0, 0, 0) !important;
+    }
+  }
+
+  :deep(.swiper-slide) {
+    @media (--viewport-ms-max) {
+      margin-right: 0;
+      margin-bottom: 24px;
+    }
+  }
+
+  :deep(.swiper-scrollbar-drag) {
+    background: var(--color-white);
+  }
+
+  :deep(.swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal) {
+    background-color: rgba(255, 255, 255, 0.4);
+  }
+
+  :deep(.swiper-button-next:after) {
+    color: var(--color-white);
+  }
+
+  :deep(.swiper-button-prev:after) {
+    color: var(--color-white);
+  }
+
+  :deep(.swiper-horizontal > .swiper-scrollbar) {
+    position: absolute;
+    bottom: 82px;
+    left: 0;
+    width: calc(100% - 120px);
+    height: 4px;
+    margin-bottom: 0;
+
+    @media (--viewport-ms-max) {
+      display: none;
+    }
+  }
+
+  :deep(.swiper-button-next),
+  :deep(.swiper-button-prev) {
+    top: auto;
+    bottom: 64px;
+    margin-bottom: 0;
+    border-width: 2px;
+
+    @media (--viewport-ms-max) {
+      display: none;
+    }
+  }
+
+  :deep(.swiper-button-prev) {
+    right: 56px;
+  }
+}
+</style>

components/page-header/PageHeaderCard.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+const props = defineProps({
+  cardItem: {
+    type: Object,
+    required: false,
+  },
+});
+
+const cardItem = ref(props.cardItem);
+</script>
+
+<template>
+  <div class="page-header-card">
+    <div class="page-header-card__item">
+      <h4 class="page-header-card__title">{{ cardItem?.field_title }}</h4>
+      <div class="page-header-card__description">
+        {{ cardItem?.field_description }}
+      </div>
+      <div class="page-header-card__link" v-if="cardItem?.field_link.url">
+        <NuxtLink :to="cardItem?.field_link.url">
+          <NuxtIcon
+            class="page-header-card__link--icon"
+            name="arrow-right"
+            filled
+          />
+        </NuxtLink>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.page-header-card {
+  color: var(--color-tertiary);
+  border: 2px solid var(--color-primary-lighten-4);
+  border-radius: 5px;
+  height: 100%;
+
+  &__item {
+    background-color: var(--color-white);
+    padding: 32px;
+    height: 100%;
+
+    @media (--viewport-ms-max) {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  &__title {
+    line-height: 28px;
+
+    @media (--viewport-ms-max) {
+      flex-grow: 1;
+      margin-bottom: 0;
+    }
+  }
+
+  &__description {
+    font-weight: 400;
+    line-height: 24px;
+
+    @media (--viewport-ms-max) {
+      display: none;
+    }
+  }
+
+  &__link {
+    padding-top: 22px;
+
+    @media (--viewport-ms-max) {
+      padding-top: 0;
+    }
+
+    &--icon {
+      :deep(svg) {
+        background-color: var(--color-secondary);
+        border-radius: 50%;
+        padding: 8px;
+        height: 40px;
+        width: 40px;
+
+        path {
+          stroke: var(--color-secondary-text);
+        }
+      }
+    }
+  }
+}
+</style>