[incubator-age] 06/18: Some mobile optimizations

[ey...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

eya pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-age.git

commit 2ce84efb1a15013a12b8ec58bbafed88d8a60553
Author: Nick Sorrell <ni...@cint.io>
AuthorDate: Tue Dec 1 15:42:04 2020 -0500

    Some mobile optimizations
---
 assets/scripts/index.js | 11 +++++++++++
 assets/styles/index.css | 23 ++++++++++++++++++++---
 index.html              |  4 ++--
 3 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/assets/scripts/index.js b/assets/scripts/index.js
index 6b19243..b0b630d 100644
--- a/assets/scripts/index.js
+++ b/assets/scripts/index.js
@@ -1,6 +1,7 @@
 var handleClick = function (el) {
   decorateSidebar(el);
   showMainContent(el);
+  handleMenuClick();
 }
 
 var decorateSidebar = function (el) {
@@ -18,4 +19,14 @@ var showMainContent = function (el) {
   }
   let divId = "main-" + el.parentElement.id.split("-")[1];
   document.getElementById(divId).classList.add("main--selected");
+}
+
+var handleMenuClick = function (el) {
+  let sidebar = document.getElementById("sidebar");
+  let display = window.getComputedStyle(sidebar).display;
+  if (display === "none") {
+    sidebar.style.display = "block";
+  } else {
+    sidebar.style.display = "none";
+  }
 }
\ No newline at end of file
diff --git a/assets/styles/index.css b/assets/styles/index.css
index 1e7e2ad..9702ea2 100644
--- a/assets/styles/index.css
+++ b/assets/styles/index.css
@@ -24,17 +24,21 @@
 }
 
 .header--hamburger {
-  display: none;
-  float: right;
   top: 1rem;
   right: 1rem;
   position: fixed;
+  cursor: pointer;
+}
+@media only screen and (min-width: 800px) {
+  .header--hamburger {
+    display: none;
+  }
 }
 
 .header--hamburger-div {
   width: 35px;
   height: 5px;
-  background-color: white;
+  background-color: darkgoldenrod;
   margin: 6px 0;
 }
 
@@ -49,6 +53,12 @@
   padding-left: 1rem;
   padding-right: 1rem;
 }
+@media only screen and (max-width: 800px) {
+  .sidebar {
+    display: none;
+    z-index: 100;
+  }
+}
 
 .sidebar--selected {
   border-bottom: 1px dotted blue;
@@ -67,11 +77,17 @@
  *   MAIN AREA 
  */
 
+
 .main {
   grid-column: 2 / 3;
   grid-row: 2;
   padding-right: 2rem;
 }
+@media only screen and (max-width: 800px) {
+  .main {
+    grid-column: 1 / -1;
+  }
+}
 
 .main-body {
   padding-left: 1rem;
@@ -113,6 +129,7 @@
   padding-bottom: 1rem;
   padding-top: 1rem;
   white-space: pre;
+  overflow: auto;
 }
 
 .external-link::after {
diff --git a/index.html b/index.html
index aa96234..e5ddccf 100644
--- a/index.html
+++ b/index.html
@@ -20,14 +20,14 @@
       <div class="header">
         <img src="assets/images/logo.png" width="250px" />
         <div class="header--title">A Graph Extension for PostgreSQL</div>
-        <div class="header--hamburger" id="menu">
+        <div class="header--hamburger" id="menu" onclick="handleMenuClick(this)">
           <div class="header--hamburger-div"></div>
           <div class="header--hamburger-div"></div>
           <div class="header--hamburger-div"></div>
         </div>
       </div>
 
-      <div class="sidebar">
+      <div class="sidebar" id="sidebar">
         <p class="sidebar--section">
           <span class="emph">APACHE AGE</span><br />
           <span id="sidebar-overview" class="sidebar-item sidebar--selected"> <a class="sidebar-link" href="#" onclick="handleClick(this)">Overview</a></span> <br />