From 96d89579eacb6499333271649fbb252c45c7bc8e Mon Sep 17 00:00:00 2001
From: WrinklyNinja <wrinklyninja1@gmail.com>
Date: Sat, 17 May 2014 10:32:44 +0100
Subject: [PATCH] A bit of styling and content generation.

The layout of the main view is now roughly correct.
---
 resources/report/report.html | 21 +++++++++---
 resources/report/script.js   | 64 ++++++++++++++++++-----------------
 resources/report/style.css   | 65 ++++++++++++++++++++++++++++++++----
 3 files changed, 109 insertions(+), 41 deletions(-)
diff --git a/resources/report/report.html b/resources/report/report.html
index a0f68635..21ff148c 100644
--- a/resources/report/report.html
+++ b/resources/report/report.html
@@ -8,6 +8,9 @@
     <script src="require.js"></script>
 </head>
 <body>
+    <template id="pluginNav">
+        <li><a href=""></a>
+    </template>
     <template id="pluginSection">
         <section>
             <h1></h1>
@@ -33,34 +36,42 @@
     <!-- Need to add template for message dialog overlays. -->
     <noscript>The LOOT Report requires Javascript to be enabled in order to function.</noscript>
     <header>
+        <img src="../icon.ico">
         <ol>
             <li>File
-                <ol>
+                <ol class="hidden">
                     <li>Sort Plugins
                     <li>Redate Plugins
                     <li>Quit
                 </ol>
             <li>Game
-                <ol id="gameList">
+                <ol id="gameList" class="hidden">
                     <!-- Generated game <li> elements go here. -->
                 </ol>
             <li>Settings
             <li>Help
-                <ol>
+                <ol class="hidden">
                     <li>Help
                     <li>Open Debug Log Location
                     <li>About
                 </ol>
         </ol>
+        <ol>
+            <li>Update Masterlist
+            <li>Sort
+            <li class="hidden">Apply
+            <li class="hidden">Cancel
+            <li>Filters
+        </ol>
     </header>
     <nav>
         <ol>
             <li><a href="#summary">Summary</a>
             <li><a href="#generalMessages">General Messages</a>
+            <li>
             <ol id="pluginsNav">
                 <!-- Generated <li> elements go here, containing # links to each plugin's section in the list. -->
             </ol>
-            <li id="filtersToggle">Filters
         </ol>
     </nav>
     <div id="main">
@@ -126,7 +137,7 @@
         </blockquote>
     </div>
 
-    <div id="settings">
+    <div id="settings" class="hidden">
         <h1>Settings</h1>
         <form>
             <label for="defaultGameSelect">Default Game</label>
diff --git a/resources/report/script.js b/resources/report/script.js
index 37cc2ca0..5328f4bc 100644
--- a/resources/report/script.js
+++ b/resources/report/script.js
@@ -227,11 +227,10 @@ function processURLParams() {
             var activePluginNo = 0;
             var dirtyPluginNo = 0;
             /* Fill report with data. */
-            document.getElementById('lootVersion').textContent = data.lootVersion;
+            document.getElementById('LOOTVersion').textContent = data.lootVersion;
             document.getElementById('masterlistRevision').textContent = data.masterlist.revision;
             document.getElementById('masterlistDate').textContent = data.masterlist.date;
-            document.getElementById('masterlistUpdating').textContent = data.masterlist.updaterEnabled;
-            var generalMessagesList = document.getElementById('generalMessagesList');
+            var generalMessagesList = document.getElementById('generalMessages').getElementsByTagName('ul')[0];
             for (var i = 0; i < data.globalMessages.length; ++i) {
                 var li = document.createElement('li');
                 li.className = data.globalMessages[i].type;
@@ -246,11 +245,23 @@ function processURLParams() {
                 }
             }
             totalMessageNo = data.globalMessages.length;
-            var pluginsList = document.getElementById('pluginsList');
+            var pluginsList = document.getElementById('main');
+            var pluginsNav = document.getElementById('pluginsNav');
             for (var i = 0; i < data.plugins.length; ++i) {
-                var li = document.createElement('li');
+                var content, clone;
+                /* First add link to navbar. */
+                content = document.getElementById('pluginNav').content;
+                content.children[0].children[0].textContent = data.plugins[i].name;
+                content.children[0].children[0].href = '#' + data.plugins[i].name.replace(/\s+/g, '');
 
-                li.setAttribute('data-active', data.plugins[i].isActive);
+                clone = document.importNode(content, true);
+                pluginsNav.appendChild(clone);
+
+                var content = document.getElementById('pluginSection').content;
+                var section = content.children[0];
+
+                section.setAttribute('data-active', data.plugins[i].isActive);
+                section.id = data.plugins[i].name.replace(/\s+/g, '');
 
                 if (data.plugins[i].isActive) {
                     ++activePluginNo;
@@ -260,45 +271,36 @@ function processURLParams() {
                     ++dirtyPluginNo;
                 }
 
-                var mod = document.createElement('div');
-                mod.className = 'mod';
-                mod.textContent = data.plugins[i].name;
-                li.appendChild(mod);
+                section.children[0].textContent = data.plugins[i].name;
 
-                var crc = document.createElement('div');
-                crc.className = 'crc';
-                crc.textContent = 'CRC: ' + data.plugins[i].crc;
-                li.appendChild(crc);
+                section.children[1].textContent = 'CRC: ' + data.plugins[i].crc;
 
                 if (data.plugins[i].version) {
-                    var version = document.createElement('div');
-                    version.className = 'version';
-                    version.textContent = data.plugins[i].version;
-                    li.appendChild(version);
+                    section.children[2].textContent = data.plugins[i].version;
+                } else {
+                    section.children[2].className += ' hidden';
                 }
 
                 if (data.plugins[i].tagsAdd && data.plugins[i].tagsAdd.length != 0) {
-                    var tagAdd = document.createElement('div');
-                    tagAdd.className = 'tag add';
-                    tagAdd.textContent = data.plugins[i].tagsAdd.join(', ');
-                    li.appendChild(tagAdd);
+                    section.children[3].textContent = data.plugins[i].tagsAdd.join(', ');
+                } else {
+                    section.children[3].className += ' hidden';
                 }
 
                 if (data.plugins[i].tagRemove && data.plugins[i].tagRemove.length != 0) {
-                    var tagRemove = document.createElement('div');
-                    tagRemove.className = 'tag remove';
-                    tagRemove.textContent = data.plugins[i].tagsRemove.join(', ');
-                    li.appendChild(tagRemove);
+                    section.children[4].textContent = data.plugins[i].tagsRemove.join(', ');
+                } else {
+                    section.children[4].className += ' hidden';
                 }
 
+
                 if (data.plugins[i].messages && data.plugins[i].messages.length != 0) {
-                    var ul = document.createElement('ul');
                     for (var j = 0; j < data.plugins[i].messages.length; ++j) {
                         var messageLi = document.createElement('li');
                         messageLi.className = data.plugins[i].messages[j].type;
                         /* innerHTML is open to abuse, but for hyperlinking it's too useful. */
                         messageLi.innerHTML = data.plugins[i].messages[j].content;
-                        ul.appendChild(messageLi);
+                        section.children[5].appendChild(messageLi);
 
                         if (messageLi.className == 'warn') {
                             warnMessageNo++;
@@ -307,9 +309,11 @@ function processURLParams() {
                         }
                         totalMessageNo++;
                     }
-                    li.appendChild(ul);
+                } else {
+                    section.children[5].className += ' hidden';
                 }
-                pluginsList.appendChild(li);
+                clone = document.importNode(content, true);
+                pluginsList.appendChild(clone);
             }
             document.getElementById('filterTotalMessageNo').textContent = totalMessageNo;
             document.getElementById('totalMessageNo').textContent = totalMessageNo;
diff --git a/resources/report/style.css b/resources/report/style.css
index d64901c6..dcf27bcd 100644
--- a/resources/report/style.css
+++ b/resources/report/style.css
@@ -32,7 +32,7 @@ noscript {
     padding:10px 5px;
     color:white;
 }
-#nav {
+header {
     background:#e3e3e3;
     position:fixed;
     top:0;
@@ -40,7 +40,65 @@ noscript {
     z-index:2;
     box-shadow: 0 0 3px 1px rgba(0,0,0,0.5);
     width:100%;
+    height: 3em;
 }
+header ol {
+    display: inline-block;
+    margin:0;
+    padding:0;
+}
+header li{
+    display: inline-block;
+    padding: 0.75em 1em;
+    margin: 0;
+}
+header ol:last-child {
+    position: fixed;
+    right: 0;
+}
+header li:hover {
+    background: #ccc;
+}
+header img {
+    height: 2.5em;
+    width: 2.5em;
+    vertical-align: middle;
+    padding: 0 0.5em;
+}
+
+nav {
+    position: fixed;
+    top: 3em;
+    width: 20em;
+    height: calc(100% - 3em);
+}
+nav ol {
+    list-style-type: none;
+    height: calc(100% - 3em);
+}
+nav ol li:last-child, nav ol li:last-child ol {
+    height: calc(100% - 3em);
+    overflow: auto;
+}
+nav ol li {
+    padding: 1em;
+}
+
+#main {
+    position: absolute;
+    top: 3em;
+    left: 20em;
+}
+
+section {
+    background:white;
+    overflow:hidden;
+    margin:1em;
+    box-shadow:0 0 3px 0px rgba(0,0,0,0.5);
+    padding:1em;
+}
+
+
 .button {
     display:inline-table;
     cursor:pointer;
@@ -56,11 +114,6 @@ noscript {
     right:0;
     top:0;
 }
-#main {
-    position:absolute;
-    top:32px;
-    width:100%;
-}
 #summary, #plugins {
     padding:1em;
 }
