refs #22377 [finc] style facet overflow

* hide checkboxes, cut text by ellipsis, reduce padding
* reduce padding for active filters
* reduce padding-left for active filters
* outsource scss for improve filters on sm
* delete unused in sidebar, move file to activate-on-demand folder

co-authored by: Alexander Purr <purr@ub.uni-leipzig.de>
* move import of plugin to Activate-On-Demand section

local/config/vufind/facets.ini

@@ -236,6 +236,7 @@ special_facets   = "daterange"
 translated_facets[] = format
 translated_facets[] = language
 translated_facets[] = mega_collection
+translated_facets[] = finc_class_facet
 
 ; Any facets named here will be treated as a delimited facet.
 ; Delimited facets can be used to display a text value for otherwise incomprehensible

themes/finc/scss/_customVariables.scss

@@ -93,6 +93,7 @@ $mainbody-sidebar-top-padding-xs: 0 !default;
 
 // Sidebar item padding
 $sidebar-item-padding: .75em 1em !default;
+$sidebar-item-padding-sm: .75em .5em !default;
 
 // Table cell padding - adjust in themes to avoid content jumps when switching tabs
 // $table-cell-padding: 5px !default;
@@ -1078,6 +1079,7 @@ $sidebar-facet-active-background-color: $brand-warning !default;
 $sidebar-facet-active-color: $black !default;
 $sidebar-facet-active-hover-color: $btn-primary-color !default;
 $sidebar-facet-active-text-inside-padding-left: 1.25em !default;
+$sidebar-facet-active-text-inside-padding-left-sm: 1.0em !default;
 $sidebar-or-facet-text-indent: -3px !default;
 $sidebar-facet-my-account-padding: 0 !default;
 $sidebar-facet-my-account-link-width: 100% !default;

themes/finc/scss/activate-on-demand/_sidebar-filter-hide-checkbox.scss

+// improve sidebar for tablet devices
+
+// *****************************************************************
+// ************ General ********************************************
+// *****************************************************************
+
+.sidebar {
+  .facet {
+    &.active {
+      .text {
+        // reduce padding for active filters on tablet devices #22377
+        @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+          padding-left: $sidebar-facet-active-text-inside-padding-left-sm;
+        }
+      }
+    }
+
+    @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+      // cut text in sidebar for tablet devices #22377
+      .text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        // hide checkboxes in sidebar for tablet devices #22377
+        .fa-square-o {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+.facet-group {
+  a,
+  .text,
+  .badge,
+  .title,
+  .help-link,
+  .facet a:not(.exclude):not(:last-of-type) {
+    // reduce padding for small devices #22377
+    @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+      padding: $sidebar-item-padding-sm;
+    }
+  }
+}

themes/finc/scss/components/_sidebar.scss

@@ -86,7 +86,6 @@
         padding-left: $sidebar-facet-active-text-inside-padding-left;
       }
     }
-
   }
 }
 

themes/finc/scss/finc.scss

@@ -48,7 +48,9 @@
 // 1. To make bulk action buttons visible on small devices (Accessibility)
 // @import 'activate-on-demand/bulkaction-visible-xs';
 // 2. To make visited links use a different color, use the import in anchors.scss
-// 3. ..............
+// 3. If you want to hide the checkboxes for the filters on SM devices, import the following file
+@import 'activate-on-demand/sidebar-filter-hide-checkbox';
+// 4. .............
 
 // *****************************************************************
 // ********** HTML basics ******************************************