fix: add a toolbar

The toolbar has a search box and a sort button Changed the presentation for the search input
roc-lang · Feb 19, 2024 · e71d1fc · e71d1fc
1 parent 7ac1d3c
commit e71d1fc
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 35 deletions.
diff --git a/crates/docs/src/lib.rs b/crates/docs/src/lib.rs
@@ -389,13 +389,6 @@ fn render_sidebar<'a, I: Iterator<Item = &'a ModuleDocumentation>>(modules: I) -
             module.name.as_str(),
         );
 
-        push_html(
-            &mut sidebar_entry_content,
-            "button",
-            vec![("id", "sort-button")],
-            "Sort",
-        );
-
         let entries = {
             let mut entries_buf = String::new();
 

diff --git a/crates/docs/src/static/index.html b/crates/docs/src/static/index.html
@@ -19,9 +19,14 @@
 
 <body>
     <nav id="sidebar-nav">
-        <input id="module-search" aria-labelledby="search-link" type="text" placeholder="Search" />
-        <label for="module-search" id="search-link"><span id="search-link-text">Search</span> <span
-                id="search-link-hint">(press <span id="search-shortcut-key">s</span>)</span></label>
+        <div id="toolbar">
+            <input id="module-search" aria-label="Run a search on the references" type="search" placeholder="Search (press s)" >
+            <button id="sort-button">Sort
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-sort-down" viewBox="0 0 16 16">
+                    <path d="M3.5 2.5a.5.5 0 0 0-1 0v8.793l-1.146-1.147a.5.5 0 0 0-.708.708l2 1.999.007.007a.497.497 0 0 0 .7-.006l2-2a.5.5 0 0 0-.707-.708L3.5 11.293zm3.5 1a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5M7.5 6a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1zm0 3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zm0 3a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1z"/>
+                  </svg>
+            </button>
+        </div>
         <div class="module-links">
             <!-- Module links -->
         </div>

diff --git a/crates/docs/src/static/styles.css b/crates/docs/src/static/styles.css
@@ -439,17 +439,10 @@ pre>samp {
   display: none !important;
 }
 
-#module-search:placeholder-shown {
-  padding: 0;
-  opacity: 0;
-  height: 0;
-}
-
 #module-search,
 #module-search:focus {
   opacity: 1;
   padding: 12px 16px;
-  height: 48px;
 }
 
 /* Show the "Search" label link when the text input has a placeholder */
@@ -464,16 +457,14 @@ pre>samp {
 
 #module-search {
   display: block;
-  box-sizing: border-box;
   width: 100%;
   box-sizing: border-box;
   font-size: 18px;
   line-height: 18px;
-  margin-top: 6px;
   border: none;
-  color: var(--faded-color);
   background-color: var(--code-bg);
   font-family: var(--font-serif);
+  flex-grow: 1;
 }
 
 #module-search::placeholder {
@@ -488,7 +479,6 @@ pre>samp {
   font-size: 18px;
   line-height: 18px;
   padding: 12px 16px;
-  height: 48px;
   cursor: pointer;
 }
 
@@ -497,7 +487,6 @@ pre>samp {
 }
 
 #search-link-hint {
-  margin-left: 1em;
   opacity: 0.6;
 }
 
@@ -508,23 +497,18 @@ pre>samp {
   font-style: normal;
   line-height: 15px;
 }
-
-#sort-button {
-  border-style: none;
-  font-size: 18px;
-  box-sizing: border-box;
+#toolbar {
   display: flex;
-  align-items: start;
-  line-height: 18px;
-  padding: 12px 16px;
-  height: 48px;
+  justify-content: start;
+  margin-top: 6px;
+}
+#sort-button {
+  margin-left: 8px;
+  border-radius: 2px;
+  border-color: var(--border-color);
   color: var(--text-color);
-  cursor: pointer;
   background-color: var(--body-bg-color);
 }
-#sort-button:hover {
-  text-decoration: underline;
-}
 
 .builtins-tip {
   padding: 1em;