Skip to content

Commit b136332

Browse files
TasoOneAsiaTasoOneAsia
committed
Header: Tweaks to header search on mobile
1 parent 84f6a9b commit b136332

File tree

7 files changed

+125
-81
lines changed

7 files changed

+125
-81
lines changed

‎assets/css/v2/style.css‎

Lines changed: 58 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -504,23 +504,71 @@ ol li:last-child {
504504
.header {
505505
grid-area: header;
506506
display: flex;
507-
padding: 0 var(--space-s);
508507
border-bottom: 1px solid oklch(var(--color-divider));
509508
background: oklch(var(--color-background));
510509
position: sticky;
511510
top: 0;
512511
z-index: 2;
513512

513+
.header-base {
514+
width: 100%;
515+
position: relative;
516+
}
517+
518+
.header-search-dropdown {
519+
position: absolute;
520+
width: 100%;
521+
background: white;
522+
border-top: 1px solid oklch(var(--color-divider));
523+
border-bottom: 1px solid oklch(var(--color-divider));
524+
padding: var(--space-m) var(--space-s);
525+
align-items: center;
526+
display: none;
527+
528+
atomic-external {
529+
width: 100%;
530+
}
531+
532+
atomic-search-box {
533+
width: 100%;
534+
535+
&::part(wrapper) {
536+
border-color: oklch(var(--color-codeblock-border));
537+
}
538+
539+
&::part(submit-button-wrapper) {
540+
display: none;
541+
}
542+
543+
&::part(textarea) {
544+
font-size: var(--atomic-text-base);
545+
padding: var(--space-s) var(--space-s);
546+
font-weight: 400;
547+
}
548+
549+
&::part(suggestions-wrapper) {
550+
border-color: oklch(var(--color-codeblock-border));
551+
}
552+
}
553+
}
554+
555+
.header-dropdown-mobile {
556+
position: absolute;
557+
bottom: 0;
558+
width: 100%;
559+
height: 8rem;
560+
}
561+
514562
.header-container {
515563
display: flex;
516564
flex-direction: row;
565+
padding: 0 var(--space-s);
517566
justify-content: space-between;
518567
flex-wrap: wrap;
519568
column-gap: 2rem;
520569
align-items: center;
521570
width: 100%;
522571
height: 64px;
523-
position: relative;
524572

525573
/* This is fine unless we actually want it to break document flow at super tiny viewports */
526574
.header__logo {
@@ -600,7 +648,7 @@ ol li:last-child {
600648
background-color: oklch(var(--color-background));
601649
border: oklch(var(--color-foreground)) 1px solid;
602650
box-shadow: 3px 3px 0px oklch(var(--color-shadow));
603-
z-index: 1;
651+
z-index: 20;
604652
right: 0;
605653
display: none;
606654
width: 400px;
@@ -817,25 +865,11 @@ ol li:last-child {
817865
/* This is our "mobile" or no sidebar breakpoint */
818866
@media (max-width: 68rem) {
819867
#search-standalone-header-panel:checked ~ .grid-container {
820-
.header__search {
821-
position: absolute;
822-
top: 100%;
823-
width: 100%;
824-
padding-top: 0;
825-
826-
#search-standalone-header {
827-
display: unset;
828-
829-
atomic-search-box {
830-
width: calc(100% + 2rem);
831-
margin-left: -1rem;
832-
}
868+
.header {
869+
.header-search-dropdown {
870+
display: flex;
833871
}
834872
}
835-
836-
.header + * {
837-
margin-top: 2rem;
838-
}
839873
}
840874
#sidebar-panel:not(:checked) ~ .grid-container {
841875
.header {
@@ -909,7 +943,7 @@ ol li:last-child {
909943
}
910944
}
911945

912-
.grid-container:has(.homepage) {
946+
.grid-container:has(.no-sidebar) {
913947
.header {
914948
.header__search--mobile--search--button {
915949
display: block;
@@ -1372,6 +1406,7 @@ atomic-search-box::part(textarea-expander) {
13721406
atomic-search-box::part(textarea) {
13731407
padding-left: 0;
13741408
padding-right: 0;
1409+
font-weight: 400;
13751410
}
13761411

13771412
atomic-search-box::part(wrapper) {
@@ -1395,8 +1430,8 @@ atomic-search-interface#search-standalone-header {
13951430

13961431
.header-search-box {
13971432
&::part(wrapper) {
1433+
border-color: oklch(var(--color-codeblock-border));
13981434
border-radius: 0;
1399-
border-color: oklch(var(--color-foreground));
14001435
}
14011436

14021437
&::part(textarea) {
@@ -1406,7 +1441,7 @@ atomic-search-interface#search-standalone-header {
14061441

14071442
&::part(suggestions-wrapper) {
14081443
border-radius: 0;
1409-
border-color: oklch(var(--color-foreground));
1444+
border-color: oklch(var(--color-codeblock-border));
14101445
width: calc(100% + 2px);
14111446
margin-inline-start: -1px;
14121447
}

‎exampleSite/hugo.toml‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,5 @@ maxAge = -1
2424
[params]
2525
github_repo = "https://github.com/nginxinc/nginx-hugo-theme"
2626
github_subdir = "exampleSite"
27-
enable_last_modified = true
27+
enable_last_modified = true
28+
coveo_search_redirect = "/search.html"

‎layouts/404.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{{ define "main"}}
22

3-
<div class="content">
3+
<div class="content no-sidebar">
44
<div class="not-found-container">
55
<h1 class="info-header">
66
HTTP 404 - Page not found

‎layouts/partials/coveo-atomic-search.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
{{ $redirectionUrl := .redirectionUrl | default "/search.html" }}
1+
{{ $redirectionUrl := .redirectionUrl | default .Site.Params.coveo_search_redirect | default "/search.html" }}
22
{{ $id := .id | default "search-standalone-header"}}
33
<atomic-search-interface id={{ $id }}>
44
<atomic-search-box redirection-url={{ $redirectionUrl }} class="header-search-box">

‎layouts/partials/header.html‎

Lines changed: 60 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,68 @@
11
{{ define "header" }}
2-
<div class="header-container">
3-
<div class="header__control">
4-
<div class="header__control--sidebar">
5-
<label class="header__control--sidebar--close" for="sidebar-panel">
6-
{{ partial "lucide" (dict "context" . "icon" "panel-left-close") }}
7-
</label>
8-
<label class="header__control--sidebar--open" for="sidebar-panel">
9-
{{ partial "lucide" (dict "context" . "icon" "panel-left-open") }}
10-
</label>
11-
</div>
12-
{{ if ( not ( in .Site.Params.buildtype "package" ) ) }}
13-
<!-- Mobile button -->
14-
<label class="header__search--mobile--search--button"for="search-standalone-header-panel">
15-
{{ partial "lucide" (dict "context" . "icon" "search") }}
16-
</label>
17-
<div class="header__search">
18-
<!-- Standalone search box. -->
19-
{{ partial "coveo-atomic-search.html" (dict "id" "search-standalone-header") }}
20-
</div>
21-
{{ end }}
22-
</div>
2+
<div class="header-base">
3+
<div class="header-container">
4+
<div class="header__control">
5+
<div class="header__control--sidebar">
6+
<label class="header__control--sidebar--close" for="sidebar-panel">
7+
{{ partial "lucide" (dict "context" . "icon" "panel-left-close") }}
8+
</label>
9+
<label class="header__control--sidebar--open" for="sidebar-panel">
10+
{{ partial "lucide" (dict "context" . "icon" "panel-left-open") }}
11+
</label>
12+
</div>
13+
{{ if ( not ( in .Site.Params.buildtype "package" ) ) }}
14+
<!-- Mobile button -->
15+
<label class="header__search--mobile--search--button"for="search-standalone-header-panel">
16+
{{ partial "lucide" (dict "context" . "icon" "search") }}
17+
</label>
18+
<div class="header__search">
19+
<!-- Standalone search box. -->
20+
{{ partial "coveo-atomic-search.html" (dict "id" "search-standalone-header") }}
21+
</div>
22+
{{ end }}
23+
</div>
2324

24-
<div class="header__logo">
25-
<a class="header__logo-link" href="{{ .Site.BaseURL | relLangURL }}" alt="NGINX Docs Home">
26-
<img class="header__img" src="{{ "/images/icons/NGINX-Open-Source-product-icon.svg" | absURL }}" alt="NGINX Docs">
27-
</a>
28-
</div>
25+
<div class="header__logo">
26+
<a class="header__logo-link" href="{{ .Site.BaseURL | relLangURL }}" alt="NGINX Docs Home">
27+
<img class="header__img" src="{{ "/images/icons/NGINX-Open-Source-product-icon.svg" | absURL }}" alt="NGINX Docs">
28+
</a>
29+
</div>
2930

30-
<div class="header__f5sites">
31-
{{ $f5Sites := slice
32-
(dict "title" "DevCentral" "url" "https://community.f5.com/" "description" "Connect & learn in our hosted community")
33-
(dict "title" "MyF5" "url" "https://my.f5.com/" "description" "Your key to everything F5, including support, registration keys, and subscriptions")
34-
(dict "title" "NGINX" "url" "https://nginx.org/" "description" "Learn more about NGINX Open Source and read the community blog")
35-
}}
31+
<div class="header__f5sites">
32+
{{ $f5Sites := slice
33+
(dict "title" "DevCentral" "url" "https://community.f5.com/" "description" "Connect & learn in our hosted community")
34+
(dict "title" "MyF5" "url" "https://my.f5.com/" "description" "Your key to everything F5, including support, registration keys, and subscriptions")
35+
(dict "title" "NGINX" "url" "https://nginx.org/" "description" "Learn more about NGINX Open Source and read the community blog")
36+
}}
3637

37-
<div class="navbar navbar-nav">
38-
<div class="nav-item-explore active">
39-
<button id="navbar-sites-button" class="button navbar-button dropdown-button" data-testid="header__f5sites_button">
40-
F5 Sites
41-
<span class="header__f5sites--icon">
42-
{{ partial "lucide" (dict "context" . "icon" "chevron-down") }}
43-
</span>
44-
</button>
45-
<div class="dropdown-content" id="dropdown-content" data-testid="header__f5sites_content">
46-
<ul>
47-
{{ range $f5Sites }}
48-
<li>
49-
<a href="{{ .url }}" target="_blank" >{{ .title }}</a>
50-
<p>{{ .description }}</p>
51-
</li>
52-
{{ end }}
53-
</ul>
38+
<div class="navbar navbar-nav">
39+
<div class="nav-item-explore active">
40+
<button id="navbar-sites-button" class="button navbar-button dropdown-button" data-testid="header__f5sites_button">
41+
F5 Sites
42+
<span class="header__f5sites--icon">
43+
{{ partial "lucide" (dict "context" . "icon" "chevron-down") }}
44+
</span>
45+
</button>
46+
<div class="dropdown-content" id="dropdown-content" data-testid="header__f5sites_content">
47+
<ul>
48+
{{ range $f5Sites }}
49+
<li>
50+
<a href="{{ .url }}" target="_blank" >{{ .title }}</a>
51+
<p>{{ .description }}</p>
52+
</li>
53+
{{ end }}
54+
</ul>
55+
</div>
5456
</div>
55-
</div>
56-
</div>
57+
</div>
5758

58-
</div>
59+
</div>
60+
</div>
61+
<div class="header-search-dropdown">
62+
<atomic-external selector="#search-standalone-header">
63+
{{ $redirectUrl := default .Site.Params.coveo_search_redirect "/search.html" }}
64+
<atomic-search-box redirection-url={{ $redirectUrl }}></atomic-search-box>
65+
</atomic-external>
66+
</div>
5967
</div>
6068
{{ end }}

‎layouts/partials/homepage.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<div class="homepage">
1+
<div class="homepage no-sidebar">
22
<div class="homepage-section">
33
{{ .Content }}
44
</div>
5-
</div>
5+
</div>

‎layouts/search/single.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{{ define "main" }}
2-
<section class="search">
2+
<section class="search no-sidebar">
33
{{ partial "coveo-atomic.html" .}}
44
</section>
55
{{ end }}

0 commit comments

Comments
 (0)