Multiple fixes

- General Improvements (responsivity) - Improved mobile view (responsivity) - Fixed cleanPattern (SkriptLang#4072 SkriptLang#4011) - Fixed <code> and <pre> fonts - Fixed ExprAmount Description - Fixed mobile anchors
AyhamAl-Ali · Jul 6, 2021 · dcb47a1 · dcb47a1
1 parent ba81895
commit dcb47a1
Show file tree

Hide file tree

Showing 5 changed files with 155 additions and 137 deletions.
diff --git a/docs/css/styles.css b/docs/css/styles.css
@@ -137,7 +137,7 @@ ul {
 }
 
 #nav-contents {
-    height: calc(100vh - 60px);
+    height: calc(97vh - 60px);
     /* Fix the TOP css of #side-nav */
     width: 100%;
     overflow: scroll;
@@ -155,6 +155,7 @@ ul {
     word-wrap: break-word;
     padding: 5px 15px;
     transition: background-color 0.1s, font 0.1s;
+    word-break: break-word;
 }
 
 #side-nav a:focus {
@@ -175,11 +176,12 @@ ul {
     margin-left: 30px;
     position: relative;
     top: 55px;
-    height: calc( 97vh - 55px);
+    height: calc(97vh - 55px);
     /* Fixed the TOP CSS 55px due to body having overflow hidden and top = 55px so the last 55px is hidden, this will fix it */
     padding: 0.22em;
     padding-right: 30px;
-    overflow: scroll;
+    overflow-x: hidden;
+    overflow-y: scroll;
 }
 
 #content.no-left-panel {
@@ -303,7 +305,7 @@ td ul {
     border-left: 3px solid rgba(255, 152, 0, 0.5);
     padding: 5px;
     color: rgba(0, 0, 0, 0.8);
-    max-width: 85px;
+    width: max-content;
     margin-top: 25px;
 }
 
@@ -361,39 +363,70 @@ td ul {
     body {
         grid-template-columns: 20% minmax(80%, 100%);
     }
+
+    #nav-contents {
+        margin-top: 110px;
+    }
+
+    #content {
+        padding-top: 0px !important;
+        margin-top: 50px;
+        margin-left: 10px;
+        /* !important to override home */
+    }
+
     #global-navigation {
-        height: calc(4.1em + 2px); /* +2px due to 18px padding botton not 16px */
+        height: calc(4.1em + 2px);
+        /* +2px due to 18px padding botton not 16px */
         display: flex;
         flex-wrap: wrap;
     }
+
     #global-navigation > li {
         padding-bottom: 18px;
     }
+
     #global-navigation > a {
         padding: 10px;
         padding-top: 0.1em;
         padding-bottom: 0.1em;
     }
+
     #nav-title {
         display: none;
     }
+
     #side-nav {
         top: 0;
     }
+
+    #nav-contents > a {
+        font-size: 12px;
+    }
+
+    .item-description {
+        font-size: 14px;
+    }
+    .item-table-label {
+        width: 5em;
+    }
 }
 
 @media (max-width: 1024px) {
     body {
         grid-template-columns: 20% minmax(80%, 100%);
     }
+
     #global-navigation > a {
         padding: 10px;
         padding-top: 0.1em;
         padding-bottom: 0.1em;
     }
+
     #nav-title {
         display: none;
     }
+
     #side-nav {
         top: 0;
     }
@@ -403,30 +436,30 @@ td ul {
     body {
         grid-template-columns: 20% minmax(80%, 100%);
     }
-    #side-nav {
-        padding-top: 110px;
-    }
-    #content {
-        padding-top: 55px !important; /* !important to override home */
-    }
+
     #global-navigation li {
         white-space: nowrap;
     }
+
     #global-navigation {
         display: flex;
     }
+
     #global-navigation {
         grid-column-start: 1;
         grid-column-end: none;
     }
+
     #global-navigation > a {
         padding: 10px;
         padding-top: 0.1em;
         padding-bottom: 0.1em;
     }
+
     #nav-title {
         display: none;
     }
+
     #side-nav {
         top: 0;
     }
@@ -484,4 +517,13 @@ ol.custom-list li {
 ol.custom-list li::before {
     content: counter(my-awesome-counter) ". ";
     font-weight: bold;
-}
+}
+
+code {
+    font-family: "Source Code Pro", monospace;
+    font-weight: bold;
+}
+
+pre {
+    font-family: "Source Code Pro", monospace;
+}
diff --git a/docs/js/main.js b/docs/js/main.js
@@ -65,3 +65,20 @@ function renderMagicText() {
 renderMagicText();
 
 // Magic Text </>
+
+// <> Mobile anchor correction due to doubled size header)
+function offsetAnchor(event, element) {
+  if (window.innerWidth <= 768 ) {
+    event.preventDefault();
+    content = document.querySelectorAll("#content")[0];
+    actualElement = document.getElementById(element.getAttribute("href").replace("#", ""));
+    content.scroll(0, actualElement.offsetTop - 15);
+  }
+}
+
+document.querySelectorAll("#nav-contents a").forEach((e) => {
+  e.addEventListener("click", (event) => {
+    offsetAnchor(event, e);
+  });
+})
+// Mobile anchor correction </>