Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update navbar design and improve search UI #1084

Merged
merged 34 commits into from
Nov 2, 2024
Merged
Changes from 1 commit
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
03491d5
Update navbar design
lhsazevedo Oct 3, 2024
89c598e
Add new search modal dialog
lhsazevedo Oct 3, 2024
8650771
Add search modal e2e tests
lhsazevedo Oct 3, 2024
d0da0c8
Remove Hogan.js and typeahead.js
lhsazevedo Oct 2, 2024
831f80c
Update playwright snapshots
lhsazevedo Oct 3, 2024
b17b606
Fix e2e and visual tests
lhsazevedo Oct 4, 2024
0048ef1
Avoid page shift when opening the search modal
lhsazevedo Oct 4, 2024
b83f783
Match search label and input placeholder text
lhsazevedo Oct 4, 2024
23003ff
Increase contrast for accessibility
lhsazevedo Oct 5, 2024
cd0754b
Halve the transition duration of the search modal
lhsazevedo Oct 4, 2024
07da74b
Reduce search scrollbar width
lhsazevedo Oct 5, 2024
ec7e9b9
Darken release background to better fit the navbar
lhsazevedo Oct 5, 2024
7146752
Fallback search when Javascript is disabled
lhsazevedo Oct 6, 2024
535b25d
Remove logo alt text
lhsazevedo Oct 6, 2024
b8bb98c
Fix modal input type and aria-label
lhsazevedo Oct 6, 2024
75a3e38
Use <kbd> tag
lhsazevedo Oct 6, 2024
9fe9ed1
Use correct CSS methodology
lhsazevedo Oct 6, 2024
4c062ec
Avoid search flash on mobile
lhsazevedo Oct 6, 2024
21b220e
Fix e2e and visual tests
lhsazevedo Oct 6, 2024
afaaa2e
Progressively enhance mobile menu and search
lhsazevedo Oct 11, 2024
2f3da84
Add e2e tests for JS disabled search and menu
lhsazevedo Oct 12, 2024
ae5a14c
Invalidate old search cache format
lhsazevedo Oct 21, 2024
97a865b
Use a single kbd tag for each arrow key
lhsazevedo Oct 21, 2024
6a4dcd1
Fix leftover vars
lhsazevedo Oct 21, 2024
2d89914
Use current language in legacy global search
lhsazevedo Oct 21, 2024
e35fe6e
Add missing docblocks and improve existing ones
lhsazevedo Oct 22, 2024
1fa0853
Use language parameter from outer scope
lhsazevedo Oct 22, 2024
d2d68a0
Format search.js
lhsazevedo Oct 22, 2024
39bc218
Tone down result hover background color
lhsazevedo Oct 22, 2024
0d5a896
Update visual tests snapshots
lhsazevedo Oct 22, 2024
f97426e
Add search modal visual test
lhsazevedo Oct 23, 2024
eb7a39d
Fix visual tests snapshots
lhsazevedo Oct 23, 2024
614a1ad
Close offcanvas menu by outside click
saundefined Oct 31, 2024
d54e103
Sync class name with master
lhsazevedo Oct 31, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Increase contrast for accessibility
Adjust navbar and search modal element colors to meet WCAG AA contrast
ratio.

Additionally, match the search button label and input placeholder text to avoid
confusion, and hides some SVG images from the accessibility tree.
lhsazevedo committed Oct 6, 2024
commit 23003ff77313c8031f1c7a125c9a885e35633165
4 changes: 2 additions & 2 deletions include/footer.inc
Original file line number Diff line number Diff line change
@@ -119,7 +119,7 @@ if (!empty($_SERVER['BASE_PAGE'])
<div class="search-modal-form">
<div class="search-modal-input-icon">
<!-- https://feathericons.com search -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
</div>
<input
type="text"
@@ -131,7 +131,7 @@ if (!empty($_SERVER['BASE_PAGE'])

<button aria-label="Close" class="search-modal-close-btn">
<!-- https://pictogrammers.com/library/mdi/icon/close/ -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/></svg>
</button>
</div>
<div
23 changes: 9 additions & 14 deletions styles/theme-medium.css
Original file line number Diff line number Diff line change
@@ -245,7 +245,7 @@ div.warning a:focus {
padding: 0px 12px;

font-size: 16px;
color: hsl(231, 100%, 89%);
color: hsl(231, 100%, 91%);
text-decoration: none;

transition: color .15s ease-out;
@@ -279,20 +279,14 @@ div.warning a:focus {
.navbar-search-btn {
padding: 8px 12px;

color: #B4BFF3;
color: hsl(230, 72%, 84%);
text-align: left;

background-color: #404F82;
border: 1px solid #6A78BE;
border-radius: 8px;
}

.navbar-search-btn:hover {
border-color: #94A3ED;
border-width: 1px;
outline: none;
}

.navbar-backdrop {
position: fixed;
top: 0;
@@ -312,16 +306,15 @@ div.warning a:focus {
.navbar-menu-btn, .navbar-search-btn-mobile {
padding: 8px;

color: #D2D9FF;
color: hsl(221, 55%, 75%);

cursor: pointer;

background-color: transparent;
border: 0;
outline: 0;
opacity: .65;

transition: opacity .25s ease-out;
transition: color .25s ease-out;
}

.navbar-menu-btn:hover,
@@ -356,7 +349,7 @@ div.warning a:focus {

.navbar-release img {
height: 24px;
opacity: .75;
opacity: .85;
transition: opacity .25s ease-out;
}

@@ -510,7 +503,7 @@ div.warning a:focus {
min-width: 0;
padding-left: 12px;

background-color: rgba(255, 255, 255, 0.1);
background-color: hsl(0, 0%, 25%);
border-radius: 8px;
}

@@ -522,6 +515,7 @@ div.warning a:focus {

.search-modal-input-icon svg {
display: block;
color: rgba(255, 255, 255, 0.39);
}

.search-modal-input {
@@ -543,7 +537,8 @@ div.warning a:focus {
}

.search-modal-input::placeholder {
color: rgba(255, 255, 255, 0.5);
color: rgba(255, 255, 255, 0.56);
opacity: 1;
}

/* TODO: The icon button styles were copied from the navbar. */