fix smaller resolution search footer, add search input to mobile menu

Author: fanixus96

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

@@ -202,7 +202,7 @@ class SearchbarComponent(engine: SearchbarEngine, inkuireEngine: InkuireJSSearch
     icon
 
   private val inputElem: html.Input =
-    input(id := "scaladoc-searchbar-input", `type` := "search", `placeholder`:= "Find anything").tap { element =>
+    input(cls := "scaladoc-searchbar-input", `type` := "search", `placeholder`:= "Find anything").tap { element =>
       element.addEventListener("input", { e =>
         clearTimeout(timeoutHandle)
         val inputValue = e.target.asInstanceOf[html.Input].value

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

@@ -83,11 +83,18 @@
   .header-container-right .text-button {
     display: none;
   }
+
+  #theme-toggle {
+    display: none;
+  }
+
+  #search-toggle {
+    display: none;
+  }
 }
 
 @media (max-width: 500px) {
   .projectVersion {
     width: calc(6 * var(--base-spacing));
   }
-
 }

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

@@ -195,4 +195,12 @@
 
 .theme-dark #mobile-menu-close.selected::after {
   content: url("../../../../images/icon-buttons/close/dark/selected.svg");
+}
+
+/* search */
+
+#mobile-scaladoc-searchbar-input {
+  height: calc(4.5 * var(--base-spacing));
+  background-position: 10px 10px;
+  margin-bottom: calc(1.5 * var(--base-spacing));;
 }

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

@@ -15,7 +15,25 @@
   top: calc(3 * var(--base-spacing));
 }
 
-#scaladoc-searchbar-input {
+@media(max-width: 1024px) {
+  #scaladoc-searchbar {
+    width: calc(100 * var(--base-spacing));
+  }
+}
+
+@media(max-width: 825px) {
+  #scaladoc-searchbar {
+    width: calc(80 * var(--base-spacing));
+  }
+}
+
+@media(max-width: 768px) {
+  #searchbar-container {
+    display: none;
+  }
+}
+
+.scaladoc-searchbar-input {
   width: 100%;
   background-color: var(--action-primary-background-default-solid);
   color: var(--action-primary-content-active);
@@ -29,12 +47,12 @@
   border: none;
 }
 
-#scaladoc-searchbar-input:focus-visible {
+.scaladoc-searchbar-input:focus-visible {
   border: none;
   outline: none;
 }
 
-#scaladoc-searchbar-input::-webkit-search-cancel-button {
+.scaladoc-searchbar-input::-webkit-search-cancel-button {
   -webkit-appearance: none;
   height: 1em;
   width: 1em;
@@ -45,17 +63,17 @@
   pointer-events: none;
 }
 
-.theme-dark #scaladoc-searchbar-input::-webkit-search-cancel-button {
+.theme-dark .scaladoc-searchbar-input::-webkit-search-cancel-button {
   background: url("../../../images/icon-buttons/close/dark/default.svg")
     no-repeat 50% 50%;
 }
 
-#scaladoc-searchbar-input:focus::-webkit-search-cancel-button {
+.scaladoc-searchbar-input:focus::-webkit-search-cancel-button {
   opacity: 1;
   pointer-events: all;
 }
 
-#scaladoc-searchbar-input.dark::-webkit-search-cancel-button {
+.scaladoc-searchbar-input.dark::-webkit-search-cancel-button {
   filter: invert(1);
 }
 
@@ -208,3 +226,22 @@
 .searchbar-footer-right-container {
   margin-left: auto;
 }
+
+@media(max-width: 892px) {
+  #searchbar-footer {
+    height: calc(10 * var(--base-spacing));
+  }
+
+  #searchbar-footer span {
+    display: block;
+  }
+
+  .searchbar-footer-left-container span:not(:first-child) {
+    margin-left: calc(2 * var(--base-spacing));
+    margin-top: calc(1 * var(--base-spacing));
+  }
+
+  .searchbar-footer-right-container span:not(:first-child) {
+    margin-top: calc(1 * var(--base-spacing));
+  }
+}

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

@@ -221,7 +221,7 @@ class HtmlRenderer(rootPackage: Member, members: Map[DRI, Member])(using ctx: Do
           div(id := "version-dropdown", cls := "dropdown-menu") ()
         ),
          div(cls:="header-container-right")(
-          button(id := "search-toggle", cls := "icon-button"),
+            button(id := "search-toggle", cls := "icon-button"),
             a(href := "https://www.scala-lang.org/download/", cls := "text-button") (
               "Download",
             ),
@@ -253,6 +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"),
           a(href := "https://www.scala-lang.org/download/", cls := "mobile-menu-item") (
             "Download",
           ),