aboutsummaryrefslogtreecommitdiff
path: root/src-vue/src/views/mods
diff options
context:
space:
mode:
authorRémy Raes <contact@remyraes.com>2023-03-30 01:34:33 +0200
committerGitHub <noreply@github.com>2023-03-30 01:34:33 +0200
commit61cb8f66db7bb71e8bed00b1a730ab7db14745f6 (patch)
tree108bfccbde82eb5e05211a6b645adc6c4457eb1d /src-vue/src/views/mods
parentaa2624f60ddbf8d1fe45bf4f9f8e3eb8a3b4cbfe (diff)
downloadFlightCore-61cb8f66db7bb71e8bed00b1a730ab7db14745f6.tar.gz
FlightCore-61cb8f66db7bb71e8bed00b1a730ab7db14745f6.zip
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
Diffstat (limited to 'src-vue/src/views/mods')
-rw-r--r--src-vue/src/views/mods/LocalModsView.vue60
-rw-r--r--src-vue/src/views/mods/ThunderstoreModsView.vue21
2 files changed, 39 insertions, 42 deletions
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;
}