diff options
Diffstat (limited to 'src-vue')
| -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> |