@abi-software/map-side-bar 2.14.5 → 2.14.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.14.5",
+  "version": "2.14.6",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

package/src/assets/connectivity-explorer.scss

@@ -0,0 +1,11 @@
+/*
+ * Common styles for connectivity explorer components
+ */
+
+.id-tag {
+  color: #555;
+  background: #e0e0e0;
+  padding: 2px 4px;
+  border-radius: 4px;
+  font-size: .75rem !important;
+}

package/src/components/ConnectivityCard.vue

@@ -8,7 +8,6 @@
         </div>
         <template v-for="field in displayFields" :key="field">
           <div class="card-details" v-if="entry[field]">
-            <strong>{{ field }}: </strong>
             <div v-if="field === 'nerve-label'" class="card-tags">
               <div v-for="nerve in entry[field]" :key="nerve.nerve">
                 <el-tag type="primary" size="small">
@@ -19,7 +18,7 @@
                 </el-tag>
               </div>
             </div>
-            <span v-else>{{ entry[field] }}</span>
+            <span class="id-tag" v-else>{{ entry[field] }}</span>
           </div>
         </template>
       </div>
@@ -98,6 +97,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '../assets/connectivity-explorer.scss';
+
 .connectivity-card {
   padding-left: 5px;
   position: relative;
@@ -111,7 +112,7 @@ export default {
 }
 
 .card-title {
-  margin-bottom: 0.75rem;
+  margin-bottom: 0.5rem;
   font-weight: bold;
   line-height: 1.5;
   letter-spacing: 1.05px;
@@ -125,6 +126,10 @@ export default {
 .card-details {
   line-height: 1.5;
   letter-spacing: 1.05px;
+
+  + .card-details {
+    margin-top: 0.25em;
+  }
 }
 
 .el-tag {

package/src/components/ConnectivityInfo.vue

@@ -27,7 +27,7 @@
             </button>
           </div>
           <div class="subtitle">
-            <strong>Id: </strong>{{ entry.featureId[0] }}
+            <span class="id-tag">{{ entry.featureId[0] }}</span>
             <el-button
               round
               size="small"
@@ -991,6 +991,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '../assets/connectivity-explorer.scss';
+
 .connectivity-info-title {
   padding: 0;
   display: flex;
@@ -1155,6 +1157,10 @@ export default {
   text-transform: uppercase;
 }
 
+.subtitle + .subtitle {
+  margin-top: 0.25em;
+}
+
 .button {
   margin-left: 0px !important;
   margin-top: 0px !important;