fix ui in experiments page

mozilla-ai · Nov 20, 2024 · b05eb63 · b05eb63
1 parent b737159
commit b05eb63
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 6 deletions.
diff --git a/lumigator/frontend/src/components/molecules/LPageHeader.vue b/lumigator/frontend/src/components/molecules/LPageHeader.vue
@@ -1,10 +1,10 @@
 <template>
   <div
     class="l-page-header"
-    :class="{'column': !subtitle.length > 0}"
+    :class="{'column': column}"
   >
     <div class="l-page-header__text-content">
-      <h3>{{ title }}</h3>
+      <h3>{{ title }} </h3>
       <p>{{ subtitle }}</p>
     </div>
     <Button
@@ -36,6 +36,11 @@ defineProps({
     type: String,
     default: '',
     required: false
+  },
+  column: {
+    type: Boolean,
+    default: false,
+    required: false
   }
 });
 
@@ -80,6 +85,7 @@ const handleAction = () => {
   &.column{
    width: 100%;
    min-width: 60vw;
+   flex-direction: column;
   }
 
 }

diff --git a/lumigator/frontend/src/components/pages/LExperiments.vue b/lumigator/frontend/src/components/pages/LExperiments.vue
@@ -1,9 +1,13 @@
 <template>
-  <div class="l-experiments">
+  <div
+    class="l-experiments"
+    :class="{'no-data':experiments.length === 0}"
+  >
     <div class="l-experiments__header-container">
       <l-page-header
         title="Experiments"
         button-label="Create Experiment"
+        :column="experiments.length === 0"
         @l-header-action="onCreateExperiment()"
       />
     </div>
@@ -45,9 +49,27 @@ onMounted(async () => {
 })
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .l-experiments {
-	display: grid;
-	place-items: center;
+  $root: &;
+  max-width: $l-main-width;
+  margin: 0 auto;
+
+  &__header-container {
+    padding:$l-spacing-1;
+    display: grid;
+    place-items: center;
+    width: 100%;
+  }
+
+  &__table-container {
+		padding: $l-spacing-1;
+    display: grid;
+    width: 100%;
+  }
+  &.no-data {
+    display: grid;
+    place-items: center;
+  }
 }
 </style>