From 61cb8f66db7bb71e8bed00b1a730ab7db14745f6 Mon Sep 17 00:00:00 2001
From: Rémy Raes <contact@remyraes.com>
Date: Thu, 30 Mar 2023 01:34:33 +0200
Subject: refactor: Style (#247)

* refactor: apply same style to all settings sections

* refactor: only assign developer_mode through store mutation

* refactor: remove useless credit mention

* refactor: remove menu bar background layer

* refactor: use same CSS style for both "no mod" messages

For both local and thunderstore mods views.

* fix: toggleDeveloperMode does not affect menu style by default

* feat: adjust TS mod hint i18n regression
---
 src-vue/src/views/mods/LocalModsView.vue        | 60 +++++++++++++------------
 src-vue/src/views/mods/ThunderstoreModsView.vue | 21 ++++-----
 2 files changed, 39 insertions(+), 42 deletions(-)

(limited to 'src-vue/src/views/mods')

diff --git a/src-vue/src/views/mods/LocalModsView.vue b/src-vue/src/views/mods/LocalModsView.vue
index 4bc870fe..2cd253ae 100644
--- a/src-vue/src/views/mods/LocalModsView.vue
+++ b/src-vue/src/views/mods/LocalModsView.vue
@@ -1,33 +1,35 @@
 <template>
-    <el-scrollbar>
-        <div>
-            <p v-if="mods.length === 0">{{ $t('mods.local.no_mods') }}</p>
-            <el-card v-else shadow="hover" v-for="mod in mods" v-bind:key="mod.name">
-                <el-switch style="--el-switch-on-color: #13ce66; --el-switch-off-color: #8957e5" v-model="mod.enabled"
-                            :before-change="() => updateWhichModsEnabled(mod)" :loading="global_load_indicator" />
-                <el-popconfirm
-                    :title="$t('mods.local.delete_confirm')"
-                    :confirm-button-text="$t('generic.yes')"
-                    :cancel-button-text="$t('generic.no')"
-                    @confirm="deleteMod(mod)"
-                >
-                    <template #reference>
-                        <el-button type="danger">
-                            {{ $t('mods.local.delete') }}
-                        </el-button>
-                    </template>
-                </el-popconfirm>
-                {{ mod.name }}
-                <span v-if="mod.version != null">(v{{ mod.version }})</span>
-                <img
-                    v-if="mod.thunderstore_mod_string != null"
-                    :title="$t('mods.local.part_of_ts_mod')"
-                    src="/src/assets/thunderstore-icon.png"
-                    class="image"
-                    height="16"
-                />
-            </el-card>
-        </div>
+    <!-- Message displayed if no mod matched searched words -->
+    <div v-if="mods.length === 0" class="noModMessage">
+        {{ $t('mods.local.no_mods') }}
+    </div>
+
+    <el-scrollbar v-else>
+        <el-card shadow="hover" v-for="mod in mods" v-bind:key="mod.name">
+            <el-switch style="--el-switch-on-color: #13ce66; --el-switch-off-color: #8957e5" v-model="mod.enabled"
+                       :before-change="() => updateWhichModsEnabled(mod)" :loading="global_load_indicator" />
+            <el-popconfirm
+                :title="$t('mods.local.delete_confirm')"
+                :confirm-button-text="$t('generic.yes')"
+                :cancel-button-text="$t('generic.no')"
+                @confirm="deleteMod(mod)"
+            >
+                <template #reference>
+                    <el-button type="danger">
+                        {{ $t('mods.local.delete') }}
+                    </el-button>
+                </template>
+            </el-popconfirm>
+            {{ mod.name }}
+            <span v-if="mod.version != null">(v{{ mod.version }})</span>
+            <img
+                v-if="mod.thunderstore_mod_string != null"
+                :title="$t('mods.local.part_of_ts_mod')"
+                src="/src/assets/thunderstore-icon.png"
+                class="image"
+                height="16"
+            />
+        </el-card>
     </el-scrollbar>
 </template>
 
diff --git a/src-vue/src/views/mods/ThunderstoreModsView.vue b/src-vue/src/views/mods/ThunderstoreModsView.vue
index 0a0b9965..5a7270df 100644
--- a/src-vue/src/views/mods/ThunderstoreModsView.vue
+++ b/src-vue/src/views/mods/ThunderstoreModsView.vue
@@ -3,11 +3,17 @@
         <div v-if="mods.length === 0" class="fc__changelog__container">
             <el-progress :show-text="false" :percentage="50" :indeterminate="true" />
         </div>
+
+        <!-- Message displayed if no mod matched searched words -->
+        <div v-else-if="filteredMods.length === 0" class="noModMessage">
+            {{ $t('mods.online.no_match') }}<br/>
+            {{ $t('mods.online.try_another_search') }}
+        </div>
+
         <el-scrollbar v-else class="container" ref="scrollbar">
             <div class="card-container">
-                <div class="pagination_container">
+                <div class="pagination_container" v-if="shouldDisplayPagination">
                     <el-pagination
-                        v-if="shouldDisplayPagination"
                         :currentPage="currentPageIndex + 1"
                         layout="prev, pager, next"
                         :page-size="modsPerPage"
@@ -16,12 +22,6 @@
                     />
                 </div>
 
-                <!-- Message displayed if no mod matched searched words -->
-                <div v-if="filteredMods.length === 0" class="modMessage">
-                    {{ $t('mods.online.no_match') }}<br/>
-                    {{ $t('mods.online.try_another_search') }}
-                </div>
-
                 <!-- Mod cards -->
                 <thunderstore-mod-card v-for="mod of currentPageMods" v-bind:key="mod.name" :mod="mod" />
             </div>
@@ -199,11 +199,6 @@ export default defineComponent({
     margin: 0 0 0 10px !important;
 }
 
-.modMessage {
-    color: white;
-    margin: 20px 5px;
-}
-
 .card-container {
     margin: 0 auto;
 }
-- 
cgit v1.2.3