Skip to content

Commit cb15b7e

Browse files
nlhkabuJacobCoffee
nlhkabu
authored and
JacobCoffee
committed
Reformat site menus
1 parent 21312b7 commit cb15b7e

8 files changed

Lines changed: 218 additions & 215 deletions

File tree

‎warehouse/locale/messages.pot‎

Lines changed: 86 additions & 90 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎warehouse/static/sass/blocks/_horizontal-menu.scss‎

Lines changed: 0 additions & 100 deletions
This file was deleted.

‎warehouse/static/sass/blocks/_search-form.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,10 @@
5353
}
5454

5555
input[type="text"].search-form__search {
56-
width: 400px;
56+
width: 300px;
5757

5858
@media screen and (max-width: breakpoints.$desktop) {
59-
width: 200px;
59+
width: 250px;
6060
}
6161
}
6262
}

‎warehouse/static/sass/blocks/_site-menu.scss‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
/* SPDX-License-Identifier: Apache-2.0 */
2+
3+
@use "../settings/breakpoints";
4+
@use "../settings/colors";
5+
@use "../settings/grid";
6+
@use "../tools/link-utilities";
7+
8+
/*
9+
The site header's main menu.
10+
11+
<nav class="site-menu" aria-label="my label">
12+
<ul>
13+
<li class="site-menu__item">
14+
<a class="site-menu__link">A horizontal link</a>
15+
</li>
16+
</ul>
17+
</nav>
18+
19+
Accessibility:
20+
- Describe the menu with aria-label
21+
22+
Modifiers:
23+
- dropdown: Marks a menu group that is always rendered as a dropdown
24+
(pair with the .dropdown block classes)
25+
- dropdown-below-desktop: Marks a menu group that collapses into a
26+
dropdown below desktop width. Apply to the plain list version alone
27+
to hide it below desktop width; combine with --dropdown on the
28+
dropdown-styled counterpart to show it only below desktop width.
29+
*/
30+
31+
.site-menu {
32+
display: flex;
33+
flex-wrap: wrap;
34+
align-items: center;
35+
justify-content: flex-end;
36+
37+
ul,
38+
li {
39+
list-style-type: none;
40+
margin: 0;
41+
padding: 0;
42+
}
43+
44+
&__item {
45+
display: inline;
46+
}
47+
48+
&__link {
49+
text-decoration: none;
50+
display: inline-block;
51+
@include link-utilities.link-without-underline;
52+
@include link-utilities.link-focus-state(colors.$white);
53+
54+
&:hover {
55+
text-decoration: underline;
56+
text-decoration-color: colors.$transparent-white;
57+
}
58+
59+
&--with-icon {
60+
.fa,
61+
.fa-solid {
62+
margin-right: 3px;
63+
}
64+
65+
.user-image {
66+
width: 22px;
67+
height: 22px;
68+
margin-right: 5px;
69+
border-radius: 10%;
70+
}
71+
72+
&:hover {
73+
.fa,
74+
.fa-solid,
75+
.user-image {
76+
opacity: 0.8;
77+
}
78+
}
79+
}
80+
}
81+
82+
// Out-specify _dropdown.scss and _typography.scss
83+
.site-menu__link {
84+
padding: 32px grid.$half-spacing-unit;
85+
color: colors.$white;
86+
87+
@media only screen and (max-width: breakpoints.$small-tablet) {
88+
padding: 25px grid.$half-spacing-unit;
89+
}
90+
}
91+
92+
&--dropdown {
93+
flex-shrink: 0;
94+
}
95+
96+
&--dropdown-below-desktop {
97+
@media only screen and (max-width: breakpoints.$desktop) {
98+
display: none;
99+
}
100+
101+
&.site-menu--dropdown {
102+
display: none;
103+
104+
@media only screen and (max-width: breakpoints.$desktop) {
105+
display: block;
106+
}
107+
}
108+
}
109+
}

‎warehouse/static/sass/warehouse.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,6 @@
7676
@use "blocks/banner";
7777
@use "blocks/homepage-banner";
7878
@use "blocks/hooray-list";
79-
@use "blocks/horizontal-menu";
8079
@use "blocks/horizontal-section";
8180
@use "blocks/large-input";
8281
@use "blocks/lede-paragraph";
@@ -104,6 +103,7 @@
104103
@use "blocks/sidebar-links";
105104
@use "blocks/sidebar-section";
106105
@use "blocks/site-header";
106+
@use "blocks/site-menu";
107107
@use "blocks/skip-to-content";
108108
@use "blocks/sponsor-grid";
109109
@use "blocks/sponsor-packages";

‎warehouse/templates/base.html‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -25,34 +25,33 @@
2525
{%- endmacro %}
2626
{% macro main_navigation_logged_out(next_url=none) -%}
2727
{% set login_url = request.route_path('accounts.login', _query={'next': next_url}) if next_url else request.route_path('accounts.login') %}
28-
<div id="user-indicator"
29-
class="horizontal-menu horizontal-menu--light horizontal-menu--tall">
30-
<nav class="horizontal-menu horizontal-menu--light horizontal-menu--tall hide-below-desktop"
28+
<div class="site-menu">
29+
<nav class="site-menu site-menu--dropdown-below-desktop"
3130
aria-label="{% trans %}Main navigation{% endtrans %}">
3231
<ul>
33-
<li class="horizontal-menu__item">
34-
<a href="{{ request.route_path('help') }}" class="horizontal-menu__link">{% trans %}Help{% endtrans %}</a>
32+
<li class="site-menu__item">
33+
<a href="{{ request.route_path('help') }}" class="site-menu__link">{% trans %}Help{% endtrans %}</a>
3534
</li>
36-
<li class="horizontal-menu__item">
37-
<a href="{{ request.user_docs_url('/') }}" class="horizontal-menu__link">{% trans %}Docs{% endtrans %}</a>
35+
<li class="site-menu__item">
36+
<a href="{{ request.user_docs_url('/') }}" class="site-menu__link">{% trans %}Docs{% endtrans %}</a>
3837
</li>
39-
<li class="horizontal-menu__item">
40-
<a href="{{ login_url }}" class="horizontal-menu__link">{% trans %}Log in{% endtrans %}</a>
38+
<li class="site-menu__item">
39+
<a href="{{ login_url }}" class="site-menu__link">{% trans %}Log in{% endtrans %}</a>
4140
</li>
42-
<li class="horizontal-menu__item">
41+
<li class="site-menu__item">
4342
<a href="{{ request.route_path('accounts.register') }}"
44-
class="horizontal-menu__link">{% trans %}Register{% endtrans %}</a>
43+
class="site-menu__link">{% trans %}Register{% endtrans %}</a>
4544
</li>
4645
</ul>
4746
</nav>
48-
<nav class="dropdown dropdown--on-menu hidden show-below-desktop"
47+
<nav class="dropdown dropdown--on-menu site-menu--dropdown site-menu--dropdown-below-desktop"
4948
aria-label="{% trans %}Main navigation{% endtrans %}">
5049
<button type="button"
51-
class="horizontal-menu__link dropdown__trigger"
50+
class="site-menu__link dropdown__trigger"
5251
aria-haspopup="true"
5352
aria-expanded="false"
5453
aria-label="{% trans %}View menu{% endtrans %}">
55-
{# djlint:off #}{% trans %}Menu{% endtrans %}<span class="dropdown__trigger-caret"><i class="fa fa-caret-down" aria-hidden="true"></i></span>{# djlint:on #}
54+
<i class="fa-solid fa-bars" aria-hidden="true"></i>
5655
</button>
5756
<ul class="dropdown__content"
5857
aria-hidden="true"
@@ -337,7 +336,7 @@
337336
class="search-form__search"
338337
type="text"
339338
name="q"
340-
placeholder="{% trans %}Search projects{% endtrans %}"
339+
placeholder="{% trans %}Type '/' to search projects{% endtrans %}"
341340
value="{{ term }}"
342341
autocomplete="off"
343342
autocapitalize="off"

‎warehouse/templates/includes/current-user-indicator.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
{# SPDX-License-Identifier: Apache-2.0 -#}
22
{% if request.user %}
3-
<div id="user-indicator"
4-
class="horizontal-menu horizontal-menu--light horizontal-menu--tall">
3+
<div id="user-indicator" class="site-menu">
54
<nav aria-label="{% trans %}Main navigation{% endtrans %}"
6-
class="dropdown dropdown--on-menu dropdown--with-icons">
5+
class="dropdown dropdown--on-menu dropdown--with-icons site-menu--dropdown">
76
<button type="button"
8-
class="horizontal-menu__link--with-icon horizontal-menu__link dropdown__trigger"
7+
class="site-menu__link--with-icon site-menu__link dropdown__trigger"
98
aria-haspopup="true"
109
aria-expanded="false"
1110
aria-label="{% trans %}View menu{% endtrans %}">

‎warehouse/templates/includes/language-dropdown.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
{# SPDX-License-Identifier: Apache-2.0 -#}
2-
<nav class="dropdown dropdown--on-menu dropdown--with-icons"
2+
<nav class="dropdown dropdown--on-menu dropdown--with-icons site-menu--dropdown"
33
aria-label="{% trans %}Localization{% endtrans %}">
44
<button type="button"
5-
class="horizontal-menu__link horizontal-menu__link--with-icon dropdown__trigger"
5+
class="site-menu__link site-menu__link--with-icon dropdown__trigger"
66
aria-haspopup="true"
77
aria-expanded="false"
88
aria-label="{% trans %}Change language{% endtrans %}">
9-
{# djlint:off #}<i class="fa-solid fa-language" aria-hidden="true"></i><span class="dropdown__trigger-label">{{ request.locale.display_name }}</span><span class="dropdown__trigger-caret"><i class="fa fa-caret-down" aria-hidden="true"></i></span>{# djlint:on #}
9+
<i class="fa-solid fa-language" aria-hidden="true"></i>
1010
</button>
1111
<form action="{{ request.route_path('locale') }}">
1212
<ul class="dropdown__content dropdown__content--languages"

0 commit comments

Comments
 (0)