Skip to content

Use one responsive search surface in Aliki #1804

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.

Sign up for GitHub

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

Open
st0012 wants to merge 1 commit into
base: master
Choose a base branch
from
+297 −314
Open

Use one responsive search surface in Aliki #1804

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
10 changes: 6 additions & 4 deletions lib/rdoc/generator/template/aliki/DESIGN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -289,12 +289,14 @@ horizontally.

### Search

One search form and one result list serve both header layouts. CSS changes the presentation at `1023px`.

| Element | Value |
|----------------------------------|-------------------------------------------------------------|
| 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` |
| 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) |
| Mobile modal (`.search-modal-content`) | centered card, `max-width: 600px`, `max-height: 80vh`, `radius-lg`, `shadow-xl` |
| Modal result item | `space-3 space-4` pad, `radius-md`, hover `background-secondary` |
| 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` |
| Desktop results (`#search-results`) | absolute inside the search surface, full-width border-box, `max-height: 60vh`, `radius-lg`, `shadow-lg`, `z-popover` (500) |
| Compact surface (`.navbar-search.is-open .search-surface`) | centered overlay, `max-width: 600px`, `max-height: 80vh`, `radius-lg`, `shadow-xl` |
| Compact result item | `space-3 space-4` pad, `radius-md`, hover `background-secondary` |
| Servlet field | pill `border-radius: 1.25rem`, leading 🔍 (`\1F50D`) glyph |
| Result lines | `.search-match` `base` · `.search-namespace` `sm` secondary · `.search-snippet` `sm` tertiary |
| Type badge (`.search-type-*`) | inline-block, `space-0 space-2` pad, `xs`, weight 500, `radius-sm`, colors per §2 |
Expand Down
73 changes: 29 additions & 44 deletions lib/rdoc/generator/template/aliki/_header.rhtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,54 +3,39 @@
<%= h @options.title %>
</a>

<!-- Desktop search bar -->
<div class="navbar-search navbar-search-desktop" role="search">
<form action="#" method="get" accept-charset="utf-8">
<input id="search-field" role="combobox" aria-label="Search"
aria-autocomplete="list" aria-controls="search-results-desktop"
type="text" name="search" placeholder="Search (/) for a class, method..."
spellcheck="false" autocomplete="off"
title="Type to search, Up and Down to navigate, Enter to load">
<ul id="search-results-desktop" aria-label="Search Results"
aria-busy="false" aria-expanded="false"
aria-atomic="false" class="initially-hidden search-results"></ul>
</form>
</div>

<!-- Mobile search icon button -->
<button id="search-toggle" class="navbar-search-mobile" aria-label="Open search" type="button">
<span aria-hidden="true">🔍</span>
</button>

<!-- Theme toggle button -->
<button id="theme-toggle" class="theme-toggle" aria-label="Switch to dark mode" type="button">
<span class="theme-toggle-icon" aria-hidden="true">🌙</span>
</button>
</header>
<div class="navbar-search" data-search-container>
<button id="search-toggle" class="navbar-search-mobile" aria-label="Open search"
aria-controls="search-surface" aria-expanded="false" type="button">
<span aria-hidden="true">🔍</span>
</button>

<!-- Search Modal (Mobile) -->
<div id="search-modal" class="search-modal" hidden aria-modal="true" role="dialog" aria-label="Search">
<div class="search-modal-backdrop"></div>
<div class="search-modal-content">
<div class="search-modal-header">
<form class="search-modal-form" action="#" method="get" accept-charset="utf-8">
<span class="search-modal-icon" aria-hidden="true">🔍</span>
<input id="search-field-mobile" role="combobox" aria-label="Search"
aria-autocomplete="list" aria-controls="search-results-mobile"
type="text" name="search" placeholder="Search documentation"
spellcheck="false" autocomplete="off">
<button type="button" class="search-modal-close" aria-label="Close search" id="search-modal-close">
<div class="search-backdrop" data-search-close></div>
<div id="search-surface" class="search-surface">
Comment on lines +12 to +13
<form class="search-form" role="search" action="#" method="get" accept-charset="utf-8">
<span class="search-icon" aria-hidden="true">🔍</span>
<input id="search-field" role="combobox" aria-label="Search"
aria-autocomplete="list" aria-controls="search-results"
type="text" name="search" placeholder="Search (/) for a class, method..."
spellcheck="false" autocomplete="off"
title="Type to search, Up and Down to navigate, Enter to load">
<button type="button" class="search-close" aria-label="Close search" data-search-close>
<span aria-hidden="true">esc</span>
</button>
</form>
</div>
<div class="search-modal-body">
<ul id="search-results-mobile" aria-label="Search Results"
aria-busy="false" aria-expanded="false"
aria-atomic="false" class="search-results search-modal-results initially-hidden"></ul>
<div class="search-modal-empty">
<p>No recent searches</p>

<div class="search-body">
<ul id="search-results" aria-label="Search Results"
aria-busy="false" aria-expanded="false"
aria-atomic="false" class="initially-hidden search-results"></ul>
<div class="search-empty">
<p>No recent searches</p>
</div>
</div>
</div>
</div>
</div>

<!-- Theme toggle button -->
<button id="theme-toggle" class="theme-toggle" aria-label="Switch to dark mode" type="button">
<span class="theme-toggle-icon" aria-hidden="true">🌙</span>
</button>
</header>
8 changes: 4 additions & 4 deletions lib/rdoc/generator/template/aliki/_sidebar_search.rhtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<div id="search-section" role="search" class="project-section initially-hidden">
<form action="#" method="get" accept-charset="utf-8">
<div id="search-section" class="project-section initially-hidden" data-search-container>
<form role="search" action="#" method="get" accept-charset="utf-8">
<div id="search-field-wrapper">
<input id="search-field" role="combobox" aria-label="Search"
aria-autocomplete="list" aria-controls="search-results-desktop"
aria-autocomplete="list" aria-controls="search-results"
type="text" name="search" placeholder="Search (/) for a class, method, ..." spellcheck="false"
autocomplete="off"
title="Type to search, Up and Down to navigate, Enter to load">
</div>

<ul id="search-results-desktop" aria-label="Search Results"
<ul id="search-results" aria-label="Search Results"
aria-busy="false" aria-expanded="false"
aria-atomic="false" class="initially-hidden search-results"></ul>
</form>
Expand Down
Loading