From 6a0d0ad9291e932bf894e52ff5c7a7a402f6689b Mon Sep 17 00:00:00 2001
From: UnniKohonen <45235116+UnniKohonen@users.noreply.github.com>
Date: Wed, 18 Dec 2024 14:19:28 +0200
Subject: [PATCH 1/3] Add styling for groups and  concepts

---
 resource/css/skosmos.css  | 17 ++++++++++++++++-
 resource/js/tab-groups.js |  3 ++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/resource/css/skosmos.css b/resource/css/skosmos.css
index 0ec52e8e2..a96382b4c 100644
--- 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
index 53cf6234a..9b0e4446d 100644
--- 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"

From 82a1081131d3f460241fe123882ddbad870d5b1f Mon Sep 17 00:00:00 2001
From: UnniKohonen <45235116+UnniKohonen@users.noreply.github.com>
Date: Wed, 18 Dec 2024 14:55:30 +0200
Subject: [PATCH 2/3] Fix groups view width and height + fix width in other
 sidebar tabs

---
 resource/js/tab-alpha.js     | 4 ++--
 resource/js/tab-groups.js    | 7 ++++++-
 resource/js/tab-hierarchy.js | 4 ++--
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/resource/js/tab-alpha.js b/resource/js/tab-alpha.js
index 42f2024f8..d367ec0c5 100644
--- a/resource/js/tab-alpha.js
+++ b/resource/js/tab-alpha.js
@@ -123,10 +123,10 @@ const tabAlphaApp = Vue.createApp({
 
       // get height and width of pagination and sidebar tabs elements if they exist
       const height = pagination && pagination.clientHeight + sidebarTabs.clientHeight
-      const width = pagination && pagination.clientWidth
+      const width = pagination && pagination.clientWidth - 1
 
       this.listStyle = {
-        height: 'calc(100% - ' + height + 'px)',
+        height: 'calc(100% - ' + height + 'px )',
         width: width + 'px'
       }
     }
diff --git a/resource/js/tab-groups.js b/resource/js/tab-groups.js
index 9b0e4446d..68fd017ed 100644
--- a/resource/js/tab-groups.js
+++ b/resource/js/tab-groups.js
@@ -144,7 +144,12 @@ const tabGroupsApp = Vue.createApp({
       }
     },
     setListStyle () {
-      // TODO: set list style when mounting component and resizing window
+      const height = document.getElementById('sidebar-tabs').clientHeight
+      const width = document.getElementById('sidebar-tabs').clientWidth - 1
+      this.listStyle = {
+        height: 'calc( 100% - ' + height + 'px )',
+        width: width + 'px'
+      }
     },
     loadChildren (group) {
       // Load children only if group has children and they have not been loaded yet
diff --git a/resource/js/tab-hierarchy.js b/resource/js/tab-hierarchy.js
index 0b994f6c3..0683ed703 100644
--- a/resource/js/tab-hierarchy.js
+++ b/resource/js/tab-hierarchy.js
@@ -156,9 +156,9 @@ const tabHierApp = Vue.createApp({
     },
     setListStyle () {
       const height = document.getElementById('sidebar-tabs').clientHeight
-      const width = document.getElementById('sidebar-tabs').clientWidth
+      const width = document.getElementById('sidebar-tabs').clientWidth - 1
       this.listStyle = {
-        height: 'calc( 100% - ' + height + 'px)',
+        height: 'calc( 100% - ' + height + 'px )',
         width: width + 'px'
       }
     },

From 28ef4438e9a70648b7fabef664be03ee8418fffa Mon Sep 17 00:00:00 2001
From: UnniKohonen <45235116+UnniKohonen@users.noreply.github.com>
Date: Thu, 19 Dec 2024 10:36:19 +0200
Subject: [PATCH 3/3] Make child concepts bolded

---
 resource/css/skosmos.css  | 8 --------
 resource/js/tab-groups.js | 2 +-
 2 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/resource/css/skosmos.css b/resource/css/skosmos.css
index a96382b4c..89d527db7 100644
--- a/resource/css/skosmos.css
+++ b/resource/css/skosmos.css
@@ -625,14 +625,6 @@ body {
     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);
diff --git a/resource/js/tab-groups.js b/resource/js/tab-groups.js
index 68fd017ed..92694601d 100644
--- a/resource/js/tab-groups.js
+++ b/resource/js/tab-groups.js
@@ -281,7 +281,7 @@ tabGroupsApp.component('tab-groups', {
       </button>
       <span class="concept-label" :class="{ 'last': isLast }">
         <i v-if="group.isGroup" class="property-hover fa-solid fa-layer-group"></i>
-        <a :class="{ 'selected': selectedGroup === group.uri, 'child-concept': !group.isGroup }"
+        <a :class="{ 'selected': selectedGroup === group.uri }"
           :href="getConceptURL(group.uri)"
           @click="handleClickGroupEvent($event, group)"
           aria-label="Go to the concept page"