Use dropdown on MPPWCC, MPPWSA, Top Women

parameter1 · Jul 2, 2024 · 8245905 · 8245905
1 parent 176e765
commit 8245905
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 43 deletions.
diff --git a/sites/diverseeducation.com/server/templates/static-pages/mppwcc-yearly.marko b/sites/diverseeducation.com/server/templates/static-pages/mppwcc-yearly.marko
@@ -50,18 +50,20 @@ $ const mpprecommendationsSrc = currentYearData ? currentYearData.mpprecommendat
         </div><br/>
         <div class="row" align="center">
           <div class="col">
-            <div>
-              <h4 style="bold">
-                Other Years
-              </h4>
-              <for|year| of=Object.keys(config).reverse()>
-                <if(year !== currentYear)>
-                  <a href=`/awards-honors/mppwcc/${year}`>
-                    ${year}
-                  </a>&nbsp;
-                </if>
-              </for>
-            </div>
+            <theme-menu-toggle-button
+              class="site-navbar__toggler btn btn--other-years-dropdown"
+              targets=[".site-navbar__items--other-years-dropdown"]
+              toggle-class="site-navbar__items--other-years-dropdown-open"
+              icon-modifiers=["sm"]
+              after="Other Years"
+              icon-name="plus"
+              expanded-icon-name="dash"
+            />
+            $ const otherYearsItems = Object.keys(config).reverse().map((year) => ({ href: `/awards-honors/mppwcc/${year}`, label: year }));
+            <theme-site-navbar-items
+              items=otherYearsItems
+              modifiers=["other-years-dropdown"]
+            />
           </div>
         </div>
       </@section>

diff --git a/sites/diverseeducation.com/server/templates/static-pages/mppwsa-yearly.marko b/sites/diverseeducation.com/server/templates/static-pages/mppwsa-yearly.marko
@@ -80,21 +80,23 @@ $ const nationalPerspective = currentYearData ? currentYearData.nationalPerspect
           </div>
           <div class="row" align="center">
             <div class="col">
-              <div>
-                <h4 style="bold">
-                  Other Years
-                </h4>
-                <for|year| of=Object.keys(config).reverse()>
-                  <if(year !== currentYear)>
-                    <a href=`/awards-honors/mppwsa/${year}`>
-                      ${year}
-                    </a>&nbsp;
-                  </if>
-                </for>
-              </div>
+              <theme-menu-toggle-button
+                class="site-navbar__toggler btn btn--other-years-dropdown"
+                targets=[".site-navbar__items--other-years-dropdown"]
+                toggle-class="site-navbar__items--other-years-dropdown-open"
+                icon-modifiers=["sm"]
+                after="Other Years"
+                icon-name="plus"
+                expanded-icon-name="dash"
+              />
+              $ const otherYearsItems = Object.keys(config).reverse().map((year) => ({ href: `/awards-honors/mppwcc/${year}`, label: year }));
+              <theme-site-navbar-items
+                items=otherYearsItems
+                modifiers=["other-years-dropdown"]
+              />
             </div>
           </div>
-        </@section>
+          </@section>
         <@section modifiers=["card-deck"]>
         $ const tableOneLabels = Object.values(getAsObject(currentYearData, "tableLabels.tableOne"));
         <if(currentYearData && tableOneLabels.length)>
@@ -132,12 +134,12 @@ $ const nationalPerspective = currentYearData ? currentYearData.nationalPerspect
             <thead>
               <tr>
                 <h3 style='color:#2A96B4;'> HONORABLE MENTION </h3>
-                <td width="400"><b>Institution</b></td> 
+                <td width="400"><b>Institution</b></td>
                 <for|label| of=tableHMLabels>
                   <td width="200">
                     <b>${label}</b>
                   </td>
-                </for> 
+                </for>
               </tr>
             </thead>
             <if(hminstitutions.length)>

diff --git a/...diverseeducation.com/server/templates/website-section/awards-honors/top-women/index.marko b/...diverseeducation.com/server/templates/website-section/awards-honors/top-women/index.marko
@@ -54,13 +54,6 @@ $ const queryParams = {
         </if>
       </div>
     </div><br/>
-    <div class="row" align="center">
-      <div class="col">
-        <h4 style="bold">
-          Other Years
-        </h4>
-      </div>
-    </div>
     <div class="row" align="center">
       <div class="col">
         <marko-web-query|{ node }|
@@ -69,15 +62,20 @@ $ const queryParams = {
         >
         $ const year = 2024; //current/active year
         $ const children = getAsArray(node, "children.edges").map(({ node }) => node).filter(({ name })=> parseInt(name) <= year);
-          <marko-web-node-list>
-            <@nodes|{ nodes }| nodes=children modifiers=["flush-x"]>
-              <div align="center">
-                <for|node| of=nodes>
-                  <marko-web-link title=node.name href=`/${node.alias}`>${node.name}</marko-web-link>&nbsp
-                </for>
-              </div>
-            </@nodes>
-          </marko-web-node-list>
+        <theme-menu-toggle-button
+          class="site-navbar__toggler btn btn--other-years-dropdown"
+          targets=[".site-navbar__items--other-years-dropdown"]
+          toggle-class="site-navbar__items--other-years-dropdown-open"
+          icon-modifiers=["sm"]
+          after="Other Years"
+          icon-name="plus"
+          expanded-icon-name="dash"
+        />
+        $ const otherYearsItems = children.map((childNode) => ({ href: `/${childNode.alias}`, label: childNode.name }));
+        <theme-site-navbar-items
+          items=otherYearsItems
+          modifiers=["other-years-dropdown"]
+        />
         </marko-web-query>
       </div>
     </div>