Move actions in tutorial inside alert to save space

mapswipe · Oct 9, 2024 · 267a964 · 267a964
1 parent cb18d94
commit 267a964
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 45 deletions.
diff --git a/src/components/CompareProjectTutorial.vue b/src/components/CompareProjectTutorial.vue
@@ -205,14 +205,29 @@ export default defineComponent({
     <v-row v-if="alertContent">
       <v-col>
         <v-alert
+          prominent
           density="compact"
           border="start"
           variant="tonal"
           :type="alertContent.type"
           :title="alertContent.title"
           :text="alertContent.text"
           :icon="alertContent.icon"
-        />
+        >
+          <template #append>
+            <v-btn
+              v-if="userAttempts > 1 && !answeredCorrectly && !answersRevealed"
+              @click="showAnswer"
+            >
+              Show answer
+            </v-btn>
+            <v-btn
+              v-if="!hasCompletedAllTasks && answeredCorrectly" @click="nextTask"
+            >
+              Next task
+            </v-btn>
+          </template>
+        </v-alert>
       </v-col>
     </v-row>
     <v-row>
@@ -244,19 +259,6 @@ export default defineComponent({
         <task-progress :progress="currentTaskIndex" :total="tasks?.length ?? 0" />
       </v-col>
     </v-row>
-    <v-row justify="center">
-      <v-col cols="auto">
-        <v-btn
-          v-if="userAttempts > 1 && !answeredCorrectly && !answersRevealed"
-          @click="showAnswer"
-        >
-          Show answer
-        </v-btn>
-        <v-btn v-if="!hasCompletedAllTasks && answeredCorrectly" @click="nextTask">
-          Next task
-        </v-btn>
-      </v-col>
-    </v-row>
     <v-row v-if="hasCompletedAllTasks">
       <v-col>
         <tutorial-completion-card

diff --git a/src/components/FindProjectTutorial.vue b/src/components/FindProjectTutorial.vue
@@ -303,14 +303,27 @@ export default defineComponent({
     <v-row v-if="alertContent">
       <v-col>
         <v-alert
+          prominent
           density="compact"
           border="start"
           variant="tonal"
           :type="alertContent.type"
           :title="alertContent.title"
           :text="alertContent.text"
           :icon="alertContent.icon"
-        />
+        >
+          <template #append>
+            <v-btn
+              v-if="userAttempts > 1 && !answeredCorrectly && !answersRevealed"
+              @click="showAnswer"
+            >
+              Show answer
+            </v-btn>
+            <v-btn v-if="!hasCompletedAllTasks && answeredCorrectly" @click="nextTask">
+              Next task
+            </v-btn>
+          </template>
+        </v-alert>
       </v-col>
     </v-row>
     <v-row justify="center">
@@ -342,19 +355,6 @@ export default defineComponent({
         <task-progress :progress="currentTaskIndex" :total="tutorial?.screens.length ?? 0" />
       </v-col>
     </v-row>
-    <v-row justify="center">
-      <v-col cols="auto">
-        <v-btn
-          v-if="userAttempts > 1 && !answeredCorrectly && !answersRevealed"
-          @click="showAnswer"
-        >
-          Show answer
-        </v-btn>
-        <v-btn v-if="!hasCompletedAllTasks && answeredCorrectly" @click="nextTask">
-          Next task
-        </v-btn>
-      </v-col>
-    </v-row>
     <v-row v-if="hasCompletedAllTasks">
       <v-col>
         <tutorial-completion-card
@@ -368,8 +368,8 @@ export default defineComponent({
 <style scoped>
 .image-grid {
   display: grid;
-  grid-template-columns: 18vh 18vh;
-  grid-template-rows: 1fr 1fr 1fr;
+  grid-template-columns: repeat(2, max(8rem, calc(30vh - 6rem)));
+  grid-template-rows: repeat(3, 1fr);
   grid-auto-flow: column;
 }
 </style>
diff --git a/src/components/ValidateProjectTutorial.vue b/src/components/ValidateProjectTutorial.vue
@@ -220,14 +220,29 @@ export default defineComponent({
     <v-row v-if="alertContent">
       <v-col>
         <v-alert
+          prominent
           density="compact"
           border="start"
           variant="tonal"
           :type="alertContent.type"
           :title="alertContent.title"
           :text="alertContent.text"
           :icon="alertContent.icon"
-        />
+        >
+          <template #append>
+            <v-btn
+              v-if="userAttempts > 1 && !answeredCorrectly && !answersRevealed"
+              @click="showAnswer"
+            >
+              Show answer
+            </v-btn>
+            <v-btn
+              v-if="!hasCompletedAllTasks && answeredCorrectly" @click="nextTask"
+            >
+              Next task
+            </v-btn>
+          </template>
+        </v-alert>
       </v-col>
     </v-row>
     <v-row>
@@ -255,7 +270,7 @@ export default defineComponent({
       v-if="!hasTasks"
       justify="center"
     >
-      <v-col>
+      <v-col cols="auto">
         <v-progress-circular indeterminate />
       </v-col>
     </v-row>
@@ -264,19 +279,6 @@ export default defineComponent({
         <task-progress :progress="currentTaskIndex" :total="tasks?.length ?? 0" />
       </v-col>
     </v-row>
-    <v-row justify="center">
-      <v-col cols="auto">
-        <v-btn
-          v-if="userAttempts > 1 && !answeredCorrectly && !answersRevealed"
-          @click="showAnswer"
-        >
-          Show answer
-        </v-btn>
-        <v-btn v-if="!hasCompletedAllTasks && answeredCorrectly" @click="nextTask">
-          Next task
-        </v-btn>
-      </v-col>
-    </v-row>
     <v-row v-if="hasCompletedAllTasks">
       <v-col>
         <tutorial-completion-card