From a463a05607c89922af7e908b39aa897b8d23bfbf Mon Sep 17 00:00:00 2001 From: Jesse Plamondon-Willard Date: Sun, 3 Jun 2018 13:54:26 -0400 Subject: redesign log parser upload page This makes the instructions much more clear and prominent, so it should be more intuitive for players. The previous design often confused users because they saw the big textbox and ignored the little instructions above it. --- src/SMAPI.Web/wwwroot/Content/css/log-parser.css | 110 ++++------------------- src/SMAPI.Web/wwwroot/Content/js/log-parser.js | 90 ++++++------------- 2 files changed, 42 insertions(+), 158 deletions(-) (limited to 'src/SMAPI.Web/wwwroot/Content') diff --git a/src/SMAPI.Web/wwwroot/Content/css/log-parser.css b/src/SMAPI.Web/wwwroot/Content/css/log-parser.css index 25e874ac..482fc780 100644 --- a/src/SMAPI.Web/wwwroot/Content/css/log-parser.css +++ b/src/SMAPI.Web/wwwroot/Content/css/log-parser.css @@ -1,14 +1,6 @@ /********* ** Main layout *********/ -input[type="button"] { - font-size: 20px; - border-radius: 5px; - outline: none; - box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, .2); - cursor: pointer; -} - caption { text-align: left; padding-top: 2px; @@ -20,15 +12,6 @@ caption { font-family: monospace; } -input#upload-button { - background: #ccf; - border: 1px solid #000088; -} - -input#upload-button { - background: #eef; -} - table caption { font-weight: bold; } @@ -262,88 +245,19 @@ table#metadata, table#mods { /********* -** Upload popup +** Upload form *********/ -#upload-area .popup, -#upload-area #uploader { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: rgba(0, 0, 0, .33); - z-index: 2; - display: none; - padding: 5px; -} - -#upload-area #uploader:after { - content: attr(data-text); - display: block; - width: 100px; - height: 24px; - line-height: 25px; - border: 1px solid #000; - background: #fff; - position: absolute; - top: 50%; - left: 50%; - margin: -12px -50px 0 0; - font-size: 18px; - font-weight: bold; - text-align: center; - border-radius: 5px; -} - -#upload-area .popup h1 { - position: absolute; - top: 10%; - left: 50%; - margin-left: -150px; - text-align: center; - width: 300px; - border: 1px solid #008; - border-radius: 5px; - background: #fff; - font-family: sans-serif; - font-size: 40px; - margin-top: -25px; - z-index: 10; - border-bottom: 0; -} - -#upload-area .frame { - margin: auto; - margin-top: 25px; - padding: 2em; - position: absolute; - top: 10%; - left: 10%; - right: 10%; - bottom: 10%; - padding-bottom: 30px; - background: #FFF; - border-radius: 5px; - border: 1px solid #008; -} - -#upload-area #cancel { - border: 1px solid #880000; - background-color: #fcc; +#os-list { + list-style: none; } -#upload-area #submit { - border: 1px solid #008800; - background-color: #cfc; -} - -#upload-area #submit:hover { - background-color: #efe; +div[data-os] { + display: none; } -#upload-area #input { +#input { width: 100%; - height: 30em; + height: 20em; max-height: 70%; margin: auto; box-sizing: border-box; @@ -352,3 +266,13 @@ table#metadata, table#mods { outline: none; box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 192, .2); } + +#submit { + font-size: 1.5em; + border-radius: 5px; + outline: none; + box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, .2); + cursor: pointer; + border: 1px solid #008800; + background-color: #cfc; +} diff --git a/src/SMAPI.Web/wwwroot/Content/js/log-parser.js b/src/SMAPI.Web/wwwroot/Content/js/log-parser.js index c4a35e96..eba6451d 100644 --- a/src/SMAPI.Web/wwwroot/Content/js/log-parser.js +++ b/src/SMAPI.Web/wwwroot/Content/js/log-parser.js @@ -90,27 +90,36 @@ smapi.logParser = function (data, sectionUrl) { /********** ** Upload form *********/ - var error = $("#error"); - - $("#upload-button").on("click", function(e) { - e.preventDefault(); - - $("#input").val(""); - $("#popup-upload").fadeIn(); - }); - - var closeUploadPopUp = function() { - $("#popup-upload").fadeOut(400); - }; + // get elements + var systemOptions = $("input[name='os']"); + var systemInstructions = $("div[data-os]"); + var input = $("#input"); + var submit = $("#submit"); + + // instruction OS chooser + var chooseSystem = function() { + systemInstructions.hide(); + systemInstructions.filter("[data-os='" + $("input[name='os']:checked").val() + "']").show(); + } + systemOptions.on("click", chooseSystem); + chooseSystem(); + + // disable submit if it's empty + var toggleSubmit = function() + { + var hasText = !!input.val().trim(); + submit.prop("disabled", !hasText); + } + input.on("input", toggleSubmit); + toggleSubmit(); - $("#popup-upload").on({ + // drag & drop file + input.on({ 'dragover dragenter': function(e) { e.preventDefault(); e.stopPropagation(); }, 'drop': function(e) { - $("#uploader").attr("data-text", "Reading..."); - $("#uploader").show(); var dataTransfer = e.originalEvent.dataTransfer; if (dataTransfer && dataTransfer.files.length) { e.preventDefault(); @@ -119,59 +128,10 @@ smapi.logParser = function (data, sectionUrl) { var reader = new FileReader(); reader.onload = $.proxy(function(file, $input, event) { $input.val(event.target.result); - $("#uploader").fadeOut(); - $("#submit").click(); + toggleSubmit(); }, this, file, $("#input")); reader.readAsText(file); } - }, - 'click': function(e) { - if (e.target.id === "popup-upload") - closeUploadPopUp(); - } - }); - - $("#submit").on("click", function() { - $("#popup-upload").fadeOut(); - var paste = $("#input").val(); - if (paste) { - //memory = ""; - $("#uploader").attr("data-text", "Saving..."); - $("#uploader").fadeIn(); - $ - .ajax({ - type: "POST", - url: sectionUrl + "/save", - data: JSON.stringify(paste), - contentType: "application/json" // sent to API - }) - .fail(function(xhr, textStatus) { - $("#uploader").fadeOut(); - error.html('

Parsing failed!

Parsing of the log failed, details follow.
 

Stage: Upload

Error: ' + textStatus + ': ' + xhr.responseText + "
" + $("#input").val() + "
"); - }) - .then(function(data) { - $("#uploader").fadeOut(); - if (!data.success) - error.html('

Parsing failed!

Parsing of the log failed, details follow.
 

Stage: Upload

Error: ' + data.error + "
" + $("#input").val() + "
"); - else - location.href = (sectionUrl.replace(/\/$/, "") + "/" + data.id); - }); - } else { - alert("Unable to parse log, the input is empty!"); - $("#uploader").fadeOut(); - } - }); - - $(document).on("keydown", function(e) { - if (e.which === 27) { - if ($("#popup-upload").css("display") !== "none" && $("#popup-upload").css("opacity") === 1) { - closeUploadPopUp(); - } } }); - $("#cancel").on("click", closeUploadPopUp); - - if (data.showPopup) - $("#popup-upload").fadeIn(); - }; -- cgit