diff --git a/static/css/v3/header.css b/static/css/v3/header.css index 176863498..3452294df 100644 --- a/static/css/v3/header.css +++ b/static/css/v3/header.css @@ -161,6 +161,7 @@ .header__search-icon { color: var(--color-icon-brand-accent); + flex-shrink: 0; } .header__search-input-trigger { diff --git a/templates/includes/icon.html b/templates/includes/icon.html index 80709f8da..543fa6b94 100644 --- a/templates/includes/icon.html +++ b/templates/includes/icon.html @@ -105,6 +105,8 @@ {% elif icon_name == "linux" %} + {% elif icon_name == "lock" %} + {% elif icon_name == "windows" %} {% elif icon_name == "flag" %} diff --git a/templates/v3/includes/_header_v3.html b/templates/v3/includes/_header_v3.html index 3495bf92b..aaaba6482 100644 --- a/templates/v3/includes/_header_v3.html +++ b/templates/v3/includes/_header_v3.html @@ -12,6 +12,7 @@ Note: Subcomponents inherit the full parent context. Specifically: _header_nav_link.html uses: url, label, nav_id, is_unread, active_nav_item + _header_search_bar.html uses: current_version _header_utilities.html uses: disable_theme_switcher, request, avatar_id, version_menu_id Usage: @@ -69,20 +70,7 @@ {% comment %} Search — responsive: full bar on desktop, button on mobile {% endcomment %} - - - - + {% include "v3/includes/header/_header_search_bar.html" %} {% comment %} Desktop & tablet utilities (hidden on mobile) {% endcomment %}
{% include "v3/includes/header/_header_utilities.html" with avatar_id="desktop-user-menu" version_menu_id="desktop-version-menu" %} diff --git a/templates/v3/includes/header/_header_search_bar.html b/templates/v3/includes/header/_header_search_bar.html new file mode 100644 index 000000000..373f6b790 --- /dev/null +++ b/templates/v3/includes/header/_header_search_bar.html @@ -0,0 +1,60 @@ +{% comment %} + Header Search Bar — Gecko-powered search trigger with JS-disabled fallback. + + The search modal is imported from static/js/boost-gecko/. + + When JavaScript is enabled, the button opens the Gecko search overlay (wired + in static/js/search-shortcut.js; Ctrl/Cmd+K shortcut). When JavaScript is + disabled, the button and keyboard hint are hidden via an inline + + + Search is not available with JS disabled + + + +