Fix long texts.

EreMaijala · Aug 23, 2023 · fc69223 · fc69223
1 parent 07e831f
commit fc69223
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 8 deletions.
diff --git a/themes/bootprint3/css/compiled.css b/themes/bootprint3/css/compiled.css
diff --git a/themes/bootstrap3/css/compiled.css b/themes/bootstrap3/css/compiled.css
diff --git a/themes/bootstrap3/less/components/sidebar.less b/themes/bootstrap3/less/components/sidebar.less
@@ -86,6 +86,9 @@
   color: #fff;
   background-color: #000;
 }
+.facet .text {
+  overflow: hidden;
+}
 
 .top-facets-contents {
   margin: 2px 0;
@@ -193,12 +196,29 @@ h3.facet-title {
     align-items: baseline;
 
     .facet-tree__item-container {
-      flex-grow: 1;
+      flex: 1;
+      max-width: calc(100% - 1.5em);
+
+      .text {
+        width: calc(100% - 1.5em);
+      }
+
+      &--exclude .text {
+        width: calc(100% - 3.0em);
+      }
+
+      .icon-link__label {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        display: inline;
+      }
     }
 
     .facet-tree__icon-container {
       padding: 0.5rem;
       width: 1.5rem;
+      min-width: 1.5rem;
       line-height: 1.5rem;
     }
   }

diff --git a/themes/bootstrap3/scss/components/sidebar.scss b/themes/bootstrap3/scss/components/sidebar.scss
@@ -86,6 +86,9 @@
   color: #fff;
   background-color: #000;
 }
+.facet .text {
+  overflow: hidden;
+}
 
 .top-facets-contents {
   margin: 2px 0;
@@ -193,12 +196,29 @@ h3.facet-title {
     align-items: baseline;
 
     .facet-tree__item-container {
-      flex-grow: 1;
+      flex: 1;
+      max-width: calc(100% - 1.5em);
+
+      .text {
+        width: calc(100% - 1.5em);
+      }
+
+      &--exclude .text {
+        width: calc(100% - 3.0em);
+      }
+
+      .icon-link__label {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        display: inline;
+      }
     }
 
     .facet-tree__icon-container {
       padding: 0.5rem;
       width: 1.5rem;
+      min-width: 1.5rem;
       line-height: 1.5rem;
     }
   }

diff --git a/themes/bootstrap3/templates/Recommend/SideFacets/hierarchical-facet-level.phtml b/themes/bootstrap3/templates/Recommend/SideFacets/hierarchical-facet-level.phtml
@@ -16,7 +16,7 @@
             <?=$this->icon('facet-opened', 'facet-tree__opened')?>
             <?=$this->icon('facet-closed', 'facet-tree__closed')?>
           </span>
-          <span class="facet-tree__item-container">
+          <span class="facet-tree__item-container<?=$this->allowExclude ? ' facet-tree__item-container--exclude' : ''?>">
             <?=$renderedEntryHtml?>
           </span>
         </summary>
@@ -36,7 +36,7 @@
         <span class="facet-tree__icon-container">
           <?=$this->icon('facet-noncollapsible', 'noncollapsible')?>
         </span>
-        <span class="facet-tree__item-container">
+        <span class="facet-tree__item-container<?=$this->allowExclude ? ' facet-tree__item-container--exclude' : ''?>">
           <?=$renderedEntryHtml?>
         </span>
       </div>

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