Hierarchical view style fixes

resource/css/skosmos.css

@@ -588,6 +588,12 @@ body {
     border-bottom: none;
   }
 
+  /* no border for children of the last concept */
+  #tab-hierarchy .sidebar-list .list-group-item span.last + ul > li {
+    border: none;
+    margin-left: 1px !important; /* add a 1px margin to offset missing border */
+  }
+
   #tab-hierarchy .sidebar-list .list-group-item a.selected {
     color: var(--vocab-text) !important;
   }
@@ -605,20 +611,18 @@ body {
     color: var(--vocab-text) !important;
   }
 
-  .hierarchy-button i {
+  .hierarchy-button img {
     transform: rotate(-45deg);
     position: absolute;
-    top: 4px;
-    left: 5px;
-    width: 15px;
+    top: 9px;
+    left: 10px;
+    width: 7px;
     z-index: 1;
   }
 
-  .hierarchy-button.open i {
+  .hierarchy-button.open img {
     transform: rotate(0deg);
-    top: 1px;
-    left: 5px;
-    width: 20px;
+    left: 12px;
   }
 
   /*** sidebar serachpage ***/

resource/js/tab-hierarchy.js

@@ -230,7 +230,7 @@ tabHierApp.component('tab-hier-wrapper', {
         :concept="c"
         :selectedConcept="selectedConcept"
         :isTopConcept="true"
-        :isLast="i == hierarchy.length - 1 && !c.isOpen"
+        :isLast="i == hierarchy.length - 1"
         @load-children="loadChildren($event)"
         @select-concept="selectConcept($event)"
       ></tab-hier>
@@ -267,21 +267,22 @@ tabHierApp.component('tab-hier', {
         v-if="concept.hasChildren"
         @click="handleClickOpenEvent(concept)"
       >
-        <i>{{ concept.isOpen ? '&#x25E2;' : '&#x25FF;' }}</i>
+        <img v-if="concept.isOpen" src="resource/pics/black-lower-right-triangle.png">
+        <img v-else src="resource/pics/lower-right-triangle.png">
       </button>
       <span :class="{ 'last': isLast }">
         <a :class="{ 'selected': selectedConcept === concept.uri }"
           :href="getConceptURL(concept.uri)"
           @click="handleClickConceptEvent($event, concept)"
           aria-label="Go to the concept page">{{ concept.label }}</a>
       </span>
-      <ul class="list-group px-3" v-if="concept.children.length !== 0 && concept.isOpen">
+      <ul class="list-group ps-3" v-if="concept.children.length !== 0 && concept.isOpen">
         <template v-for="(c, i) in concept.children">
           <tab-hier
             :concept="c"
             :selectedConcept="selectedConcept"
             :isTopConcept="false"
-            :isLast="i == concept.children.length - 1 && !c.isOpen"
+            :isLast="i == concept.children.length - 1"
             @load-children="loadChildrenRecursive($event)"
             @select-concept="selectConceptRecursive($event)"
           ></tab-hier>