some ui improvements

frontend/src/feature/cards/components/CardDetails.vue

@@ -10,7 +10,7 @@
 
     <v-card-text>
       <h4 class="pa-2 ma-2">{{ card.question }}</h4>
-      <v-container class="pa-2 mt-2">
+      <v-form @submit.prevent @keydown.enter="highlightCorrectAnswers" class="pa-2 mt-2">
         <v-text-field v-if="card.type === CardType.SIMPLEQA" v-model="providedAnswer"
                       density="compact" label="Your Answer"
                       :class="{'correct': answerShown && isCorrect(providedAnswer),
@@ -25,17 +25,15 @@
                                       'error': selected.includes(option) && answerShown && !isCorrect(option),
                                       'selected': !answerShown && selected.includes(option)}"/>
         </v-list>
-      </v-container>
+        <v-row class="mt-3 pa-3 d-flex justify-space-around">
+          <v-btn @click="highlightCorrectAnswers" :disabled="!selected && !providedAnswer"
+                 prepend-icon="mdi-check-circle" color="green" variant="outlined">
+            Check Answer
+          </v-btn>
+        </v-row>
+      </v-form>
     </v-card-text>
 
-    <v-container>
-      <v-row class="pa-3 d-flex justify-space-around">
-        <v-btn @click="highlightCorrectAnswers()" :disabled="!selected && !providedAnswer"
-               prepend-icon="mdi-check-circle" color="green" variant="outlined">
-          Check Answer
-        </v-btn>
-      </v-row>
-    </v-container>
 
     <v-card-actions class="pa-2 ma-0">
       <v-spacer/>

frontend/src/feature/cards/components/CardForm.vue

@@ -1,6 +1,6 @@
 <template>
   <base-card-page>
-    <v-card-title class="text-center text-h4">Edit card of type {{ translateType(card.type) }}</v-card-title>
+    <v-card-title class="text-center text-h4">{{ mode }} card of type {{ translateType(card.type) }}</v-card-title>
     <v-card-subtitle class="text-center">Submit Changes with Enter or Save button</v-card-subtitle>
 
     <v-card-text>
@@ -50,7 +50,7 @@ import BaseCardPage from "@/shared/pages/BaseCardPage.vue";
 
 const props = defineProps<({
   card: Card,
-  mode: 'edit' | 'add',
+  mode: 'Edit' | 'Add',
 })>();
 
 const emit = defineEmits<({
@@ -62,7 +62,7 @@ const emit = defineEmits<({
 const newCard = ref<Card>(clone(props.card));
 const formValid = ref(false);
 
-const emitAction = () => props.mode === 'edit'
+const emitAction = () => props.mode === 'Edit'
   ? emit('update', newCard.value)
   : emit('post', newCard.value);
 

frontend/src/feature/cards/components/RadioButtonCol.vue

@@ -3,6 +3,7 @@
     <div class="d-flex flex-wrap justify-sm-space-between ma-n3">
       <v-radio-group v-for="index in Array.from({ length: groupSize }, (_, ind) => ind)" :key="index"
                      :model-value="model"
+                     :rules="[v => v != undefined || 'Choose!']"
                      @update:model-value="val => model = val!">
         <v-radio :value="index" class="ml-n4 mt-n2 mb-n2" label="correct" color="green"/>
       </v-radio-group>

frontend/src/feature/cards/pages/CardsPage.vue

@@ -45,10 +45,10 @@ const props = defineProps<({
 const categoryName = useRoute().query.name;
 const filter = ref({input: "", set: ""});
 const uiState = ref<{
-  display: 'cards' | 'form' | 'details', formMode: 'edit' | 'add', selectActive: boolean
+  display: 'cards' | 'form' | 'details', formMode: 'Edit' | 'Add', selectActive: boolean
 }>({
   display: 'cards',
-  formMode: 'edit',
+  formMode: 'Edit',
   selectActive: false
 });
 const toggleReload = shallowRef(false);
@@ -64,7 +64,7 @@ const addButtonClicked = () => {
   // If no card type selection shown, show it, else open add form with empty card of selected type
   if (uiState.value.selectActive) {
     card.value = emptyCard(cardType.value);
-    uiState.value.formMode = 'add';
+    uiState.value.formMode = 'Add';
     uiState.value.display = 'form';
   }
   uiState.value.selectActive = !uiState.value.selectActive;
@@ -92,11 +92,11 @@ const reloadAndShowCards = () => {
 };
 
 const editForm = () => {
-  uiState.value.formMode = 'edit';
+  uiState.value.formMode = 'Edit';
   uiState.value.display = 'form';
 };
 
 const closeForm = () => { // switch display to details for edit mode, cards for add mode
-  uiState.value.display = uiState.value.formMode === 'edit' ? 'details' : 'cards';
+  uiState.value.display = uiState.value.formMode === 'Edit' ? 'details' : 'cards';
 };
 </script>

frontend/src/feature/dataio/pages/DataExport.vue

@@ -12,19 +12,17 @@
     <v-card-item>
       <v-img src="@/assets/folder.jpg" aspect-ratio="2.25" class="mx-auto"/>
       <v-label class="float-right text-sm-subtitle-2 text-grey">Photo by&nbsp;<a
-        href="https://unsplash.com/@qwitka?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Maksym Kaharlytskyi</a>&nbsp;on&nbsp;<a
+        href="https://unsplash.com/@qwitka?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Maksym
+        Kaharlytskyi</a>&nbsp;on&nbsp;<a
         href="https://unsplash.com/photos/file-cabinet-Q9y3LRuuxmg?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>
       </v-label>
     </v-card-item>
 
     <v-card-text class="mt-5 mb-5">
       <v-row justify="center">
-        <v-form cols="12" sm="6" md="4">
-          <input type="submit" hidden/><!-- Required for the form to submit on enter -->
-          <v-btn color="black" border @click="exportData" variant="text">
-            Start Export
-          </v-btn>
-        </v-form>
+        <v-btn color="black" border @click="exportData" variant="text">
+          Start Export
+        </v-btn>
       </v-row>
     </v-card-text>