summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorJesse Plamondon-Willard <github@jplamondonw.com>2017-10-27 19:38:37 -0400
committerJesse Plamondon-Willard <github@jplamondonw.com>2017-10-27 19:38:37 -0400
commit467b9aa2df8532aa3cb94c84307c7012573d61d4 (patch)
tree4df61e0ffe828f705bc1df954d313a78c3fdaed3 /src
parent9f5af37391ac196fe183122f57496846843335cd (diff)
downloadSMAPI-467b9aa2df8532aa3cb94c84307c7012573d61d4.tar.gz
SMAPI-467b9aa2df8532aa3cb94c84307c7012573d61d4.tar.bz2
SMAPI-467b9aa2df8532aa3cb94c84307c7012573d61d4.zip
integrate prototype into page layout (#358)
Diffstat (limited to 'src')
-rw-r--r--src/SMAPI.Web/Views/LogParser/Index.cshtml197
-rw-r--r--src/SMAPI.Web/wwwroot/Content/css/log-parser.css77
-rw-r--r--src/SMAPI.Web/wwwroot/Content/js/log-parser.js2
3 files changed, 122 insertions, 154 deletions
diff --git a/src/SMAPI.Web/Views/LogParser/Index.cshtml b/src/SMAPI.Web/Views/LogParser/Index.cshtml
index 021293b6..87a3962b 100644
--- a/src/SMAPI.Web/Views/LogParser/Index.cshtml
+++ b/src/SMAPI.Web/Views/LogParser/Index.cshtml
@@ -6,114 +6,107 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.4.4/lz-string.min.js" crossorigin="anonymous"></script>
<script src="~/Content/js/log-parser.js"></script>
+ <style type="text/css" id="modflags"></style>
}
-<h2>How to share a SMAPI log</h2>
-<ol>
- <li><a href="https://stardewvalleywiki.com/Modding:Player_FAQs#SMAPI_log">Find your SMAPI log</a>.</li>
- <li>Click the file and drag it onto the upload form below (or paste the text in).</li>
- <li>Click <em>Parse</em>.</li>
- <li>Share the link you get back.</li>
-</ol>
+@*********
+** Intro
+*********@
+<p id="blurb">This page lets you upload, view, and share a SMAPI log to help troubleshoot mod issues.</p>
+<input type="button" id="upload-button" value="Share a new log" />
<h2>Parsed log</h2>
-<em>TODO</em>
-
-<!DOCTYPE html>
-<html>
-<head>
- <title>SMAPI log parser</title>
- <style type="text/css" id="modflags"></style>
-</head>
-<body>
- <ul id="tabs">
- <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>
- <li class="upload" id="upload">UPLOAD</li>
- </ul>
- <div id="output" class="trace debug"></div>
- <script class="template" id="template-body" type="text/html">
- <div class="always">
- <table id="gameinfo">
- <caption>Game info:</caption>
- <tr>
- <td>SMAPI Version</td>
- <td>{0}</td>
- </tr>
- <tr>
- <td>Game Version</td>
- <td>{1}</td>
- </tr>
- <tr>
- <td>Platform</td>
- <td>{2}</td>
- </tr>
- <tr>
- <td>Mods path</td>
- <td>{4}</td>
- </tr>
- <tr>
- <td>Log started</td>
- <td>{3}</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>
- <table id="log"></table>
- </script>
- <script class="template" id="template-css" type="text/html">
- #output.modfilter:not(.mod-{0}) .mod-{0} { display:none; } #output.modfilter.mod-{0} #modslist tr { background:#ffeeee; } #output.modfilter.mod-{0} #modslist tr#modlink-{0} { background:#eeffee; }
- </script>
- <script class="template" id="template-modentry" type="text/html">
- <tr id="modlink-{0}">
- <td>{1}</td>
- <td>{2}</td>
- <td>{3}</td>
- <td class={4}>{5}</td>
- </tr>
- </script>
- <script class="template" id="template-logentry" type="text/html">
- <tr class="{0} mod mod-{1}">
- <td>{2}</td>
- <td>{3}</td>
- <td data-title="{4}">{4}</td>
- <td>{5}</td>
- </tr>
- </script>
- <script class="template" id="template-lognotice" type="text/html">
- <tr class="{0} mod-repeat mod mod-{1}">
- <td colspan="3"></td>
- <td><i>repeats [{2}] times.</i></td>
- </tr>
- </script>
- <div id="popup-upload" class="popup">
- <h1>Upload log file</h1>
- <div class="frame">
- <textarea id="input" placeholder="Paste or drag a text file here to upload"></textarea>
- <div class="buttons">
- <input type="button" id="submit" value="Parse" />
- <input type="button" id="cancel" value="Cancel" />
- </div>
+<ul id="tabs">
+ <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>
+<script class="template" id="template-body" type="text/html">
+ <div class="always">
+ <table id="gameinfo">
+ <caption>Game info:</caption>
+ <tr>
+ <td>SMAPI Version</td>
+ <td>{0}</td>
+ </tr>
+ <tr>
+ <td>Game Version</td>
+ <td>{1}</td>
+ </tr>
+ <tr>
+ <td>Platform</td>
+ <td>{2}</td>
+ </tr>
+ <tr>
+ <td>Mods path</td>
+ <td>{4}</td>
+ </tr>
+ <tr>
+ <td>Log started</td>
+ <td>{3}</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>
+ <table id="log"></table>
+</script>
+<script class="template" id="template-css" type="text/html">
+ #output.modfilter:not(.mod-{0}) .mod-{0} { display:none; } #output.modfilter.mod-{0} #modslist tr { background:#ffeeee; } #output.modfilter.mod-{0} #modslist tr#modlink-{0} { background:#eeffee; }
+</script>
+<script class="template" id="template-modentry" type="text/html">
+ <tr id="modlink-{0}">
+ <td>{1}</td>
+ <td>{2}</td>
+ <td>{3}</td>
+ <td class={4}>{5}</td>
+ </tr>
+</script>
+<script class="template" id="template-logentry" type="text/html">
+ <tr class="{0} mod mod-{1}">
+ <td>{2}</td>
+ <td>{3}</td>
+ <td data-title="{4}">{4}</td>
+ <td>{5}</td>
+ </tr>
+</script>
+<script class="template" id="template-lognotice" type="text/html">
+ <tr class="{0} mod-repeat mod mod-{1}">
+ <td colspan="3"></td>
+ <td><i>repeats [{2}] times.</i></td>
+ </tr>
+</script>
+<div id="popup-upload" class="popup">
+ <h1>Upload log file</h1>
+ <div class="frame">
+ <ol>
+ <li><a href="https://stardewvalleywiki.com/Modding:Player_FAQs#SMAPI_log" target="_blank">Find your SMAPI log</a>.</li>
+ <li>Drag the file onto the textbox below (or paste the text in).</li>
+ <li>Click <em>Parse</em>.</li>
+ <li>Share the link you get back.</li>
+ </ol>
+ <textarea id="input" placeholder="Paste or drag the log here"></textarea>
+ <div class="buttons">
+ <input type="button" id="submit" value="Parse"/>
+ <input type="button" id="cancel" value="Cancel"/>
</div>
</div>
- <div id="popup-raw" class="popup">
- <h1>Raw log file</h1>
- <div class="frame">
- <textarea id="dataraw"></textarea>
- <div class="buttons">
- <input type="button" id="closeraw" value="Close" />
- </div>
+</div>
+<div id="popup-raw" class="popup">
+ <h1>Raw log file</h1>
+ <div class="frame">
+ <textarea id="dataraw"></textarea>
+ <div class="buttons">
+ <input type="button" id="closeraw" value="Close" />
</div>
</div>
- <div id="uploader"></div>
-</body>
-</html>
+</div>
+<div id="uploader"></div>
diff --git a/src/SMAPI.Web/wwwroot/Content/css/log-parser.css b/src/SMAPI.Web/wwwroot/Content/css/log-parser.css
index 0aff5b81..afa79a65 100644
--- a/src/SMAPI.Web/wwwroot/Content/css/log-parser.css
+++ b/src/SMAPI.Web/wwwroot/Content/css/log-parser.css
@@ -1,16 +1,7 @@
-body {
- font-size: 10pt;
- background: #fff;
-}
-
.mod-repeat {
font-size: 8pt;
}
-input[type="button"] {
- cursor: pointer;
-}
-
.template {
display: none;
}
@@ -27,6 +18,16 @@ input[type="button"] {
padding: 5px;
}
+#upload-button {
+ background: #ccf;
+ border: 1px solid #000088;
+}
+
+#upload-button {
+ background: #eef;
+}
+
+
#uploader:after {
content: attr(data-text);
display: block;
@@ -58,50 +59,45 @@ input[type="button"] {
font-family: sans-serif;
font-size: 40px;
margin-top: -25px;
+ z-index: 10;
+ border-bottom: 0;
}
.frame {
margin: auto;
margin-top: 25px;
+ padding: 2em;
position: absolute;
top: 10%;
left: 10%;
right: 10%;
bottom: 10%;
padding-bottom: 30px;
-}
-
-.buttons {
- position: absolute;
- display: inline-block;
- bottom: -10px;
- right: 0px;
- padding: 5px;
- border: 1px solid #008;
+ background: #FFF;
border-radius: 5px;
- background: #fff;
+ border: 1px solid #008;
}
-#cancel, #closeraw {
+input[type="button"] {
font-size: 20px;
border-radius: 5px;
- border: 1px solid #880000;
- background-color: #fcc;
outline: none;
box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, .2);
+ cursor: pointer;
}
-#cancel:hover, #closeraw:hover {
+#input[type="button"]:hover {
background-color: #fee;
}
+#cancel, #closeraw {
+ border: 1px solid #880000;
+ background-color: #fcc;
+}
+
#submit {
- font-size: 20px;
- border-radius: 5px;
border: 1px solid #008800;
background-color: #cfc;
- outline: none;
- box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, .2);
}
#submit:hover {
@@ -109,9 +105,9 @@ input[type="button"] {
}
#input, #dataraw {
- width: 100%;
- height: 100%;
- max-width: 100%;
+ width: 80%;
+ height: 30em;
+ max-width: 80%;
max-height: 100%;
margin: auto;
box-sizing: border-box;
@@ -130,12 +126,8 @@ input[type="button"] {
}
#tabs {
- top: 0px;
- left: 0px;
- right: 0px;
border-bottom: 0;
display: block;
- position: fixed;
margin: 0;
padding: 0;
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(210, 235, 249, 1) 100%);
@@ -144,7 +136,6 @@ input[type="button"] {
#tabs li {
margin: 5px 1px 0 0;
height: 25px;
- float: left;
display: inline-block;
width: 75px;
border: 1px solid #000000;
@@ -179,17 +170,6 @@ input[type="button"] {
background: #efe;
}
-#tabs li.upload {
- float: right;
- background: #ccf;
- border-color: #000088;
- margin-right: 5px;
-}
-
-#tabs li.upload:hover {
- background: #eef;
-}
-
#tabs li.notice {
color: #000000;
background: transparent;
@@ -206,11 +186,6 @@ input[type="button"] {
#output {
border-top: 1px solid #888;
- position: fixed;
- top: 30px;
- left: 0px;
- right: 0px;
- bottom: 0px;
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 2d095787..a1d07a78 100644
--- a/src/SMAPI.Web/wwwroot/Content/js/log-parser.js
+++ b/src/SMAPI.Web/wwwroot/Content/js/log-parser.js
@@ -196,7 +196,7 @@ $(function() {
t.toggleClass("active");
$("#output").toggleClass(t.text().toLowerCase());
})
- $("#upload").on("click", function() {
+ $("#upload-button").on("click", function() {
memory = $("#input").val() || "";
$("#input").val("");
$("#popup-upload").fadeIn();