Fixed issues after rebase and corrected preview text colour relevant …

…to theme
ebkr · Feb 26, 2025 · a948491 · a948491
1 parent 54a0d24
commit a948491
Show file tree

Hide file tree

Showing 6 changed files with 1,125 additions and 336 deletions.
diff --git a/src/components/v2/Hero.vue b/src/components/v2/Hero.vue
@@ -68,11 +68,11 @@ const heroTypeClass = computed(() => {
     }
 
     &--primary {
-        background-color: var(--v2-primary-background-color);
-        color: var(--v2-primary-text-color);
+        background-color: var(--v2-hero-background-color);
+        color: var(--v2-hero-text-color);
 
         #{$root}__subtitle {
-            color: var(--v2-primary-subtitle-text-color);
+            color: var(--v2-hero-subtitle-text-color);
         }
 
     }

diff --git a/src/components/v2/MarkdownRender.vue b/src/components/v2/MarkdownRender.vue
@@ -40,5 +40,16 @@ function captureClick(e: Event) {
     .markdown-body {
         padding: 1rem;
         overflow-y: auto;
+        background-color: rgba(0, 0, 0, 0);
+    }
+</style>
+
+<style lang="scss">
+    table th {
+        color: inherit;
+    }
+
+    .markdown-body {
+        color: var(--v2-primary-text-color);
     }
 </style>
diff --git a/src/components/views/OnlineModView.vue b/src/components/views/OnlineModView.vue
@@ -1,71 +1,84 @@
 <template>
-    <div>
-        <div class="inherit-background-colour sticky-top sticky-top--search non-selectable">
-            <div class="is-shadowless is-square">
-                <div class="no-padding-left card-header-title">
-                    <div class="input-group input-group--flex margin-right">
-                        <label for="online-search">Search</label>
-                        <DeferredInput
-                            v-model="thunderstoreSearchFilter"
-                            id="online-search"
-                            class="input"
-                            type="text"
-                            placeholder="Search for a mod"
-                            autocomplete="off"
-                        />
-                    </div>
-                    <div class="input-group margin-right">
-                        <label for="thunderstore-sort">Sort</label>
-                        <select v-model="sortingStyleModel"
-                                id="thunderstore-sort"
-                                class="select select--content-spacing margin-right margin-right--half-width"
-                        >
-                            <option v-for="(key) in getSortOptions()" v-bind:key="key">{{key}}</option>
-                        </select>
-                        <select v-model="sortingDirectionModel"
-                                class="select select--content-spacing"
-                                :disabled="sortingStyleModel === 'Default'"
-                        >
-                            <option v-for="(key) in getSortDirections()" v-bind:key="key">{{key}}</option>
-                        </select>
-                    </div>
-                    <div class="input-group">
-                        <div class="input-group input-group--flex">
-                            <label for="thunderstore-category-filter">Additional filters</label>
-                            <button
-                                id="thunderstore-category-filter"
-                                class="button"
-                                @click="$store.commit('openCategoryFilterModal')"
-                            >
-                                Filter categories
-                            </button>
+    <div class="split-pane" :class="[{'split-pane--with-active-second-pane': previewMod !== null}]">
+        <div id="online-view">
+            <div id="controls">
+                <div class="inherit-background-colour non-selectable">
+                    <div class="is-shadowless is-square">
+                        <div class="no-padding-left card-header-title">
+                            <div class="input-group input-group--flex margin-right">
+                                <label for="thunderstore-search-filter">Search</label>
+                                <DeferredInput
+                                    v-model="thunderstoreSearchFilter"
+                                    id="thunderstore-search-filter"
+                                    class="input"
+                                    type="text"
+                                    placeholder="Search"
+                                />
+                            </div>
+                            <div class="input-group">
+                                <div class="input-group input-group--flex">
+                                    <label for="thunderstore-category-filter">&nbsp;</label>
+                                    <button
+                                        id="thunderstore-category-filter"
+                                        class="button"
+                                        @click="$store.commit('openCategoryFilterModal')"
+                                    >
+                                        Sort
+                                    </button>
+                                </div>
+                            </div>
+                            &nbsp;
+                            <div class="input-group">
+                                <div class="input-group input-group--flex">
+                                    <label for="thunderstore-category-filter">&nbsp;</label>
+                                    <button
+                                        id="thunderstore-category-filter"
+                                        class="button"
+                                        @click="$store.commit('openCategoryFilterModal')"
+                                    >
+                                        Filter
+                                    </button>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
+            <ModListUpdateBanner />
+            <div id="view-content">
+                <OnlineModListWithPanel
+                    :local-mod-list="localModList"
+                    :paged-mod-list="pagedThunderstoreModList"
+                    :selected-mod="previewMod"
+                    @selected-mod="openPreviewForMod"
+                />
+                <div class="in-mod-list" v-if="getPaginationSize() > 1">
+                    <p class="notification margin-right">
+                        Use the numbers below to change page
+                    </p>
+                </div>
+                <div class="in-mod-list" v-else-if="getPaginationSize() === 0">
+                    <p class="notification margin-right">
+                        {{thunderstoreModList.length ? "No mods matching search found": "No mods available"}}
+                    </p>
+                </div>
+            </div>
+            <div id="pagination">
+                <PaginationButtons
+                    :current-page="pageNumber"
+                    :page-count="getPaginationSize()"
+                    :context-size="3"
+                    :on-click="updatePageNumber"
+                />
+            </div>
         </div>
-        <ModListUpdateBanner />
-        <OnlineModList
-            :local-mod-list="localModList"
-            :paged-mod-list="pagedThunderstoreModList"
-        />
-        <div class="in-mod-list" v-if="getPaginationSize() > 1">
-            <p class="notification margin-right">
-                Use the numbers below to change page
-            </p>
-        </div>
-        <div class="in-mod-list" v-else-if="getPaginationSize() === 0">
-            <p class="notification margin-right">
-                {{thunderstoreModList.length ? "No mods matching search found": "No mods available"}}
-            </p>
+        <div id="mod-preview">
+            <template v-if="previewMod !== null">
+                <OnlinePreviewPanel :mod="previewMod">
+                    <h1>aaaaaaa</h1>
+                </OnlinePreviewPanel>
+            </template>
         </div>
-        <br/>
-        <PaginationButtons
-            :current-page="pageNumber"
-            :page-count="getPaginationSize()"
-            :context-size="3"
-            :on-click="updatePageNumber"
-        />
     </div>
 </template>
 
@@ -118,14 +131,6 @@ export default class OnlineModView extends Vue {
         return Math.ceil(this.searchableThunderstoreModList.length / this.pageSize);
     }
 
-    getSortDirections() {
-        return Object.values(SortingDirection);
-    }
-
-    getSortOptions() {
-        return Object.values(SortingStyle);
-    }
-
     @Watch("pageNumber")
     changePage() {
         this.pagedThunderstoreModList = this.searchableThunderstoreModList.slice(

diff --git a/src/css/v2/_initial.scss b/src/css/v2/_initial.scss
@@ -1,7 +1,21 @@
 :root {
-    --v2-primary-background-color: #3f8ecf;
+    --v2-primary-text-color: #222;
+
+    --v2-hero-background-color: #3f8ecf;
+    --v2-hero-text-color: white;
+    --v2-hero-subtitle-text-color: #e4f4fa;
+
+    --v2-warning-background-color: #c1a564;
+    --v2-warning-text-color: #222;
+    --v2-warning-subtitle-text-color: #272727;
+}
+
+html[class="html--dark"] {
     --v2-primary-text-color: white;
-    --v2-primary-subtitle-text-color: #e4f4fa;
+
+    --v2-hero-background-color: #3f8ecf;
+    --v2-hero-text-color: white;
+    --v2-hero-subtitle-text-color: #e4f4fa;
 
     --v2-warning-background-color: #ffe08a;
     --v2-warning-text-color: #222;

diff --git a/src/model/game/GameManager.ts b/src/model/game/GameManager.ts
@@ -27,7 +27,7 @@ export default class GameManager {
             'Risk of Rain 2', ['Risk of Rain 2.exe'], 'Risk of Rain 2_Data',
             'https://thunderstore.dev/c/riskofrain2/api/v1/package-listing-index/',
             [new StorePlatformMetadata(StorePlatform.STEAM, "632360")], "ThunderstoreBeta.jpg",
-            GameSelectionDisplayMode.HIDDEN, GameInstanceType.GAME, PackageLoader.BEPINEX, ["TS Dev"]),
+            GameSelectionDisplayMode.VISIBLE, GameInstanceType.GAME, PackageLoader.BEPINEX, ["TS Dev"]),
 
         new Game('Risk of Rain 2 Dedicated Server', 'RiskOfRain2', 'RiskOfRain2Server',
             'Risk of Rain 2 Dedicated Server', ['Risk of Rain 2.exe'], 'Risk of Rain 2_Data',