Update roadmap & prep for 1.0!

RedstoneWizard08 · Apr 19, 2023 · 648322b · 648322b
1 parent bae4ba8
commit 648322b
Show file tree

Hide file tree

Showing 4 changed files with 181 additions and 173 deletions.
diff --git a/README.md b/README.md
@@ -30,23 +30,23 @@ The (unofficial) successor to CKAN.
 - [x] Support for any steam library location
 - [x] Support for Private Division launcher
 - [x] Mod installation & browsing from SpaceDock
-- [ ] Mod installation & browsing from CKAN
-- [ ] Mod installation & browsing from CurseForge
 - [x] GUI app
-- [ ] CLI app
 - [x] Full instances support
-- [ ] Full modpack support
-- [ ] Mod configuration editor
-- [ ] Mod dependency resolution
-- [ ] Mod conflict resolution
-- [ ] Game version compatibility checking
 - [x] Friendly UI
 - [x] Fast UI
 - [x] 100% Open Source
 - [x] Automated SpaceWarp installation
+- [x] SvelteKit rewrite
+- [x] CLI app (WIP)
 
 ## Long-term plans
 
-- [ ] SvelteKit rewrite
 - [ ] Better settings
 - [ ] Installed mod discovery
+- [ ] Full modpack support
+- [ ] Mod configuration editor
+- [ ] Mod dependency resolution
+- [ ] Mod conflict resolution
+- [ ] Game version compatibility checking
+- [ ] Mod installation & browsing from CKAN
+- [ ] Mod installation & browsing from CurseForge
diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import "./sass/Sidebar.scss";
     import { page } from "$app/stores";
     import { KSPGame } from "../api/instance";
     import logo from "../assets/icon.png";
@@ -17,8 +16,8 @@
     $: {
         mods = /\/mods?(\/\d+)?/i.test($page.url.pathname);
         instances = /\/instances?(\/\d+)?/i.test($page.url.pathname);
+        manage = $page.url.pathname.endsWith("/manage");
 
-        manage = $page.url.pathname == "/manage";
         spacewarp = $page.url.pathname == "/spacewarp" || $page.url.pathname == "/install";
         settings = $page.url.pathname == "/settings";
 
@@ -98,3 +97,163 @@
         <span class="tooltip">Settings</span>
     </a>
 </div>
+
+<style lang="scss">
+    @mixin tooltip-container {
+        .tooltip {
+            opacity: 0;
+            background-color: #5f6160;
+            color: #dcdcec;
+            text-align: center;
+            padding: 10% 40%;
+            border-radius: 6px;
+            pointer-events: none;
+            width: 10rem;
+
+            position: absolute;
+            z-index: 1;
+
+            left: 130%;
+
+            transition: opacity 0.5s ease;
+
+            &::after {
+                content: " ";
+                position: absolute;
+                top: 50%;
+                right: 100%;
+                margin-top: -10px;
+                border-width: 10px;
+                border-style: solid;
+                border-color: transparent #5f6160 transparent transparent;
+            }
+        }
+
+        &:hover {
+            .tooltip {
+                opacity: 1;
+            }
+        }
+    }
+
+    .sidebar {
+        width: 2rem;
+        height: 100%;
+
+        user-select: none;
+
+        padding: 0 1%;
+
+        display: inline-flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-start;
+
+        background-color: #2f2f2f;
+
+        .logo {
+            width: 64px;
+            height: 64px;
+            padding: 0;
+            margin: 0;
+
+            object-fit: cover;
+        }
+
+        .divider {
+            width: 90%;
+            margin: 0 5%;
+            height: 0;
+            border: 0;
+            padding: 0;
+
+            margin-bottom: 0.5rem;
+            border-bottom: 1px solid #aeaebe;
+        }
+
+        .link {
+            color: #aeaebe;
+            margin: 10% 0;
+            height: 2.75rem;
+            padding: 0 20%;
+            border: 1px solid transparent;
+            border-radius: 6px;
+            font-size: 16pt;
+            outline: none;
+            width: 100%;
+
+            position: relative;
+            background-color: transparent;
+
+            display: inline-flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+
+            text-decoration: none;
+
+            transition: color 0.5s ease, background-color 0.5s ease;
+
+            &.active {
+                color: white;
+                background-color: #4f4f4f;
+            }
+
+            .icon {
+                margin-right: 4%;
+            }
+
+            img {
+                width: 100%;
+            }
+
+            &:hover {
+                color: #dcdcec;
+                background-color: #4f4f4f;
+            }
+
+            @include tooltip-container;
+        }
+
+        .group {
+            width: 100%;
+            padding: 0 30%;
+            margin: 0;
+
+            max-height: 0;
+            position: relative;
+
+            transition: max-height 0.5s ease-in-out;
+
+            display: inline-flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: space-evenly;
+
+            background-color: #3f3f3f;
+            border-radius: 8px;
+
+            .link {
+                opacity: 0;
+                pointer-events: none;
+
+                transition: opacity 0.5s ease, color 0.5s ease, background-color 0.5s ease;
+
+                &:hover,
+                &.active {
+                    background-color: #5f5f5f;
+                }
+            }
+
+            &.active {
+                margin: 10% 0;
+                max-height: 100%;
+
+                .link {
+                    opacity: 1;
+                    pointer-events: unset;
+                }
+            }
+        }
+    }
+</style>
diff --git a/src/components/sass/Sidebar.scss b/src/components/sass/Sidebar.scss
diff --git a/src/routes/[game]/instance/[instance]/+page.svelte b/src/routes/[game]/instance/[instance]/+page.svelte
@@ -169,14 +169,20 @@
                 justify-content: center;
                 align-items: center;
                 border-radius: 50%;
-                background-color: green;
+                background-color: #008000;
                 z-index: 2;
                 cursor: pointer;
-            }
 
-            .return-arrow i {
-                font-size: 24px;
-                color: white;
+                transition: background-color 0.5s ease;
+
+                &:hover {
+                    background-color: #00a000;
+                }
+
+                i {
+                    font-size: 24px;
+                    color: white;
+                }
             }
 
             .return-circle {