refactor(hunt): Style hunt admin

app/components/admin/QuestList.vue

@@ -96,113 +96,121 @@ async function reorderQuest(quest: QuestListItem, direction: 'up' | 'down') {
 </script>
 
 <template>
-  <div class="flex items-center justify-between">
-    <h2 class="text-2xl">{{ t('page.quest_admin.quests_title') }}</h2>
-    <VaButton
-      icon="add"
-      color="success"
-      :disabled="questLoading"
-      @click="openCreateQuest"
-      >{{ t('page.quest_admin.add_quest') }}</VaButton
-    >
-  </div>
-  <VaCollapse
-    class="mt-2"
-    color="primary"
-    header="Quest list"
-    @update:model-value="(isOpen: boolean) => isOpen && execute()"
-  >
-    <p v-if="pending">pending...</p>
-    <div v-if="quests.length > 0" class="mt-4 flex flex-col gap-2">
-      <VaCard
-        v-for="(quest, index) in quests"
-        :key="quest.id"
-        class="flex items-center"
+  <VaCard stripe stripe-color="info" class="">
+    <VaCardContent>
+      <div class="flex items-center justify-between">
+        <h2 class="text-2xl">{{ t('page.quest_admin.quests_title') }}</h2>
+        <VaButton
+          icon="add"
+          color="success"
+          :disabled="questLoading"
+          @click="openCreateQuest"
+          >{{ t('page.quest_admin.add_quest') }}</VaButton
+        >
+      </div>
+      <VaCollapse
+        class="mt-2"
+        color="primary"
+        header="Quest list"
+        @update:model-value="(isOpen: boolean) => isOpen && execute()"
       >
-        <VaCardContent class="flex w-full items-center gap-2">
-          <div class="flex flex-col gap-1">
-            <VaButton
-              icon="arrow_upward"
-              size="small"
-              preset="plain"
-              :disabled="index === 0 || questLoading"
-              :title="t('page.quest_admin.move_up')"
-              @click="reorderQuest(quest, 'up')"
-            />
-            <VaButton
-              icon="arrow_downward"
-              size="small"
-              preset="plain"
-              :disabled="index === quests.length - 1 || questLoading"
-              :title="t('page.quest_admin.move_down')"
-              @click="reorderQuest(quest, 'down')"
-            />
-          </div>
-          <VaButton
-            icon="edit"
-            preset="plain"
-            :disabled="questLoading"
-            @click="openEditQuest(quest.id)"
-          />
-          <VaImage
-            v-if="quest.picture"
-            :src="quest.picture.url"
-            lazy
-            alt="Quest picture"
-            class="h-16 w-24 rounded object-cover"
-            ><template #loader><VaProgressCircle indeterminate /></template
-          ></VaImage>
-          <div class="flex-1">
-            <p>
-              <span class="font-bold">{{ quest.title_de }}</span
-              ><span class="text-secondary font-light"> | </span
-              ><span class="font-bold">{{ quest.title_en }}</span>
-            </p>
-            <p class="text-sm text-gray-500">
-              {{ quest.points }} {{ t('page.quest_admin.points') }} ·
-              {{ t('page.quest_admin.answers', quest._count.answers) }}
-            </p>
-          </div>
-          <div class="flex gap-1">
-            <VaChip v-if="quest.optional" size="small" color="secondary"
-              >Opt</VaChip
+        <p v-if="pending">pending...</p>
+        <div v-if="quests.length > 0" class="mt-4 flex flex-col gap-2">
+          <VaCard
+            v-for="(quest, index) in quests"
+            :key="quest.id"
+            class="flex items-center"
+          >
+            <VaCardContent
+              class="flex w-full flex-col items-center gap-2 sm:flex-row"
             >
-            <VaChip v-if="quest.pictureRequired" size="small" color="info"
-              >Pic!</VaChip
-            >
-            <VaChip v-if="quest.textRequired" size="small" color="warning"
-              >Txt!</VaChip
-            >
-          </div>
-          <VaButton
-            icon="edit"
-            size="small"
-            preset="plain"
-            :disabled="questLoading"
-            @click="openEditQuest(quest.id)"
-          />
-          <VaButton
-            icon="delete"
-            size="small"
-            preset="plain"
-            color="danger"
-            :disabled="questLoading"
-            @click="deleteQuest(quest)"
-          />
-        </VaCardContent>
-      </VaCard>
-    </div>
-    <p v-else class="mt-4 text-gray-500">
-      {{ t('page.quest_admin.no_quests') }}
-    </p>
-  </VaCollapse>
+              <div class="flex flex-row gap-1 sm:flex-col">
+                <VaButton
+                  icon="arrow_upward"
+                  size="small"
+                  preset="plain"
+                  :disabled="index === 0 || questLoading"
+                  :title="t('page.quest_admin.move_up')"
+                  @click="reorderQuest(quest, 'up')"
+                />
+                <VaButton
+                  icon="arrow_downward"
+                  size="small"
+                  preset="plain"
+                  :disabled="index === quests.length - 1 || questLoading"
+                  :title="t('page.quest_admin.move_down')"
+                  @click="reorderQuest(quest, 'down')"
+                />
+              </div>
+              <VaButton
+                icon="edit"
+                preset="plain"
+                :disabled="questLoading"
+                @click="openEditQuest(quest.id)"
+              />
+              <VaImage
+                v-if="quest.picture"
+                :src="quest.picture.url"
+                lazy
+                alt="Quest picture"
+                class="h-16 w-24 rounded object-cover"
+                ><template #loader><VaProgressCircle indeterminate /></template
+              ></VaImage>
+              <div class="flex-1">
+                <p>
+                  <span class="font-bold">{{ quest.title_de }}</span
+                  ><span class="text-secondary font-light"> | </span
+                  ><span class="font-bold">{{ quest.title_en }}</span>
+                </p>
+                <p class="text-sm text-gray-500">
+                  {{ quest.points }} {{ t('page.quest_admin.points') }} ·
+                  {{ t('page.quest_admin.answers', quest._count.answers) }}
+                </p>
+              </div>
+              <div class="flex gap-1">
+                <VaChip v-if="quest.optional" size="small" color="secondary"
+                  >Opt</VaChip
+                >
+                <VaChip v-if="quest.pictureRequired" size="small" color="info"
+                  >Pic!</VaChip
+                >
+                <VaChip v-if="quest.textRequired" size="small" color="warning"
+                  >Txt!</VaChip
+                >
+              </div>
+              <div class="flex flex-row gap-1 sm:flex-col">
+                <VaButton
+                  icon="edit"
+                  size="small"
+                  preset="plain"
+                  :disabled="questLoading"
+                  @click="openEditQuest(quest.id)"
+                />
+                <VaButton
+                  icon="delete"
+                  size="small"
+                  preset="plain"
+                  color="danger"
+                  :disabled="questLoading"
+                  @click="deleteQuest(quest)"
+                />
+              </div>
+            </VaCardContent>
+          </VaCard>
+        </div>
+        <p v-else class="mt-4 text-gray-500">
+          {{ t('page.quest_admin.no_quests') }}
+        </p>
+      </VaCollapse>
 
-  <AdminQuestModal
-    v-model="questModalOpen"
-    :hunt-id="Number(props.huntId)"
-    :quest-id="editingQuestId"
-    @saved="refreshQuests"
-  />
+      <AdminQuestModal
+        v-model="questModalOpen"
+        :hunt-id="Number(props.huntId)"
+        :quest-id="editingQuestId"
+        @saved="refreshQuests"
+      />
+    </VaCardContent>
+  </VaCard>
 </template>
 
 <style scoped></style>

app/components/admin/Team.vue

@@ -150,6 +150,7 @@ async function deleteTeam() {
 <template>
   <VaCollapse
     :key="team.id"
+    color="info"
     :header="`${team.name} — ${team.members.length} members — ${team._count.answers} answers — ${team.score} points`"
   >
     <div class="flex flex-col gap-2">