#933: Clear filters button not well aligned and not visible (#944)

GeoNode · Apr 20, 2022 · a394290 · a394290
1 parent 4cfa945
commit a394290
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 21 deletions.
diff --git a/geonode_mapstore_client/client/js/components/FiltersForm/FiltersForm.jsx b/geonode_mapstore_client/client/js/components/FiltersForm/FiltersForm.jsx
@@ -57,7 +57,15 @@ function FilterForm({
         <div className="gn-filter-form" style={styleContainerForm} >
             <div className="gn-filter-form-header">
                 <div className="gn-filter-form-title">
-                    <FaIcon name="filter"/> <strong><Message msgId="gnhome.filters"/></strong>
+                    <div><FaIcon name="filter" /> <strong><Message msgId="gnhome.filters" /></strong></div>
+                    <Button
+                        size="sm"
+                        variant="default"
+                        onClick={onClear}
+                        disabled={isEmpty(query)}
+                    >
+                        <Message msgId="gnhome.clearFilters"/>
+                    </Button>
                 </div>
                 <Button
                     variant="default"
@@ -99,16 +107,6 @@ function FilterForm({
                     </form>
                 </div>
             </div>
-            <div className="gn-filter-form-footer">
-                <Button
-                    size="sm"
-                    variant="default"
-                    onClick={onClear}
-                    disabled={isEmpty(query)}
-                >
-                    <Message msgId="gnhome.clearFilters"/>
-                </Button>
-            </div>
         </div>
     );
 }

diff --git a/geonode_mapstore_client/client/js/components/FiltersForm/__tests__/FiltersForm-test.jsx b/geonode_mapstore_client/client/js/components/FiltersForm/__tests__/FiltersForm-test.jsx
@@ -39,7 +39,7 @@ describe('FiltersForm component', () => {
         ReactDOM.render( <FiltersForm show onClear={onClear} query={{ q: 'A' }} submitOnChangeField={false} />, document.getElementById("container"));
         const filterFormNode = document.querySelector('.gn-filter-form');
         expect(filterFormNode).toBeTruthy();
-        const footerButtons = filterFormNode.querySelectorAll('.gn-filter-form-footer > button');
+        const footerButtons = filterFormNode.querySelectorAll('.gn-filter-form-title > button');
         expect(footerButtons.length).toBe(1);
         const clearButton = footerButtons[0];
         Simulate.click(clearButton);
@@ -65,7 +65,7 @@ describe('FiltersForm component', () => {
         ReactDOM.render( <FiltersForm show  submitOnChangeField />, document.getElementById("container"));
         const filterFormNode = document.querySelector('.gn-filter-form');
         expect(filterFormNode).toBeTruthy();
-        const footerButtons = filterFormNode.querySelectorAll('.gn-filter-form-footer > button');
+        const footerButtons = filterFormNode.querySelectorAll('.gn-filter-form-title > button');
         expect(footerButtons.length).toBe(1);
 
     });

diff --git a/geonode_mapstore_client/client/themes/geonode/less/_filter-form.less b/geonode_mapstore_client/client/themes/geonode/less/_filter-form.less
@@ -57,16 +57,11 @@
         }
     }
     .gn-filter-form-title {
-        flex: 1;
-        padding: 0 0.5rem;
-    }
-    .gn-filter-form-footer {
         display: flex;
-        flex-direction: row-reverse;
         align-items: center;
-        position: sticky;
-        bottom: 0;
-        padding: 0.5rem;
+        justify-content: space-between;
+        flex: 1;
+        padding: 0 0.5rem;
     }
     .gn-filter-form-divider {
         width: calc(100% - 0.5rem);