Merge pull request #73 from akhuoa/feature/UI-updates

UI updates
ABI-Software · Jul 3, 2024 · 00e3b31 · 00e3b31
2 parents db0e070 + f07aa35
commit 00e3b31
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 17 deletions.
diff --git 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>
diff --git 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
@@ -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 {