Add triplecolumn

ubc-biomod · Sep 29, 2023 · 298f8b3 · 298f8b3
1 parent 7b5a829
commit 298f8b3
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 3 deletions.
diff --git a/src/components/lab-notebook/DoubleColumn.vue b/src/components/lab-notebook/DoubleColumn.vue
@@ -13,8 +13,9 @@ onMounted(() => {
   }
 })
 
+const maxWidth = scrollWindow.value ? (scrollWindow.value?.scrollWidth - scrollWindow.value?.clientWidth) : 0
+
 const onScroll = () => {
-  const maxWidth = scrollWindow.value ? (scrollWindow.value?.scrollWidth - scrollWindow.value?.clientWidth) : 0
   if (scrollWindow.value?.scrollLeft == 0) scrollPos.value = 0
   if (scrollWindow.value?.scrollLeft == maxWidth) scrollPos.value = maxWidth
 }
@@ -59,8 +60,8 @@ const onScroll = () => {
           ></span>
           <span
             :class="{
-              'bg-notebookText': scrollPos != 0,
-              'border border-notebookText': scrollPos == 0
+              'bg-notebookText': scrollPos == maxWidth,
+              'border border-notebookText': scrollPos != maxWidth
             }"
             class="w-2 h-2 rounded-full transition duration-500"
           ></span>

diff --git a/src/components/lab-notebook/TripleColumn.vue b/src/components/lab-notebook/TripleColumn.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import Bubble from './Bubble.vue'
+
+const title = ref()
+const id = ref('')
+const scrollWindow = ref<HTMLElement>()
+const scrollPos = ref(0)
+let maxWidth = 0
+
+onMounted(() => {
+  if (title.value) {
+    id.value = title.value.textContent.trim()
+  }
+  maxWidth = scrollWindow.value ? (scrollWindow.value?.scrollWidth - scrollWindow.value?.clientWidth) : 0
+})
+
+
+
+const onScroll = () => {
+  if (scrollWindow.value?.scrollLeft == 0) scrollPos.value = 0
+  if (scrollWindow.value?.scrollLeft == maxWidth/2) scrollPos.value = maxWidth/2
+  if (scrollWindow.value?.scrollLeft == maxWidth) scrollPos.value = maxWidth
+}
+</script>
+
+<template>
+  <Bubble :always-dropdown="false">
+    <template #title>
+      <slot name="title"></slot>
+    </template>
+    <template #body>
+      <div class="flex flex-col items-center gap-4">
+        <div
+          ref="scrollWindow"
+          @scroll="onScroll"
+          class="flex gap-8 w-full overflow-x-scroll snap-x snap-mandatory lg:overflow-x-auto"
+        >
+          <div
+            class="min-w-full lg:min-w-0 lg:w-1/3 text-notebookText bg-slate p-6 rounded-[3.2em] snap-center"
+          >
+            <h3 class="text-subtitle-sm lg:text-subtitle text-white mb-4">
+              <slot name="left-title"></slot>
+            </h3>
+            <slot name="left-body"></slot>
+          </div>
+          <div
+              class="min-w-full lg:min-w-0 lg:w-1/3 text-notebookText bg-slate p-6 rounded-[3.2em] snap-center"
+            >
+              <h3 class="text-subtitle-sm lg:text-subtitle text-white mb-4">
+                <slot name="mid-title"></slot>
+              </h3>
+              <slot name="mid-body"></slot>
+            </div>
+          <div
+            class="min-w-full lg:min-w-0 lg:w-1/3 text-notebookText bg-slate p-6 rounded-[3.2em] snap-center"
+          >
+            <h3 class="text-subtitle-sm lg:text-subtitle text-white mb-4">
+              <slot name="right-title"></slot>
+            </h3>
+            <slot name="right-body"></slot>
+          </div>
+        </div>
+        <div v-if="$windowWidth < 1024" class="flex justify-center gap-4">
+          <span
+            :class="{
+              'bg-notebookText': scrollPos == 0,
+              'border border-notebookText': scrollPos != 0
+            }"
+            class="w-2 h-2 rounded-full transition duration-500"
+          ></span>
+          <span
+            :class="{
+              'bg-notebookText': scrollPos == maxWidth/2,
+              'border border-notebookText': scrollPos != maxWidth/2
+            }"
+            class="w-2 h-2 rounded-full transition duration-500"
+          ></span>
+          <span
+            :class="{
+              'bg-notebookText': scrollPos == maxWidth,
+              'border border-notebookText': scrollPos != maxWidth
+            }"
+            class="w-2 h-2 rounded-full transition duration-500"
+            ></span>
+        </div>
+      </div>
+    </template>
+  </Bubble>
+</template>
diff --git a/src/views/enzymosome/GroupAView.vue b/src/views/enzymosome/GroupAView.vue
@@ -2,6 +2,7 @@
 import Notebook from '@/components/lab-notebook/Notebook.vue'
 import SingleColumn from '@/components/lab-notebook/SingleColumn.vue'
 import DoubleColumn from '@/components/lab-notebook/DoubleColumn.vue'
+import TripleColumn from '@/components/lab-notebook/TripleColumn.vue'
 import CustomTable from '@/components/CustomTable.vue'
 
 const tableData = {
@@ -101,6 +102,15 @@ const tableData = {
           </p>
         </template>
       </SingleColumn>
+      <TripleColumn>
+        <template #title>Title</template>
+        <template #left-title>Left Title</template>
+        <template #left-body>Left body stuff</template>
+        <template #mid-title>Mid Title</template>
+        <template #mid-body>Mid body stuff</template>
+        <template #right-title>Right Title</template>
+        <template #right-body>Right body stuff</template>
+      </TripleColumn>
       <SingleColumn>
         <template #title>Results</template>
         <template #graphic>