diff options
| author | taskinoz <tristan@taskinoz.com> | 2023-12-23 05:17:14 +1100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-12-22 19:17:14 +0100 |
| commit | 75220b7707dbe569dbdb5c40c29545e12b81536f (patch) | |
| tree | a95b4c779d540e618c14940a56d4e85b4f129f76 | |
| parent | b73fee21e2ba5294b5820d2baa35bde7f2961c6c (diff) | |
| download | FlightCore-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>
| -rw-r--r-- | src-vue/src/components/LocalModCard.vue | 76 |
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> |