Styling Filters

rohberg · Dec 29, 2020 · 080359c · 080359c
1 parent d2f1393
commit 080359c
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 51 deletions.
diff --git a/src/components/Views/FacetedSearch.jsx b/src/components/Views/FacetedSearch.jsx
@@ -39,6 +39,9 @@ import { flattenESUrlToPath } from '../helpers';
 
 import './less/public.less';
 
+// TODO configSearchFilterLayout: configurable layout of filters (menu cards or dropdown)
+const configSearchFilterLayout = 'dropdown';
+
 const OnResults = withState(Results);
 
 // class Tags extends Component {
@@ -172,7 +175,7 @@ const customBucketAggregationElement = (props) => {
     containerCmp && (
       <Dropdown
         fluid
-        text={selectedFilters.length ? selectedFilters.join(' ') : title}
+        text={selectedFilters.length ? title + ': ' + selectedFilters.join(', ') : title}
         className={
           selectedFilters.length ? 'fnfilter selected' : 'fnfilter unselected'
         }
@@ -221,9 +224,7 @@ let overriddenComponents = {
   'Count.element': myCountElement,
 };
 
-// TODO configurable layout of filters (menu cards or dropdown)
-const configSearchCards = false;
-if (!configSearchCards) {
+if (configSearchFilterLayout === 'dropdown') {
   overriddenComponents = {
     ...overriddenComponents,
     ...{
@@ -282,7 +283,15 @@ const FacetedSearch = ({ data, location }) => {
             <Container>
               <Grid relaxed style={{ padding: '2em 0' }}>
                 <Grid.Row>
-                  <Grid.Column width={12} className="facetedsearch_filter">
+                  <Grid.Column
+                    width={12}
+                    className={
+                      'facetedsearch_filter ' +
+                      (configSearchFilterLayout === 'cards'
+                        ? 'cards'
+                        : 'dropdown')
+                    }
+                  >
                     <BucketAggregation
                       title="Komponenten"
                       agg={{

diff --git a/src/components/Views/less/public.less b/src/components/Views/less/public.less
@@ -3,55 +3,40 @@
 
 @import (multiple) '../../theme.config';
 
-// TODO style tags
-.freemanualtags {
-    display: inline-block;
-    margin-left: 1rem;
-}
-
 .ui.grid > .row > .column.facetedsearch_filter {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: baseline;
-    .ui.card {
-        margin: 1em 0.5em 1em 0em;
-    }
-}
-
-
-.ui.dropdown.fnfilter {
-    font-family: @fontName;
-    font-size: 1rem;
-    margin: 0 0 .5rem 0;
-    background-color: #f3f1f1;
-    padding: 0 0 0 .3rem;
-    & > .dropdown.icon {
-        font-size: 1rem;
-    }
-    &.selected {
-        background-color: @grey;
-        color: @white;
+    &.cards {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: baseline;
+        .ui.card {
+            margin: 1em 0.5em 1em 0em;
+        }
     }
-}
-.ui.pagination.menu {
-    font-size: .8rem;
-}
-div.fnresults {
-    .ui.items {
-        &> .item {
-            .ui.tag {
-                // margin-left: 1rem;
-            }
-            .content .header {
-                font-family: @fontName;
+    &.dropdown {
+        .ui.dropdown.fnfilter {
+            font-family: @fontName;
+            font-size: 1rem;
+            margin: 0 0 .5rem 0;
+            background-color: #f3f1f1;
+            // padding: 0 0 0 .3rem;
+            padding: 0.8rem 1.2rem;
+            & > .dropdown.icon {
                 font-size: 1rem;
-                color: @red;
+            }
+            &.selected {
+                background-color: @grey;
+                color: @white;
+            }
+            .text {
+                // padding: 0.8rem 1.2rem !important;
+            }
+            .ui.dropdown .menu {
+                width: 100%;
+                & > .item {
+                    padding: 0.8rem 1.2rem !important;
+                }
             }
         }
-
     }
-    .ui.divided.items > .item {
-        border: none;
-    }
-}
+}