Skip to content

Commit dd63475

Browse files
lamATnginxTasoOneAsia
lamATnginx
and
TasoOneAsia
authored
Add mobile support to coveo (#370)
* Coveo: Add mobile support * Coveo: Remove JS solution + small refactor of code * Coveo: Remove unneeded data attribute * Header: Tweaks to header search on mobile --------- Co-authored-by: Michael McKeen <[email protected]>
1 parent 8ff843d commit dd63475

File tree

8 files changed

+146
-61
lines changed

8 files changed

+146
-61
lines changed

‎assets/css/v2/style.css

Lines changed: 78 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -410,7 +410,7 @@ ol li:last-child {
410410
.grid-container {
411411
display: grid;
412412
grid-template-columns: var(--sidebar-width) 1fr;
413-
grid-template-rows: var(--header-height) 1fr auto;
413+
grid-template-rows: auto 1fr auto;
414414
grid-template-areas:
415415
"sidebar header"
416416
"sidebar content"
@@ -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 {
@@ -534,6 +582,11 @@ ol li:last-child {
534582
width: 2.5rem;
535583
}
536584

585+
.header__search--mobile--search--button {
586+
cursor: pointer;
587+
display: none;
588+
}
589+
537590
.header__search {
538591
display: block;
539592
width: auto;
@@ -596,7 +649,7 @@ ol li:last-child {
596649
background-color: oklch(var(--color-background));
597650
border: oklch(var(--color-foreground)) 1px solid;
598651
box-shadow: 3px 3px 0px oklch(var(--color-shadow));
599-
z-index: 1;
652+
z-index: 20;
600653
right: 0;
601654
display: none;
602655
width: 400px;
@@ -818,6 +871,13 @@ ol li:last-child {
818871

819872
/* This is our "mobile" or no sidebar breakpoint */
820873
@media (max-width: 68rem) {
874+
#search-standalone-header-panel:checked ~ .grid-container {
875+
.header {
876+
.header-search-dropdown {
877+
display: flex;
878+
}
879+
}
880+
}
821881
#sidebar-panel:not(:checked) ~ .grid-container {
822882
.header {
823883
.header__control--sidebar--close {
@@ -890,6 +950,14 @@ ol li:last-child {
890950
}
891951
}
892952

953+
.grid-container:has(.no-sidebar) {
954+
.header {
955+
.header__search--mobile--search--button {
956+
display: block;
957+
}
958+
}
959+
}
960+
893961
.header {
894962
.product-selector {
895963
display: none;
@@ -907,7 +975,9 @@ ol li:last-child {
907975
}
908976
.header-container {
909977
.header__search {
910-
display: none;
978+
#search-standalone-header {
979+
display: none;
980+
}
911981
}
912982
}
913983
}
@@ -1339,6 +1409,7 @@ atomic-search-box::part(textarea-expander) {
13391409
atomic-search-box::part(textarea) {
13401410
padding-left: 0;
13411411
padding-right: 0;
1412+
font-weight: 400;
13421413
}
13431414

13441415
atomic-search-box::part(wrapper) {
@@ -1362,8 +1433,8 @@ atomic-search-interface#search-standalone-header {
13621433

13631434
.header-search-box {
13641435
&::part(wrapper) {
1436+
border-color: oklch(var(--color-codeblock-border));
13651437
border-radius: 0;
1366-
border-color: oklch(var(--color-foreground));
13671438
}
13681439

13691440
&::part(textarea) {
@@ -1373,7 +1444,7 @@ atomic-search-interface#search-standalone-header {
13731444

13741445
&::part(suggestions-wrapper) {
13751446
border-radius: 0;
1376-
border-color: oklch(var(--color-foreground));
1447+
border-color: oklch(var(--color-codeblock-border));
13771448
width: calc(100% + 2px);
13781449
margin-inline-start: -1px;
13791450
}

‎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/_default/baseof.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141
{{ if or ( not hugo.IsServer ) ( not ( in .Site.Params.buildtype "package" ) ) }}
4242
{{ partial "universal-tag.html" . }}
4343
{{ end }}
44+
<input type="checkbox" id="search-standalone-header-panel" class="search-standalone-header-panel" hidden/>
4445
<input type="checkbox" id="sidebar-panel" class="sidebar-panel" hidden/>
4546
<div class="grid-container">
4647
<aside class="sidebar">

‎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 & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +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-
<div class="header__search">
14-
<!-- Standalone search box. -->
15-
{{ partial "coveo-atomic-search.html" (dict "id" "search-standalone-header") }}
16-
</div>
17-
{{ end }}
18-
</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>
1924

20-
<div class="header__logo">
21-
<a class="header__logo-link" href="{{ .Site.BaseURL | relLangURL }}" alt="NGINX Docs Home">
22-
<img class="header__img" src="{{ "/images/icons/NGINX-Open-Source-product-icon.svg" | absURL }}" alt="NGINX Docs">
23-
</a>
24-
</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>
2530

26-
<div class="header__f5sites">
27-
{{ $f5Sites := slice
28-
(dict "title" "DevCentral" "url" "https://community.f5.com/" "description" "Connect & learn in our hosted community")
29-
(dict "title" "MyF5" "url" "https://my.f5.com/" "description" "Your key to everything F5, including support, registration keys, and subscriptions")
30-
(dict "title" "NGINX" "url" "https://nginx.org/" "description" "Learn more about NGINX Open Source and read the community blog")
31-
}}
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+
}}
3237

33-
<div class="navbar navbar-nav">
34-
<div class="nav-item-explore active">
35-
<button id="navbar-sites-button" class="button navbar-button dropdown-button" data-testid="header__f5sites_button">
36-
F5 Sites
37-
<span class="header__f5sites--icon">
38-
{{ partial "lucide" (dict "context" . "icon" "chevron-down") }}
39-
</span>
40-
</button>
41-
<div class="dropdown-content" id="dropdown-content" data-testid="header__f5sites_content">
42-
<ul>
43-
{{ range $f5Sites }}
44-
<li>
45-
<a href="{{ .url }}" target="_blank" >{{ .title }}</a>
46-
<p>{{ .description }}</p>
47-
</li>
48-
{{ end }}
49-
</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>
5056
</div>
51-
</div>
52-
</div>
57+
</div>
5358

54-
</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>
5567
</div>
5668
{{ 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)