Make dottydoc main page responsive (#2052)

* Add CSS media queries to support off-canvas sidebar

* Add sidebar toggle interactivity for small viewports

* Re-add sidebar toggle support for desktop viewport widths

* Widen sidebar in mobile viewport and removed extra padding in content body

* Reduce sidebar width back to 250px on Desktop and Tablet viewports

Tablet (576px <= x < 768px) viewport sidebar is now limited to 250px to follow
Desktop viewports whilst still retaining its off-canvas behaviour like Mobile.
Mobile viewport (x < 576px) still implements 60% sidebar width.

* Refactor media queries to follow mobile-first strategy

Instead of specifying specific styles at a viewport width range, e.g. Tablet
(576px <= x < 768px), the CSS properties are arranged as such that default CSS
properties applies to Mobile, with Tablet and Desktop styles defined within
media queries.

Mobile-first strategy will ensure more consistency as style resolution will go
in one direction, e.g. from Mobile -> Tablet -> Desktop.

* Move `div#entity-container` and `div#doc-page-container` further down

The change above, in addition to qualifying `button#menu-toggle` with
`div#content-wrapper` parent selector will make the existing CSS easier
to refactor removing duplicates, and to swap it into CSS pre-processor
languages such as SASS or Less.

* Merge redundant `div#content-body` styles

Two different `div#content-body` styles was defined, one with only
`position: relative` and another with the complete styles.

In addition, a `div#content-body` Tablet and Desktop padding style was moved
into the relevant media query to make future changes more transparent.

* Change `rgba(...)` properties to insert space and prefix decimals with `0`

Within the CSS file, RGBA property declaration is inconsistent: some with space
after comma and some without, some has leading `0` for decimals and some dont'.
This change make sure that one style is followed (space after comma and always
use the leading `0` in decimals).

* Move hamburger menu to original location and restore hover styling

Hamburger menu now stays in the content body as per original design. However
to prevent overlap with body text, a permanent 30px left padding on the body
container has been added.

* Remove hamburger menu transformation into arrow on expansion

As per PR review comments (#2052)
the old hamburger menu style is restored by removing CSS transforms.

* Change hamburger menu positioning to `absolute`

As per PR review comments (#2052)
the hamburger menu positioning is changed back to absolute, which also
means the left padding on content body is no longer needed and can be
removed.

Author: hhandoko

doc-tool/resources/_layouts/main.html

@@ -13,6 +13,7 @@
             integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi"
             crossorigin="anonymous"
         >
+
         <link
             rel="stylesheet"
             href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"

doc-tool/resources/_layouts/sidebar.html

@@ -33,9 +33,12 @@
         </ul>
     </div>
     <div id="content-body">
-        <div id="menu-toggle" onclick="toggleMenu()">
-            <i class="fa fa-bars" aria-hidden="true"></i>
-        </div>
+        <button type="button" id="menu-toggle" onclick="toggleMenu()" aria-expanded="false">
+            <span class="sr-only" aria-hidden="true">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+        </button>
         {{ content }}
     </div>
 </div>

doc-tool/resources/css/dottydoc.css

@@ -1,23 +1,31 @@
+html, body {
+    overflow-x: hidden;
+}
+
 html {
     height: 100%;
 }
+
 body {
     min-height: 100%;
 }
 
 div#content-wrapper {
     min-height: 100vh;
-    padding-left: 250px;
-    transition: all 0.5s ease;
+    padding-left: 0;
 }
 
-div#content-wrapper.toggled {
-    padding-left: 0;
+div#content-wrapper div#content-body {
+    background-color: #f4f3f4;
+    border-left: 1px solid #e0e0e0;
+    box-shadow: -3px 0 5px -2px rgba(0, 0, 0, 0.14);
+    padding: 40px 1px 1px 1px;
+    position: relative;
+    min-height: 100vh;
 }
 
-div.index-wrapper {
+div#content-wrapper div.index-wrapper {
     background-color: #fafafa;
-    width: 250px;
     position: fixed;
     top: 0;
     left: 0;
@@ -26,6 +34,77 @@ div.index-wrapper {
     overflow-x: hidden;
 }
 
+/** Animations: Easing for content body slide on toggle  */
+div#content-wrapper,
+div#content-wrapper div#content-body {
+    -webkit-transition: all .25s ease-out;
+         -o-transition: all .25s ease-out;
+            transition: all .25s ease-out;
+}
+
+/** Mobile (x < 576px) sidebar: Defaults closed with 60% wide sidebar */
+div#content-wrapper {}
+div#content-wrapper div#content-body { left: 0; }
+div#content-wrapper div.index-wrapper { width: 60%; }
+
+div#content-wrapper.toggled {}
+div#content-wrapper.toggled div#content-body { left: 60%; }
+div#content-wrapper.toggled div.index-wrapper {}
+
+/** Tablet (576px <= x < 768px) sidebar: Defaults closed with 250px wide sidebar */
+@media screen and (min-width: 576px) {
+
+    div#content-wrapper {}
+    div#content-wrapper div#content-body {}
+    div#content-wrapper div.index-wrapper { width: 250px; }
+
+    div#content-wrapper.toggled {}
+    div#content-wrapper.toggled div#content-body { left: 250px; }
+    div#content-wrapper.toggled div.index-wrapper {}
+
+}
+
+/** Desktop (x >= 768px) sidebar: Defaults open with 250px wide sidebar  */
+@media screen and (min-width: 768px) {
+
+    div#content-wrapper { padding-left: 250px; }
+    div#content-wrapper div#content-body {}
+    div#content-wrapper div.index-wrapper { width: 250px; }
+
+    div#content-wrapper.toggled { padding-left: 0; }
+    div#content-wrapper.toggled div#content-body { left: 0; }
+    div#content-wrapper.toggled div.index-wrapper {}
+
+}
+
+div#content-wrapper button#menu-toggle {
+    background: rgba(244, 243, 244, 0.4) none;
+    border: 1px solid transparent;
+    color: #837f84;
+    margin: -30px 0 0 10px;
+    padding: 9px 10px;
+    position: absolute;
+}
+
+div#content-wrapper button#menu-toggle:hover {
+    cursor: pointer;
+}
+
+div#content-wrapper button#menu-toggle:focus {
+    outline: none;
+}
+
+div#content-wrapper button#menu-toggle span.icon-bar {
+    background-color: #837f84;
+    border-radius: 2px;
+    border-color: #837f84;
+    color: #837f84;
+    display: block;
+    margin: 3px 0;
+    width: 22px;
+    height: 2px;
+}
+
 div#doc-page-container > h1 {
     border-bottom: 1px solid #eee;
     padding-bottom: 0.3em;
@@ -93,27 +172,6 @@ div#doc-page-container > h6 > a:focus {
     outline: none;
 }
 
-div#content-body {
-    border-left: 1px solid #e0e0e0;
-    box-shadow: -3px 0px 5px -2px rgba(0,0,0,0.14);
-    position: relative;
-    padding: 10px;
-    background-color: #f4f3f4;
-    min-height: 100vh;
-}
-
-div#menu-toggle {
-    color: #837F84;
-    outline: none;
-    padding-left: 20px;
-    padding-top: 10px;
-}
-
-div#menu-toggle:hover {
-    color: rgba(0, 0, 0, 0.4);
-    cursor: pointer;
-}
-
 ul.index-entities {
     list-style-type: none;
     padding-left: 0;
@@ -195,7 +253,7 @@ ul.index-entities > li > a.entity-name {
     font-size: 13px;
     display: block;
     padding: 0 0 0 24px;
-    color: rgba(0,0,0,.87);
+    color: rgba(0, 0, 0, 0.87);
     background: transparent;
     cursor: pointer;
     float: left;
@@ -245,7 +303,7 @@ ul.toc > li > ul.hide {
 ul.index-entities > li.index-title > span {
     font-size: 16px;
     font-weight: bold;
-    color: rgba(0,0,0,.87);
+    color: rgba(0, 0, 0, 0.87);
     padding: 0 24px;
 }
 
@@ -319,7 +377,7 @@ pre {
     background: rgba(244, 243, 244, 0.6);
     border-radius: 2px;
     margin-top: 20px;
-    border: 1px solid rgba(0,0,0,0.1);
+    border: 1px solid rgba(0, 0, 0, 0.1);
 }
 
 pre > code.language-none,