fixup! web-client: style alignment

epfml · Nov 23, 2022 · af7bf0d · af7bf0d
1 parent e5625ee
commit af7bf0d
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 33 deletions.
diff --git a/web-client/src/components/progress_bars/InformationBar.vue b/web-client/src/components/progress_bars/InformationBar.vue
@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <div class="hidden md:inline-block w-full py-6">
+  <div class="space-y-4 md:space-y-8 my-8 md:my-16">
+    <div class="hidden md:inline-block w-full">
       <div class="flex">
         <ProgressIcon
           class="w-1/4"

diff --git a/web-client/src/components/progress_bars/ValidationBar.vue b/web-client/src/components/progress_bars/ValidationBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="space-y-8">
+  <div class="space-y-8 mb-8 md:mb-16">
     <h1 class="text-disco-cyan font-disco text-3xl text-center">
       Test & Validation
     </h1>
@@ -77,19 +77,50 @@
         </template>
       </ProgressIcon>
     </div>
+    <div
+      v-show="showPrev || showNext"
+      class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8"
+    >
+      <div class="text-center md:text-right">
+        <CustomButton
+          v-show="showPrev"
+          @click="prevStep"
+        >
+          Previous
+        </CustomButton>
+      </div>
+      <div class="text-center md:text-left">
+        <CustomButton
+          v-show="showNext"
+          @click="nextStep"
+        >
+          Next
+        </CustomButton>
+      </div>
+    </div>
   </div>
 </template>
 <script setup lang="ts">
+import { computed } from 'vue'
+
 import { useValidationStore } from '@/store/validation'
 import { useMemoryStore } from '@/store/memory'
 import { useToaster } from '@/composables/toaster'
 import ProgressIcon from './ProgressIcon.vue'
+import CustomButton from '@/components/simple/CustomButton.vue'
 
 const toaster = useToaster()
 const validationStore = useValidationStore()
 const memoryStore = useMemoryStore()
 
+const showPrev = computed<boolean>(() =>
+  validationStore.step > 0)
+
+const showNext = computed<boolean>(() =>
+  validationStore.step > 0 && validationStore.step < 2)
+
 const isActive = (step: number): boolean => step <= validationStore.step
+
 const handleRoute = (step: number): void => {
   if (memoryStore.models.size === 0) {
     toaster.error('Please train a model beforehand')
@@ -99,4 +130,8 @@ const handleRoute = (step: number): void => {
     validationStore.step = step
   }
 }
+
+const prevStep = (): void => { validationStore.step-- }
+
+const nextStep = (): void => { validationStore.step++ }
 </script>
diff --git a/web-client/src/components/validation/Validation.vue b/web-client/src/components/validation/Validation.vue
@@ -1,28 +1,5 @@
 <template>
   <div>
-    <!-- previous button -->
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8 py-6 my-4 md:my-8">
-      <div
-        class="text-center md:text-right"
-      >
-        <CustomButton
-          v-show="showPrev"
-          @click="prevStep"
-        >
-          Previous
-        </CustomButton>
-      </div>
-      <div
-        class="text-center md:text-left"
-      >
-        <CustomButton
-          v-show="showNext"
-          @click="nextStep"
-        >
-          Next
-        </CustomButton>
-      </div>
-    </div>
     <div v-show="validationStore.step === 0">
       <div class="flex flex-col gap-16">
         <div v-if="memoryStore.models.size > 0">
@@ -190,7 +167,6 @@ import { useMemoryStore } from '@/store/memory'
 import { useTasksStore } from '@/store/tasks'
 import { useValidationStore } from '@/store/validation'
 import { useToaster } from '@/composables/toaster'
-import CustomButton from '@/components/simple/CustomButton.vue'
 import Data from '@/components/data/Data.vue'
 import Validator from '@/components/validation/Validator.vue'
 import ButtonCard from '@/components/containers/ButtonCard.vue'
@@ -208,12 +184,10 @@ const currentTask = shallowRef<Task | undefined>(undefined)
 
 const federatedTasks = computed<List<Task>>(() =>
   tasksStore.tasks.filter((t) => t.trainingInformation.scheme === 'Federated').toList())
-const showPrev = computed<boolean>(() =>
-  validationStore.step > 0)
-const showNext = computed<boolean>(() =>
-  validationStore.step > 0 && validationStore.step < 2)
+
 const memory = computed<Memory>(() =>
   memoryStore.useIndexedDB ? new browser.IndexedDB() : new EmptyMemory())
+
 const datasetBuilder = computed<data.DatasetBuilder<File> | undefined>(() => {
   if (currentTask.value === undefined) {
     return undefined
@@ -275,8 +249,7 @@ const selectModel = (path: Path): void => {
     toaster.error('Model not found')
   }
 }
-const prevStep = (): void => { validationStore.step-- }
-const nextStep = (): void => { validationStore.step++ }
+
 const taskTitle = (taskID: string): string => {
   const titled = tasksStore.tasks.get(taskID)
   if (titled !== undefined) {