Implemented Polymer core-drawer-panel.

For the sidebar and main content parts of the page. It has a really
swish animation for when the screen is small, the drawer disappears.

resources/report/bower.json

@@ -19,6 +19,7 @@
     "core-header-panel": "Polymer/core-header-panel#~0.4.2",
     "core-toolbar": "Polymer/core-toolbar#~0.4.2",
     "core-icons": "Polymer/core-icons#~0.4.2",
-    "core-tooltip": "Polymer/core-tooltip#~0.4.2"
+    "core-tooltip": "Polymer/core-tooltip#~0.4.2",
+    "core-drawer-panel": "Polymer/core-drawer-panel#~0.4.2"
   }
 }

resources/report/css/style.css

@@ -115,36 +115,34 @@ header li.disabled {
     position: fixed;
     top: 64px;
     height: calc(100% - 64px);
-    display: flex;
+    /*display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
-    width: 100%;
+    width: 100%;*/
 }
-nav {
+div[drawer] {
     height: 100%;
-    width: 33%;
-    flex-shrink: 0;
 }
-nav > ol {
+div[drawer] > ol {
     padding-left: 1em;
     list-style-type: none;
     height: calc(100% - 4em);
 }
-nav > ol > li:nth-child(3) {
+div[drawer] > ol > li:nth-child(3) {
     height: calc(100% - 7em);
     overflow: auto;
     padding: 0;
 }
-nav li:not(:last-child) {
+div[drawer] li:not(:last-child) {
     padding: 0.5em 0.5em;
 }
 #filtersToggle {
     cursor: pointer;
 }
-nav > ol > li:not(:nth-child(3)):hover, #pluginsNav li:hover {
+div[drawer] > ol > li:not(:nth-child(3)):hover, #pluginsNav li:hover {
     background: #ccc;
 }
-nav a {
+div[drawer] a {
     text-decoration: none;
     color:black;
     display: inline-block;
@@ -169,10 +167,9 @@ nav a {
     width: 100%;
     height: 100%;
 }
-main {
+#main {
     overflow: auto;
     position: relative;
-    flex-grow: 1;
 }
 
 section {

resources/report/html/plugin-card.html

@@ -734,7 +734,7 @@ var pluginCardProto = Object.create(HTMLElement.prototype, {
             }
             if (activateFilter) {
                 /* Un-highlight any existing filter plugin. */
-                var cards = document.getElementsByTagName('main')[0].getElementsByTagName('plugin-card');
+                var cards = document.getElementById('main').getElementsByTagName('plugin-card');
                 for (var i = 0; i < cards.length; ++i) {
                     cards[i].classList.toggle('highlight', false);
                 }

resources/report/js/script.js

@@ -475,7 +475,7 @@ function getConflictingPluginsFromFilter() {
     return Promise.resolve([]);
 }
 function applyFilters(evt) {
-    var cards = document.getElementsByTagName('main')[0].getElementsByTagName('plugin-card');
+    var cards = document.getElementById('main').getElementsByTagName('plugin-card');
     var entries = document.getElementById('pluginsNav').children;
     var hiddenPluginNo = 0;
     var hiddenMessageNo = 0;
@@ -721,7 +721,7 @@ function updateMasterlist(evt) {
 function sortUIElements(pluginNames) {
     /* pluginNames is an array of plugin names in their sorted order. Rearrange
        the plugin cards and nav entries to match it. */
-    var main = document.getElementsByTagName('main')[0];
+    var main = document.getElementById('main');
     var pluginsNav = document.getElementById('pluginsNav');
     var entries = pluginsNav.children;
     if (main.getElementsByTagName('plugin-card').length != entries.length) {
@@ -837,7 +837,7 @@ function sortPlugins(evt) {
 
                 /* Record the previous order in case the user cancels sorting. */
                 /* Start at 2 to skip summary and general messages. */
-                var cards = document.getElementsByTagName('main')[0].getElementsByTagName('plugin-card');
+                var cards = document.getElementById('main').getElementsByTagName('plugin-card');
                 loot.newLoadOrder = loadOrder;
                 loot.lastLoadOrder = [];
                 for (var i = 0; i < cards.length; ++i) {

resources/report/report.html

@@ -16,6 +16,7 @@
     <link rel="import" href="bower_components/core-icon/core-icon.html">
     <link rel="import" href="bower_components/core-icons/core-icons.html">
     <link rel="import" href="bower_components/core-tooltip/core-tooltip.html">
+    <link rel="import" href="bower_components/core-drawer-panel/core-drawer-panel.html">
 
     <link rel="import" href="bower_components/paper-menu-button/paper-menu-button.html">
     <link rel="import" href="bower_components/paper-item/paper-item.html">
@@ -51,8 +52,8 @@
         <paper-button id="applySortButton" class="hidden">Apply</paper-button>
         <paper-button id="cancelSortButton" class="hidden">Cancel</paper-button>
     </core-toolbar>
-    <div id="container">
-        <nav>
+    <core-drawer-panel id="container">
+        <div drawer>
             <ol>
                 <li><a href="#summary">Summary</a></li>
                 <li><a href="#generalMessages">General Messages</a></li>
@@ -90,8 +91,8 @@
                 <li><input id="searchBox" type="search" placeholder="Search content..." title="Press Enter when searching to select the next match.">
                 </li>
             </ol>
-        </nav>
-        <main>
+        </div>
+        <div main id="main">
             <section id="summary">
                 <h1>Summary</h1>
                 <table>
@@ -146,8 +147,8 @@
                 </ul>
             </section>
             <!-- Generated plugin #pluginSection elements go here. -->
-        </main>
-    </div>
+        </div>
+    </core-drawer-panel>
 
     <dialog id="about">
         <h1>LOOT <span id="LOOTVersion"></span></h1>