@designcrowd/library.brand-page 5.15.6 → 5.15.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.15.6",
+  "version": "5.15.7",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/brand-page/components/logo/Logo.vue

@@ -9,6 +9,7 @@
               ? {
                   margin: 'var(--logo-spacing) 0',
                   height: viewModel?.logoImageHeight || DEFAULT_LOGO_HEIGHT,
+                  maxWidth: logoMaxWidth,
                 }
               : {}),
           }
@@ -35,6 +36,7 @@
             :has-margin-bottom="hasMarginBottom"
             :alt-text="altText"
             :view-model="viewModel"
+            :viewport="viewport"
           />
         </LazyHydrationWrapper>
         <LogoRender
@@ -48,6 +50,7 @@
           :has-margin-bottom="hasMarginBottom"
           :alt-text="altText"
           :view-model="viewModel"
+          :viewport="viewport"
         />
       </router-link>
     </div>
@@ -68,6 +71,7 @@
           :is-brand-page-or-is-brand-contact="
             context.isBrandPageOrIsBrandContact
           "
+          :viewport="viewport"
         />
       </LazyHydrationWrapper>
       <LogoRender
@@ -79,6 +83,7 @@
         :has-margin-bottom="hasMarginBottom"
         :alt-text="altText"
         :view-model="viewModel"
+        :viewport="viewport"
       />
     </template>
   </div>
@@ -87,13 +92,17 @@
 import LogoRender from './LogoRender.vue';
 import { type PropType, computed } from 'vue';
 import type { LogoViewModel } from '../../view-models';
-import type { BrandPageContext } from '../../models';
+import type { BrandPageContext, ViewportsType } from '../../models';
 import {
   getRouteNameByPageIndex,
   getRouteParamsByPage,
 } from '../../utils/route.util';
 import { LazyHydrationWrapper } from 'vue3-lazy-hydration';
-import { DEFAULT_LOGO_HEIGHT } from '../../constants';
+import {
+  DEFAULT_LOGO_HEIGHT,
+  LOGO_SLIDER_DESKTOP_MAX,
+  LOGO_SLIDER_MOBILE_MAX,
+} from '../../constants';
 
 const props = defineProps({
   isPreview: {
@@ -118,12 +127,25 @@ const props = defineProps({
     type: Boolean,
     required: false,
   },
+  viewport: {
+    type: String as PropType<ViewportsType>,
+    required: false,
+    default: undefined,
+  },
 });
 
 const altText = computed(() =>
   props.context.pageTitle ? `${props.context.pageTitle}'s logo` : 'logo',
 );
 
+const logoMaxWidth = computed(() => {
+  if (props.viewport === 'mobile') {
+    return `${LOGO_SLIDER_MOBILE_MAX}rem`;
+  }
+
+  return `${LOGO_SLIDER_DESKTOP_MAX}rem`;
+});
+
 const routes = computed(
   () =>
     props.context.pages?.map((p, i) => {

package/src/brand-page/components/logo/LogoRender.vue

@@ -19,6 +19,7 @@
             ? {
                 margin: 'var(--logo-spacing) auto',
                 height: `${viewModel?.logoImageHeight || DEFAULT_LOGO_HEIGHT}`,
+                maxWidth: logoMaxWidth,
               }
             : {
                 height: '100%',
@@ -42,7 +43,13 @@
 import { computed, ref, watch, onServerPrefetch, onMounted } from 'vue';
 import type { LogoViewModel } from '../../view-models';
 import { LogoCacheRepository } from '../../repositories';
-import { DEFAULT_LOGO_HEIGHT, DEFAULT_LOGO_WIDTH } from '../../constants';
+import {
+  DEFAULT_LOGO_HEIGHT,
+  DEFAULT_LOGO_WIDTH,
+  LOGO_SLIDER_DESKTOP_MAX,
+  LOGO_SLIDER_MOBILE_MAX,
+} from '../../constants';
+import type { ViewportsType } from '../../models';
 
 const props = withDefaults(
   defineProps<{
@@ -53,6 +60,7 @@ const props = withDefaults(
     isBrandPageOrIsBrandContact: boolean;
     viewModel?: LogoViewModel;
     altText: string;
+    viewport?: ViewportsType;
   }>(),
   {
     isPreview: false,
@@ -99,6 +107,13 @@ const logoWidth = computed(() => {
   return props.viewModel?.logoImageWidth || DEFAULT_LOGO_WIDTH;
 });
 
+const logoMaxWidth = computed(() => {
+  if (props.viewport === 'mobile') {
+    return `${LOGO_SLIDER_MOBILE_MAX}rem`;
+  }
+  return `${LOGO_SLIDER_DESKTOP_MAX}rem`;
+});
+
 const logoStyle = computed(() => {
   return props.viewModel?.useOldLogoRenderSize
     ? {

package/src/brand-page/components/page/Page.vue

@@ -32,6 +32,7 @@
               <PageHeader
                 nav-id="nav-1"
                 :view-model="viewModel.headerViewModelDesktop"
+                :viewport="viewport"
                 :context="context"
                 :class="{
                   'tw-cursor-pointer': context.isPreview,
@@ -45,6 +46,7 @@
               <PageHeader
                 nav-id="nav-2"
                 :view-model="viewModel.headerViewModelMobile"
+                :viewport="viewport"
                 :context="context"
                 :class="{
                   'tw-cursor-pointer': context.isPreview,
@@ -189,6 +191,7 @@
             <template #desktop>
               <PageFooter
                 :view-model="viewModel.footerViewModelDesktop"
+                :viewport="viewport"
                 :context="context"
                 :class="{
                   'tw-cursor-pointer': context.isPreview,
@@ -203,6 +206,7 @@
             <template #mobile>
               <PageFooter
                 :view-model="viewModel.footerViewModelMobile"
+                :viewport="viewport"
                 :context="context"
                 :class="{
                   'tw-cursor-pointer': context.isPreview,

package/src/brand-page/components/page-footer/PageFooter.mixin.ts

@@ -1,7 +1,7 @@
 import { defineComponent } from 'vue';
 import type { PageFooterViewModel } from '../../view-models';
 import type { PropType } from 'vue';
-import type { BrandPageContext } from '../../models';
+import type { BrandPageContext, ViewportsType } from '../../models';
 import { getRenderText } from '../../utils';
 import { FOOTER_DISPLAY } from '../../constants';
 
@@ -19,6 +19,11 @@ export default defineComponent({
       type: Boolean,
       required: true,
     },
+    viewport: {
+      type: String as PropType<ViewportsType>,
+      required: false,
+      default: undefined,
+    },
   },
   emits: ['on-logo-click', 'footer-container-click'],
   computed: {

package/src/brand-page/components/page-footer/PageFooter.vue

@@ -21,6 +21,7 @@
         :has-margin-bottom="false"
         :view-model="viewModel.logo"
         :context="context"
+        :viewport="viewport"
       />
       <!-- end logo -->
 

package/src/brand-page/components/page-header/PageHeader.mixin.ts

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
-import type { BrandPageContext } from '../../models';
+import type { BrandPageContext, ViewportsType } from '../../models';
 import type { PageHeaderViewModel } from '../../view-models';
 import { LOGO_SLIDER_DESKTOP_MAX } from '../../constants';
 
@@ -18,6 +18,11 @@ export default defineComponent({
       type: Object as PropType<BrandPageContext>,
       required: true,
     },
+    viewport: {
+      type: String as PropType<ViewportsType>,
+      required: false,
+      default: undefined,
+    },
   },
   data: function () {
     return {

package/src/brand-page/components/page-header/PageHeader.vue

@@ -15,6 +15,7 @@
             :has-logo-auto-margin="false"
             :view-model="viewModel.logo"
             :context="context"
+            :viewport="viewport"
           />
         </template>
         <template #nav>