Merge pull request #2415

Fixes header navigation menu mobile bug; removes dependency on rem units
opensearch-project · Nov 28, 2023 · 4111c0d · 4111c0d
2 parents 22c7eef + 677fd87
commit 4111c0d
Show file tree

Hide file tree

Showing 15 changed files with 251 additions and 288 deletions.
diff --git a/_includes/header.html b/_includes/header.html
@@ -198,7 +198,15 @@
         const childUL = getSubMenu(button);
         const height = childUL?.scrollHeight;
         childUL?.style?.setProperty?.('--expanded-height', `${height}px`);
+        childUL?.classList?.add?.('nested-nav--menu__mobile-hidden-collapsed');
     }
+    function onNestedNavMenuTransitionEnd(e) {
+        const { target } = e;
+        if (!target?.hasAttribute?.('expanded')) {
+          target?.classList.add('nested-nav--menu__mobile-hidden-collapsed');
+        }
+    }
+
     function onToggleButtonClick(e) {
       const visibleClassName = 'opensearch-toggle-button-link__visible';
       const visibleSelector = `.${visibleClassName}`;
@@ -214,8 +222,14 @@
       invisibleLink.classList.add(visibleClassName);
 
       const childUL = getSubMenu(toggle);
-      childUL?.toggleAttribute?.('expanded');
+      const isAlreadyExpanded = childUL?.getAttribute?.('expanded') ?? false;
+      if (childUL.classList.contains('nested-nav--menu__mobile-hidden-collapsed')) {
+        childUL?.classList?.remove?.('nested-nav--menu__mobile-hidden-collapsed');
+      }
+      window.setTimeout(() => childUL?.toggleAttribute?.('expanded'), 60);
     }
+
+    document.querySelector('#top .nested-nav')?.addEventListener?.('transitionend', onNestedNavMenuTransitionEnd);
     const topNavigationToggleButtons = document.querySelectorAll('#top .opensearch-toggle-button--wrapper');
     for (let i = 0; i < topNavigationToggleButtons.length; ++i) {
       const button = topNavigationToggleButtons[i];

diff --git a/_layouts/homepage.html b/_layouts/homepage.html
@@ -39,7 +39,6 @@ <h2>Featured Blog Posts</h2>
             <div class="landing-page-solutions--hero-3up--hero">
                 {% assign first_post = site.posts[0] %}
                 {% assign first_post_featured_image = first_post.featured_image %}
-                {% assign first_post_author = site.authors | where: "github", first_post.authors[0] | first %}
                 {% if first_post.categories and first_post.categories.first %}
                     {% comment %} Usually posts have a categories property that is an array. {% endcomment %}
                     {% assign first_post_category = first_post.categories | first %}
@@ -70,11 +69,6 @@ <h2>Featured Blog Posts</h2>
                     {% assign new_category_chars = category_chars | slice: 0, new_category_length %}
                     {% assign first_post_category = new_category_chars | join: "" %}
                 {% endif %}
-                {% if first_post_author %}
-                    {% assign first_post_author_twitter = first_post_author.twitter | default: "OpenSearchProj" %}
-                {% else %}
-                    {% assign first_post_author_twitter = "OpenSearchProj" %}
-                {% endif %}
                 <div class="landing-page-solutions--hero-3up--hero--image">
                     <img src="/assets/img/blog-hero-placeholder.png" 
                         alt="Featured Image for {{ first_post.title }}">

diff --git a/_sass/_community_projects.scss b/_sass/_community_projects.scss
@@ -23,7 +23,7 @@
 
     .community_project {
         text-align: left;
-        margin: 0 -1.8rem;
+        margin: 0 -18px;
 
         // Card view on larger screens
         @include respond-min(860px) {
@@ -52,7 +52,7 @@
         }
 
         .project-info {
-            padding: 0 1.8rem;
+            padding: 0 18px;
             margin-bottom: auto;
         }
 
@@ -80,19 +80,19 @@
             }
         }
         .description {
-            font-size: 1.6rem; //reset to 16px;
+            font-size: 16px; //reset to 16px;
             margin-top: .5em;
             margin-bottom: .5em;
         }
 
         .extras-group {
-            font-size: 1.4rem;
-            padding: 0 1.8rem;
+            font-size: 14px;
+            padding: 0 18px;
 
             @include respond-min(860px) {
                 border-top: 1px solid $line;
                 margin-top: 1em;
-                padding: 1.8rem 1.8rem 0;
+                padding: 18px 18px 0;
                 display: flex;
                 justify-content: flex-start;
                 flex-direction: column;
@@ -115,19 +115,19 @@
 
                 // Adds a bit of margin between items
                 & + .extra {
-                    margin-top: .8rem;
+                    margin-top: 8px;
                 }
             }
 
             .download {
                 display: inline-block;
-                font-size: 1.6rem;
-                border-radius: .8rem;
+                font-size: 16px;
+                border-radius: 8px;
                 margin-top: 1em;
                 background-color: $core;
                 color: $highlight-lightest;
                 text-decoration: none;
-                padding: 1.2rem 2.4rem;
+                padding: 12px 24px;
                 transition: all .125s ease-out;
 
                 @include sans-serif;