Skip to content

Commit 4e29cdc

Browse files
st0012st0012
committed
Use one responsive search surface in Aliki
1 parent d2107e0 commit 4e29cdc

6 files changed

Lines changed: 372 additions & 314 deletions

File tree

‎lib/rdoc/generator/template/aliki/DESIGN.md‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -289,12 +289,14 @@ horizontally.
289289

290290
### Search
291291

292+
One search form and one result list serve both header layouts. CSS changes the presentation at `1023px`.
293+
292294
| Element | Value |
293295
|----------------------------------|-------------------------------------------------------------|
294-
| Desktop field (`#search-field`) | full-width border-box, `space-2 space-4` pad, 1px border, `radius-md`, `base`; focus → accent border + `0 0 0 3px accent-subtle` |
295-
| Desktop dropdown (`#search-results-desktop`) | absolute inside the search form, full-width border-box to match the field, `max-height: 60vh`, `radius-lg`, `shadow-lg`, `z-popover` (500) |
296-
| Mobile modal (`.search-modal-content`) | centered card, `max-width: 600px`, `max-height: 80vh`, `radius-lg`, `shadow-xl` |
297-
| Modal result item | `space-3 space-4` pad, `radius-md`, hover `background-secondary` |
296+
| Shared field (`#search-field`) | full-width border-box, `space-2 space-4` pad, 1px border, `radius-md`, `base`. Focus uses an accent border + `0 0 0 3px accent-subtle` |
297+
| Desktop results (`#search-results`) | absolute inside the search surface, full-width border-box, `max-height: 60vh`, `radius-lg`, `shadow-lg`, `z-popover` (500) |
298+
| Compact surface (`.navbar-search.is-open .search-surface`) | centered overlay, `max-width: 600px`, `max-height: 80vh`, `radius-lg`, `shadow-xl` |
299+
| Compact result item | `space-3 space-4` pad, `radius-md`, hover `background-secondary` |
298300
| Servlet field | pill `border-radius: 1.25rem`, leading 🔍 (`\1F50D`) glyph |
299301
| Result lines | `.search-match` `base` · `.search-namespace` `sm` secondary · `.search-snippet` `sm` tertiary |
300302
| Type badge (`.search-type-*`) | inline-block, `space-0 space-2` pad, `xs`, weight 500, `radius-sm`, colors per §2 |

‎lib/rdoc/generator/template/aliki/_header.rhtml‎

Lines changed: 29 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -3,54 +3,39 @@
33
<%= h @options.title %>
44
</a>
55

6-
<!-- Desktop search bar -->
7-
<div class="navbar-search navbar-search-desktop" role="search">
8-
<form action="#" method="get" accept-charset="utf-8">
9-
<input id="search-field" role="combobox" aria-label="Search"
10-
aria-autocomplete="list" aria-controls="search-results-desktop"
11-
type="text" name="search" placeholder="Search (/) for a class, method..."
12-
spellcheck="false" autocomplete="off"
13-
title="Type to search, Up and Down to navigate, Enter to load">
14-
<ul id="search-results-desktop" aria-label="Search Results"
15-
aria-busy="false" aria-expanded="false"
16-
aria-atomic="false" class="initially-hidden search-results"></ul>
17-
</form>
18-
</div>
19-
20-
<!-- Mobile search icon button -->
21-
<button id="search-toggle" class="navbar-search-mobile" aria-label="Open search" type="button">
22-
<span aria-hidden="true">🔍</span>
23-
</button>
24-
25-
<!-- Theme toggle button -->
26-
<button id="theme-toggle" class="theme-toggle" aria-label="Switch to dark mode" type="button">
27-
<span class="theme-toggle-icon" aria-hidden="true">🌙</span>
28-
</button>
29-
</header>
6+
<div class="navbar-search" data-search-container>
7+
<button id="search-toggle" class="navbar-search-mobile" aria-label="Open search"
8+
aria-controls="search-surface" aria-expanded="false" type="button">
9+
<span aria-hidden="true">🔍</span>
10+
</button>
3011

31-
<!-- Search Modal (Mobile) -->
32-
<div id="search-modal" class="search-modal" hidden aria-modal="true" role="dialog" aria-label="Search">
33-
<div class="search-modal-backdrop"></div>
34-
<div class="search-modal-content">
35-
<div class="search-modal-header">
36-
<form class="search-modal-form" action="#" method="get" accept-charset="utf-8">
37-
<span class="search-modal-icon" aria-hidden="true">🔍</span>
38-
<input id="search-field-mobile" role="combobox" aria-label="Search"
39-
aria-autocomplete="list" aria-controls="search-results-mobile"
40-
type="text" name="search" placeholder="Search documentation"
41-
spellcheck="false" autocomplete="off">
42-
<button type="button" class="search-modal-close" aria-label="Close search" id="search-modal-close">
12+
<div class="search-backdrop" data-search-close></div>
13+
<div id="search-surface" class="search-surface">
14+
<form class="search-form" role="search" action="#" method="get" accept-charset="utf-8">
15+
<span class="search-icon" aria-hidden="true">🔍</span>
16+
<input id="search-field" role="combobox" aria-label="Search"
17+
aria-autocomplete="list" aria-controls="search-results"
18+
type="text" name="search" placeholder="Search (/) for a class, method..."
19+
spellcheck="false" autocomplete="off"
20+
title="Type to search, Up and Down to navigate, Enter to load">
21+
<button type="button" class="search-close" aria-label="Close search" data-search-close>
4322
<span aria-hidden="true">esc</span>
4423
</button>
4524
</form>
46-
</div>
47-
<div class="search-modal-body">
48-
<ul id="search-results-mobile" aria-label="Search Results"
49-
aria-busy="false" aria-expanded="false"
50-
aria-atomic="false" class="search-results search-modal-results initially-hidden"></ul>
51-
<div class="search-modal-empty">
52-
<p>No recent searches</p>
25+
26+
<div class="search-body">
27+
<ul id="search-results" aria-label="Search Results"
28+
aria-busy="false" aria-expanded="false"
29+
aria-atomic="false" class="initially-hidden search-results"></ul>
30+
<div class="search-empty">
31+
<p>No recent searches</p>
32+
</div>
5333
</div>
5434
</div>
5535
</div>
56-
</div>
36+
37+
<!-- Theme toggle button -->
38+
<button id="theme-toggle" class="theme-toggle" aria-label="Switch to dark mode" type="button">
39+
<span class="theme-toggle-icon" aria-hidden="true">🌙</span>
40+
</button>
41+
</header>

‎lib/rdoc/generator/template/aliki/_sidebar_search.rhtml‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
<div id="search-section" role="search" class="project-section initially-hidden">
2-
<form action="#" method="get" accept-charset="utf-8">
1+
<div id="search-section" class="project-section initially-hidden" data-search-container>
2+
<form role="search" action="#" method="get" accept-charset="utf-8">
33
<div id="search-field-wrapper">
44
<input id="search-field" role="combobox" aria-label="Search"
5-
aria-autocomplete="list" aria-controls="search-results-desktop"
5+
aria-autocomplete="list" aria-controls="search-results"
66
type="text" name="search" placeholder="Search (/) for a class, method, ..." spellcheck="false"
77
autocomplete="off"
88
title="Type to search, Up and Down to navigate, Enter to load">
99
</div>
1010

11-
<ul id="search-results-desktop" aria-label="Search Results"
11+
<ul id="search-results" aria-label="Search Results"
1212
aria-busy="false" aria-expanded="false"
1313
aria-atomic="false" class="initially-hidden search-results"></ul>
1414
</form>

0 commit comments

Comments
 (0)