Client - Layout improvement for filter panel (sticky panel) (#108)

GeoNode · Apr 12, 2021 · bd1771d · bd1771d
1 parent 06cfba9
commit bd1771d
Show file tree

Hide file tree

Showing 9 changed files with 148 additions and 77 deletions.
diff --git a/geonode_mapstore_client/client/js/components/home/FilterForm.jsx b/geonode_mapstore_client/client/js/components/home/FilterForm.jsx
@@ -98,14 +98,11 @@ function FilterForm({
                 </Button>
             </div>
             <div className="gn-filter-form-body">
-
                 {
-
                     (links) &&   links.map((types) => (
                         <FilterLinks className="gn-filter-link" blockName={Object.keys(types)} items={types[Object.keys(types)]} />
                     ))
                 }
-
                 <Form
                     style={style}
                 >

diff --git a/geonode_mapstore_client/client/js/components/home/FiltersMenu.jsx b/geonode_mapstore_client/client/js/components/home/FiltersMenu.jsx
@@ -7,7 +7,7 @@
  */
 
 import React, { forwardRef } from 'react';
-import { Dropdown, Button } from 'react-bootstrap-v1';
+import { Dropdown } from 'react-bootstrap-v1';
 import ReactResizeDetector from 'react-resize-detector';
 import Message from '@mapstore/framework/components/I18N/Message';
 
@@ -30,7 +30,7 @@ const FiltersMenu = forwardRef(({
             ref={ref}
         >
             <div className="gn-filters-menu-container">
-                <Button variant="default" onClick={ onClick } > <Message msgId="gnhome.filters"/> {`(${filters.length})`}</Button>
+                <a className="gn-toogle-filter" onClick={ onClick } > <Message msgId="gnhome.filters"/> {`(${filters.length})`}</a>
                 <ReactResizeDetector handleHeight>
                     {({ height }) => (
                         <div

diff --git a/geonode_mapstore_client/client/js/routes/Home.jsx b/geonode_mapstore_client/client/js/routes/Home.jsx
@@ -44,7 +44,6 @@ import {
     getOwners
 } from '@js/api/geonode/v1';
 import { getResourceTypes } from '@js/api/geonode/v2';
-import { Container, Col, Row } from 'react-bootstrap-v1';
 const DEFAULT_SUGGESTIONS = [];
 const DEFAULT_RESOURCES = [];
 const REDIRECT_NOT_ALLOWED = ['/', '/search/'];
@@ -198,11 +197,16 @@ function Home({
     const menuIndexNode = useRef();
     const filtersMenuNode = useRef();
     const footerNode = useRef();
+    const filterFormNode = useRef();
+    const heroNode = useRef();
+
     const [inViewRef, inView] = useInView();
 
+
     const brandNavbarHeight = brandNavbarNode.current
         ? brandNavbarNode.current.getBoundingClientRect().height
         : 0;
+
     const menuIndexNodeHeight = menuIndexNode.current
         ? menuIndexNode.current.getBoundingClientRect().height
         : 0;
@@ -213,16 +217,24 @@ function Home({
         ? footerNode.current.getBoundingClientRect().height
         : 0;
 
+    const heroNodeHeight = heroNode.current
+        ? heroNode.current.getBoundingClientRect().height
+        : 0;
+
+    const filterFormOffset = filterFormNode.current
+        ? filterFormNode?.current?.offsetTop
+        : 0;
+
+
     const dimensions = {
         brandNavbarHeight,
         menuIndexNodeHeight,
         filtersMenuNodeHeight,
-        footerNodeHeight
+        footerNodeHeight,
+        heroNodeHeight
     };
 
-
     const [showFilterForm, setShowFilterForm] = useState(isFilterForm || false);
-    const [disableHero/* , setDisableHero */] = useState( hideHero );
 
     const handleShowFilterForm = () => {
         setShowFilterForm(!showFilterForm);
@@ -325,7 +337,8 @@ function Home({
         </ConnectedSearchBar>
     );
 
-    const isHeroVisible = !disableHero && inView;
+    const isHeroVisible = !hideHero && inView;
+    const stickyFiltersMaxHeight = (window.innerHeight - dimensions.brandNavbarHeight - dimensions.menuIndexNodeHeight - dimensions.footerNodeHeight);
     return (
         <div className={`gn-home gn-theme-${theme?.variant || 'light'}`}>
             <BrandNavbar
@@ -346,7 +359,8 @@ function Home({
             >
                 {!isHeroVisible && search}
             </BrandNavbar>
-            {!disableHero && <Hero
+            {!hideHero && <Hero
+                ref={heroNode}
                 style={{
                     marginTop: dimensions.brandNavbarHeight,
                     ...theme?.hero?.style
@@ -373,40 +387,43 @@ function Home({
                     style={theme?.languageSelector?.style}
                 />}
             />
-            <Container className="gn-main-home " fluid>
-                <Row>
-                    <Col md={4} sm={12} className={` mx-2 mt-3  ${ !showFilterForm ? 'collapse' : ''}`}>
-                        {showFilterForm && <FilterForm
-
-                            key="gn-filter-form"
-                            id="gn-filter-form"
-                            styleContanierForm={ disableHero ? { marginTop: dimensions.brandNavbarHeight } : undefined}
-                            show
-                            fields={filters?.fields?.options}
-                            links={filters?.fields?.links}
-                            extentProps={filters?.extent}
-                            suggestionsRequestTypes={suggestionsRequestTypes}
-                            query={query}
-                            onChange={handleUpdate}
-                            onClose={handleShowFilterForm}
-                        />
+            <div className="gn-main-home">
+
+                <div className="gn-container">
+                    <div className="gn-row">
+                    {showFilterForm && <div ref={filterFormNode} id="gn-filter-form-container" className={`gn-filter-form-container`}>
+                             <FilterForm
+                                key="gn-filter-form"
+                                id="gn-filter-form"
+                                styleContanierForm={ hideHero ? { marginTop: dimensions.brandNavbarHeight, top: (filterFormOffset + dimensions.brandNavbarHeight), maxHeight: stickyFiltersMaxHeight } :
+                                    { top: (filterFormOffset - dimensions.heroNodeHeight), maxHeight: stickyFiltersMaxHeight }}
+                                show
+                                fields={filters?.fields?.options}
+                                links={filters?.fields?.links}
+                                extentProps={filters?.extent}
+                                suggestionsRequestTypes={suggestionsRequestTypes}
+                                query={query}
+                                onChange={handleUpdate}
+                                onClose={handleShowFilterForm}
+                            />
+
+                        </div>
                         }
-                    </Col>
-
-                    <Col className="pl-md-2 pt-2">
-                        <ConnectedCardGrid
-                            user={user}
-                            query={query}
-                            pageSize={pageSize}
-                            isColumnActive={!!resource}
-                            containerStyle={!isHeroVisible
-                                ? {
-                                    marginTop: disableHero && dimensions.brandNavbarHeight,
-                                    minHeight: `calc(100vh - ${dimensions.brandNavbarHeight + dimensions.menuIndexNodeHeight + dimensions.footerNodeHeight}px )`,
-                                    paddingBottom: dimensions.footerNodeHeight
-                                }
-                                : undefined}
-                            column={ disableHero &&
+
+                        <div className="gn-grid-container">
+                            <ConnectedCardGrid
+                                user={user}
+                                query={query}
+                                pageSize={pageSize}
+                                isColumnActive={!!resource}
+                                containerStyle={!isHeroVisible
+                                    ? {
+                                        marginTop: hideHero && dimensions.brandNavbarHeight,
+                                        minHeight: `calc(100vh - ${dimensions.brandNavbarHeight + dimensions.menuIndexNodeHeight + dimensions.footerNodeHeight}px )`,
+                                        paddingBottom: dimensions.footerNodeHeight
+                                    }
+                                    : undefined}
+                                column={ hideHero &&
                     <ConnectedDetailsPanel
                         resource={resource}
                         filters={queryFilters}
@@ -426,34 +443,37 @@ function Home({
                             })
                         }}
                     />
-                            }
-                            isCardActive={res => res.pk === pk}
-                            page={params.page ? parseFloat(params.page) : 1}
-                            formatHref={handleFormatHref}
-                            onLoad={(value) => {
-                                handleUpdate({
-                                    page: value
-                                });
-                            }}
-                        >
-
-                            <FiltersMenu
-                                ref={filtersMenuNode}
-                                style={{
-                                    top: dimensions.brandNavbarHeight + dimensions.menuIndexNodeHeight
-                                }}
+                                }
+                                isCardActive={res => res.pk === pk}
+                                page={params.page ? parseFloat(params.page) : 1}
                                 formatHref={handleFormatHref}
-                                order={query?.sort}
-                                filters={queryFilters}
-                                onClear={handleClear}
-                                onClick={handleShowFilterForm}
-                                orderOptions={filters?.order?.options}
-                                defaultLabelId={filters?.order?.defaultLabelId}
-                            />
-                        </ConnectedCardGrid>
-                    </Col>
-                </Row>
-            </Container>
+                                onLoad={(value) => {
+                                    handleUpdate({
+                                        page: value
+                                    });
+                                }}
+                            >
+
+                                <FiltersMenu
+                                    ref={filtersMenuNode}
+                                    style={{
+                                        top: dimensions.brandNavbarHeight + dimensions.menuIndexNodeHeight
+                                    }}
+                                    formatHref={handleFormatHref}
+                                    order={query?.sort}
+                                    filters={queryFilters}
+                                    onClear={handleClear}
+                                    onClick={handleShowFilterForm}
+                                    orderOptions={filters?.order?.options}
+                                    defaultLabelId={filters?.order?.defaultLabelId}
+                                />
+                            </ConnectedCardGrid>
+                        </div>
+                    </div>
+                </div>
+
+
+            </div>
             <Footer
                 ref={footerNode}
                 footerItems={footer.items}
@@ -498,6 +518,6 @@ const ConnectedHome = connect(
         onSearch: searchResources,
         onSelect: requestResource
     }
-)(withResizeDetector((Home)));
+)(withResizeDetector(Home));
 
 export default ConnectedHome;
diff --git a/geonode_mapstore_client/client/static/mapstore/configs/localConfig.json b/geonode_mapstore_client/client/static/mapstore/configs/localConfig.json
@@ -238,13 +238,13 @@
                         {
                             "labelId": "gnhome.myresources",
                             "type": "link",
-                            "href": "/account/signup/?next=/",
+                            "href": "account/signup/?next=/",
                             "authenticated": false
                         },
                         {
                             "labelId": "gnhome.signIn",
                             "type": "link",
-                            "href": "/account/login/?next=/",
+                            "href": "account/login/?next=/",
                             "authenticated": false
                         }
                     ]

diff --git a/geonode_mapstore_client/client/themes/geonode/scss/_filter-form.scss b/geonode_mapstore_client/client/themes/geonode/scss/_filter-form.scss
@@ -11,8 +11,10 @@
     background-color: $gn-body-bg;
     padding: 1rem;
     margin-bottom: 1rem;
-    position: relative;
+    position: -webkit-sticky;
+    position: sticky;
     width: 100%;
+    overflow-y: scroll;
     .gn-filter-form-header {
         display: flex;
         align-items: center;

diff --git a/geonode_mapstore_client/client/themes/geonode/scss/_filter-menu.scss b/geonode_mapstore_client/client/themes/geonode/scss/_filter-menu.scss
@@ -50,5 +50,8 @@
                 right: 0 !important;
             }
         }
+        .gn-toogle-filter{
+            color:$gn-body-color
+        }
     }
 }
diff --git a/geonode_mapstore_client/client/themes/geonode/scss/_home-container.scss b/geonode_mapstore_client/client/themes/geonode/scss/_home-container.scss
@@ -0,0 +1,47 @@
+.gn-main-home {
+    .gn-container{
+        width: 100%;
+        padding: 0;
+        margin-right: auto;
+        margin-left: auto;
+        display: flex;
+        flex-wrap: wrap;
+        .gn-row{
+            width: 100%;
+            display: flex;
+            flex-wrap: wrap;
+            margin: 0;
+        }
+    }
+
+    .gn-grid-container{
+        position: relative;
+        width: 100%;
+        padding-right: 0;
+        padding-left: 0;
+        flex-basis: 0;
+        flex-grow: 1;
+        min-width: 0;
+        max-width: 100%;
+        @media screen and (min-width: 768px) {
+            padding-left: 0.5rem !important;
+        }
+
+    }
+
+    .gn-filter-form-container{
+        position: relative;
+        width: 100%;
+        flex: 0 0 25%;
+        max-width: 25%;
+        @media screen and (max-width: 768px) {
+            flex: 0 0 33.3333333333%;
+            max-width: 33.3333333333%;
+        }
+        @media screen and (max-width: 576px){
+            flex: 0 0 100%;
+            max-width: 100%;
+        }
+
+    }
+}
diff --git a/geonode_mapstore_client/client/themes/geonode/scss/_menu-index.scss b/geonode_mapstore_client/client/themes/geonode/scss/_menu-index.scss
@@ -33,10 +33,10 @@
         //padding: 0 0.5rem;
         .gn-menu-index-content {
             flex: 1;
-            margin: 0 0 0 0.8rem;
+            margin: 0 0 0 0.4rem;
         }
         .gn-menu-index-tools > * {
-            margin: 0 1.8rem;
+            margin: 0 0.8rem;
         }
         .gn-menu-index-divider {
             width: 1px;

diff --git a/geonode_mapstore_client/client/themes/geonode/scss/geonode.scss b/geonode_mapstore_client/client/themes/geonode/scss/geonode.scss
@@ -30,8 +30,10 @@
 'resource-card',
 'search-bar',
 'swipe-menu',
+'home-container',
 'tag';
 
+
 @import '~react-select/dist/react-select.css';
 @import '~@fortawesome/fontawesome-free/css/all.min.css';
 @import '~ol/ol.css';