diff options
author | Jesse Plamondon-Willard <github@jplamondonw.com> | 2017-10-27 19:38:37 -0400 |
---|---|---|
committer | Jesse Plamondon-Willard <github@jplamondonw.com> | 2017-10-27 19:38:37 -0400 |
commit | 467b9aa2df8532aa3cb94c84307c7012573d61d4 (patch) | |
tree | 4df61e0ffe828f705bc1df954d313a78c3fdaed3 /src | |
parent | 9f5af37391ac196fe183122f57496846843335cd (diff) | |
download | SMAPI-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.cshtml | 197 | ||||
-rw-r--r-- | src/SMAPI.Web/wwwroot/Content/css/log-parser.css | 77 | ||||
-rw-r--r-- | src/SMAPI.Web/wwwroot/Content/js/log-parser.js | 2 |
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(); |