From 281b08433c4df3dfd3f91b18b3b8838be60c7100 Mon Sep 17 00:00:00 2001
From: WrinklyNinja <wrinklyninja1@gmail.com>
Date: Sat, 17 May 2014 22:49:01 +0100
Subject: [PATCH] Switched to flexbox for sidebar + main layout.

Praise Vectron!
---
 resources/report/report.html | 114 ++++++++++++++++++-----------------
 resources/report/style.css   |  17 +++---
 2 files changed, 68 insertions(+), 63 deletions(-)

diff --git a/resources/report/report.html b/resources/report/report.html
index e2802f28..cf266daa 100644
--- a/resources/report/report.html
+++ b/resources/report/report.html
@@ -92,63 +92,65 @@
             <li data-action="cancel-sort" class="hidden">Cancel
         </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. -->
+    <div id="container">
+        <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>
+                <ol id="filters" class="hidden" data-replace="pluginsNav">
+                    <input type="checkbox" id="hideVersionNumbers" data-class="version" />
+                    <label for="hideVersionNumbers">Hide version numbers</label><br>
+                    <input type="checkbox" id="hideCRCs" data-class="crc" />
+                    <label for="hideCRCs">Hide CRCs</label><br>
+                    <input type="checkbox" id="hideBashTags" data-class="tag" />
+                    <label for="hideBashTags">Hide Bash Tags</label><br>
+                    <input type="checkbox" id="hideNotes" />
+                    <label for="hideNotes">Hide notes</label><br>
+                    <input type="checkbox" id="hideDoNotCleanMessages" />
+                    <label for="hideDoNotCleanMessages">Hide 'Do not clean' messages</label><br>
+                    <input type="checkbox" id="hideInactivePluginMessages" />
+                    <label for="hideInactivePluginMessages">Hide inactive plugin messages</label><br>
+                    <input type="checkbox" id="hideAllPluginMessages" />
+                    <label for="hideAllPluginMessages">Hide all plugin messages</label><br>
+                    <input type="checkbox" id="hideMessagelessPlugins" />
+                    <label for="hideMessagelessPlugins">Hide messageless plugins</label><br>
+                    <div>
+                        <span>Hidden plugins</span>: <span id="hiddenPluginNo">0</span> / <span id="totalPluginNo"></span>
+                    </div>
+                    <div>
+                        <span>Hidden messages</span>: <span id="hiddenMessageNo">0</span> / <span id="filterTotalMessageNo"></span>
+                    </div>
+                </ol>
+                <li data-action="view-ui" data-target="filters">Filters
             </ol>
-            <ol id="filters" class="hidden" data-replace="pluginsNav">
-                <input type="checkbox" id="hideVersionNumbers" data-class="version" />
-                <label for="hideVersionNumbers">Hide version numbers</label><br>
-                <input type="checkbox" id="hideCRCs" data-class="crc" />
-                <label for="hideCRCs">Hide CRCs</label><br>
-                <input type="checkbox" id="hideBashTags" data-class="tag" />
-                <label for="hideBashTags">Hide Bash Tags</label><br>
-                <input type="checkbox" id="hideNotes" />
-                <label for="hideNotes">Hide notes</label><br>
-                <input type="checkbox" id="hideDoNotCleanMessages" />
-                <label for="hideDoNotCleanMessages">Hide 'Do not clean' messages</label><br>
-                <input type="checkbox" id="hideInactivePluginMessages" />
-                <label for="hideInactivePluginMessages">Hide inactive plugin messages</label><br>
-                <input type="checkbox" id="hideAllPluginMessages" />
-                <label for="hideAllPluginMessages">Hide all plugin messages</label><br>
-                <input type="checkbox" id="hideMessagelessPlugins" />
-                <label for="hideMessagelessPlugins">Hide messageless plugins</label><br>
-                <div>
-                    <span>Hidden plugins</span>: <span id="hiddenPluginNo">0</span> / <span id="totalPluginNo"></span>
-                </div>
-                <div>
-                    <span>Hidden messages</span>: <span id="hiddenMessageNo">0</span> / <span id="filterTotalMessageNo"></span>
-                </div>
-            </ol>
-            <li data-action="view-ui" data-target="filters">Filters
-        </ol>
-    </nav>
-    <div id="main">
-        <section id="summary">
-            <h1>Summary</h1>
-            <table>
-                <tbody>
-                    <tr><td>Masterlist Revision<td id="masterlistRevision">
-                    <tr><td>Masterlist Date<td id="masterlistDate">
-                    <tr><td>Warnings<td id="totalWarningNo">
-                    <tr><td>Errors<td id="totalErrorNo">
-                    <tr><td>Total Messages<td id="totalMessageNo">
-                    <tr><td>Active Plugins<td id="activePluginNo">
-                    <tr><td>Dirty Plugins<td id="dirtyPluginNo">
-                    <tr><td>Total Plugins<td id="totalPluginNo">
-            </table>
-        </section>
-        <section id="generalMessages">
-            <h1>General Messages</h1>
-            <ul>
-                <!-- Generated message <li> elements go here. -->
-            </ul>
-        </section>
-        <!-- Generated plugin #pluginSection elements go here. -->
+        </nav>
+        <div id="main">
+            <section id="summary">
+                <h1>Summary</h1>
+                <table>
+                    <tbody>
+                        <tr><td>Masterlist Revision<td id="masterlistRevision">
+                        <tr><td>Masterlist Date<td id="masterlistDate">
+                        <tr><td>Warnings<td id="totalWarningNo">
+                        <tr><td>Errors<td id="totalErrorNo">
+                        <tr><td>Total Messages<td id="totalMessageNo">
+                        <tr><td>Active Plugins<td id="activePluginNo">
+                        <tr><td>Dirty Plugins<td id="dirtyPluginNo">
+                        <tr><td>Total Plugins<td id="totalPluginNo">
+                </table>
+            </section>
+            <section id="generalMessages">
+                <h1>General Messages</h1>
+                <ul>
+                    <!-- Generated message <li> elements go here. -->
+                </ul>
+            </section>
+            <!-- Generated plugin #pluginSection elements go here. -->
+        </div>
     </div>
 
     <div id="about" class="hidden" data-overlay="1">
diff --git a/resources/report/style.css b/resources/report/style.css
index 9eb99783..f06092d2 100644
--- a/resources/report/style.css
+++ b/resources/report/style.css
@@ -93,11 +93,18 @@ header > ol > li > ol > li {
     left: 235px;
 }
 
-nav {
+#container {
     position: fixed;
     top: 3em;
-    width: 20em;
     height: calc(100% - 3em);
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    width: 100%;
+}
+nav {
+    height: 100%;
 }
 nav > ol {
     padding-left: 1em;
@@ -136,12 +143,8 @@ nav a {
 }
 
 #main {
-    position: absolute;
-    top: 3em;
-    left: 20em;
-    right:0;
-    height: calc(100% - 3em);
     overflow: auto;
+    flex-shrink: 10;
 }
 
 section, #settings, #about {