Add styling for groups and concepts

NatLibFi · Dec 18, 2024 · 6a0d0ad · 6a0d0ad
1 parent bf41dee
commit 6a0d0ad
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/resource/css/skosmos.css b/resource/css/skosmos.css
@@ -620,6 +620,19 @@ body {
     font-weight: bold;
   }
 
+  #tab-groups .sidebar-list .list-group-item .concept-label i {
+    color: var(--dark-color);
+    font-size: 14px;
+  }
+
+  #tab-groups .sidebar-list .list-group-item a.child-concept {
+    font-weight: normal !important;
+  }
+
+  #tab-groups .sidebar-list .list-group-item a.child-concept.selected {
+    font-weight: bold !important;
+  }
+
   .hierarchy-button {
     background-color: transparent;
     color: var(--vocab-text);
@@ -637,13 +650,15 @@ body {
     position: absolute;
     left: 11px;
     top: 7px;
+    z-index: 1;
+    font-size: 12px;
   }
 
   .hierarchy-button img {
     transform: rotate(-45deg);
     position: absolute;
     top: 9px;
-    left: 10px;
+    left: 11px;
     width: 7px;
     z-index: 1;
   }

diff --git a/resource/js/tab-groups.js b/resource/js/tab-groups.js
@@ -275,7 +275,8 @@ tabGroupsApp.component('tab-groups', {
         </template>
       </button>
       <span class="concept-label" :class="{ 'last': isLast }">
-        <a :class="{ 'selected': selectedGroup === group.uri }"
+        <i v-if="group.isGroup" class="property-hover fa-solid fa-layer-group"></i>
+        <a :class="{ 'selected': selectedGroup === group.uri, 'child-concept': !group.isGroup }"
           :href="getConceptURL(group.uri)"
           @click="handleClickGroupEvent($event, group)"
           aria-label="Go to the concept page"