9 files changed, 209 insertions, 179 deletions

diff --git a/src/SMAPI.Web/wwwroot/Content/css/index.css b/src/SMAPI.Web/wwwroot/Content/css/index.css
index 06cd6fb4..514e1a5c 100644
--- a/src/SMAPI.Web/wwwroot/Content/css/index.css
+++ b/src/SMAPI.Web/wwwroot/Content/css/index.css
@@ -18,7 +18,8 @@ h1 {
     text-align: center;
 }
 
-#call-to-action a {
+#call-to-action a.main-cta,
+#call-to-action a.secondary-cta {
     box-shadow: #caefab 0 1px 0 0 inset;
     background: linear-gradient(#77d42a 5%, #5cb811 100%) #77d42a;
     border-radius: 6px;
@@ -40,6 +41,58 @@ h1 {
     text-shadow: #2b665e 0 1px 0;
 }
 
+.cta-dropdown {
+    position: relative;
+    display: inline-block;
+    margin-bottom: 1em;
+}
+
+.cta-dropdown a.download {
+    margin-bottom: 0 !important;
+}
+
+.cta-dropdown .dropdown-content {
+    display: none;
+    position: absolute;
+    text-align: left;
+    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+    border: 1px solid #566963;
+    background: #5cb811;
+    border-top: 0;
+    border-radius: 0 0 6px 6px;
+    margin-top: -6px;
+    z-index: 1;
+}
+
+.cta-dropdown .dropdown-content a:hover {
+    background-color: #ddd;
+}
+
+.cta-dropdown .dropdown-content img {
+    width: 0.85em;
+    height: 0.85em;
+}
+
+.cta-dropdown.secondary-cta-dropdown .dropdown-content a:hover {
+    background-color: #566963;
+}
+
+.cta-dropdown.secondary-cta-dropdown .dropdown-content {
+    background-color: #768d87;
+    border-color: #566963;
+}
+
+.cta-dropdown.secondary-cta-dropdown .dropdown-content a {
+    color: #fff;
+    text-shadow: #2b665e 0 1px 0;
+}
+
+.cta-dropdown .dropdown-content a {
+    padding: 0.75em 1em;
+    text-decoration: none;
+    display: block;
+}
+
 /*********
 ** Subsections
 *********/
@@ -48,10 +101,6 @@ h1 {
     padding-left: 1em;
 }
 
-.github-description .noinclude {
-    display: none;
-}
-
 #support-links li small {
     display: block;
     width: 50em;
diff --git a/src/SMAPI.Web/wwwroot/Content/css/log-parser.css b/src/SMAPI.Web/wwwroot/Content/css/log-parser.css
index 789274e2..1fcd1bff 100644
--- a/src/SMAPI.Web/wwwroot/Content/css/log-parser.css
+++ b/src/SMAPI.Web/wwwroot/Content/css/log-parser.css
@@ -1,12 +1,8 @@
 /*********
 ** 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;
+#content {
+    max-width: 100%;
 }
 
 caption {
@@ -20,15 +16,6 @@ caption {
     font-family: monospace;
 }
 
-input#upload-button {
-    background: #ccf;
-    border: 1px solid #000088;
-}
-
-input#upload-button {
-    background: #eef;
-}
-
 table caption {
     font-weight: bold;
 }
@@ -39,6 +26,7 @@ table caption {
 .banner {
     border: 2px solid gray;
     border-radius: 5px;
+    margin-top: 1em;
     padding: 1em;
 }
 
@@ -91,6 +79,10 @@ table#metadata, table#mods {
     cursor: pointer;
 }
 
+#mods.filters-disabled tr {
+    cursor: default;
+}
+
 #metadata tr,
 #mods tr {
     background: #eee
@@ -200,6 +192,12 @@ table#metadata, table#mods {
     color: #f00;
 }
 
+#log .critical {
+    background-color: #c00;
+    color: #fff;
+    font-weight: bold;
+}
+
 #log {
     border-spacing: 0;
 }
@@ -256,88 +254,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;
+#os-list {
+    list-style: none;
 }
 
-#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;
-}
-
-#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;
@@ -346,3 +275,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/css/main.css b/src/SMAPI.Web/wwwroot/Content/css/main.css
index d1fa49e0..57eeee88 100644
--- a/src/SMAPI.Web/wwwroot/Content/css/main.css
+++ b/src/SMAPI.Web/wwwroot/Content/css/main.css
@@ -28,7 +28,8 @@ h2 {
 h3 {
     font-size: 1.2em;
     border-bottom: 1px solid #AAA;
-    width: 50%;
+    width: 55em;
+    max-width: 100%;
 }
 
 a {
@@ -44,6 +45,8 @@ a {
 
 #content {
     min-height: 140px;
+    width: calc(100% - 2em);
+    max-width: 60em;
     padding: 0 1em 1em 1em;
     border-left: 1px solid #CCC;
     background: #FFF;
@@ -51,7 +54,7 @@ a {
 }
 
 #content p {
-    max-width: 55em;
+    max-width: 100%;
 }
 
 .section {
@@ -105,3 +108,34 @@ a {
 #footer a {
     color: #669;
 }
+
+/* mobile fixes */
+@media (min-width: 1020px) and (max-width: 1199px) {
+    #sidebar {
+        width: 7em;
+        background: none;
+    }
+
+    #content-column {
+        left: 7em;
+    }
+}
+
+@media (max-width: 1019px) {
+    h1 {
+        margin-top: 0;
+    }
+
+    #sidebar {
+        margin-top: 0;
+        width: auto;
+        min-height: 0;
+        background: none;
+    }
+
+    #content-column {
+        position: inherit;
+        top: inherit;
+        left: inherit;
+    }
+}
diff --git a/src/SMAPI.Web/wwwroot/Content/images/direct-download-icon.png b/src/SMAPI.Web/wwwroot/Content/images/direct-download-icon.png
new file mode 100644
index 00000000..6c30ca36
--- /dev/null
+++ b/src/SMAPI.Web/wwwroot/Content/images/direct-download-icon.png
diff --git a/src/SMAPI.Web/wwwroot/Content/images/nexus-icon.png b/src/SMAPI.Web/wwwroot/Content/images/nexus-icon.png
new file mode 100644
index 00000000..10c66712
--- /dev/null
+++ b/src/SMAPI.Web/wwwroot/Content/images/nexus-icon.png
diff --git a/src/SMAPI.Web/wwwroot/Content/images/pufferchick-cool.png b/src/SMAPI.Web/wwwroot/Content/images/pufferchick-cool.png
new file mode 100644
index 00000000..f359146c
--- /dev/null
+++ b/src/SMAPI.Web/wwwroot/Content/images/pufferchick-cool.png
diff --git a/src/SMAPI.Web/wwwroot/Content/images/pufferchick.png b/src/SMAPI.Web/wwwroot/Content/images/pufferchick.png
new file mode 100644
index 00000000..1de9cf47
--- /dev/null
+++ b/src/SMAPI.Web/wwwroot/Content/images/pufferchick.png
diff --git a/src/SMAPI.Web/wwwroot/Content/js/index.js b/src/SMAPI.Web/wwwroot/Content/js/index.js
new file mode 100644
index 00000000..d0734b02
--- /dev/null
+++ b/src/SMAPI.Web/wwwroot/Content/js/index.js
@@ -0,0 +1,34 @@
+$(document).ready(function () {
+    /* enable pufferchick */
+    var pufferchick = $("#pufferchick");
+    $(".cta-dropdown").hover(
+        function () {
+            pufferchick.attr("src", "Content/images/pufferchick-cool.png");
+        },
+        function () {
+            pufferchick.attr("src", "Content/images/pufferchick.png");
+        }
+    );
+
+    /* enable download dropdowns */
+    $(".cta-dropdown a.download").each(function(i, button) {
+        button = $(button);
+        var wrapper = button.parent(".cta-dropdown");
+        var button = wrapper.find(".download");
+        var dropdownContent = wrapper.find(".dropdown-content");
+
+        $(window).on("click", function(e) {
+            var target = $(e.target);
+
+            // toggle dropdown on button click
+            if (target.is(button) || $.contains(button.get(0), target.get(0))) {
+                e.preventDefault();
+                dropdownContent.toggle();
+            }
+
+            // else hide dropdown
+            else
+                dropdownContent.hide();
+        });
+    });
+});
diff --git a/src/SMAPI.Web/wwwroot/Content/js/log-parser.js b/src/SMAPI.Web/wwwroot/Content/js/log-parser.js
index c4a35e96..0c654205 100644
--- a/src/SMAPI.Web/wwwroot/Content/js/log-parser.js
+++ b/src/SMAPI.Web/wwwroot/Content/js/log-parser.js
@@ -39,11 +39,17 @@ smapi.logParser = function (data, sectionUrl) {
             }
         },
         methods: {
-            toggleLevel: function(id) {
+            toggleLevel: function (id) {
+                if (!data.enableFilters)
+                    return;
+
                 this.showLevels[id] = !this.showLevels[id];
             },
 
             toggleMod: function (id) {
+                if (!data.enableFilters)
+                    return;
+
                 var curShown = this.showMods[id];
 
                 // first filter: only show this by default
@@ -64,6 +70,9 @@ smapi.logParser = function (data, sectionUrl) {
             },
 
             showAllMods: function () {
+                if (!data.enableFilters)
+                    return;
+
                 for (var key in this.showMods) {
                     if (this.showMods.hasOwnProperty(key)) {
                         this.showMods[key] = true;
@@ -73,6 +82,9 @@ smapi.logParser = function (data, sectionUrl) {
             },
 
             hideAllMods: function () {
+                if (!data.enableFilters)
+                    return;
+
                 for (var key in this.showMods) {
                     if (this.showMods.hasOwnProperty(key)) {
                         this.showMods[key] = false;
@@ -90,88 +102,50 @@ 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);
-    };
-
-    $("#popup-upload").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();
-                e.stopPropagation();
-                var file = dataTransfer.files[0];
-                var reader = new FileReader();
-                reader.onload = $.proxy(function(file, $input, event) {
-                    $input.val(event.target.result);
-                    $("#uploader").fadeOut();
-                    $("#submit").click();
-                }, this, file, $("#input"));
-                reader.readAsText(file);
-            }
-        },
-        'click': function(e) {
-            if (e.target.id === "popup-upload")
-                closeUploadPopUp();
+    var input = $("#input");
+    if (input.length) {
+        // get elements
+        var systemOptions = $("input[name='os']");
+        var systemInstructions = $("div[data-os]");
+        var submit = $("#submit");
+
+        // instruction OS chooser
+        var chooseSystem = function() {
+            systemInstructions.hide();
+            systemInstructions.filter("[data-os='" + $("input[name='os']:checked").val() + "']").show();
         }
-    });
-
-    $("#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('<h1>Parsing failed!</h1>Parsing of the log failed, details follow.<br />&nbsp;<p>Stage: Upload</p>Error: ' + textStatus + ': ' + xhr.responseText + "<hr /><pre>" + $("#input").val() + "</pre>");
-                })
-                .then(function(data) {
-                    $("#uploader").fadeOut();
-                    if (!data.success)
-                        error.html('<h1>Parsing failed!</h1>Parsing of the log failed, details follow.<br />&nbsp;<p>Stage: Upload</p>Error: ' + data.error + "<hr /><pre>" + $("#input").val() + "</pre>");
-                    else
-                        location.href = (sectionUrl.replace(/\/$/, "") + "/" + data.id);
-                });
-        } else {
-            alert("Unable to parse log, the input is empty!");
-            $("#uploader").fadeOut();
+        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();
 
-    $(document).on("keydown", function(e) {
-        if (e.which === 27) {
-            if ($("#popup-upload").css("display") !== "none" && $("#popup-upload").css("opacity") === 1) {
-                closeUploadPopUp();
+        // drag & drop file
+        input.on({
+            'dragover dragenter': function(e) {
+                e.preventDefault();
+                e.stopPropagation();
+            },
+            'drop': function(e) {
+                var dataTransfer = e.originalEvent.dataTransfer;
+                if (dataTransfer && dataTransfer.files.length) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    var file = dataTransfer.files[0];
+                    var reader = new FileReader();
+                    reader.onload = $.proxy(function(file, $input, event) {
+                        $input.val(event.target.result);
+                        toggleSubmit();
+                    }, this, file, $("#input"));
+                    reader.readAsText(file);
+                }
             }
-        }
-    });
-    $("#cancel").on("click", closeUploadPopUp);
-
-    if (data.showPopup)
-        $("#popup-upload").fadeIn();
-
+        });
+    }
 };