handle mobile search

Author: fanixus96

scaladoc-js/main/src/searchbar/SearchbarComponent.scala

@@ -140,7 +140,7 @@ class SearchbarComponent(engine: SearchbarEngine, inkuireEngine: InkuireJSSearch
       }.isEmpty
     }
     if matching.nonEmpty then {
-      resultsDiv.appendChild(createKindSeparator("Recently searched", "fas fa-clock"))
+      resultsDiv.appendChild(createKindSeparator("Recently searched", "fas fa-clock re-icon"))
       matching.map(_.toHTML).foreach(resultsDiv.appendChild)
     }
   }
@@ -201,6 +201,19 @@ class SearchbarComponent(engine: SearchbarEngine, inkuireEngine: InkuireJSSearch
 
     icon
 
+  private val mobileSearch =
+    val mobileSearch = document.getElementById("mobile-scaladoc-searchbar-input").asInstanceOf[html.Input]
+    mobileSearch.onfocus = (event: Event) =>
+      if (document.body.contains(rootDiv)) {
+        // document.body.removeChild(rootDiv)
+      }
+      else {
+        document.body.appendChild(rootDiv)
+        inputElem.focus()
+      }
+    // open the search if the user hits the `s` key when not focused on a text input
+    document.body.addEventListener("keydown", (e: KeyboardEvent) => handleGlobalKeyDown(e))
+
   private val inputElem: html.Input =
     input(cls := "scaladoc-searchbar-input", `type` := "search", `placeholder`:= "Find anything").tap { element =>
       element.addEventListener("input", { e =>
@@ -223,9 +236,18 @@ class SearchbarComponent(engine: SearchbarEngine, inkuireEngine: InkuireJSSearch
   private val rootHiddenClasses = "hidden"
   private val rootShowClasses   = ""
 
-  private val rootDiv: html.Div =
-    val element = div(id := "scaladoc-searchbar")(
+  private def generateRootDiv(): html.Div =
+    val cancelButton = span(cls := "scaladoc-searchbar-cancel-button body-small")("Cancel")
+    cancelButton.onclick = (event: Event) =>
+      document.body.removeChild(rootDiv)
+
+    val inputContainer = div(cls := "scaladoc-searchbar-input-container")(
       inputElem,
+      cancelButton,
+    )
+
+    val element = div(id := "scaladoc-searchbar")(
+      inputContainer,
       resultsDiv
     ).tap { elem =>
       elem.addEventListener("mousedown", (e: Event) => e.stopPropagation())
@@ -267,6 +289,8 @@ class SearchbarComponent(engine: SearchbarEngine, inkuireEngine: InkuireJSSearch
 
     rootParent
 
+  private val rootDiv: html.Div = generateRootDiv()
+
   private def handleArrowUp() = {
     val selectedElement = resultsDiv.querySelector("[selected]")
     if selectedElement != null then {

scaladoc/resources/dotty_res/styles/theme/layout/searchBar.css

@@ -27,12 +27,6 @@
   }
 }
 
-@media(max-width: 768px) {
-  #searchbar-container {
-    display: none;
-  }
-}
-
 .scaladoc-searchbar-input {
   width: 100%;
   background-color: var(--action-primary-background-default-solid);
@@ -63,6 +57,28 @@
   pointer-events: none;
 }
 
+.scaladoc-searchbar-input-container {
+  display: flex;
+  align-items: center;
+}
+
+.scaladoc-searchbar-cancel-button {
+  display: none;
+  color: var(--text-primary);
+  margin-left: calc(2 * var(--base-spacing));
+  cursor: pointer;
+}
+
+.scaladoc-searchbar-cancel-button:hover {
+  color: var(--text-secondary);
+}
+
+@media(max-width: 768px) {
+  .scaladoc-searchbar-cancel-button {
+    display: inline;
+  }
+}
+
 .theme-dark .scaladoc-searchbar-input::-webkit-search-cancel-button {
   background: url("../../../images/icon-buttons/close/dark/default.svg")
     no-repeat 50% 50%;
@@ -86,6 +102,11 @@
   overflow: scroll;
 }
 
+.scaladoc-searchbar-row .micon {
+  position: relative;
+  top: -2px;
+}
+
 .searchbar-hints {
   color: var(--text-primary);
   display: flex;
@@ -190,6 +211,10 @@
   border-top: solid 1px var(--border-default);
 }
 
+.scaladoc-searchbar-row[divider]:first-of-type {
+  border: none;
+}
+
 .scaladoc-searchbar-row a {
   color: var(--text-secondary);
   text-decoration: none;
@@ -245,3 +270,36 @@
     margin-top: calc(1 * var(--base-spacing));
   }
 }
+
+/* mobile view */
+
+@media(max-width: 768px) {
+  #searchbar-container {
+    background-color: var(--background-default);
+  }
+
+  #scaladoc-searchbar-results {
+    border: none;
+  }
+
+  .scaladoc-searchbar-input-container {
+    margin-left: calc(3 * var(--base-spacing));
+    margin-right: calc(3 * var(--base-spacing));
+  }
+
+  .scaladoc-searchbar-row[divider]:first-child {
+    border: none;
+  }
+
+  #searchbar-footer {
+    display: none;
+  }
+
+  #scaladoc-searchbar-results {
+    max-height: 100%;
+  }
+
+  #scaladoc-searchbar-results {
+    margin-top: calc(3 * var(--base-spacing));
+  }
+}

scaladoc/src/dotty/tools/scaladoc/renderers/HtmlRenderer.scala

@@ -69,7 +69,7 @@ class HtmlRenderer(rootPackage: Member, members: Map[DRI, Member])(using ctx: Do
 
     head(
       meta(charset := "utf-8"),
-      meta(util.HTML.name := "viewport", content := "width=device-width, initial-scale=1"),
+      meta(util.HTML.name := "viewport", content := "width=device-width, initial-scale=1, maximum-scale=1"),
       title(page.link.name),
       canonicalUrl(absolutePath(page.link.dri)),
       link(
@@ -253,7 +253,7 @@ class HtmlRenderer(rootPackage: Member, members: Map[DRI, Member])(using ctx: Do
           button(id := "mobile-menu-close", cls := "icon-button close"),
         ),
         div(cls := "mobile-menu-container body-medium")(
-          input(id := "mobile-scaladoc-searchbar-input", cls := "scaladoc-searchbar-input", `type` := "search", `placeholder`:= "Search documentation"),
+          input(id := "mobile-scaladoc-searchbar-input", cls := "scaladoc-searchbar-input", `type` := "search", `placeholder`:= "Find anything"),
           a(href := "https://www.scala-lang.org/download/", cls := "mobile-menu-item") (
             "Download",
           ),