clean up styles around badge hover, lighten effect slightly, and fix …

…spacing issues where badges move slightly when hovered
datalab-org · Feb 20, 2024 · b6a00c9 · b6a00c9
1 parent 44effe0
commit b6a00c9
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 19 deletions.
diff --git a/webapp/src/App.vue b/webapp/src/App.vue
@@ -98,17 +98,6 @@ body {
   color: #a6ce39;
 }
 
-.badge.clickable {
-  border: 2px solid transparent;
-}
-
-.badge.clickable:hover {
-  cursor: pointer;
-  border: 2px solid black;
-  border-color: black;
-  box-shadow: 0 0 3px;
-}
-
 .clickable {
   cursor: pointer;
 }

diff --git a/webapp/src/components/FormattedCollectionName.vue b/webapp/src/components/FormattedCollectionName.vue
@@ -64,10 +64,13 @@ export default {
 
 <style scoped>
 .formatted-collection-name {
-  border-width: 1px;
+  border: 1.5px solid;
+  margin: 1px;
 }
 
 .formatted-collection-name:hover {
-  border-width: 1.5px !important;
+  border-width: 2px;
+  margin: 0px;
+  box-shadow: 0 0 2px gray;
 }
 </style>
diff --git a/webapp/src/components/FormattedItemName.vue b/webapp/src/components/FormattedItemName.vue
@@ -1,7 +1,7 @@
 <template>
   <span v-if="item_id">
     <span
-      class="badge badge-light"
+      class="formatted-item-name badge badge-light"
       :class="{ clickable: enableClick || enableModifiedClick }"
       :style="{ backgroundColor: badgeColor }"
       @click.exact="enableClick ? openEditPageInNewTab() : null"
@@ -76,3 +76,14 @@ export default {
   emits: ["itemIdClicked"],
 };
 </script>
+
+<style scoped>
+.formatted-item-name {
+  border: 2px solid transparent;
+}
+
+.formatted-item-name.clickable:hover {
+  border: 2px solid rgba(0, 0, 0, 0.6);
+  box-shadow: 0 0 2px gray;
+}
+</style>
diff --git a/webapp/src/views/EditPage.vue b/webapp/src/views/EditPage.vue
@@ -4,7 +4,7 @@
     class="navbar navbar-expand sticky-top navbar-dark py-0 editor-navbar"
     :style="{ backgroundColor: navbarColor }"
   >
-    <span class="navbar-brand" @click="scrollToID($event, 'topScrollPoint')"
+    <span class="navbar-brand clickable" @click="scrollToID($event, 'topScrollPoint')"
       >{{ itemTypeEntry?.navbarName || "loading..." }}&nbsp;&nbsp;|&nbsp;&nbsp;
       <FormattedItemName :item_id="item_id" :itemType="itemType" />
     </span>
@@ -324,15 +324,15 @@ label,
   padding: 0.3rem;
 }
 
+::v-deep(.navbar-brand:hover .formatted-item-name) {
+  outline: 2px solid rgba(0, 0, 0, 0.3);
+}
+
 .unsaved-warning {
   font-weight: 600;
   color: #ffc845;
 }
 
-.navbar-brand {
-  cursor: pointer;
-}
-
 .block-container {
   padding-bottom: 100px;
   position: relative;