Merge pull request #28 from pikinier20/scaladoc/review-fixes

Review fixes

Author: pikinier20

docs/_layouts/static-site-main.html

@@ -12,6 +12,7 @@
     page.
   </aside>
   {% endif %} {{ content }}
+  <div class="divider" />
   <nav class="arrow-navigation" aria-label="Page navigation">
     {% if page.previous %}
     <div>
@@ -42,5 +43,12 @@
   <div class="content-contributors hidden">
     <h1 class="h200">Contributors to this page</h1>
     <div id="documentation-contributors" class="contributors-container"></div>
+    {% if urls.editSource %}
+    <div class="github-edit-button">
+      <a class="text-button with-link body-small" href="{{ urls.editSource }}">
+        Edit this page on GitHub
+      </a>
+    </div>
+    {% endif %}
   </div>
 </div>

scaladoc-js/contributors/css/content-contributors.css

@@ -1,24 +1,51 @@
 .content-contributors.hidden {
   display: none;
 }
+
+.content-contributors .contributors-container div a {
+  vertical-align: middle;
+  padding: 3px;
+  text-decoration: none;
+}
+
+.content-contributors {
+  background-color: var(--background-neutral);
+  padding: calc(3 * var(--base-spacing));
+  border-radius: 4px;
+}
+
 .content-contributors .contributors-container {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   padding-bottom: 25px;
+  row-gap: calc(3 * var(--base-spacing));
+  column-gap: calc(4 * var(--base-spacing));
 }
-.content-contributors .contributors-container div {
-  margin: 5px;
-}
-.content-contributors .contributors-container div a {
-  vertical-align: middle;
-  padding: 3px;
-  text-decoration: none;
+
+.content-contributors h1 {
+  color: var(--text-primary);
+  padding-bottom: calc(3 * var(--base-spacing));
 }
+
 .content-contributors .contributors-container div img {
   vertical-align: middle;
   width: 35px;
   height: 35px;
   margin-bottom: 0;
-  border-radius: 7px;
+  border-radius: 50%;
+  margin-right: calc(1.5 * var(--base-spacing));
+}
+
+#content .content-contributors .contributors-container div a {
+  text-decoration: none;
+  border-bottom: none;
+}
+
+.content-contributors .contributors-container {
+  padding: 0;
+}
+
+.content-contributors .github-edit-button {
+  padding-top: calc(2 * var(--base-spacing));
 }

scaladoc-testcases/docs/_layouts/static-site-main.html

@@ -34,5 +34,12 @@
   <div class="content-contributors hidden">
     <h1 class="h200">Contributors to this page</h1>
     <div id="documentation-contributors" class="contributors-container"></div>
+    {% if urls.editSource %}
+    <div class="github-edit-button">
+      <a class="text-button with-link body-small" href="{{ urls.editSource }}">
+        Edit this page on GitHub
+      </a>
+    </div>
+    {% endif %}
   </div>
 </div>

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

@@ -4,7 +4,7 @@
  *  @typedef { [key: string, value: string][] } Dataset
  */
 
-class DocumentableList extends Component {
+ class DocumentableList extends Component {
   constructor(props) {
     super(props);
 
@@ -140,7 +140,7 @@ class List {
 
     function includesInputValue() {
       const lcValue = filter.value.toLowerCase()
-      return elementData.name.toLowerCase().includes(lcValue) 
+      return elementData.name.toLowerCase().includes(lcValue)
           || elementData.description.toLowerCase().includes(lcValue);
     }
 
@@ -177,7 +177,9 @@ class List {
         .every(([filterKey, value]) => {
           const filterGroup = filter.filters[filterKey]
 
-          return value.split(",").some(v => filterGroup && filterGroup[v].selected)
+          console.log(Object.entries(filterGroup).filter(arr => arr[1].selected))
+
+          return Object.entries(filterGroup).filter(arr => arr[1].selected).length == 0 || value.split(",").some(v => (filterGroup && filterGroup[v].selected))
         })
 
       return isVisible

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

@@ -4,7 +4,7 @@
  * @typedef { Record<FilterAttributes, FilterMap> } Filters
  */
 
-class Filter {
+ class Filter {
   /**
    * @param value { string }
    * @param filters { Filters }
@@ -217,8 +217,8 @@ class Filter {
 }
 
 class FilterItem {
-  constructor(selected = true, visible = true) {
+  constructor(selected = false, visible = true) {
     this.selected = selected
     this.visible = visible
   }
-}
+}

scaladoc/resources/dotty_res/scripts/ux.js

@@ -30,7 +30,7 @@ window.addEventListener("DOMContentLoaded", () => {
     }
   }
 
-  var memberLists = document.getElementsByClassName("membersList")
+  var memberLists = document.getElementsByClassName("tab")
   if (memberLists) {
     for (i = 0; i < memberLists.length; i++) {
       memberLists[i].children[0].onclick = function(e) {
@@ -139,14 +139,17 @@ window.addEventListener("DOMContentLoaded", () => {
     }
   })
 
-  // show/hide side menu on mobile view
-  const sideMenuToggler = document.getElementById("mobile-sidebar-toggle");
-  sideMenuToggler.addEventListener('click', _e => {
-    document.getElementById("leftColumn").classList.toggle("show")
-    document.getElementById("content").classList.toggle("sidebar-shown")
-    document.getElementById("toc").classList.toggle("sidebar-shown")
-    sideMenuToggler.classList.toggle("menu-shown")
-  })
+ // show/hide side menu on mobile view
+ const sideMenuToggler = document.getElementById("mobile-sidebar-toggle");
+ sideMenuToggler.addEventListener('click', _e => {
+   document.getElementById("leftColumn").classList.toggle("show")
+   document.getElementById("content").classList.toggle("sidebar-shown")
+   const toc = document.getElementById("toc");
+   if(toc) {
+     toc.classList.toggle("sidebar-shown")
+   }
+   sideMenuToggler.classList.toggle("menu-shown")
+ })
 
     // show/hide mobile menu on mobile view
     const mobileMenuOpenIcon = document.getElementById("mobile-menu-toggle");

scaladoc/resources/dotty_res/styles/theme/color-tokens.css

@@ -64,6 +64,9 @@
   --code-syntax-highlighting-deletion: var(--crimson11);
   --code-syntax-highlighting-variable: var(--purple9);
 
+  --code-syntax-highlighting-scrollbar: var(--grey8);
+  --code-syntax-highlighting-scrollbar-hover: var(--grey9);
+
   --code-method-highlighting-type: var(--purple9);
   --code-method-highlighting-type-link: var(--sky11);
   --code-method-highlighting-code-fg: var(--grey12);
@@ -142,6 +145,9 @@
   --code-syntax-highlighting-deletion: var(--crimson11);
   --code-syntax-highlighting-variable: var(--purple9);
 
+  --code-syntax-highlighting-scrollbar: var(--grey8);
+  --code-syntax-highlighting-scrollbar-hover: var(--grey9);
+
   --code-method-highlighting-type: var(--purple9);
   --code-method-highlighting-type-link: var(--sky11);
   --code-method-highlighting-code-fg: var(--grey12);

scaladoc/resources/dotty_res/styles/theme/colors.css

@@ -176,7 +176,7 @@
   --grey9: #706f78;
   --grey10: #7e7d86;
   --grey11: #a09fa6;
-  --grey12: #cccccc;
+  --grey12: #ededef;
 
   /* red colors */
   --red1: #1f1315;

scaladoc/resources/dotty_res/styles/theme/components/button/text-button.css

@@ -84,6 +84,7 @@ a:active {
   text-decoration: none;
   margin-bottom: calc(1 * var(--base-spacing));
   display: inline-block;
+  border-bottom: none;
 }
 
 .text-button.with-link::after {

scaladoc/resources/dotty_res/styles/theme/components/code-snippet.css

@@ -8,6 +8,8 @@
   border: 1px solid transparent;
   color: var(--text-primary);
   overflow-x: scroll;
+  margin-bottom: calc(3 * var(--base-spacing));
+  margin-top: calc(3 * var(--base-spacing));
 }
 
 .snippet pre {
@@ -165,3 +167,27 @@
 .hljs-variable {
   color: var(--code-syntax-highlighting-variable);
 }
+
+/* Scrollbar */
+
+/*   For Firefox */
+.snippet {
+  scrollbar-color: var(--code-syntax-highlighting-scrollbar);
+  scrollbar-width: thin;
+}
+
+/*   For Chrome */
+
+.snippet::-webkit-scrollbar-thumb {
+  background-color: var(--code-syntax-highlighting-scrollbar);
+  border-radius: 3px;
+}
+
+.snippet::-webkit-scrollbar-thumb:hover {
+  background-color: var(--code-syntax-highlighting-scrollbar-hover);
+}
+
+.snippet::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}

scaladoc/resources/dotty_res/styles/theme/components/contributors.css

@@ -58,6 +58,11 @@
 }
 
 @media (max-width: 1024px) {
+  #toc {
+    margin-left: calc(6 * var(--base-spacing));
+    margin-right: 0;
+  }
+
   #toc.sidebar-shown {
     display: none;
   }
@@ -77,6 +82,7 @@
 #content .toc-nav a {
   color: var(--action-primary-content-default);
   text-decoration: none;
+  border-bottom: none;
 }
 
 #toc li:hover > a {

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

@@ -14,6 +14,13 @@
   overflow: hidden;
 }
 
+#content.sidebar-shown {
+  -webkit-transition: width 0.3s ease-in-out;
+  -moz-transition: width 0.3s ease-in-out;
+  -o-transition: width 0.3s ease-in-out;
+  transition: width 0.3s ease-in-out;
+}
+
 @media (min-width: 1920px) {
   #content {
     width: calc(90 * var(--base-spacing));
@@ -75,7 +82,7 @@
   }
 
   #content > div:first-child {
-    width: auto;
+    width: calc(100% - calc(29 * var(--base-spacing)));
   }
 
   #content.sidebar-shown {
@@ -150,6 +157,11 @@
   color: var(--text-primary);
 }
 
+/* content first paragraph */
+#content .first-p {
+  color: var(--text-secondary);
+}
+
 /* content list */
 #content li {
   color: var(--text-primary);
@@ -165,13 +177,15 @@
   border-bottom: 1px solid var(--text-secondary);
 }
 
-#content .cover-header a, #content .cover-header a:hover {
+#content .cover-header a,
+#content .cover-header a:hover {
   border-bottom: none;
 }
 
 #content :not(pre) > code {
   color: var(--code-props-content);
   font-family: "FiraCode-Regular";
+  background-color: var(--red3);
 }
 
 .breadcrumbs {
@@ -356,27 +370,27 @@
   margin-bottom: calc(3 * var(--base-spacing));
 }
 
-.membersList {
+.tab {
   position: relative;
 }
 
-.membersList h2 {
+.tab h2 {
   border-bottom: 1px solid var(--border-default);
   padding-bottom: calc(3 * var(--base-spacing));
   padding-top: calc(3 * var(--base-spacing));
 }
 
-.membersList > button {
+.tab > button {
   position: absolute;
   right: 0;
   top: calc(3.5 * var(--base-spacing));
 }
 
-.membersList .documentableList {
+.tab .documentableList {
   display: none;
 }
 
-.membersList.expand .documentableList {
+.tab.expand .documentableList {
   display: block;
 }
 
@@ -406,3 +420,7 @@
 #content section {
   margin-top: calc(6 * var(--base-spacing));
 }
+
+#content section:last-child {
+  margin-bottom: calc(6 * var(--base-spacing));
+}