aboutsummaryrefslogtreecommitdiff
path: root/src-vue/src/components/LocalModCard.vue
diff options
context:
space:
mode:
authortaskinoz <tristan@taskinoz.com>2023-12-23 05:17:14 +1100
committerGitHub <noreply@github.com>2023-12-22 19:17:14 +0100
commit75220b7707dbe569dbdb5c40c29545e12b81536f (patch)
treea95b4c779d540e618c14940a56d4e85b4f129f76 /src-vue/src/components/LocalModCard.vue
parentb73fee21e2ba5294b5820d2baa35bde7f2961c6c (diff)
downloadFlightCore-75220b7707dbe569dbdb5c40c29545e12b81536f.tar.gz
FlightCore-75220b7707dbe569dbdb5c40c29545e12b81536f.zip
feat: Move buttons in ModView to right (#667)
* Added styles to move around the buttons and text * Fixed version convering to support double digits * Use unwrap_or to avoid panic * Updated mod view styling * Added setup command * chore: Revert unrelated changes * Refactored PR to use scoped CSS --------- Co-authored-by: GeckoEidechse <gecko.eidechse+git@pm.me>
Diffstat (limited to 'src-vue/src/components/LocalModCard.vue')
-rw-r--r--src-vue/src/components/LocalModCard.vue76
1 files changed, 53 insertions, 23 deletions
diff --git a/src-vue/src/components/LocalModCard.vue b/src-vue/src/components/LocalModCard.vue
index f8d0256d..697cced1 100644
--- a/src-vue/src/components/LocalModCard.vue
+++ b/src-vue/src/components/LocalModCard.vue
@@ -1,28 +1,36 @@
<template>
<el-card shadow="hover">
- <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') + '\n' + mod.thunderstore_mod_string"
- src="/src/assets/thunderstore-icon.png"
- class="image"
- height="16"
- />
+ <div class="name">
+ {{ 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') + '\n' + mod.thunderstore_mod_string"
+ src="/src/assets/thunderstore-icon.png"
+ class="image"
+ height="16"
+ />
+ </div>
+ <div>
+ <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"
+ class="switch"
+ />
+ <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>
+ </div>
</el-card>
</template>
@@ -86,5 +94,27 @@ export default defineComponent({
</script>
<style scoped>
+ /*
+ This is a hack to style the card body
+ since it doesn't work with scoped styles
+ */
+ :deep(.el-card__body) {
+ display: flex !important;
+ align-items: center;
+ width: 100%;
+ justify-content: space-between;
+ }
+
+ .name {
+ display: flex;
+ }
+ .image {
+ margin: 0 5px;
+ }
+
+ .switch {
+ padding-left: 5px;
+ padding-right: 5px;
+ }
</style>