webapp/Training: mv Buttons to Steps

epfml · Jan 6, 2025 · 4071c88 · 4071c88
1 parent d8118f5
commit 4071c88
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 26 deletions.
diff --git a/webapp/src/components/progress_bars/TrainingBar.vue b/webapp/src/components/progress_bars/TrainingBar.vue
@@ -106,7 +106,6 @@
         </ProgressIcon>
       </div>
     </div>
-    <TrainingButtons />
   </div>
 </template>
 
@@ -124,7 +123,6 @@ import TasksIcon from '@/assets/svg/TasksIcon.vue'
 import PerformanceIcon from '@/assets/svg/PerformanceIcon.vue'
 
 import DISCOllaboratives from '@/components/simple/DISCOllaboratives.vue'
-import TrainingButtons from './TrainingButtons.vue'
 
 const router = useRouter()
 const route = useRoute()

diff --git a/webapp/src/components/progress_bars/TrainingButtons.vue b/webapp/src/components/progress_bars/TrainingButtons.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-show="route.fullPath !== '/list'" class="flex flex-row justify-center">
+  <div class="flex flex-row justify-center">
     <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8">
       <CustomButton
         v-show="trainingStore.step !== undefined && trainingStore.step >= 1"

diff --git a/webapp/src/components/training/TrainingSteps.vue b/webapp/src/components/training/TrainingSteps.vue
@@ -1,30 +1,54 @@
 <template>
-  <div v-if="task !== undefined">
-    <Description v-show="trainingStore.step === 1" :task="task" />
-
-    <div
-      v-show="trainingStore.step === 2"
-      class="flex flex-col space-y-4 md:space-y-8"
-    >
-      <LabeledDatasetInput :task v-model="dataset">
-        <template #header>
-          <DataDescription :task />
-        </template>
-      </LabeledDatasetInput>
-    </div>
-
-    <Trainer
-      v-show="trainingStore.step === 3"
-      :task
-      :dataset="unamedDataset"
-      @model="(m) => (trainedModel = m)"
-    />
-
-    <Finished v-show="trainingStore.step === 4" :task :model="trainedModel" />
+  <div class="separated">
+    <!-- TrainingBar -->
+
+    <TrainingButtons />
+
+    <template v-if="task !== undefined">
+      <div v-show="trainingStore.step === 1">
+        <Description :task />
+      </div>
+
+      <div v-show="trainingStore.step === 2" class="separated">
+        <LabeledDatasetInput :task v-model="dataset">
+          <template #header>
+            <DataDescription :task />
+          </template>
+        </LabeledDatasetInput>
+      </div>
+
+      <div v-show="trainingStore.step === 3">
+        <Trainer
+          :task
+          :dataset="unamedDataset"
+          @model="(m) => (trainedModel = m)"
+        />
+      </div>
+
+      <div v-show="trainingStore.step === 4">
+        <Finished :task :model="trainedModel" />
+      </div>
+
+      <TrainingButtons />
+    </template>
   </div>
-  <TrainingButtons />
 </template>
 
+<style lang="css" scoped>
+.separated {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* tailwind "md" size */
+@media (min-width: 768px) {
+  .separated {
+    gap: 2rem;
+  }
+}
+</style>
+
 <script lang="ts" setup>
 import { computed, onMounted, ref, toRaw, watch } from "vue";
 import { useRouter, useRoute } from "vue-router";