TMP simplify pages layout

epfml · Dec 21, 2024 · 36997ea · 36997ea
1 parent 928ef56
commit 36997ea
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 25 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/training/TrainingSteps.vue b/webapp/src/components/training/TrainingSteps.vue
@@ -1,30 +1,56 @@
 <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="root">
+    <!-- TrainingBar -->
+
+    <TrainingButtons />
+
+    <template v-if="task !== undefined">
+      <div v-show="trainingStore.step === 1">
+        <Description :task />
+      </div>
+
+      <div v-show="trainingStore.step === 2">
+        <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>
+.root,
+.root > *:not(:first-child, :last-child) {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* tailwind "md" size */
+@media (min-width: 768px) {
+  .root,
+  .root > *:not(:first-child, :last-child) {
+    gap: 2rem;
+  }
+}
+</style>
+
 <script lang="ts" setup>
 import { computed, onMounted, ref, toRaw, watch } from "vue";
 import { useRouter, useRoute } from "vue-router";