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>

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>