Set Dataset subfilter expanded by default and reduce margins (#788)

* Filter fixes * Using isMobile config for button content check
GeoNode · Feb 3, 2022 · 54b2b59 · 54b2b59
1 parent 8c70160
commit 54b2b59
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 2 deletions.
diff --git a/geonode_mapstore_client/client/js/components/FiltersForm/FilterItems.jsx b/geonode_mapstore_client/client/js/components/FiltersForm/FilterItems.jsx
@@ -100,6 +100,7 @@ function FilterItems({
                             const active = customFilters.find(value => value === item.id);
                             return (
                                 <Checkbox
+                                    className="gn-sub-filter-items"
                                     type="checkbox"
                                     checked={!!active}
                                     value={item.id}
@@ -137,7 +138,7 @@ function FilterItems({
                                     });
                                 }}>
                                 <Message msgId={field.labelId}/>
-                                {!!active && filterChild()}
+                                {filterChild()}
                             </Checkbox>
                         </FormGroup>
                     );

diff --git a/geonode_mapstore_client/client/js/components/FiltersMenu/FiltersMenu.jsx b/geonode_mapstore_client/client/js/components/FiltersMenu/FiltersMenu.jsx
@@ -11,6 +11,7 @@ import Dropdown from '@js/components/Dropdown';
 import Button from '@js/components/Button';
 import Badge from '@js/components/Badge';
 import Message from '@mapstore/framework/components/I18N/Message';
+import { getConfigProp } from '@mapstore/framework/utils/ConfigUtils';
 import FaIcon from '@js/components/FaIcon';
 import useLocalStorage from '@js/hooks/useLocalStorage';
 import Menu from '@js/components/Menu';
@@ -31,11 +32,13 @@ const FiltersMenu = forwardRef(({
     loading
 }, ref) => {
 
+    const { isMobile } = getConfigProp('geoNodeSettings');
     const selectedSort = orderOptions.find(({ value }) => order === value);
     const [cardLayoutStyle, setCardLayoutStyle] = useLocalStorage('layoutCardsStyle', 'grid');
     function handleToggleCardLayoutStyle() {
         setCardLayoutStyle(cardLayoutStyle === 'grid' ? 'list' : 'grid');
     }
+
     return (
         <div
             className="gn-filters-menu gn-menu gn-default"
@@ -50,7 +53,7 @@ const FiltersMenu = forwardRef(({
                             size="sm"
                             onClick={onClick}
                         >
-                            <FaIcon name="filter" />
+                            {isMobile ? <FaIcon name="filter" /> : 'Filter'}
                         </Button>
                         {' '}
                         <Badge>

diff --git a/geonode_mapstore_client/client/themes/geonode/less/_filter-form.less b/geonode_mapstore_client/client/themes/geonode/less/_filter-form.less
@@ -106,3 +106,14 @@
         }
     }
 }
+
+.gn-sub-filter-items.checkbox {
+
+    &:first-of-type {
+        margin-top: 5px;
+    }
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}