diff --git a/resource/css/skosmos.css b/resource/css/skosmos.css index faed7d142..7d8fef85d 100644 --- 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 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 53cf6234a..92694601d 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 @@ -275,6 +280,7 @@ tabGroupsApp.component('tab-groups', { +