From 6e4fe5cf0cfaf23daec829e863041da0b657ae55 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Thu, 20 Jun 2024 16:05:21 +1200
Subject: [PATCH 1/2] Update dataset card hover border style

---
 src/components/DatasetCard.vue    |  3 ++-
 src/components/SidebarContent.vue | 31 ++++++++++++++++++++++++-------
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/components/DatasetCard.vue b/src/components/DatasetCard.vue
index 8bf89a31..b7101446 100644
--- a/src/components/DatasetCard.vue
+++ b/src/components/DatasetCard.vue
@@ -264,7 +264,8 @@ export default {
 
 <style lang="scss" scoped>
 .dataset-card {
-  padding-left: 15px;
+  padding-left: 5px;
+  padding-right: 5px;
   position: relative;
   min-height: 17rem;
 }
diff --git a/src/components/SidebarContent.vue b/src/components/SidebarContent.vue
index 455b7fba..5c58fed4 100644
--- a/src/components/SidebarContent.vue
+++ b/src/components/SidebarContent.vue
@@ -41,9 +41,9 @@
       <div v-for="result in results" :key="result.doi" class="step-item">
         <DatasetCard
           class="dataset-card"
-          :entry="result" 
-          :envVars="envVars" 
-          @mouseenter="hoverChanged(result)" 
+          :entry="result"
+          :envVars="envVars"
+          @mouseenter="hoverChanged(result)"
           @mouseleave="hoverChanged(undefined)"
         />
       </div>
@@ -458,10 +458,27 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.dataset-card:hover {
-  border-style: solid;
-  border-color: var(--el-color-primary);
-  border-radius: 5px;
+.dataset-card {
+  position: relative;
+
+  &::before {
+    content: "";
+    display: block;
+    width: calc(100% - 15px);
+    height: 100%;
+    position: absolute;
+    top: 7px;
+    left: 7px;
+    border-style: solid;
+    border-radius: 5px;
+    border-color: transparent;
+  }
+
+  &:hover {
+    &::before {
+      border-color: var(--el-color-primary);
+    }
+  }
 }
 
 .content-card {

From f07aa35ac961cbc6b4bc31752b4acb9268be8860 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Thu, 20 Jun 2024 16:10:55 +1200
Subject: [PATCH 2/2] UI update for App page

---
 src/App.vue | 32 +++++++++++++++++++++++---------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f241f5e3..2bec38fd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,15 +4,17 @@
       rel="stylesheet"
       href="https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap"
     />
-    Click arrow to open sidebar
-    <el-button @click="openSearch">search Uberon from refs</el-button>
-    <el-button @click="singleFacets">Add heart to Filter</el-button>
-    <el-button @click="addStomach">Add stomach to Filter</el-button>
-    <el-button @click="addInvalidTerm">Add invalid term to Filter</el-button>
-    <el-button @click="multiFacets">multiple facets</el-button>
-    <el-button @click="neuronSearch">open neuron search</el-button>
-    <el-button @click="keywordSearch">keyword search</el-button>
-    <el-button @click="getFacets">Get facets</el-button>
+    <div class="options-container">
+      <div>Click arrow to open sidebar</div>
+      <el-button @click="openSearch">search Uberon from refs</el-button>
+      <el-button @click="singleFacets">Add heart to Filter</el-button>
+      <el-button @click="addStomach">Add stomach to Filter</el-button>
+      <el-button @click="addInvalidTerm">Add invalid term to Filter</el-button>
+      <el-button @click="multiFacets">multiple facets</el-button>
+      <el-button @click="neuronSearch">open neuron search</el-button>
+      <el-button @click="keywordSearch">keyword search</el-button>
+      <el-button @click="getFacets">Get facets</el-button>
+    </div>
     <SideBar
       :envVars="envVars"
       class="side-bar"
@@ -230,4 +232,16 @@ body {
 .map-icon {
   color: $app-primary-color;
 }
+.options-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: calc(100% - 600px);
+  padding: 1rem;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
 </style>