Change group a results to two column image

ubc-biomod · Sep 29, 2023 · 126ea78 · 126ea78
1 parent f93609f
commit 126ea78
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 26 deletions.
diff --git a/src/components/lab-notebook/Bubble.vue b/src/components/lab-notebook/Bubble.vue
@@ -51,7 +51,7 @@ onMounted(() => {
       </svg>
     </div>
     <div
-      class="overflow-hidden"
+      class="overflow-hidden lg:overflow-auto"
       :class="{
         'height-0 pb-0 pt-4 px-4': ($windowWidth < 1024 || alwaysDropdown) && !activated,
         'p-4': ($windowWidth >= 1024 && !alwaysDropdown) || activated

diff --git a/src/components/lab-notebook/SingleColumn.vue b/src/components/lab-notebook/SingleColumn.vue
@@ -15,7 +15,7 @@ withDefaults(defineProps<{ alwaysDropdown?: boolean }>(), {
       <div class="text-notebookText mb-6">
         <slot name="body"></slot>
       </div>
-      <div class="m-auto text-center flex flex-col items-center gap-2 text-notebookText">
+      <div class="text-center flex flex-col items-center gap-2 text-notebookText">
         <slot name="graphic"></slot>
       </div>
     </template>

diff --git a/src/views/enzymosome/GroupAView.vue b/src/views/enzymosome/GroupAView.vue
@@ -104,31 +104,33 @@ const tableData = {
       <SingleColumn>
         <template #title>Results</template>
         <template #graphic>
-          <div class="flex flex-col items-center">
-            <div class="w-48 h-48 bg-gray-300"></div>
-            <p>
-              Figure 1: Fluorescence of the DNase I Picogreen assay in the manufacturer’s buffer,
-              HEPES buffer and TE buffer.
-            </p>
-          </div>
-
-          <div class="flex flex-col items-center">
-            <div class="w-48 h-48 bg-gray-300"></div>
-            <p>
-              Figure 2: Calibration curve of the DNase I picogreen assay at DNA concentrations of 1,
-              10, 25, 50 and 100 ng/mL.
-            </p>
-          </div>
-
-          <div class="flex flex-col items-center w-full">
-            <div class="overflow-x-scroll w-full">
-              <CustomTable :table-data="tableData" />
+          <div class="flex flex-col gap-4 w-full">
+            <div class="flex flex-col lg:flex-row lg:justify-center items-center">
+              <div class="flex flex-col items-center gap-2">
+                <div class="w-48 h-48 bg-gray-300"></div>
+                <p>
+                  Figure 1: Fluorescence of the DNase I Picogreen assay in the manufacturer’s buffer,
+                  HEPES buffer and TE buffer.
+                </p>
+              </div>
+              <div class="flex flex-col items-center gap-2">
+                <div class="w-48 h-48 bg-gray-300"></div>
+                <p>
+                  Figure 2: Calibration curve of the DNase I picogreen assay at DNA concentrations of 1,
+                  10, 25, 50 and 100 ng/mL.
+                </p>
+              </div>
+            </div>
+            <div class="flex flex-col items-center w-full gap-2">
+              <div class="overflow-x-scroll w-full">
+                <CustomTable :table-data="tableData" />
+              </div>
+              <p>
+                Table 1: Approximate concentration of DNase I in each buffer at the beginning and end
+                of the fluorescence measuring period, based on the combined information of Figure 1
+                and Figure 2.
+              </p>
             </div>
-            <p>
-              Table 1: Approximate concentration of DNase I in each buffer at the beginning and end
-              of the fluorescence measuring period, based on the combined information of Figure 1
-              and Figure 2.
-            </p>
           </div>
         </template>
       </SingleColumn>