use grid for mods list on bigger window size

package.json

@@ -1,7 +1,7 @@
 {
   "name": "RedModManager",
   "private": true,
-  "version": "1.1.1",
+  "version": "1.1.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

src-tauri/tauri.conf.json

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "RedModManager",
-    "version": "1.1.1"
+    "version": "1.1.2"
   },
   "tauri": {
     "allowlist": {

src/App.svelte

@@ -4,7 +4,7 @@
   import Page1 from './pages/MainPage.svelte';
   import Page2 from './pages/Mods.svelte';
   import Page3 from './pages/AdditionalsPage.svelte';
-  import Page4 from './pages/Modders.svelte';
+  import Page4 from './pages/Modding.svelte';
   import { onMount } from "svelte";
   import { fade } from 'svelte/transition';
     import { invoke } from '@tauri-apps/api';

src/lib/ModCard.svelte

@@ -8,6 +8,7 @@
     import { downloadAndInstall } from './utils';
 
     export let mod: Mod;
+    export let isGrid: boolean = false;
 
     onMount( async () => {
       //await refresh();
@@ -75,11 +76,11 @@
 
 <div class="feature-container description">
   <span class="mod-title">{mod.name} (<a on:click={() => ModDatabase.openModPage(mod)} class="site-link">view on site</a>)</span>
-  <span class="description-content">{mod.short_description}</span>
-  <div class="horizontal">
+  <span class="description-content header-desc">{mod.short_description}</span>
+  <div class="mod-card-horizontal">
     <img class="cover-img" src="{mod.thumbnail_url}" />
     <div class="vertical">
-      {#if mod.isInstalled}
+      {#if mod.isInstalled && !isGrid}
         {#if mod.installedMod?.isEnabled}
           <button class="toggle-button install" on:click={disableMod}>Enabled</button>
         {:else}
@@ -92,11 +93,22 @@
       <span class="description-content">Category: <b class="update">{mod.category_name}</b></span>
     </div>
   </div>
-  <StatusButton isUpdateAvailable={false} isModInstalled={mod.isInstalled} update={update} uninstall={uninstall} install={install} />
+
+  {#if mod.isInstalled && isGrid}
+    {#if mod.installedMod?.isEnabled}
+      <button class="toggle-button grid-toggle-button install" on:click={disableMod}>Enabled</button>
+    {:else}
+      <button class="toggle-button grid-toggle-button uninstall" on:click={enableMod}>Disabled</button>
+    {/if}
+  {/if}
+
+  <div class="bottom-container">
+    <StatusButton isUpdateAvailable={false} isModInstalled={mod.isInstalled} update={update} uninstall={uninstall} install={install} />
+  </div>
 </div>
 
 <style>
-  .horizontal {
+  .mod-card-horizontal {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -109,7 +121,7 @@
     margin-left: 0.7em;
   }
   
-  .horizontal > * {
+  .mod-card-horizontal > * {
     /* margin-right: 1em; */
     flex: 1;
   }
@@ -118,6 +130,17 @@
     width: 100%;
   }
 
+  .feature-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    position: relative;
+  }
+
+  .header-desc {
+    height: 3em;
+  }
+
   .description {
     padding: 10px;
     /* border-radius: 10px; */
@@ -162,6 +185,12 @@
     margin-bottom: 1em;
   }
 
+  .grid-toggle-button {
+    position: absolute;
+    bottom: 1.4em;
+    left: 1em;
+  }
+
   .toggle-button {
     padding: 0;
     height: 2em;

src/lib/ToggleButton.svelte

@@ -0,0 +1,3 @@
+<script lang="ts">
+    export let isEnabled: boolean = false;
+</script>

src/pages/MainPage.svelte

@@ -1,10 +1,16 @@
 <script lang="ts">
+    import { shell } from "@tauri-apps/api";
     import InstallFeature from "../lib/InstallationComponent.svelte";
     import PathSelector from "../lib/PathSelector.svelte";
     import { debugInstaller, loaderFeature, bieFeature, melonFeature } from "../lib/featureInstaller";
-    import { gameExePath, isPathValid, isDotnetInstalled } from "../lib/store";
+    import { gameExePath, isPathValid, isDotnetInstalled, getDirectoryPath } from "../lib/store";
+    import { get } from "svelte/store";
 
     let features = [bieFeature, melonFeature, loaderFeature];
+
+    async function openFolder() {
+        await shell.open(await getDirectoryPath());
+    }
 </script>
 
 <div class="column">
@@ -16,8 +22,19 @@
             <InstallFeature feature={feature} />
         {/each}
     {/if}
+    <br>
+    {#if $isPathValid}
+        <button class="tool-button" on:click={openFolder}>Open Game Folder</button>
+    {/if}
     {#if !$isDotnetInstalled}
         <br>
         <span style="color: #a2a2a2;font-weight: 500"><a href="https://dotnet.microsoft.com/en-us/download/dotnet/thank-you/runtime-desktop-6.0.21-windows-x64-installer" target="_blank">Dotnet 6</a> is needed for the loader to work!</span>
     {/if}
 </div>
+
+<style>
+    .tool-button {
+        background: transparent;
+        color: #a2a2a2;
+    }
+</style>

src/pages/Mods.svelte

@@ -15,6 +15,8 @@
     let onlineSelected = true;
     let installedSelected = true;
 
+    let isGrid = false;
+
     onMount(async () => {
         processing.set(true);
         processProgress.set(0);
@@ -45,18 +47,21 @@
 
 </script>
 
+<svelte:window on:resize={() => isGrid = window.innerWidth > 1000} />
 <div class="column">
     {#if isPathValid}
-        <div class="horizontal">
+        <div class="row-center">
             <input class="generic-input search-input" placeholder="Search" type="text" bind:value={filterTerm} on:input={filter} />
             <button class="btn-left cat-btn" class:cat-btn-selected={onlineSelected} on:click={toggleOnline}>Online</button>
             <button class="btn-right cat-btn" class:cat-btn-selected={installedSelected} on:click={toggleInstalled}>Installed</button>
         </div>
-        <div class="scroller">
+
+        <div class="scroller" class:grid={isGrid}>
             {#each filtered as mod}
-                <ModCard mod={mod}/>
+                <ModCard mod={mod} isGrid={isGrid}/>
             {/each}
         </div>
+
     {:else}
         <b>Set the correct path in the main tab to start browsing mods.</b>
     {/if}
@@ -70,10 +75,10 @@
         overflow-x: hidden;
     }
 
-    .horizontal {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
+    .grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+        grid-gap: 1em;
     }
 
     .search-input {

src/styles.css

@@ -49,6 +49,12 @@ body {
   text-align: center;
 }
 
+.row-center {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
 a {
   font-weight: 500;
   color: #646cff;