Merge pull request #35 from szymon-rd/ux-fixes

adding layout and ux fixes

Author: kamilszewczyk0

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

@@ -103,8 +103,7 @@ class SearchbarComponent(engine: PageSearchEngine, inkuireEngine: InkuireJSSearc
     searchTask.map { result =>
       if result.isEmpty then
         val noResultsDiv = div(id := "no-results-container")(
-          // TODO fix path to the element
-          img(src := "../images/no-results-icon.svg", alt := "Sick face"),
+          div(cls := "no-result-icon"),
           h2(cls := "h200 no-result-header")("No results match your filter criteria."),
           p(cls := "body-small no-result-content")("Try adjusting or clearing your filters", p("to display better result")),
           button(id := "searchbar-clear-button", cls := "clearButton label-only-button")("Clear all filters").tap(_.addEventListener("click", _ => {

scaladoc/resources/dotty_res/scripts/components/FilterBar.js

@@ -52,6 +52,8 @@ class FilterBar extends Component {
     this.setState((prevState) => ({
       filter: prevState.filter.onInputValueChange(""),
     }));
+    const noResultContainer = document.querySelector("#no-results-container");
+    if (noResultContainer) noResultContainer.remove();
   };
 
   onFilterVisibilityChange = () => {
@@ -90,7 +92,7 @@ class FilterBar extends Component {
       emptySpace.insertAdjacentHTML(
         "beforeend",
         `<div id='no-results-container'>
-          <img src="../images/no-results-icon.svg" alt="Sick face" >
+          <div class="no-result-icon" ></div>
           <h2 class='h200 no-result-header'>No results match your filter criteria</h2>
           <p class='no-result-content'>Try adjusting or clearing your filters<br>to display better result</p>
           <button class='clearButton label-only-button'>Clear all filters</button>

scaladoc/resources/dotty_res/scripts/ux.js

@@ -49,14 +49,14 @@ function attachAllListeners() {
     observer.disconnect();
   }
 
-  var anyNodeExpanded = document.querySelectorAll(".ni.n0.expanded").length > 0
-  var firstNavNode = document.querySelector(".ni.n0")
-  if(!anyNodeExpanded && firstNavNode != null) {
-    var firstNavNodeAddress = firstNavNode.querySelector("a")
-    firstNavNode.classList.add("expanded")
-    var button = firstNavNode.querySelector("button.ar")
-    if(button != null) {
-      button.classList.add("expanded")
+  var anyNodeExpanded = document.querySelectorAll(".ni.n0.expanded").length > 0;
+  var firstNavNode = document.querySelector(".ni.n0");
+  if (!anyNodeExpanded && firstNavNode != null) {
+    var firstNavNodeAddress = firstNavNode.querySelector("a");
+    firstNavNode.classList.add("expanded");
+    var button = firstNavNode.querySelector("button.ar");
+    if (button != null) {
+      button.classList.add("expanded");
     }
   }
 
@@ -161,6 +161,9 @@ function attachAllListeners() {
         window.history.pushState(state, "", href);
         loadPageState(document, state);
         window.dispatchEvent(new Event(DYNAMIC_PAGE_LOAD));
+        document
+          .querySelector("#main")
+          .scrollTo({ top: 0, left: 0, behavior: "instant" });
       });
     });
   });
@@ -342,8 +345,6 @@ window.addEventListener("DOMContentLoaded", () => {
   window.dispatchEvent(new Event(DYNAMIC_PAGE_LOAD));
 });
 
-
-
 const elements = document.querySelectorAll(".documentableElement");
 
 // show/hide side menu on mobile view
@@ -359,18 +360,22 @@ sideMenuToggler.addEventListener("click", (_e) => {
 });
 
 // show/hide mobile menu on mobile view
-document.getElementById("mobile-menu-toggle").addEventListener('click', _e => {
-  document.getElementById("mobile-menu").classList.add("show")
-})
-document.getElementById("mobile-menu-close").addEventListener('click', _e => {
-  document.getElementById("mobile-menu").classList.remove("show")
-})
-
-window.addEventListener('popstate', e => {
-  if (e.state === null) { return }
-  loadPageState(document, e.state)
-  window.dispatchEvent(new Event(DYNAMIC_PAGE_LOAD))
-})
+document
+  .getElementById("mobile-menu-toggle")
+  .addEventListener("click", (_e) => {
+    document.getElementById("mobile-menu").classList.add("show");
+  });
+document.getElementById("mobile-menu-close").addEventListener("click", (_e) => {
+  document.getElementById("mobile-menu").classList.remove("show");
+});
+
+window.addEventListener("popstate", (e) => {
+  if (e.state === null) {
+    return;
+  }
+  loadPageState(document, e.state);
+  window.dispatchEvent(new Event(DYNAMIC_PAGE_LOAD));
+});
 
 var zoom;
 var transform;
@@ -503,15 +508,16 @@ function zoomOut() {
   svg.transition().duration(2000).call(zoom.transform, transform);
 }
 
-
 const members = [...document.querySelectorAll("[id]")];
 members.forEach((member) => {
   window.addEventListener("resize", () => {
     const navbarHeight = document.querySelector("#header").clientHeight;
     const filtersHeight = document.querySelector(
       ".documentableFilter",
     ).clientHeight;
-    member.style.scrollMarginTop = `${navbarHeight + filtersHeight}px`;
+    if (navbarHeight && filtersHeight) {
+      member.style.scrollMarginTop = `${navbarHeight + filtersHeight}px`;
+    }
   });
 });
 
@@ -521,6 +527,8 @@ members.forEach((member) => {
     const filtersHeight = document.querySelector(
       ".documentableFilter",
     ).clientHeight;
-    member.style.scrollMarginTop = `${navbarHeight + filtersHeight}px`;
+    if (navbarHeight && filtersHeight) {
+      member.style.scrollMarginTop = `${navbarHeight + filtersHeight}px`;
+    }
   });
 });

scaladoc/resources/dotty_res/styles/theme/components/table-of-content.css

@@ -53,7 +53,7 @@
   border-bottom: none;
 }
 
-#toc li:hover > a {
+#toc li a:hover {
   color: var(--action-primary-content-hover);
 }
 

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

@@ -11,10 +11,6 @@ p {
   margin-block: calc(3 * var(--base-spacing));
 }
 
-p, span, a, h1, h2, h3, h4, h5, h6, strong, dt, dl {
-  word-break: break-all;
-}
-
 [id] {
   scroll-margin-top: calc(18 * var(--base-spacing));
 }

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

@@ -187,12 +187,7 @@
   border-collapse: collapse;
 }
 
-#content table tbody {
-  text-align: right;
-}
-
-#content table tr td:last-child,
-#content table th:last-child {
+#content table {
   text-align: left;
 }
 
@@ -208,6 +203,17 @@
   border-bottom: none;
 }
 
+
+/* contributors table  */
+#contributors table tr td:not(:last-child),
+#contributors table th:not(:last-child) {
+  text-align: right;
+}
+
+#contributors table td {
+  vertical-align: top;
+}
+
 /* content link */
 #content a {
     color: var(--text-primary);
@@ -583,3 +589,7 @@ main :is(ul, ol) li .snippet {
 .membersList.concise .documentableElement.expand .modifiers {
   display: unset;
 }
+
+.show-all-code {
+  margin-top: calc(2* var(--base-spacing));
+}

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

@@ -7,6 +7,15 @@
   margin: calc(10 * var(--base-spacing));
 }
 
+#no-results-container .no-result-icon {
+  height: 30px;
+  width: 30px;
+}
+
+#no-results-container .no-result-icon::before {
+  content: url('../../../images/no-results-icon.svg');
+}
+
 #no-results-container .no-result-header {
 margin-block-start: 27px;
   margin-block-end: var(--base-spacing);

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

@@ -71,6 +71,7 @@
 @media (max-width: 768px) {
   .scaladoc-searchbar-cancel-button {
     display: inline;
+    min-width: 44px;
   }
 }
 

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

@@ -432,7 +432,7 @@ class MemberRenderer(signatureRenderer: SignatureRenderer)(using DocContext) ext
          else Seq(div(cls := s"mono-small-block $className")(
          list.map(link =>
           div(link.kind.name," ", link.signature.map(renderElement(_)))),
-          if(expandable) then span(cls := "show-all-code show-content")("Show all") else span()
+          if(expandable) then span(cls := "show-all-code show-content text-button h100")("Show all") else span()
         ))
 
       def selfTypeList(list: List[LinkToType]): Seq[AppliedTag] =