From 3927014d701bf7ee1a824ccaf613fb7ca2f8185d Mon Sep 17 00:00:00 2001
From: Jesse Plamondon-Willard <github@jplamondonw.com>
Date: Sat, 2 Dec 2017 01:26:28 -0500
Subject: redesign log parser filters

---
 src/SMAPI.Web/Views/LogParser/Index.cshtml       | 77 ++++++++++++------------
 src/SMAPI.Web/wwwroot/Content/css/log-parser.css | 43 +++----------
 src/SMAPI.Web/wwwroot/Content/js/log-parser.js   |  2 +-
 3 files changed, 45 insertions(+), 77 deletions(-)

(limited to 'src')

diff --git a/src/SMAPI.Web/Views/LogParser/Index.cshtml b/src/SMAPI.Web/Views/LogParser/Index.cshtml
index a18586a9..50e86ee6 100644
--- a/src/SMAPI.Web/Views/LogParser/Index.cshtml
+++ b/src/SMAPI.Web/Views/LogParser/Index.cshtml
@@ -23,49 +23,46 @@
 @if (Model.PasteID != null)
 {
     <h2>Parsed log</h2>
-    <ul id="filters">
-        <li>TRACE</li>
-        <li>DEBUG</li>
-        <li class="active">INFO</li>
-        <li class="active">ALERT</li>
-        <li class="active">WARN</li>
-        <li class="active">ERROR</li>
-        <li class="notice">Click tabs to toggle message visibility</li>
-    </ul>
 }
 <div id="output" class="trace debug">
-    <div id="log-data" style="display: none;">
-        <div class="always">
-            <table id="gameinfo">
-                <caption>Game info:</caption>
-                <tr>
-                    <td>SMAPI Version</td>
-                    <td id="api-version"></td>
-                </tr>
-                <tr>
-                    <td>Game Version</td>
-                    <td id="game-version"></td>
-                </tr>
-                <tr>
-                    <td>Platform</td>
-                    <td id="platform"></td>
-                </tr>
-                <tr>
-                    <td>Mods path</td>
-                    <td id="mods-path"></td>
-                </tr>
-                <tr>
-                    <td>Log started</td>
-                    <td id="log-started"></td>
-                </tr>
-            </table>
-            <br />
-            <table id="modslist">
-                <caption>Installed Mods: <span id="modlink-r" class="notice btn">Remove all mod filters</span><span class="notice txt"><i>Click any mod to filter</i></span> <span id="modlink-a" class="notice btn txt">Select all</span></caption>
-            </table>
+    @if (Model.PasteID != null)
+    {
+        <div id="log-data" style="display: none;">
+            <div class="always">
+                <table id="gameinfo">
+                    <caption>Game info:</caption>
+                    <tr>
+                        <td>SMAPI Version</td>
+                        <td id="api-version"></td>
+                    </tr>
+                    <tr>
+                        <td>Game Version</td>
+                        <td id="game-version"></td>
+                    </tr>
+                    <tr>
+                        <td>Platform</td>
+                        <td id="platform"></td>
+                    </tr>
+                    <tr>
+                        <td>Mods path</td>
+                        <td id="mods-path"></td>
+                    </tr>
+                    <tr>
+                        <td>Log started</td>
+                        <td id="log-started"></td>
+                    </tr>
+                </table>
+                <br/>
+                <table id="modslist">
+                    <caption>Installed Mods: <span id="modlink-r" class="notice btn">Remove all mod filters</span><span class="notice txt"><i>Click any mod to filter</i></span> <span id="modlink-a" class="notice btn txt">Select all</span></caption>
+                </table>
+                <div id="filters">
+                    Filter messages: <span>TRACE</span> | <span>DEBUG</span> | <span class="active">INFO</span> | <span class="active">ALERT</span> | <span class="active">WARN</span> | <span class="active">ERROR</span>
+                </div>
+            </div>
+            <table id="log"></table>
         </div>
-        <table id="log"></table>
-    </div>
+    }
     <div id="error" class="color-red"></div>
 </div>
 <script class="template" id="template-css" type="text/html">
diff --git a/src/SMAPI.Web/wwwroot/Content/css/log-parser.css b/src/SMAPI.Web/wwwroot/Content/css/log-parser.css
index 9affa79e..9f07f9e8 100644
--- a/src/SMAPI.Web/wwwroot/Content/css/log-parser.css
+++ b/src/SMAPI.Web/wwwroot/Content/css/log-parser.css
@@ -125,66 +125,37 @@ input[type="button"] {
 }
 
 #filters {
-    border-bottom: 0;
-    display: block;
-    margin: 0;
+    margin: 1em 0 0 0;
     padding: 0;
-    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(210, 235, 249, 1) 100%);
 }
 
-#filters li {
-    margin: 5px 1px 0 0;
-    height: 25px;
+#filters span {
+    padding: 3px 1em;
     display: inline-block;
-    width: 75px;
     border: 1px solid #000000;
-    border-bottom: 0;
-    border-radius: 5px 5px 0 0;
-    text-align: center;
+    border-radius: 3px;
     font-family: monospace;
-    font-size: 18px;
     cursor: pointer;
     font-weight: bold;
     color: #000;
-    text-shadow: 0px 0px 2px #fff;
     border-color: #880000;
     background-color: #fcc;
-    box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, .2);
 }
 
-#filters li:hover {
+#filters span:hover {
     background-color: #fee;
 }
 
-#filters li:first-child {
-    margin-left: 5px;
-}
-
-#filters li.active {
+#filters span.active {
     background: #cfc;
     border-color: #008800;
 }
 
-#filters li.active:hover {
+#filters span.active:hover {
     background: #efe;
 }
 
-#filters li.notice {
-    color: #000000;
-    background: transparent;
-    border: 0;
-    padding-top: 1px;
-    font-size: 13px;
-    font-weight: normal;
-    width: auto;
-    margin-left: 5px;
-    cursor: default;
-    box-shadow: none;
-    font-style: italic;
-}
-
 #output {
-    border-top: 1px solid #888;
     padding: 10px;
     overflow: auto;
     font-family: monospace;
diff --git a/src/SMAPI.Web/wwwroot/Content/js/log-parser.js b/src/SMAPI.Web/wwwroot/Content/js/log-parser.js
index 95949a8b..6cce1ce9 100644
--- a/src/SMAPI.Web/wwwroot/Content/js/log-parser.js
+++ b/src/SMAPI.Web/wwwroot/Content/js/log-parser.js
@@ -27,7 +27,7 @@ smapi.logParser = function(sectionUrl, pasteID) {
         regexDate = /\[\d{2}:\d{2}:\d{2} TRACE SMAPI\] Log started at (.*?) UTC/g,
         regexPath = /\[\d{2}:\d{2}:\d{2} DEBUG SMAPI\] Mods go here: (.*?)(?:\n|$)/g;
 
-    $("#filters li").on("click", function(evt) {
+    $("#filters span").on("click", function(evt) {
         var t = $(evt.currentTarget);
         t.toggleClass("active");
         output.toggleClass(t.text().toLowerCase());
-- 
cgit