From d7eff971dbc5e9b76892706122243bc257528685 Mon Sep 17 00:00:00 2001 From: Daniela Mormocea Date: Tue, 18 Jan 2022 19:18:58 +0200 Subject: [PATCH 1/8] make breadcrumb and lead navigation sticky --- .../theme/Header/HeaderNavigation.jsx | 180 ++++++++++-------- .../volto/components/theme/Header/Header.jsx | 10 +- theme/site/globals/site.overrides | 54 +++++- 3 files changed, 154 insertions(+), 90 deletions(-) diff --git a/src/components/theme/Header/HeaderNavigation.jsx b/src/components/theme/Header/HeaderNavigation.jsx index c2ab802..93366ca 100644 --- a/src/components/theme/Header/HeaderNavigation.jsx +++ b/src/components/theme/Header/HeaderNavigation.jsx @@ -7,6 +7,11 @@ import downIcon from '@plone/volto/icons/down-key.svg'; import closeIcon from '@plone/volto/icons/clear.svg'; import { Icon } from '@plone/volto/components'; import { connect } from 'react-redux'; +import Sticky from 'react-stickynode'; +import { Icon as IconSemantic, Popup } from 'semantic-ui-react'; +import { Breadcrumbs } from '@plone/volto/components'; + + import circleLeft from '@plone/volto/icons/circle-left.svg'; import circleRight from '@plone/volto/icons/circle-right.svg'; @@ -19,61 +24,67 @@ const MobileNav = ({ items, activeItem }) => { }, [activeItem]); return ( -
- {expanded ? ( -
- {items && - items.length > 0 && - items.map((item, i) => ( - -

- {item.title} - {item.url === activeItem.url && ( - setExpanded(false)} - /> - )} -

- - ))} -
- ) : ( -
-

setExpanded(true)} - className="lead-nav-item active-mobile-nav" - > - {activeItem.title} - +

+ {expanded ? ( +
+ {items && + items.length > 0 && + items.map((item, i) => ( + +

+ {item.title} + {item.url === activeItem.url && ( + setExpanded(false)} + /> + )} +

+ + ))} +
+ ) : ( +
+

setExpanded(true)} - /> -

-
- )} -
+ className="lead-nav-item active-mobile-nav" + > + {activeItem.title} + setExpanded(true)} + /> +

+
+ )} +
+ + ); }; const HeaderNavigation = ({ items, pageWidth }) => { const [activeItem, setActiveItem] = React.useState(''); const [isMobile, setIsMobile] = React.useState(false); + const [isTablet, setIsTablet] = React.useState(false); const [itemsIncrement, setItemsIncrement] = React.useState(0); const [itemsPerPage, setItemsPerPage] = React.useState( items && items.length < 4 ? items.length : 4, ); + const [displayedItems, setDisplayedItems] = React.useState([]); const history = useHistory(); + const pathname = history.location.pathname; const noPrev = displayedItems && items && items[0] === displayedItems[0]; const noNext = @@ -105,10 +116,17 @@ const HeaderNavigation = ({ items, pageWidth }) => { } if (pageWidth && pageWidth <= 768) { setIsMobile(true); + setIsTablet(false); } if (pageWidth && pageWidth > 768) { setIsMobile(false); } + if (pageWidth && pageWidth <= 1300 && pageWidth > 768) { + setIsTablet(true); + } + if (pageWidth && pageWidth > 1300) { + setIsTablet(false); + } if (pageWidth && pageWidth > 1240) { if (items.length >= 6) { setItemsPerPage(6); @@ -133,45 +151,49 @@ const HeaderNavigation = ({ items, pageWidth }) => { {isMobile ? ( ) : ( -
- {displayedItems.length > 0 && - displayedItems.map((item, index) => ( - - {item.title} - - ))} - {!noPrev && ( - - )} - {!noNext && ( - - )} -
+ +
+

/...

}> + {displayedItems.length > 0 && + displayedItems.map((item, index) => ( + + {item.title} + + ))} + {!noPrev && ( + + )} + {!noNext && ( + + )} + + )} + ); }; diff --git a/src/customizations/volto/components/theme/Header/Header.jsx b/src/customizations/volto/components/theme/Header/Header.jsx index 9e3b6a0..f73c809 100644 --- a/src/customizations/volto/components/theme/Header/Header.jsx +++ b/src/customizations/volto/components/theme/Header/Header.jsx @@ -28,6 +28,7 @@ const Header = (props) => { const [inheritedImage, setInheritedImage] = React.useState(''); const [leadCaptionText, setLeadCaptionText] = React.useState(''); const [navigationItems, setNavigationItems] = React.useState(''); + const [disableSticky, setDisableSticky] = React.useState(false); React.useEffect(() => { if (leadNavigation || inheritLeadingData) { @@ -71,6 +72,9 @@ const Header = (props) => { const pathName = props.pathname; const hideSearch = ['/header', '/head', '/footer'].includes(pathName); + + + return (
@@ -104,10 +108,10 @@ const Header = (props) => { ) : (
- - + + + Date: Tue, 18 Jan 2022 22:30:18 +0200 Subject: [PATCH 2/8] remove sticky breadcrumbs --- .../theme/Header/HeaderNavigation.jsx | 4 --- .../volto/components/theme/Header/Header.jsx | 4 +-- theme/site/globals/site.overrides | 26 ------------------- 3 files changed, 1 insertion(+), 33 deletions(-) diff --git a/src/components/theme/Header/HeaderNavigation.jsx b/src/components/theme/Header/HeaderNavigation.jsx index 93366ca..4798eff 100644 --- a/src/components/theme/Header/HeaderNavigation.jsx +++ b/src/components/theme/Header/HeaderNavigation.jsx @@ -8,9 +8,6 @@ import closeIcon from '@plone/volto/icons/clear.svg'; import { Icon } from '@plone/volto/components'; import { connect } from 'react-redux'; import Sticky from 'react-stickynode'; -import { Icon as IconSemantic, Popup } from 'semantic-ui-react'; -import { Breadcrumbs } from '@plone/volto/components'; - import circleLeft from '@plone/volto/icons/circle-left.svg'; @@ -153,7 +150,6 @@ const HeaderNavigation = ({ items, pageWidth }) => { ) : (
-

/...

}> {displayedItems.length > 0 && displayedItems.map((item, index) => ( { ) : (
- - - + Date: Tue, 18 Jan 2022 22:37:57 +0200 Subject: [PATCH 3/8] style --- .../theme/Header/HeaderNavigation.jsx | 88 +++++++++---------- .../volto/components/theme/Header/Header.jsx | 3 - 2 files changed, 44 insertions(+), 47 deletions(-) diff --git a/src/components/theme/Header/HeaderNavigation.jsx b/src/components/theme/Header/HeaderNavigation.jsx index 4798eff..39bf0f1 100644 --- a/src/components/theme/Header/HeaderNavigation.jsx +++ b/src/components/theme/Header/HeaderNavigation.jsx @@ -7,8 +7,7 @@ import downIcon from '@plone/volto/icons/down-key.svg'; import closeIcon from '@plone/volto/icons/clear.svg'; import { Icon } from '@plone/volto/components'; import { connect } from 'react-redux'; -import Sticky from 'react-stickynode'; - +import Sticky from 'react-stickynode'; import circleLeft from '@plone/volto/icons/circle-left.svg'; import circleRight from '@plone/volto/icons/circle-right.svg'; @@ -65,7 +64,6 @@ const MobileNav = ({ items, activeItem }) => { )}
- ); }; @@ -78,7 +76,6 @@ const HeaderNavigation = ({ items, pageWidth }) => { items && items.length < 4 ? items.length : 4, ); - const [displayedItems, setDisplayedItems] = React.useState([]); const history = useHistory(); const pathname = history.location.pathname; @@ -148,48 +145,51 @@ const HeaderNavigation = ({ items, pageWidth }) => { {isMobile ? ( ) : ( - -
- {displayedItems.length > 0 && - displayedItems.map((item, index) => ( - - {item.title} - - ))} - {!noPrev && ( - - )} - {!noNext && ( - - )} -
+ +
+ {displayedItems.length > 0 && + displayedItems.map((item, index) => ( + + {item.title} + + ))} + {!noPrev && ( + + )} + {!noNext && ( + + )} +
)} - ); }; diff --git a/src/customizations/volto/components/theme/Header/Header.jsx b/src/customizations/volto/components/theme/Header/Header.jsx index 036a67a..e336f94 100644 --- a/src/customizations/volto/components/theme/Header/Header.jsx +++ b/src/customizations/volto/components/theme/Header/Header.jsx @@ -72,9 +72,6 @@ const Header = (props) => { const pathName = props.pathname; const hideSearch = ['/header', '/head', '/footer'].includes(pathName); - - - return (
From cd7bea1cd3681ae7e4cb84fbc6fd6ba028b9a103 Mon Sep 17 00:00:00 2001 From: Daniela Mormocea Date: Tue, 18 Jan 2022 23:16:02 +0200 Subject: [PATCH 4/8] fix --- src/components/theme/Header/HeaderNavigation.jsx | 1 - src/customizations/volto/components/theme/Header/Header.jsx | 1 - 2 files changed, 2 deletions(-) diff --git a/src/components/theme/Header/HeaderNavigation.jsx b/src/components/theme/Header/HeaderNavigation.jsx index 39bf0f1..be1b74e 100644 --- a/src/components/theme/Header/HeaderNavigation.jsx +++ b/src/components/theme/Header/HeaderNavigation.jsx @@ -78,7 +78,6 @@ const HeaderNavigation = ({ items, pageWidth }) => { const [displayedItems, setDisplayedItems] = React.useState([]); const history = useHistory(); - const pathname = history.location.pathname; const noPrev = displayedItems && items && items[0] === displayedItems[0]; const noNext = diff --git a/src/customizations/volto/components/theme/Header/Header.jsx b/src/customizations/volto/components/theme/Header/Header.jsx index e336f94..6570244 100644 --- a/src/customizations/volto/components/theme/Header/Header.jsx +++ b/src/customizations/volto/components/theme/Header/Header.jsx @@ -28,7 +28,6 @@ const Header = (props) => { const [inheritedImage, setInheritedImage] = React.useState(''); const [leadCaptionText, setLeadCaptionText] = React.useState(''); const [navigationItems, setNavigationItems] = React.useState(''); - const [disableSticky, setDisableSticky] = React.useState(false); React.useEffect(() => { if (leadNavigation || inheritLeadingData) { From ab04189fdcaf3cfd387001323f1e1e91613290f9 Mon Sep 17 00:00:00 2001 From: EEA Jenkins <@users.noreply.github.com> Date: Wed, 19 Jan 2022 09:39:17 +0000 Subject: [PATCH 5/8] Automated release 0.1.34 --- CHANGELOG.md | 12 +++++++++++- package.json | 2 +- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index bb9e895..63822ac 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,9 +4,19 @@ All notable changes to this project will be documented in this file. Dates are d Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog). +#### [0.1.34](https://github.com/eea/volto-forests-theme/compare/0.1.33...0.1.34) + +- Stickyy [`#46`](https://github.com/eea/volto-forests-theme/pull/46) +- fix [`cd7bea1`](https://github.com/eea/volto-forests-theme/commit/cd7bea1cd3681ae7e4cb84fbc6fd6ba028b9a103) +- style [`e673d77`](https://github.com/eea/volto-forests-theme/commit/e673d77eebcc19aa6d1575ef01610a4f786d65ba) +- remove sticky breadcrumbs [`ac2c60a`](https://github.com/eea/volto-forests-theme/commit/ac2c60a8715ee0c39d536865cc22ecb3f5cc7d2d) +- make breadcrumb and lead navigation sticky [`d7eff97`](https://github.com/eea/volto-forests-theme/commit/d7eff971dbc5e9b76892706122243bc257528685) + #### [0.1.33](https://github.com/eea/volto-forests-theme/compare/0.1.32...0.1.33) -- Increase Slider timer to 8sec [`ad8c1fa`](https://github.com/eea/volto-forests-theme/commit/ad8c1fa33a2007e82022bb780d21b39573ef4460) +> 18 January 2022 + +- Increase Slider timer to 8sec [`#45`](https://github.com/eea/volto-forests-theme/pull/45) #### [0.1.32](https://github.com/eea/volto-forests-theme/compare/0.1.31...0.1.32) diff --git a/package.json b/package.json index efea15d..5a9043f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@eeacms/volto-forests-theme", - "version": "0.1.33", + "version": "0.1.34", "description": "@eeacms/volto-forests-theme: Volto add-on", "main": "src/index.js", "author": "European Environment Agency: IDM2 A-Team", From 1270603f351f818eb7f26645d9ef226f7041bf67 Mon Sep 17 00:00:00 2001 From: Daniela Mormocea Date: Wed, 19 Jan 2022 16:16:21 +0200 Subject: [PATCH 6/8] fix --- theme/site/globals/site.overrides | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/theme/site/globals/site.overrides b/theme/site/globals/site.overrides index 9f6394c..b61caa3 100644 --- a/theme/site/globals/site.overrides +++ b/theme/site/globals/site.overrides @@ -178,7 +178,7 @@ body.has-toolbar { .sticky-header-nav { position: absolute; - top: 235px; + bottom: -5px; z-index: 2; width: 99%; .sticky-inner-wrapper { From 0bf5d5bc63485fa24a1315ecf135d2656ede4111 Mon Sep 17 00:00:00 2001 From: Daniela Mormocea Date: Wed, 19 Jan 2022 16:19:16 +0200 Subject: [PATCH 7/8] change z index so nav can be visible --- theme/site/globals/site.overrides | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/theme/site/globals/site.overrides b/theme/site/globals/site.overrides index b61caa3..4edaa01 100644 --- a/theme/site/globals/site.overrides +++ b/theme/site/globals/site.overrides @@ -179,7 +179,7 @@ body.has-toolbar { position: absolute; bottom: -5px; - z-index: 2; + z-index: 4; width: 99%; .sticky-inner-wrapper { box-shadow: none !important; From 5a986f47ecc94bca00ae50dfc89f4cc816ae1dbd Mon Sep 17 00:00:00 2001 From: EEA Jenkins <@users.noreply.github.com> Date: Wed, 19 Jan 2022 16:13:56 +0000 Subject: [PATCH 8/8] Automated release 0.1.35 --- CHANGELOG.md | 11 ++++++++++- package.json | 2 +- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 63822ac..940674c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,14 +4,23 @@ All notable changes to this project will be documented in this file. Dates are d Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog). -#### [0.1.34](https://github.com/eea/volto-forests-theme/compare/0.1.33...0.1.34) +#### [0.1.35](https://github.com/eea/volto-forests-theme/compare/0.1.34...0.1.35) - Stickyy [`#46`](https://github.com/eea/volto-forests-theme/pull/46) +- Merge pull request #48 from eea/fix3 [`52652b7`](https://github.com/eea/volto-forests-theme/commit/52652b7994f3ba444ea3856f36884339b2e3b81f) +- change z index so nav can be visible [`0bf5d5b`](https://github.com/eea/volto-forests-theme/commit/0bf5d5bc63485fa24a1315ecf135d2656ede4111) +- fix [`1270603`](https://github.com/eea/volto-forests-theme/commit/1270603f351f818eb7f26645d9ef226f7041bf67) - fix [`cd7bea1`](https://github.com/eea/volto-forests-theme/commit/cd7bea1cd3681ae7e4cb84fbc6fd6ba028b9a103) - style [`e673d77`](https://github.com/eea/volto-forests-theme/commit/e673d77eebcc19aa6d1575ef01610a4f786d65ba) - remove sticky breadcrumbs [`ac2c60a`](https://github.com/eea/volto-forests-theme/commit/ac2c60a8715ee0c39d536865cc22ecb3f5cc7d2d) - make breadcrumb and lead navigation sticky [`d7eff97`](https://github.com/eea/volto-forests-theme/commit/d7eff971dbc5e9b76892706122243bc257528685) +#### [0.1.34](https://github.com/eea/volto-forests-theme/compare/0.1.33...0.1.34) + +> 19 January 2022 + +- Release: sticky nav [`#47`](https://github.com/eea/volto-forests-theme/pull/47) + #### [0.1.33](https://github.com/eea/volto-forests-theme/compare/0.1.32...0.1.33) > 18 January 2022 diff --git a/package.json b/package.json index 5a9043f..4200fb3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@eeacms/volto-forests-theme", - "version": "0.1.34", + "version": "0.1.35", "description": "@eeacms/volto-forests-theme: Volto add-on", "main": "src/index.js", "author": "European Environment Agency: IDM2 A-Team",