From fb749b04fac2c9b14e6d79dfab1fb6e659ee6b68 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Mon, 5 Aug 2024 16:04:33 +1200
Subject: [PATCH 1/5] Update context card text style

---
 src/components/ContextCard.vue | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/ContextCard.vue b/src/components/ContextCard.vue
index bb51a6b9..3b2a9f47 100644
--- a/src/components/ContextCard.vue
+++ b/src/components/ContextCard.vue
@@ -16,7 +16,7 @@
               <div v-if="contextData.views && contextData.views.length > 0" class="subtitle">Scaffold Views</div>
               <template v-for="(view, i) in contextData.views" :key="i+'_1'">
                 <div @click="openViewFile(view)" class="context-card-view">
-                  <img class="view-image" :src="getFileFromPath(view.thumbnail)"> 
+                  <img class="view-image" :src="getFileFromPath(view.thumbnail)">
                   <div class="view-description">{{view.description}}</div>
                 </div>
                 <div class="padding"/>
@@ -43,7 +43,7 @@
               <div v-if="contextData.views && contextData.views.length > 0" class="subtitle">Scaffold Views</div>
               <template v-for="(view, i) in contextData.views" :key="i+'_1'">
                 <span  @click="viewClicked(view, i)" class="context-card-view">
-                  <img class="view-image" :src="getFileFromPath(view.thumbnail)"/> 
+                  <img class="view-image" :src="getFileFromPath(view.thumbnail)"/>
                   <div class="view-description">{{view.description}}<i class="el-icon-warning-outline info"></i> </div>
                 </span>
                 <div v-if="sampleDetails[i]" v-html="samplesMatching(view.id).description"/>
@@ -159,12 +159,12 @@ export default {
     },
     banner: function(){
       if (this.contextData.banner){
-        return this.getFileFromPath(this.contextData.banner) 
+        return this.getFileFromPath(this.contextData.banner)
       } else if (this.contextData && this.contextData.views && this.contextData.views.length > 0) {
         if(this.contextData.views[0].thumbnail){
           return this.getFileFromPath(this.contextData.views[0].thumbnail)
         }
-      } 
+      }
       return this.entry.banner
     }
   },
@@ -176,7 +176,7 @@ export default {
       else return []
     },
     viewClicked: function(view, i){
-      this.openViewFile(view) 
+      this.openViewFile(view)
       this.toggleSampleDetails(i)
     },
     getContextFile: function (contextFileUrl) {
@@ -192,7 +192,7 @@ export default {
         .then((data) => {
           this.contextData = data
           this.loading = false
-          this.addDiscoverIdsToContextData() 
+          this.addDiscoverIdsToContextData()
         })
         .catch((err) => {
           //set defaults if we hit an error
@@ -285,6 +285,7 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
+  text-align: initial;
 }
 
 .context-card{
@@ -301,6 +302,7 @@ export default {
   cursor: pointer;
   margin-bottom: 8px;
   display: flex;
+  gap: 8px;
 }
 
 .view-image {
@@ -363,6 +365,7 @@ export default {
 
 .subtitle{
   font-weight: bold;
+  margin-bottom: 8px;
 }
 
 .scrollbar::-webkit-scrollbar-track {

From b1187552129977c0abc774dc17a96785438776e8 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Mon, 12 Aug 2024 15:35:14 +1200
Subject: [PATCH 2/5] Update context card layout

---
 src/components/ContentBar.vue  |  2 +-
 src/components/ContextCard.vue | 30 +++++++++++++++++++++++-------
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/components/ContentBar.vue b/src/components/ContentBar.vue
index d328de6d..16470b8b 100644
--- a/src/components/ContentBar.vue
+++ b/src/components/ContentBar.vue
@@ -365,7 +365,7 @@ export default {
 
 :deep(.context-card-popover.el-popover.el-popper) {
   max-width: calc(100vw - 100px);
-  padding-right: 0px;
+  // padding-right: 0px;
   width: unset!important;
   background: #fff!important;
 }
diff --git a/src/components/ContextCard.vue b/src/components/ContextCard.vue
index 3b2a9f47..0a2df04c 100644
--- a/src/components/ContextCard.vue
+++ b/src/components/ContextCard.vue
@@ -9,8 +9,11 @@
           <div style="margin-right: 8px;">
             <div class="title">{{contextData.heading}}</div>
             <div v-html="parseMarkdown(contextData.description)"/>
-            <br/>
-
+            <!-- <br/> -->
+          </div>
+        </div>
+        <div class="card-bottom">
+          <div>
             <!-- Show sampeles and views seperately if they do not match -->
             <template v-if="!samplesUnderViews">
               <div v-if="contextData.views && contextData.views.length > 0" class="subtitle">Scaffold Views</div>
@@ -286,16 +289,20 @@ export default {
   justify-content: center;
   align-items: center;
   text-align: initial;
+  word-break: initial;
 }
 
 .context-card{
   background-color: white;
-  max-height: 10  50px;
   font-size: 14px;
   position: relative;
   display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
   width: 100%;
   max-height: 258px;
+  overflow-y: auto;
+  scrollbar-width: thin;
 }
 
 .context-card-view{
@@ -307,8 +314,8 @@ export default {
 
 .view-image {
   width: 34px;
-  height: 34px;
-  flex: 1;
+  height: auto;
+  // flex: 1;
 }
 
 .view-descriptions {
@@ -341,8 +348,17 @@ export default {
 .card-right {
   flex: 1.5;
   word-break: normal !important;
-  overflow-y: scroll;
-  scrollbar-width: thin;
+  // overflow-y: scroll;
+  // scrollbar-width: thin;
+
+  :deep(p:last-child) {
+    margin-bottom: 0;
+  }
+}
+
+.card-bottom {
+  flex: 0 0 auto;
+  max-width: 100%;
 }
 
 .cursor-pointer {

From 9069e81b2f860b8b18c1e44272a80e7e753661ed Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Mon, 12 Aug 2024 17:12:59 +1200
Subject: [PATCH 3/5] Update context card layout

---
 src/components/ContextCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ContextCard.vue b/src/components/ContextCard.vue
index 0a2df04c..78ddca86 100644
--- a/src/components/ContextCard.vue
+++ b/src/components/ContextCard.vue
@@ -357,7 +357,7 @@ export default {
 }
 
 .card-bottom {
-  flex: 0 0 auto;
+  flex: 0 0 100%;
   max-width: 100%;
 }
 

From 07f1d7fc731489f1019b9d45835e0b7e3e7d8c9f Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Mon, 12 Aug 2024 17:36:23 +1200
Subject: [PATCH 4/5] Fix context card layout issues

---
 src/components/ContentBar.vue         |  2 +-
 src/components/ContextCard.vue        |  8 +++++---
 src/components/FlatmapContextCard.vue | 11 ++++-------
 3 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/components/ContentBar.vue b/src/components/ContentBar.vue
index 16470b8b..3c4aab14 100644
--- a/src/components/ContentBar.vue
+++ b/src/components/ContentBar.vue
@@ -365,7 +365,7 @@ export default {
 
 :deep(.context-card-popover.el-popover.el-popper) {
   max-width: calc(100vw - 100px);
-  // padding-right: 0px;
+  padding: 0px;
   width: unset!important;
   background: #fff!important;
 }
diff --git a/src/components/ContextCard.vue b/src/components/ContextCard.vue
index 78ddca86..0e82b716 100644
--- a/src/components/ContextCard.vue
+++ b/src/components/ContextCard.vue
@@ -303,6 +303,11 @@ export default {
   max-height: 258px;
   overflow-y: auto;
   scrollbar-width: thin;
+  box-sizing: border-box;
+
+  &:not(.context-card-container) {
+    padding: 10px;
+  }
 }
 
 .context-card-view{
@@ -315,7 +320,6 @@ export default {
 .view-image {
   width: 34px;
   height: auto;
-  // flex: 1;
 }
 
 .view-descriptions {
@@ -348,8 +352,6 @@ export default {
 .card-right {
   flex: 1.5;
   word-break: normal !important;
-  // overflow-y: scroll;
-  // scrollbar-width: thin;
 
   :deep(p:last-child) {
     margin-bottom: 0;
diff --git a/src/components/FlatmapContextCard.vue b/src/components/FlatmapContextCard.vue
index 19f17e09..2e6a3a87 100644
--- a/src/components/FlatmapContextCard.vue
+++ b/src/components/FlatmapContextCard.vue
@@ -51,7 +51,7 @@ export default {
             year: 'numeric',
         })
       }
-      return flatmapPublished 
+      return flatmapPublished
     },
     sckanReleaseDisplay: function() {
       let sckanRelease = "Unknown"
@@ -70,7 +70,7 @@ export default {
           sckanRelease = "Unknown";
         }
       }
-      return sckanRelease 
+      return sckanRelease
     },
     sckanReleaseLink: function() {
       let sckanLink = "Unknown"
@@ -102,19 +102,16 @@ export default {
 
 .flatmap-context-card{
   background-color: white;
-  max-height: 10  50px;
   font-size: 12px;
   position: relative;
   display: flex;
   width: 100%;
   max-height: 258px;
+  padding: 10px;
 }
 
 .card-right {
-  flex: 1.3;
-  padding-left: 6px;
-  // overflow-y: scroll;
-  scrollbar-width: thin;
+  flex: 1;
 }
 
 .cursor-pointer {

From 74c856b62af79657641490c3ba0f3d026bbaf869 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Tue, 13 Aug 2024 10:05:12 +1200
Subject: [PATCH 5/5] Update context card layout

---
 src/components/ContextCard.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ContextCard.vue b/src/components/ContextCard.vue
index 0e82b716..deaa0e57 100644
--- a/src/components/ContextCard.vue
+++ b/src/components/ContextCard.vue
@@ -6,7 +6,7 @@
           <img :src="banner" class="context-image">
         </div>
         <div class="card-right scrollbar">
-          <div style="margin-right: 8px;">
+          <div>
             <div class="title">{{contextData.heading}}</div>
             <div v-html="parseMarkdown(contextData.description)"/>
             <!-- <br/> -->
@@ -288,7 +288,7 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  text-align: initial;
+  // text-align: initial; // default is justify
   word-break: initial;
 }