Merge pull request #12461 from lampepfl/scaladoc/site-css-fix

Scaladoc: CSS fixes

Author: pikinier20

docs/css/dottydoc.css

@@ -248,6 +248,20 @@ aside.success {
   }
 }
 
+.gitter-open-chat-button {
+  writing-mode: vertical-lr;
+  text-orientation: upright;
+  right: 0px;
+  bottom: 100px;
+  padding: 0.5em 0.25em 0.5em 0.25em;
+  border-bottom-left-radius: .5em;
+  border-top-right-radius: 0em;
+}
+
+.gitter-open-chat-button.is-collapsed {
+  transform: translateX(120%);
+}
+
 header {
   position: static !important;
   width: 100% !important;

scaladoc-js/resources/scaladoc-searchbar.css

@@ -22,6 +22,7 @@
         box-shadow: none;
         margin-top: 2px;
     }
+
     .search span:hover {
         fill: var(--link-hover-fg);
     }
@@ -43,9 +44,9 @@
 #scaladoc-searchbar {
     position: fixed;
     top: 50px;
-    right: 40px;
+    left: calc(5% + var(--side-width));
     z-index: 5;
-    width: calc(100% - 360px);
+    width: calc(90% - var(--side-width));
     box-shadow: 0 2px 16px 0 rgba(0, 42, 76, 0.15);
     font-size: 13px;
     font-family: system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, sans-serif;

scaladoc-js/src/Main.scala

@@ -5,4 +5,5 @@ object Main extends App {
   SocialLinks()
   CodeSnippets()
   DropdownHandler()
+  Ux()
 }

scaladoc-js/src/ux/Ux.scala

@@ -0,0 +1,23 @@
+package dotty.tools.scaladoc
+
+import org.scalajs.dom._
+import org.scalajs.dom.ext._
+
+import scala.util.matching.Regex._
+import scala.util.matching._
+
+class Ux():
+  def sideMenuItemsWordBreaking(): Unit =
+    val matchingRegex = raw"([.A-Z])".r
+
+    def modifySpan = (span: html.Span) => {
+      val textNodes = span.childNodes.filter(_.nodeType == 3)
+      val texts = textNodes.map(_.nodeValue).mkString
+      span.innerHTML = matchingRegex.replaceAllIn(texts, m => s"<wbr>${m.group(0)}")
+    }
+
+    val nodes = document.querySelectorAll("#sideMenu2 a span").collect {
+        case e: html.Span => e
+      }.foreach(modifySpan)
+
+  sideMenuItemsWordBreaking()

scaladoc/resources/dotty_res/styles/scalastyle.css

@@ -265,10 +265,10 @@ th {
 #sideMenu2 {
   overflow: auto;
   overflow-x: hidden;
-  overflow-y: scroll;
   scrollbar-width: thin;
   height: 100%;
   font-size: var(--leftbar-font-size);
+  margin-top: 5%;
 }
 
 /* divs in sidebar represent entry and its children */
@@ -307,19 +307,25 @@ th {
   display: flex;
   align-items: center;
   flex: 1;
-  overflow-x: hidden;
   overflow-wrap: anywhere;
   color: var(--leftbar-fg);
   margin-right: .5rem;
-  padding-top: 3px;
-  padding-bottom: 3px;
-  margin-top: 1px;
-  margin-bottom: 1px;
-  width: 100%;
-  /* This trick adds selected background stretching to the left side of screen */
-  margin-left: calc(0px - var(--side-width));
-  padding-left: var(--side-width);
-  width: calc(2 * var(--side-width));
+  padding-top: 2%;
+  padding-bottom: 2%;
+  width: calc(var(--side-width));
+  padding-left: calc(0.05 * var(--side-width));
+  padding-right: calc(0.3 * var(--side-width));
+  box-sizing: border-box;
+}
+
+#sideMenu2 a span:not(.micon) {
+  margin-right: 0.75ex;
+  text-indent: -1.5em;
+  padding-left: 1.5em;
+}
+
+#sideMenu2 a.selected span:not(.micon) {
+  margin-right: 0.5ex;
 }
 
 #sideMenu2 a.selected {
@@ -340,14 +346,12 @@ span.ar {
   position: absolute;
   right: 1em;
   top: 0px;
-  padding: 4px;
 }
 
 span.ar::before {
   content: "\e903"; /* arrow down */
   font-family: "dotty-icons" !important;
   font-size: 20px;
-  line-height: var(--leftbar-font-size);
   color: var(--leftbar-fg);
   display: flex;
   flex-direction: row;
@@ -543,6 +547,8 @@ footer {
   background: var(--footer-bg);
   color: var(--footer-fg);
   display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
   bottom: 0px;
   align-items: center;
   position: fixed;
@@ -559,17 +565,7 @@ footer {
    */
   filter: invert(100%) hue-rotate(180deg);
 }
-footer > span:first-child {
-  margin-left: 24px;
-  padding-left: 0;
-}
-footer > span:last-child {
-  margin-right: 24px;
-  padding-right: 0;
-}
-footer > span {
-  padding: 0 16px;
-}
+
 footer .padded-icon {
   padding-left: 0.5em;
 }
@@ -878,8 +874,6 @@ footer .pull-right {
 }
 
 footer .socials {
-  margin-left: 10px;
-  margin-right: 10px;
   display: flex;
   align-items: center;
 }
@@ -895,7 +889,6 @@ footer .socials {
 }
 
 #generated-by {
-  margin-right: 20px;
   display: flex;
   align-items: center;
 }
@@ -930,11 +923,19 @@ footer .socials {
   footer > span:last-child {
     margin-right: 12px;
   }
+
+  footer {
+    position: unset;
+  }
+
+  .footer-text {
+    display: none;
+  }
 }
 /* Portrait phones */
 @media(max-width: 576px) {
   :root {
-    --side-width: 0;
+    --side-width: 0px;
     --content-padding: 48px 12px;
   }
 
@@ -960,8 +961,10 @@ footer .socials {
     font-size: 30px;
   }
   #leftColumn.open ~ #main #leftToggler {
+    position: fixed;
     left: unset;
-    right: 5vw;
+    right: 16vw;
+    color: var(--leftbar-fg);
   }
   .icon-toggler::before {
     content: "\e90a"; /* menu icon */
@@ -1046,3 +1049,9 @@ footer .socials {
 .dropdown-content a.filtered {
   display: none;
 }
+
+@media(max-height:640px) {
+  footer {
+    position: unset;
+  }
+}

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

@@ -166,7 +166,7 @@ class HtmlRenderer(rootPackage: Member, val members: Map[DRI, Member])(using ctx
           case m: Member => navigationIcon(m)
           case _ => Nil
         }
-        Seq(a(href := pathToPage(pageLink.dri, nav.link.dri), attrs)(icon, nav.link.name))
+        Seq(a(href := pathToPage(pageLink.dri, nav.link.dri), attrs)(icon, span(nav.link.name)))
 
       nav.children match
         case Nil => isSelected -> div(linkHtml())
@@ -216,7 +216,7 @@ class HtmlRenderer(rootPackage: Member, val members: Map[DRI, Member])(using ctx
 
     def textFooter: String | AppliedTag =
       args.projectFooter.fold("") { f =>
-        div(id := "footer-text")(
+        span(id := "footer-text")(
           raw(f)
         )
       }
@@ -262,19 +262,19 @@ class HtmlRenderer(rootPackage: Member, val members: Map[DRI, Member])(using ctx
           span(cls := "go-to-top-icon")(
             a(href := "#container")(
               span(cls:="icon-vertical_align_top"),
-              raw(" Back to top")
+              span(cls :="footer-text")(raw("Back to top"))
             )
           ),
           label(id := "theme-toggle", cls := "switch")(
             input(`type` := "checkbox"),
             span(cls := "slider")
           ),
           div(cls := "socials")(
-            if hasSocialLinks then Seq(raw("Social links ")) else Nil,
+            span(cls := "footer-text")(if hasSocialLinks then Seq(raw("Social links")) else Nil),
             socialLinks(whiteIcon = false)
           ),
           div(id := "generated-by")(
-            raw("Generated by "),
+            span(cls := "footer-text")(raw("Generated by")),
             a(href := "https://github.com/lampepfl/dotty/tree/master/scaladoc")(
               img(
                 src := resolveRoot(link.dri, "images/scaladoc_logo.svg"),