add Xbox app log instructions, redesign UI to fit

docs/release-notes.md

@@ -17,7 +17,9 @@
   * Improved translations. Thanks to ChulkyBow (added Ukrainian)!
 
 * For the web UI:
+  * Added log instructions for Xbox app on Windows.
   * Added log download option.
+  * Redesigned log instruction UI.
   * Fixed log parser not correctly handling multiple mods having the exact same name.
   * Fixed JSON validator not recognizing manifest [update subkeys](https://stardewvalleywiki.com/Modding:Modder_Guide/APIs/Update_checks#Update_subkeys).
 

src/SMAPI.Web/Views/LogParser/Index.cshtml

@@ -23,13 +23,15 @@
     {
         <meta name="robots" content="noindex" />
     }
-    <link rel="stylesheet" href="~/Content/css/file-upload.css?r=202002" />
+    <link rel="stylesheet" href="~/Content/css/file-upload.css" />
-    <link rel="stylesheet" href="~/Content/css/log-parser.css?r=202002" />
+    <link rel="stylesheet" href="~/Content/css/log-parser.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tabbyjs@12.0.3/dist/css/tabby-ui-vertical.min.css" />
 
+    <script src="https://cdn.jsdelivr.net/npm/tabbyjs@12.0.3" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1" crossorigin="anonymous"></script>
-    <script src="~/Content/js/file-upload.js?r=202002"></script>
+    <script src="~/Content/js/file-upload.js"></script>
-    <script src="~/Content/js/log-parser.js?r=202002"></script>
+    <script src="~/Content/js/log-parser.js"></script>
     <script>
         $(function() {
             smapi.logParser({
@@ -41,6 +43,8 @@
                 enableFilters: @this.ForJson(!Model.ShowRaw),
                 screenIds: @this.ForJson(screenIds)
             }, '@this.Url.PlainAction("Index", "LogParser", values: null)');
+
+            new Tabby('[data-tabs]');
         });
     </script>
 }
@@ -91,18 +95,25 @@ else if (Model.ParsedLog?.IsValid == true)
 @if (Model.ParsedLog == null)
 {
     <h2>Where do I find my SMAPI log?</h2>
-    <div>What system do you use?</div>
+    <div id="os-instructions">
-    <ul id="os-list">
+        <div>
-        @foreach (Platform platform in new[] { Platform.Android, Platform.Linux, Platform.Mac, Platform.Windows })
+            <ul data-tabs>
+                @foreach (Platform platform in new[] {Platform.Android, Platform.Linux, Platform.Mac, Platform.Windows})
                 {
-            <li>
+                    @if (platform == Platform.Windows)
-                <input type="radio" name="os" value="@platform" id="os-@platform" checked="@(Model.DetectedPlatform == platform)" />
+                    {
-                <label for="os-@platform">@platform</label>
+                        <li><a data-tabby-default href="#@(platform)-steamgog">@platform (Steam or GOG)</a></li>
-            </li>
+                        <li><a href="#@(platform)-xbox">@platform (Xbox app)</a></li>
+                    }
+                    else
+                    {
+                        <li><a href="#@platform">@platform</a></li>
+                    }
                 }
             </ul>
-    <div data-os="@Platform.Android">
+        </div>
-        On Android:
+        <div>
+            <div id="@Platform.Android">
                 <ol>
                     <li>Open a file app (like My Files or MT Manager).</li>
                     <li>Find the <code>StardewValley</code> folder on your internal storage.</li>
@@ -110,8 +121,7 @@ else if (Model.ParsedLog?.IsValid == true)
                     <li>The log file is <code>SMAPI-crash.txt</code> if it exists, otherwise <code>SMAPI-latest.txt</code>.</li>
                 </ol>
             </div>
-    <div data-os="@Platform.Linux">
+            <div id="@Platform.Linux">
-        On Linux:
                 <ol>
                     <li>Open the Files app.</li>
                     <li>Click the options menu (might be labeled <em>Go</em> or <code>⋮</code>).</li>
@@ -120,8 +130,7 @@ else if (Model.ParsedLog?.IsValid == true)
                     <li>The log file is <code>SMAPI-crash.txt</code> if it exists, otherwise <code>SMAPI-latest.txt</code>.</li>
                 </ol>
             </div>
-    <div data-os="@Platform.Mac">
+            <div id="@Platform.Mac">
-        On macOS:
                 <ol>
                     <li>Open the Finder app.</li>
                     <li>Click <em>Go</em> at the top, then <em>Go to Folder</em>.</li>
@@ -129,14 +138,23 @@ else if (Model.ParsedLog?.IsValid == true)
                     <li>The log file is <code>SMAPI-crash.txt</code> if it exists, otherwise <code>SMAPI-latest.txt</code>.</li>
                 </ol>
             </div>
-    <div data-os="@Platform.Windows">
+            <div id="@(Platform.Windows)-steamgog">
-        On Windows:
                 <ol>
-            <li>Press the <code>Windows</code> and <code>R</code> buttons at the same time.</li>
+                    <li>Press the <kbd>Windows</kbd> and <kbd>R</kbd> buttons at the same time.</li>
                     <li>In the 'run' box that appears, enter this exact text: <pre>%appdata%\StardewValley\ErrorLogs</pre></li>
                     <li>The log file is <code>SMAPI-crash.txt</code> if it exists, otherwise <code>SMAPI-latest.txt</code>.</li>
                 </ol>
             </div>
+            <div id="@(Platform.Windows)-xbox">
+                <ol>
+                    <li>Press the <kbd>Windows</kbd> and <kbd>R</kbd> buttons at the same time.</li>
+                    <li>In the 'run' box that appears, enter this exact text: <pre>%localappdata%\Packages\ConcernedApe.StardewValleyPC_0c8vynj4cqe4e\LocalCache\Roaming\StardewValley\ErrorLogs</pre></li>
+                    <li>If you get an error with the title "Location is not available", try the "with Steam or GOG" instructions above.</li>
+                    <li>Otherwise the log file is <code>SMAPI-crash.txt</code> if it exists, otherwise <code>SMAPI-latest.txt</code>.</li>
+                </ol>
+            </div>
+        </div>
+    </div>
 
     <h2>How do I share my log?</h2>
     <form action="@this.Url.PlainAction("PostAsync", "LogParser")" method="post">

src/SMAPI.Web/wwwroot/Content/css/log-parser.css

@@ -291,13 +291,29 @@ table caption {
 
 
 /*********
-** Upload form
+** OS instructions
 *********/
-#os-list {
+#os-instructions {
-    list-style: none;
+    display: grid;
+    grid-template-columns: minmax(16em, auto) 30em;
 }
 
-div[data-os] {
+#os-instructions [role="tablist"] {
-    display: none;
+    border: 0;
 }
 
+#os-instructions [role="tab"] {
+    display: block;
+    border: 0;
+    position: relative;
+}
+
+#os-instructions [role="tab"][aria-selected="true"] {
+    font-weight: bold;
+    border-radius: 0 10px 10px 0;
+}
+
+[role="tab"][aria-selected="true"]::after {
+    content: "▶";
+    padding-left: 0.5em;
+}

src/SMAPI.Web/wwwroot/Content/js/log-parser.js

@@ -115,17 +115,6 @@ smapi.logParser = function (data, sectionUrl) {
     *********/
     var input = $("#input");
     if (input.length) {
-        // instructions per OS
-        var systemOptions = $("input[name='os']");
-        var systemInstructions = $("div[data-os]");
-
-        var chooseSystem = function () {
-            systemInstructions.hide();
-            systemInstructions.filter("[data-os='" + $("input[name='os']:checked").val() + "']").show();
-        };
-        systemOptions.on("click", chooseSystem);
-        chooseSystem();
-
         // file upload
         smapi.fileUpload({
             chooseFileLink: $("#choose-file-link"),