Implemented narrow mode drawer button.

However, the z-index values of the cards make them appear on top.

resources/report/css/overrides.css

@@ -1,5 +1,11 @@
 /* These styles override Polymer's own internal styling for certain elements. */
 
+/* The following is for setting the size of the drawer in narrow mode. */
+#container::shadow .narrow-layout #drawer {
+    width: 50% !important;
+    background: white;
+}
+
 /* These overrides change the colour of the game menu's text and underline. */
 #gameMenu::shadow > paper-dropdown-menu {
     border-bottom-color: #f1f1f1;
@@ -60,7 +66,6 @@ html /deep/ core-animated-pages {
 }
 
 /* This stops menus keeping the last item clicked highlighted. */
-
 paper-item.core-selected {
     background: white;
 }

resources/report/css/style.css

@@ -206,10 +206,6 @@ li.warn{
 paper-checkbox {
     padding: 0.5em 1em;
 }
-loot-dropdown-menu {
-    padding-left: 2em;
-    top: -0.25em;
-}
 
 input[readonly] {
     border: none;
@@ -252,34 +248,27 @@ input:valid {
     background-color: white;
     color: black;
 }
-#hoverText {
-    position: fixed;
-    z-index: 5;
-    background: white;
-    box-shadow:0 0 3px 0px rgba(0,0,0,0.5);
-    padding: 2px 5px;
-}
-progress, .progress {
-    /* Reset the default appearance */
-    -webkit-appearance: none;
-    width: 250px;
-    height: 20px;
-    display: block;
-    margin: 0 auto;
-}
-#progressDialog > paper-progress {
+paper-progress {
     width: 100%;
 }
-
-:host > span {
-    display: inline-block;
-    width: 1.2em;
-}
-
 #firstRun > ul {
     list-style-type: disc;
     padding-left: 40px;
 }
 #firstRun .tag {
     margin: 0;
-}
+}
+
+
+/* This animates the drawer toggle appearing in narrow view. */
+#drawerToggle {
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.5s;
+}
+@media screen and (max-width: 640px) {
+    #drawerToggle {
+        opacity: 1;
+        visibility: visible;
+    }
+}

resources/report/js/script.js

@@ -1161,6 +1161,9 @@ function handleClearMetadata(evt) {
         }
     });
 }
+function toggleDrawer(evt) {
+    document.getElementById('container').togglePanel();
+}
 function setupEventHandlers() {
     var elements;
     /*Set up filter value and CSS setting storage read/write handlers.*/
@@ -1211,6 +1214,8 @@ function setupEventHandlers() {
     document.body.addEventListener('loot-editor-close', handleEditorClose, false);
     document.body.addEventListener('loot-copy-metadata', handleCopyMetadata, false);
     document.body.addEventListener('loot-clear-metadata', handleClearMetadata, false);
+
+    document.getElementById('drawerToggle').addEventListener('click', toggleDrawer, false);
 }
 function initVars() {
     loot.query('getVersion').then(function(result){

resources/report/report.html

@@ -85,6 +85,7 @@
                 </core-menu>
             </paper-dropdown>
         </paper-menu-button>
+        <paper-icon-button icon="drawer" id="drawerToggle"></paper-icon-button>
         <loot-dropdown-menu id="gameMenu">
             <!-- Generated game <li> elements go here. -->
         </loot-dropdown-menu>