fix: jstree elements overflow text properly with ellipses. (#2996)

- Resolves VUFIND-1621.
vufind-org · Jul 19, 2023 · c9e0356 · c9e0356
1 parent e0e8eec
commit c9e0356
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 7 deletions.
diff --git a/themes/bootprint3/css/compiled.css b/themes/bootprint3/css/compiled.css
diff --git a/themes/bootprint3/theme.config.php b/themes/bootprint3/theme.config.php
@@ -46,7 +46,7 @@
             'external-link' => 'Fugue:link.png',
             'facet-applied' => 'Fugue:tick.png',
             // 'facet-checked' => inherited from parent theme,
-            'facet-exclude' => 'Fugue:cross.png',
+            // 'facet-exclude' => inherited from parent theme,
             // 'facet-unchecked' => inherited from parent theme,
             'feedback' => 'Fugue:email.png',
             'format-atlas' => 'Fugue:map.png',

diff --git a/themes/bootstrap3/css/compiled.css b/themes/bootstrap3/css/compiled.css
diff --git a/themes/bootstrap3/less/components/js-tree.less b/themes/bootstrap3/less/components/js-tree.less
@@ -62,6 +62,30 @@
   padding-left: 1rem;
 }
 
+/* facet and tree text overflow  */
+.facet .text {
+  overflow: hidden;
+}
+
+.hierarchical-facet-anchor,
+.hierarchical-facet-anchor .text {
+  width: calc(100% - 1.5em);
+}
+[data-exclude] .hierarchical-facet-anchor,
+[data-exclude] .hierarchical-facet-anchor .text {
+  width: calc(100% - 3.0em);
+}
+
+.hierarchy-tree .jstree-node,
+.hierarchical-facet-anchor .text .icon-link__label {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.hierarchical-facet-anchor .text .icon-link__label {
+  display: inline;
+}
+
 .jstree-clicked,
 .jstree-clicked:active,
 .jstree-clicked:focus,
@@ -71,7 +95,7 @@
     background-color: @list-group-active-bg;
 
     .jstree-themeicon-custom {
-      color: #fff;
+      color: @list-group-active-color;
       filter: invert(1);
     }
   }

diff --git a/themes/bootstrap3/scss/components/js-tree.scss b/themes/bootstrap3/scss/components/js-tree.scss
@@ -62,6 +62,30 @@
   padding-left: 1rem;
 }
 
+/* facet and tree text overflow  */
+.facet .text {
+  overflow: hidden;
+}
+
+.hierarchical-facet-anchor,
+.hierarchical-facet-anchor .text {
+  width: calc(100% - 1.5em);
+}
+[data-exclude] .hierarchical-facet-anchor,
+[data-exclude] .hierarchical-facet-anchor .text {
+  width: calc(100% - 3.0em);
+}
+
+.hierarchy-tree .jstree-node,
+.hierarchical-facet-anchor .text .icon-link__label {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.hierarchical-facet-anchor .text .icon-link__label {
+  display: inline;
+}
+
 .jstree-clicked,
 .jstree-clicked:active,
 .jstree-clicked:focus,
@@ -71,7 +95,7 @@
     background-color: $list-group-active-bg;
 
     .jstree-themeicon-custom {
-      color: #fff;
+      color: $list-group-active-color;
       filter: invert(1);
     }
   }

diff --git a/themes/local_theme_example/css/compiled.css b/themes/local_theme_example/css/compiled.css
diff --git a/themes/sandal/css/compiled.css b/themes/sandal/css/compiled.css