Make search header sticky (#1114)

* Make search header sticky

* Fix progress bar location

3 files changed, 56 insertions, 38 deletions

diff --git a/ext/css/display.css b/ext/css/display.css
index 2ae7eab0..68f7bf11 100644
--- a/ext/css/display.css
+++ b/ext/css/display.css
@@ -575,10 +575,24 @@ button.sidebar-button.sidebar-button-highlight {
 
 
 /* Search page */
+.search-header-wrapper {
+    background-color: var(--background-color);
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+.sticky-header {
+    position: sticky;
+    top: 0px;
+    z-index: 1000;
+    padding-top: 10px;
+}
 .search-header {
+    width: var(--content-width);
     display: flex;
     flex-flow: column nowrap;
     max-height: 100vh;
+    padding: var(--main-content-vertical-padding) var(--main-content-horizontal-padding);
 }
 #query-parser-container {
     overflow-y: auto;
diff --git a/ext/css/search.css b/ext/css/search.css
index 808a7045..fac8de60 100644
--- a/ext/css/search.css
+++ b/ext/css/search.css
@@ -134,7 +134,7 @@ h1 {
 .search-options {
     display: flex;
     flex-flow: row wrap;
-    margin: 0.5em 0;
+    margin: 0.5em 0 0 0;
     align-items: center;
 }
 .search-option {
diff --git a/ext/search.html b/ext/search.html
index 281c0c07..e15f9bb9 100644
--- a/ext/search.html
+++ b/ext/search.html
@@ -23,48 +23,52 @@
 <div class="content-outer">
     <div class="content">
         <div class="content-scroll scrollbar" id="content-scroll">
-            <div class="content-body" id="content-body">
-                <div class="top-progress-bar-container"><div class="progress-bar-indeterminant" id="progress-indicator" hidden></div></div>
-                <div class="content-body-inner">
-
-                    <span tabindex="-1" id="content-scroll-focus"></span>
-
-                    <div class="search-header">
-                        <div id="intro">
-                            <h1>Yomitan Search</h1>
-                        </div>
+            <div class="top-progress-bar-container"><div class="progress-bar-indeterminant" id="progress-indicator" hidden></div></div>
+            <div class="search-header-wrapper">
+                <div class="search-header">
+                    <div id="intro">
+                        <h1>Yomitan Search</h1>
+                    </div>
 
-                        <div class="scan-disable">
-                            <div class="search-options">
-                                <div class="search-option" id="search-option-profile-select">
-                                    <span class="profile-select-container"><select class="profile-select" id="profile-select">
-                                        <optgroup label="Primary Profile" id="profile-select-option-group"></optgroup>
-                                    </select></span>
-                                </div>
-                                <label class="search-option" id="search-option-clipboard-monitor-container">
-                                    <label class="toggle"><input type="checkbox" id="clipboard-monitor-enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
-                                    <span class="search-option-label">Clipboard monitor</span>
-                                </label>
-                                <label class="search-option" id="search-option-wanakana">
-                                    <label class="toggle"><input type="checkbox" id="wanakana-enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
-                                    <span class="search-option-label">Automatic kana conversion</span>
-                                </label>
-                                <div class="search-option" id="query-parser-mode-container" hidden>
-                                    <span class="search-option-pre-label">Parser:</span>
-                                    <select id="query-parser-mode-select"></select>
-                                </div>
+                    <div class="scan-disable">
+                        <div class="search-options">
+                            <div class="search-option" id="search-option-profile-select">
+                                <span class="profile-select-container"><select class="profile-select" id="profile-select">
+                                    <optgroup label="Primary Profile" id="profile-select-option-group"></optgroup>
+                                </select></span>
                             </div>
-                            <div class="search-textbox-container">
-                                <textarea id="search-textbox" class="scrollbar" placeholder="Input a term, expression, sentence, or block of text" autocomplete="off" lang="ja" autofocus></textarea>
-                                <button type="button" id="search-back-button" class="search-button" hidden><span class="icon" data-icon="left-chevron"></span></button>
-                                <button type="button" id="search-button" class="search-button"><span class="icon" data-icon="magnifying-glass"></span></button>
+                            <label class="search-option" id="search-option-clipboard-monitor-container">
+                                <label class="toggle"><input type="checkbox" id="clipboard-monitor-enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
+                                <span class="search-option-label">Clipboard monitor</span>
+                            </label>
+                            <label class="search-option" id="search-option-wanakana">
+                                <label class="toggle"><input type="checkbox" id="wanakana-enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
+                                <span class="search-option-label">Automatic kana conversion</span>
+                            </label>
+                            <div class="search-option" id="query-parser-mode-container" hidden>
+                                <span class="search-option-pre-label">Parser:</span>
+                                <select id="query-parser-mode-select"></select>
                             </div>
                         </div>
-
-                        <div class="scan-disable scrollbar" id="query-parser-container" hidden>
-                            <div id="query-parser-content" lang="ja"></div>
-                        </div>
                     </div>
+                </div>
+            </div>
+            <div class="search-header-wrapper sticky-header">
+                <div class="search-header">
+                    <div class="search-textbox-container">
+                        <textarea id="search-textbox" class="scrollbar" placeholder="Input a term, expression, sentence, or block of text" autocomplete="off" lang="ja" autofocus></textarea>
+                        <button type="button" id="search-back-button" class="search-button" hidden><span class="icon" data-icon="left-chevron"></span></button>
+                        <button type="button" id="search-button" class="search-button"><span class="icon" data-icon="magnifying-glass"></span></button>
+                    </div>
+                    <div class="scan-disable scrollbar" id="query-parser-container" hidden>
+                        <div id="query-parser-content" lang="ja"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="content-body" id="content-body">
+                <div class="content-body-inner">
+
+                    <span tabindex="-1" id="content-scroll-focus"></span>
 
                     <div id="dictionary-entries"></div>