Improve responsiveness of searchbar and api list. Styling improvements

Author: pikinier20

scaladoc-js/common/css/searchbar.css

@@ -156,6 +156,10 @@ div[selected] > .scaladoc-searchbar-inkuire-package {
   .search span:hover {
       fill: var(--link-hover-fg);
   }
+
+  #scaladoc-searchbar span.pull-right {
+    display: none;
+  }
 }
 
 #scaladoc-search {
@@ -177,12 +181,11 @@ div[selected] > .scaladoc-searchbar-inkuire-package {
   left: calc(5% + var(--side-width));
   z-index: 5;
   width: calc(90% - var(--side-width));
-  box-shadow: 0 2px 16px 0 rgba(0, 42, 76, 0.15);
+  box-shadow: 2px 2px 8px 0 var(--shadow);
   font-size: 13px;
   font-family: system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, sans-serif;
   background-color: var(--leftbar-bg);
   color: var(--leftbar-fg);
-  box-shadow: 0 0 2px var(--shadow);
 }
 
 #scaladoc-searchbar-input {
@@ -242,8 +245,27 @@ div[selected] > .scaladoc-searchbar-inkuire-package {
   padding-left: 20px;
 }
 
+.scaladoc-searchbar-row[loadmore] {
+  align-items: center;
+  cursor: pointer;
+}
+
+.scaladoc-searchbar-row[loadmore] > a {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.scaladoc-searchbar-row[loadmore] .i {
+  margin-left: 4px;
+  margin-right: 4px;
+}
+
 .searchbar-hints {
-  height: 60vh;
+  padding-top: 5vh;
+  padding-bottom: 5vh;
+  padding-left: 5vw;
+  padding-right: 5vw;
   display: flex;
   flex-direction: column;
   align-items: center;

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

@@ -9,7 +9,8 @@ import scala.concurrent.duration._
 import java.net.URI
 
 class SearchbarComponent(engine: SearchbarEngine, inkuireEngine: InkuireJSSearchEngine, parser: QueryParser):
-  val resultsChunkSize = 5
+  val initialChunkSize = 5
+  val resultsChunkSize = 20
   extension (p: PageEntry)
     def toHTML =
       val wrapper = document.createElement("div").asInstanceOf[html.Div]
@@ -106,8 +107,15 @@ class SearchbarComponent(engine: SearchbarEngine, inkuireEngine: InkuireJSSearch
       loadMoreElement.classList.add("scaladoc-searchbar-row")
       loadMoreElement.setAttribute("loadmore", "")
       loadMoreElement.classList.add("monospace")
+      val icon = document.createElement("a").asInstanceOf[html.Anchor]
+      icon.classList.add("i")
+      icon.classList.add("fas")
+      icon.classList.add("fa-arrow-down")
+      val text = document.createElement("span").asInstanceOf[html.Span]
+      text.textContent = "Show more..."
       val anchor = document.createElement("a").asInstanceOf[html.Anchor]
-      anchor.text = "Show more..."
+      anchor.appendChild(icon)
+      anchor.appendChild(text)
       loadMoreElement.appendChild(anchor)
       loadMoreElement.addEventListener("mouseover", _ => handleHover(loadMoreElement))
       loadMoreElement
@@ -128,7 +136,7 @@ class SearchbarComponent(engine: SearchbarEngine, inkuireEngine: InkuireJSSearch
         htmlEntries.foreach(fragment.appendChild)
         fragment.appendChild(loadMoreElement)
 
-        val nextElems = htmlEntries.drop(resultsChunkSize)
+        val nextElems = htmlEntries.drop(initialChunkSize)
         if nextElems.nonEmpty then {
           nextElems.foreach(_.classList.add("hidden"))
           loadMoreResults(nextElems)

scaladoc/resources/dotty_res/styles/colors.css

@@ -86,7 +86,7 @@
   --selected-fg: var(--blue900);
   --selected-bg: var(--blue200);
 
-  --shadow: var(--black);
+  --shadow: var(--grey500);
 
   --aside-warning-bg: var(--red100);
 }
@@ -119,7 +119,7 @@
   --link-hover-fg: var(--blue300);
   --link-sig-fg: var(--blue400);
 
-  --leftbar-bg: var(--grey930);
+  --leftbar-bg: var(--grey900);
   --leftbar-fg: var(--grey300);
   --leftbar-current-bg: var(--grey700);
   --leftbar-current-fg: var(--white);
@@ -139,7 +139,7 @@
   --tab-selected: var(--white);
   --tab-default: var(--grey300);
 
-  --shadow: var(--white);
+  --shadow: var(--grey500);
 
   --aside-warning-bg: var(--red800);
 }

scaladoc/resources/dotty_res/styles/scalastyle.css

@@ -560,9 +560,9 @@ footer .mode {
 
 .documentableElement .modifiers {
   display: table-cell;
-  min-width: 10em;
-  max-width: 10em;
-  width: 10em;
+  min-width: 10vw;
+  max-width: 10vw;
+  width: 10vw;
   overflow: hidden;
   text-align: right;
   white-space: nowrap;