Mobile improvements for different screen resolutions

5 files changed, 80 insertions, 46 deletions

diff --git a/plugins/base/frontend/src/main/components/app/index.scss b/plugins/base/frontend/src/main/components/app/index.scss
index da5042b1..601ddfa7 100644
--- a/plugins/base/frontend/src/main/components/app/index.scss
+++ b/plugins/base/frontend/src/main/components/app/index.scss
@@ -23,5 +23,11 @@ html,
   top: 0;
   right: 0;
   z-index: 8;
-  background-color: #f4f4f4
+  background-color: #f4f4f4;
+}
+
+@media screen and (max-width: 759px){
+    .search-content {
+        margin: 0 8px;
+    }
 }
diff --git a/plugins/base/frontend/src/main/components/search/search.scss b/plugins/base/frontend/src/main/components/search/search.scss
index e42c2b4c..e7e7673d 100644
--- a/plugins/base/frontend/src/main/components/search/search.scss
+++ b/plugins/base/frontend/src/main/components/search/search.scss
@@ -12,7 +12,13 @@
 }
 
 .popup-wrapper {
-  min-width: calc(100% - 360px) !important;
+    min-width: calc(100% - 360px) !important;
+}
+
+@media screen and (max-width: 759px){
+    .popup-wrapper {
+      min-width: 100% !important;
+    }
 }
 
 .template-wrapper {
@@ -24,6 +30,17 @@
   }
 }
 
+@media screen and (max-width: 759px){
+    .template-wrapper {
+        display: flex;
+        height: auto;
+        flex-direction: column;
+        span {
+            line-height: unset;
+        }
+    }
+}
+
 .template-name {
   justify-self: start;
 }
diff --git a/plugins/base/src/main/resources/dokka/scripts/platformContentHandler.js b/plugins/base/src/main/resources/dokka/scripts/platformContentHandler.js
index 78d65333..bc34d6a6 100644
--- a/plugins/base/src/main/resources/dokka/scripts/platformContentHandler.js
+++ b/plugins/base/src/main/resources/dokka/scripts/platformContentHandler.js
@@ -17,8 +17,23 @@ window.addEventListener('load', () => {
     }
     initTabs()
     handleAnchor()
+    initHidingLeftNavigation()
 })
 
+const initHidingLeftNavigation = () => {
+    document.getElementById("leftToggler").onclick = function(event) {
+        //Events need to be prevented from bubbling since they will trigger next handler
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+        document.getElementById("leftColumn").classList.toggle("open");
+    }
+
+    document.getElementById("main").onclick = () => {
+        document.getElementById("leftColumn").classList.remove("open");
+    }
+}
+
 // Hash change is needed in order to allow for linking inside the same page with anchors
 // If this is not present user is forced to refresh the site in order to use an anchor
 window.onhashchange = handleAnchor
diff --git a/plugins/base/src/main/resources/dokka/scripts/scripts.js b/plugins/base/src/main/resources/dokka/scripts/scripts.js
deleted file mode 100644
index 85dfd86f..00000000
--- a/plugins/base/src/main/resources/dokka/scripts/scripts.js
+++ /dev/null
@@ -1,17 +0,0 @@
-document.getElementById("navigationFilter").oninput = function (e) {
-	var input = e.target.value;
-	var menuParts = document.getElementsByClassName("sideMenuPart")
-	for (let part of menuParts) {
-    	if(part.querySelector("a").textContent.startsWith(input)) {
-    		part.classList.remove("filtered");
-    	} else {
-    		part.classList.add("filtered");
-    	}
-	}
-}
-
-window.addEventListener("DOMContentLoaded", () => {
-    document.getElementById("leftToggler").onclick = function() {
-        document.getElementById("leftColumn").classList.toggle("open");
-    }
-}
\ No newline at end of file
diff --git a/plugins/base/src/main/resources/dokka/styles/style.css b/plugins/base/src/main/resources/dokka/styles/style.css
index 37d6383c..7b4aaa33 100644
--- a/plugins/base/src/main/resources/dokka/styles/style.css
+++ b/plugins/base/src/main/resources/dokka/styles/style.css
@@ -9,6 +9,7 @@
     --footer-height: 64px;
     --footer-padding-top: 48px;
     --horizontal-spacing-for-content: 42px;
+    --mobile-horizontal-spacing-for-content: 8px;
 }
 
 #content {
@@ -142,6 +143,10 @@
     border-bottom: 2px solid white;
 }
 
+.title {
+    overflow-x: auto;
+}
+
 .title > .divergent-group:first-of-type {
     padding-top: 0;
 }
@@ -166,18 +171,8 @@
     flex: 0 0 auto;
 }
 
-@media screen and (max-width: 600px) {
-    #container {
-        flex-direction: column;
-    }
-
-    #leftColumn {
-        border-right: none;
-    }
-}
-
 #sideMenu {
-    max-height: calc(100% - 90px);
+    max-height: calc(100% - 140px);
     padding-top: 16px;
     position: relative;
 }
@@ -240,7 +235,7 @@ code.paragraph {
     background-color: #F4F4F4;
     align-items: center;
     display: block;
-    padding: 8px 8px 8px 16px;
+    padding: 8px 32px 8px 8px;
     box-sizing: border-box;
     white-space: pre-wrap;
     font-weight: bold;
@@ -453,7 +448,6 @@ h1.cover {
     margin-left: calc(-1 * var(--horizontal-spacing-for-content));
     margin-right: calc(-1 * var(--horizontal-spacing-for-content));
     padding-left: var(--horizontal-spacing-for-content);
-    padding-right: var(--horizontal-spacing-for-content);
     border-bottom: 1px solid #DADFE6;
 
     margin-bottom: 0;
@@ -663,8 +657,8 @@ footer {
 }
 
 .platform-tags {
-    flex: 0 0 auto;
     display: flex;
+    flex-wrap: wrap;
 }
 
 .platform-tags > .platform-tag {
@@ -700,6 +694,7 @@ footer {
     top: 20px;
     right: 88px;
     z-index: 0;
+    flex-wrap: wrap;
 }
 
 .platform-selector:hover {
@@ -728,6 +723,7 @@ td.content {
     flex-direction: row;
     padding: 0;
     justify-content: space-between;
+    flex-wrap: wrap;
 }
 
 .main-subrow > span {
@@ -996,10 +992,6 @@ td.content {
 }
 
 @media print, screen and (max-width: 480px) {
-    body {
-        padding-right: 15px;
-    }
-
     header ul {
         display: none;
     }
@@ -1076,16 +1068,24 @@ div.runnablesample {
     margin-bottom: 0.2em;
 }
 
+@media screen and (max-width: 1119px) {
+    /* TODO this feels wrong as only is an aproximation of correct solution*/
+    .filter-section {
+        position: unset;
+    }
+}
+
 @media screen and (max-width: 759px) {
     #main {
         max-width: 100%;
     }
     #leftColumn {
-        position: absolute;
+        position: fixed;
         margin-left: -280px;
         transition: margin .2s ease-out;
         z-index: 4;
         background: white;
+        height: 100%;
     }
     #leftColumn.open {
         margin-left: 0;
@@ -1093,29 +1093,42 @@ div.runnablesample {
     #leftColumn.open ~ #main #searchBar {
         display: none;
     }
-     #leftToggler {
+    #leftToggler {
         display: unset;
         position: fixed;
         top: 50%;
         transform: translateY(-50%);
-        margin-left: 12px;
         z-index: 5;
-        font-size: 30px;
+        font-size: 20px;
         transition: margin .2s ease-out;
+
+        color: var(--average-color);
+        border: 1px solid var(--average-color);
+        border-left: 0;
+        border-top-right-radius: 1em;
+        border-bottom-right-radius: 1em;
+        padding: 8px 4px 8px 8px;
+        background-color: white;
+    }
+    #leftToggler .icon-toggler:hover {
+        cursor: pointer;
     }
     #leftColumn.open ~ #main #leftToggler {
-        margin-left: 280px;;
+        margin-left: 280px;
     }
     .icon-toggler::before {
         content: "\232A";
     }
     #leftColumn.open ~ #main .icon-toggler::before {
         content: "\2329";
+        padding-right: 0.5em;
+        margin-left: -0.5em;
     }
-    .sideMenuPart > .overview:before {
-        width: 100%;
+    #content {
+        padding: 0 var(--mobile-horizontal-spacing-for-content);
     }
-    .popup-wrapper {
-        width: 100%; !important
+    #sideMenu {
+        padding-bottom: 16px;
+        overflow: auto;
     }
 }
\ No newline at end of file