@asd20/ui 3.2.455 → 3.2.457

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.455",
+  "version": "3.2.457",
   "private": false,
   "license": "MIT",
   "repository": {

package/src/components/organisms/Asd20ActionMenu/index.vue

@@ -4,7 +4,7 @@
       v-for="(item, index) in items"
       :key="index"
       v-bind="item"
-      size="lg"
+      :size="zoomed ? 'md' : 'lg'"
     />
     <slot />
   </div>
@@ -20,6 +20,7 @@ export default {
   props: {
     open: { type: Boolean, default: false },
     items: { type: Array, default: () => actionItems },
+    zoomed: { type: Boolean, default: false },
   },
 
   computed: {

package/src/components/organisms/Asd20Navbar/index.vue

@@ -3,7 +3,7 @@
     <asd20-action-menu-item
       ref="menuButton"
       id="menu-toggle-button"
-      :size="size"
+      :size="desktop && !zoomed ? 'lg' : 'md'"
       class="menu-button"
       :icon="menuActive ? 'close' : 'menu'"
       :label="menuActive ? 'Close' : 'Menu'"
@@ -17,7 +17,7 @@
     <asd20-action-menu-item
       ref="searchButton"
       id="search-toggle-button"
-      :size="size"
+      :size="desktop && !zoomed ? 'lg' : 'md'"
       class="search-button"
       :icon="searchActive ? 'close' : 'search'"
       :label="searchActive ? 'Close' : 'Search'"
@@ -42,6 +42,8 @@ export default {
     searchActive: { type: Boolean, default: false },
     collapsed: { type: Boolean, default: false },
     condensed: { type: Boolean, default: false },
+    desktop: { type: Boolean, default: false },
+    zoomed: { type: Boolean, default: false },
   },
   computed: {
     size() {

package/src/components/organisms/Asd20SiteNavigation/index.vue

@@ -10,6 +10,8 @@
       :search-active="searchOpen"
       @update:searchActive="$emit('update:searchOpen', $event)"
       :collapsed="collapsed"
+      :zoomed="zoomed"
+      :desktop="desktop"
       @keyboardTriggeredLastAction="keyboardTriggeredLastAction = $event"
     >
       <!-- <asd20-district-logo
@@ -49,6 +51,7 @@
         "
         :items="actionItems"
         :active="menuOpen"
+        :zoomed="zoomed"
         @update:active="$emit('update:menuOpen', $event)"
       />
     </transition>
@@ -140,7 +143,8 @@ export default {
   },
   mounted() {
     this.desktop = window.innerWidth >= 1024
-    this.zoomed = window.innerHeight <= 500
+    this.zoomed = window.innerHeight <= 650
+
     this.isLoaded = true
     window.addEventListener('resize', this.handleResize)
   },
@@ -150,7 +154,7 @@ export default {
     },
     handleResize() {
       this.desktop = window.innerWidth >= 1024
-      this.zoomed = window.innerHeight <= 500
+      this.zoomed = window.innerHeight <= 650
     },
   },
 }

package/src/design/_typography.scss

@@ -124,12 +124,12 @@
     display: table;
     clear: both;
   }
-  // If more than 24 items are in the list,
+  // If more than 30 items are in the list,
   // split into up to 12 columns
   // with a minimum width of 240px
   // and ensure at least a 1rem space between columns
-  .asd20-messaging li:first-child:nth-last-child(n+24),
-  .asd20-messaging li:first-child:nth-last-child(n+24) ~ li {
+  .asd20-messaging li:first-child:nth-last-child(n+30),
+  .asd20-messaging li:first-child:nth-last-child(n+30) ~ li {
     width: clamp(160px, 100vw/12, 100%);
     padding-right: 1rem;
     float:left;