Merge pull request #1729 from NatLibFi/issue1727-groups-view-layout

Implement groups view layout and styling
NatLibFi · Dec 19, 2024 · 8c9ac99 · 8c9ac99
2 parents 55c966c + 28ef443
commit 8c9ac99
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 6 deletions.
diff --git a/resource/css/skosmos.css b/resource/css/skosmos.css
@@ -621,6 +621,11 @@ body {
     font-weight: bold;
   }
 
+  #tab-groups .sidebar-list .list-group-item .concept-label i {
+    color: var(--dark-color);
+    font-size: 14px;
+  }
+
   .hierarchy-button {
     background-color: transparent;
     color: var(--vocab-text);
@@ -638,13 +643,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-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
@@ -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
@@ -275,6 +280,7 @@ tabGroupsApp.component('tab-groups', {
         </template>
       </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 }"
           :href="getConceptURL(group.uri)"
           @click="handleClickGroupEvent($event, group)"

diff --git 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'
       }
     },