Skip to content

Commit

Permalink
Merge pull request #349 from Shinsina/dropdowns
Browse files Browse the repository at this point in the history 
Dropdown on MPPWCC, MPPWSA, Top Women for Other Years portion of page
  • Loading branch information
@brandonbk
brandonbk authored Jul 8, 2024
2 parents 056f1c2 + 8245905 commit f35c3a1
Show file tree
Hide file tree
Showing 4 changed files with 99 additions and 43 deletions.
54 changes: 54 additions & 0 deletions sites/diverseeducation.com/server/styles/components/awards.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,60 @@
}
}

.site-navbar__items--other-years-dropdown {
top: 35px;
display: none;
flex-direction: column;
z-index: 160000;
background: #fff;
border: solid 1px $gray-200;
width: 200px;
padding: map-get($spacers, 2);
box-shadow: $theme-box-shadow-lg;
li {
margin-bottom: 0.25rem;
}
}

.site-navbar__items--other-years-dropdown-open {
display: flex;
}

.btn--other-years-dropdown {
@include skin-button($style: "secondary");
padding: 0 12px 0 10px;
min-width: 40px;
height: 40px;
font-size: 1rem;
color: $white;
border-radius: 4px;
outline-color: none;
box-shadow: none;
border: 1px solid $white;
background-color: $secondary;
&:hover,
&:focus {
color: $white;
border: 1px solid $white;
background-color: $secondary;
border: 1px solid $white;
svg {
fill: $white;;
}
}
:first-child {
margin-right: 2px;
}
svg {
display: inline-block;
width: 12px;
height: 1.25rem;
fill: $white !important;
vertical-align: sub;
}
}


@import "./awards/mppw";
@import "./awards/arthur-ashe";
@import "./awards/emerging-scholars";
Expand Down
26 changes: 14 additions & 12 deletions sites/diverseeducation.com/server/templates/static-pages/mppwcc-yearly.marko
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
32 changes: 17 additions & 15 deletions sites/diverseeducation.com/server/templates/static-pages/mppwsa-yearly.marko
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)>
Expand Down Expand Up @@ -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)>
Expand Down
30 changes: 14 additions & 16 deletions ...diverseeducation.com/server/templates/website-section/awards-honors/top-women/index.marko
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 }|
Expand All @@ -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>
Expand Down

0 comments on commit f35c3a1

Please sign in to comment.