Merge pull request #217 from nypublicradio/kareem/fe-118

Updates to include Naming Contest. Modifications made to the following files: 1. assets/scss/_variables.scss 2. assets/scss/global.scss 3. components/ListenersCta.vue 4. components/RadiolabHeader.vue 5. utilities/menuItems.js
nypublicradio · Jun 6, 2024 · 58947f0 · 58947f0
2 parents 8fa21cb + 75bb96c
commit 58947f0
Show file tree

Hide file tree

Showing 5 changed files with 167 additions and 29 deletions.
diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss
@@ -6,6 +6,7 @@ $leaderboardHeight: 90px;
 $leaderboardHeightMobile: 50px;
 $playerHeight: 100px;
 $toolsBreakPoint: 472px;
+$menuBreakpoint: 1180px;
 
 $head-color-height: 280px;
 $head-color-height-lg: 130px;

diff --git a/assets/scss/global.scss b/assets/scss/global.scss
@@ -127,8 +127,12 @@ section {
     }
     &:after {
       content: '';
-      transition: height calc(var(--transition-duration) * 2), top calc(var(--transition-duration) * 2);
-      -webkit-transition: height calc(var(--transition-duration) * 2), top calc(var(--transition-duration) * 2);
+      transition:
+        height calc(var(--transition-duration) * 2),
+        top calc(var(--transition-duration) * 2);
+      -webkit-transition:
+        height calc(var(--transition-duration) * 2),
+        top calc(var(--transition-duration) * 2);
 
       //default alpha gradient
       background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 68%, rgba(255, 255, 255, 0.46) 100%);
@@ -363,3 +367,104 @@ section {
 }
 
 @import 'cards';
+
+// had to bring this entire file in because of the menu breakpoint
+@media screen and (max-width: $menuBreakpoint) {
+  .p-menubar {
+    position: relative;
+
+    .p-menubar-button {
+      display: flex;
+      width: $actionIconWidth;
+      height: $actionIconHeight;
+      color: $horizontalMenuRootMenuitemIconColor;
+      border-radius: $actionIconBorderRadius;
+      transition: $actionIconTransition;
+
+      &:hover {
+        color: $horizontalMenuRootMenuitemIconHoverColor;
+        background: $horizontalMenuRootMenuitemHoverBg;
+      }
+
+      &:focus {
+        @include focused();
+      }
+    }
+
+    .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: $verticalMenuPadding;
+      background: $overlayMenuBg;
+      border: $overlayMenuBorder;
+      box-shadow: $overlayMenuShadow;
+      width: 100%;
+
+      .p-menu-separator {
+        border-top: $divider;
+        margin: $menuSeparatorMargin;
+      }
+
+      .p-submenu-icon {
+        font-size: $menuitemSubmenuIconFontSize;
+      }
+
+      > .p-menuitem {
+        width: 100%;
+        position: static;
+
+        > .p-menuitem-link {
+          @include menuitem-link();
+
+          > .p-submenu-icon {
+            margin-left: auto;
+            transition: transform $transitionDuration;
+          }
+        }
+
+        &.p-menuitem-active {
+          > .p-menuitem-link {
+            > .p-submenu-icon {
+              transform: rotate(-180deg);
+            }
+          }
+        }
+      }
+
+      .p-submenu-list {
+        width: 100%;
+        position: static;
+        box-shadow: none;
+        border: 0 none;
+
+        .p-submenu-icon {
+          transition: transform $transitionDuration;
+          transform: rotate(90deg);
+        }
+
+        .p-menuitem-active {
+          > .p-menuitem-link {
+            > .p-submenu-icon {
+              transform: rotate(-90deg);
+            }
+          }
+        }
+      }
+
+      .p-menuitem {
+        width: 100%;
+        position: static;
+      }
+
+      @include nested-submenu-indents(nth($menuitemPadding, 1), 2, 10);
+    }
+
+    &.p-menubar-mobile-active .p-menubar-root-list {
+      display: flex;
+      flex-direction: column;
+      top: 100%;
+      left: 0;
+      z-index: 1;
+    }
+  }
+}
diff --git a/components/ListenersCta.vue b/components/ListenersCta.vue
@@ -1,12 +1,16 @@
 <script setup>
-import VFlexibleLink from '@nypublicradio/nypr-design-system-vue3/v2/src/components/VFlexibleLink.vue'
-import ArrowRight from '~/components/icons/ArrowRight.vue'
+import VFlexibleLink from "@nypublicradio/nypr-design-system-vue3/v2/src/components/VFlexibleLink.vue"
+import ArrowRight from "~/components/icons/ArrowRight.vue"
 </script>
 
 <template>
   <div class="listeners-cta p-5">
     <h2>Listeners</h2>
     <div class="text-right">
+      <v-flexible-link to="https://woobox.com/wc2qxd/">
+        Naming Contest
+        <arrow-right />
+      </v-flexible-link>
       <v-flexible-link to="/radiolab-read-credit">
         Read The Credits
         <arrow-right />
@@ -23,7 +27,6 @@ import ArrowRight from '~/components/icons/ArrowRight.vue'
 .listeners-cta {
   position: relative;
   background: var(--gold-500);
-  min-height: 433px;
   border-radius: 20px;
   height: 100%;
   display: flex;
@@ -38,7 +41,7 @@ import ArrowRight from '~/components/icons/ArrowRight.vue'
       var(--pink-500) 100%
     );
     border-radius: 0 0 70% 70%;
-    content: '';
+    content: "";
     height: 740px;
     position: absolute;
     top: -580px;
@@ -47,6 +50,9 @@ import ArrowRight from '~/components/icons/ArrowRight.vue'
     right: 0;
     margin: auto;
   }
+  .text-right {
+    padding-top: 130px;
+  }
 }
 .listeners-cta h2,
 .listeners-cta .flexible-link {

diff --git a/components/RadiolabHeader.vue b/components/RadiolabHeader.vue
@@ -1,8 +1,8 @@
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted } from "vue"
 //import { useMenuItems } from '../composables/states'
-import menuItemsImport from '../utilities/menuItems'
-import VFlexibleLink from '@nypublicradio/nypr-design-system-vue3/v2/src/components/VFlexibleLink.vue'
+import menuItemsImport from "../utilities/menuItems"
+import VFlexibleLink from "@nypublicradio/nypr-design-system-vue3/v2/src/components/VFlexibleLink.vue"
 //import breakpoint from '@nypublicradio/nypr-design-system-vue3/src/assets/library/breakpoints.module.scss'
 // const { $analytics } = useNuxtApp()
 //const menuItems = useMenuItems()
@@ -16,20 +16,20 @@ let hamburger = null
 const onResize = () => {
   if (
     window.innerWidth >= 960 &&
-    pMenuRef.value?.$el.classList?.contains('p-menubar-mobile-active')
+    pMenuRef.value?.$el.classList?.contains("p-menubar-mobile-active")
   ) {
     hamburger.click()
   }
 }
 
 onMounted(async () => {
-  window.addEventListener('resize', onResize)
+  window.addEventListener("resize", onResize)
   isMenuVisible.value = true
   await nextTick()
-  hamburger = pMenuRef.value.$el.getElementsByClassName('p-menubar-button')[0]
+  hamburger = pMenuRef.value.$el.getElementsByClassName("p-menubar-button")[0]
 })
 onUnmounted(() => {
-  window.removeEventListener('resize', onResize)
+  window.removeEventListener("resize", onResize)
 })
 </script>
 
@@ -38,7 +38,7 @@ onUnmounted(() => {
     <section>
       <div
         v-if="isMenuVisible"
-        class="content flex lg:block align-items-center justify-content-between lg:px-2 pr-3"
+        class="content align-items-center justify-content-between lg:px-2 pr-3"
       >
         <Menubar :model="menuItems" ref="pMenuRef">
           <template #start>
@@ -51,9 +51,14 @@ onUnmounted(() => {
             </nuxt-link>
           </template>
         </Menubar>
-        <v-flexible-link raw to="/the-lab" aria-label="Become a member">
+        <v-flexible-link
+          raw
+          to="/the-lab"
+          aria-label="Become a member"
+          class="mobile-bm-button"
+        >
           <Button
-            class="flex lg:hidden p-button-rounded"
+            class="flex p-button-rounded"
             @click="
               $analytics.sendEvent('click_tracking', {
                 event_category: 'Click Tracking',
@@ -123,11 +128,11 @@ onUnmounted(() => {
 }
 
 .site-header {
-  @include media('>=md') {
+  @include media(">=md") {
     position: sticky;
     top: 0px;
   }
-  @include media('<md') {
+  @include media("<md") {
     position: sticky;
     top: 50px;
   }
@@ -143,6 +148,15 @@ onUnmounted(() => {
     .content {
       width: 100%;
       padding: 0;
+      display: flex;
+      @media (min-width: $menuBreakpoint) {
+        display: block !important;
+      }
+      .mobile-bm-button {
+        @media (min-width: $menuBreakpoint) {
+          display: none;
+        }
+      }
     }
 
     .p-menubar:not(.p-menubar-mobile-active) {
@@ -152,7 +166,7 @@ onUnmounted(() => {
       border: none;
       padding: 1rem 0.5rem;
 
-      @include media('<xl') {
+      @include media("<xl") {
         padding: 1rem 0.5rem 1rem 0.5rem;
       }
 
@@ -168,7 +182,7 @@ onUnmounted(() => {
         display: flex;
       }
 
-      @include media('>lg') {
+      @media (min-width: $menuBreakpoint) {
         justify-content: space-between;
       }
 
@@ -190,11 +204,11 @@ onUnmounted(() => {
 
         &.gap {
           @media (min-width: 1440px) {
-            margin-left: 290px !important;
+            margin-left: 160px !important;
           }
 
-          @include media('>lg') {
-            margin-left: calc(50vw - 430px);
+          @include media(">lg") {
+            margin-left: calc(50vw - 530px);
           }
         }
 
@@ -221,7 +235,7 @@ onUnmounted(() => {
           }
 
           &:after {
-            content: '';
+            content: "";
             height: 1px;
             background: var(--black100);
             position: absolute;
@@ -259,8 +273,7 @@ onUnmounted(() => {
           top: 0;
           opacity: 0;
           pointer-events: none;
-          transition: top var(--transition-duration),
-            opacity var(--transition-duration);
+          transition: top var(--transition-duration), opacity var(--transition-duration);
           -webkit-transition: top var(--transition-duration),
             opacity var(--transition-duration);
           display: flex;
@@ -272,7 +285,7 @@ onUnmounted(() => {
             -webkit-transition: background-color var(--transition-duration),
               border-color var(--transition-duration);
             background-color: var(--white);
-            content: '';
+            content: "";
             left: -100vw;
             top: 1px;
             position: absolute;
@@ -342,7 +355,7 @@ onUnmounted(() => {
 
         .pi-bars {
           &:before {
-            content: '\e90b';
+            content: "\e90b";
           }
         }
 

diff --git a/utilities/menuItems.js b/utilities/menuItems.js
@@ -161,6 +161,19 @@ export default [{
         }
     ]
 },
+{
+    label: 'Naming Contest',
+    url: 'https://woobox.com/wc2qxd/',
+    class: 'alone',
+    command: () => {
+        const { $analytics } = useNuxtApp()
+        $analytics.sendEvent('click_tracking', {
+            event_category: 'Click Tracking',
+            component: 'Navigation',
+            event_label: 'Naming Contest',
+        })
+    }
+},
 {
     label: 'How to listen',
     to: '/how-to-listen',
@@ -278,4 +291,4 @@ export default [{
         })
     }
 },
-]
+]