From 818f24ea100f4a67581f9a679a26aa0f4819d178 Mon Sep 17 00:00:00 2001 From: Andrei Grigore Date: Thu, 18 Nov 2021 19:07:43 +0200 Subject: [PATCH 1/5] Lead navigation responsive updates --- theme/site/globals/workspace.code-workspace | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 theme/site/globals/workspace.code-workspace diff --git a/theme/site/globals/workspace.code-workspace b/theme/site/globals/workspace.code-workspace new file mode 100644 index 0000000..0461619 --- /dev/null +++ b/theme/site/globals/workspace.code-workspace @@ -0,0 +1,8 @@ +{ + "folders": [ + { + "path": "../../.." + } + ], + "settings": {} +} \ No newline at end of file From 7237db49eb0bd3d6b5852c3709a155626a699999 Mon Sep 17 00:00:00 2001 From: EEA Jenkins <@users.noreply.github.com> Date: Thu, 18 Nov 2021 17:19:42 +0000 Subject: [PATCH 2/5] Automated release 0.1.14 --- CHANGELOG.md | 8 +++++++- package.json | 2 +- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 735aa0e..f460ac2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,9 +4,15 @@ 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.14](https://github.com/eea/volto-forests-theme/compare/0.1.13...0.1.14) + +- Lead navigation responsive updates [`818f24e`](https://github.com/eea/volto-forests-theme/commit/818f24ea100f4a67581f9a679a26aa0f4819d178) + #### [0.1.13](https://github.com/eea/volto-forests-theme/compare/0.1.12...0.1.13) -- Lead Image updates [`2aededb`](https://github.com/eea/volto-forests-theme/commit/2aededbef9bb439e37d63132af8a21d424ca1327) +> 18 November 2021 + +- Lead Image updates [`#17`](https://github.com/eea/volto-forests-theme/pull/17) #### [0.1.12](https://github.com/eea/volto-forests-theme/compare/0.1.11...0.1.12) diff --git a/package.json b/package.json index a84b34e..75fb596 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@eeacms/volto-forests-theme", - "version": "0.1.13", + "version": "0.1.14", "description": "@eeacms/volto-forests-theme: Volto add-on", "main": "src/index.js", "author": "European Environment Agency: IDM2 A-Team", From a8c810efc9f6fa8f73b366750df41236798b6464 Mon Sep 17 00:00:00 2001 From: Andrei Grigore Date: Thu, 18 Nov 2021 19:50:17 +0200 Subject: [PATCH 3/5] Lead nav w fixed items & dimensions --- .../theme/Header/HeaderNavigation.jsx | 144 ++++++++++++++---- theme/site/globals/site.overrides | 37 +++++ 2 files changed, 154 insertions(+), 27 deletions(-) diff --git a/src/components/theme/Header/HeaderNavigation.jsx b/src/components/theme/Header/HeaderNavigation.jsx index 0cf8bf1..756c5b6 100644 --- a/src/components/theme/Header/HeaderNavigation.jsx +++ b/src/components/theme/Header/HeaderNavigation.jsx @@ -8,6 +8,28 @@ import closeIcon from '@plone/volto/icons/clear.svg'; import { Icon } from '@plone/volto/components'; import { connect } from 'react-redux'; +import circleLeft from '@plone/volto/icons/circle-left.svg'; +import circleRight from '@plone/volto/icons/circle-right.svg'; + +const Card = ({ children, itemId }) => { + return ( +
+ {children} +
+ ); +}; + const MobileNav = ({ items, activeItem }) => { const [expanded, setExpanded] = React.useState(false); @@ -22,23 +44,25 @@ const MobileNav = ({ items, activeItem }) => { {items && items.length > 0 && items.map((item, i) => ( - -

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

- + + +

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

+ + ))} ) : ( @@ -61,12 +85,53 @@ const MobileNav = ({ items, activeItem }) => { ); }; +function onWheel(apiObj, ev) { + const isThouchpad = Math.abs(ev.deltaX) !== 0 || Math.abs(ev.deltaY) < 15; + + if (isThouchpad) { + ev.stopPropagation(); + return; + } + + if (ev.deltaY < 0) { + apiObj.scrollNext(); + } else if (ev.deltaY > 0) { + apiObj.scrollPrev(); + } +} + const HeaderNavigation = ({ items, pageWidth }) => { const [activeItem, setActiveItem] = React.useState(''); const [isMobile, setIsMobile] = React.useState(false); + const [itemsIncrement, setItemsIncrement] = React.useState(0); + const [itemsPerPage, setItemsPerPage] = React.useState(5); + + const [displayedItems, setDisplayedItems] = React.useState([]); const history = useHistory(); + const noPrev = displayedItems && items && items[0] === displayedItems[0]; + const noNext = + displayedItems && + items && + items[items.length - 1] === displayedItems[displayedItems.length - 1]; + React.useEffect(() => { + //init items + const first = itemsIncrement * 3; + const last = first + itemsPerPage; + const itemsInit = items.slice(first, last); + + setDisplayedItems(itemsInit); + }, [itemsIncrement]); + + React.useEffect(() => { + //init items + const first = itemsIncrement * 3; + const last = first + itemsPerPage; + const itemsInit = items.slice(first, last); + + setDisplayedItems(itemsInit); + const activeRouteDetected = items.filter( (item) => item.url === history.location.pathname, ); @@ -82,24 +147,49 @@ const HeaderNavigation = ({ items, pageWidth }) => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [items, pageWidth]); + const handlePrev = () => { + setItemsIncrement(itemsIncrement - 1); + }; + + const handleNext = () => { + setItemsIncrement(itemsIncrement + 1); + }; + return ( {isMobile ? ( ) : (
- {items.length > 0 && - items.map((item, index) => ( - -

- {item.title} -

+ {displayedItems.length > 0 && + displayedItems.map((item, index) => ( + + {item.title} ))} + {!noPrev && ( + + )} + {!noNext && ( + + )}
)} diff --git a/theme/site/globals/site.overrides b/theme/site/globals/site.overrides index 8020f66..77de8dc 100644 --- a/theme/site/globals/site.overrides +++ b/theme/site/globals/site.overrides @@ -181,6 +181,35 @@ body.has-toolbar { left: 5px; display: flex; color: white; + width: 99%; + + .navigation-prev { + position: absolute; + bottom: 50px; + left: 0px; + cursor: pointer; + } + + .navigation-prev:hover{ + fill: #cd4200 !important; + } + + .navigation-next { + position: absolute; + bottom: 50px; + right: 0px; + cursor: pointer; + } + + .navigation-next:hover{ + fill: #cd4200 !important; + } + + .lead-nav-wrapper{ + overflow-x: scroll; + overflow-y: hidden; + white-space:nowrap + } .active-lead-nav { background: white !important; @@ -190,7 +219,11 @@ body.has-toolbar { } .lead-navigation-item { + height: 50px; padding: 12px 20px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; border: 2px solid #f7f7f5; @@ -198,6 +231,8 @@ body.has-toolbar { background-color: #f7f7f5; border-radius: 3px 3px 0 0; + text-decoration: none; + text-align: center; color: #554535; cursor: pointer; @@ -205,7 +240,9 @@ body.has-toolbar { font-weight: bold; text-decoration: none; + @media (max-width: @computerBreakpoint) { + height: 40px; padding: 8px 10px; font-size: 14px; } From 82835288bce93dc00f6ebb9f097f6675e4a74fe9 Mon Sep 17 00:00:00 2001 From: Andrei Grigore Date: Fri, 19 Nov 2021 12:51:30 +0200 Subject: [PATCH 4/5] NavigationLead variable items dep on width & fixed widths --- .../theme/Header/HeaderNavigation.jsx | 76 +++++-------------- 1 file changed, 21 insertions(+), 55 deletions(-) diff --git a/src/components/theme/Header/HeaderNavigation.jsx b/src/components/theme/Header/HeaderNavigation.jsx index 756c5b6..7873125 100644 --- a/src/components/theme/Header/HeaderNavigation.jsx +++ b/src/components/theme/Header/HeaderNavigation.jsx @@ -11,25 +11,6 @@ import { connect } from 'react-redux'; import circleLeft from '@plone/volto/icons/circle-left.svg'; import circleRight from '@plone/volto/icons/circle-right.svg'; -const Card = ({ children, itemId }) => { - return ( -
- {children} -
- ); -}; - const MobileNav = ({ items, activeItem }) => { const [expanded, setExpanded] = React.useState(false); @@ -44,25 +25,23 @@ const MobileNav = ({ items, activeItem }) => { {items && items.length > 0 && items.map((item, i) => ( - - -

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

- - + +

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

+ ))} ) : ( @@ -85,21 +64,6 @@ const MobileNav = ({ items, activeItem }) => { ); }; -function onWheel(apiObj, ev) { - const isThouchpad = Math.abs(ev.deltaX) !== 0 || Math.abs(ev.deltaY) < 15; - - if (isThouchpad) { - ev.stopPropagation(); - return; - } - - if (ev.deltaY < 0) { - apiObj.scrollNext(); - } else if (ev.deltaY > 0) { - apiObj.scrollPrev(); - } -} - const HeaderNavigation = ({ items, pageWidth }) => { const [activeItem, setActiveItem] = React.useState(''); const [isMobile, setIsMobile] = React.useState(false); @@ -120,9 +84,8 @@ const HeaderNavigation = ({ items, pageWidth }) => { const first = itemsIncrement * 3; const last = first + itemsPerPage; const itemsInit = items.slice(first, last); - setDisplayedItems(itemsInit); - }, [itemsIncrement]); + }, [itemsIncrement, itemsPerPage, items]); React.useEffect(() => { //init items @@ -144,6 +107,9 @@ const HeaderNavigation = ({ items, pageWidth }) => { if (pageWidth && pageWidth > 768) { setIsMobile(false); } + if (pageWidth && pageWidth > 1240) { + setItemsPerPage(7); + } // eslint-disable-next-line react-hooks/exhaustive-deps }, [items, pageWidth]); From 9ae1776d84c4123a52eacaaf94b01b633153e9d1 Mon Sep 17 00:00:00 2001 From: EEA Jenkins <@users.noreply.github.com> Date: Fri, 19 Nov 2021 11:03:08 +0000 Subject: [PATCH 5/5] Automated release 0.1.14 --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index f460ac2..4ab9b51 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,8 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog). #### [0.1.14](https://github.com/eea/volto-forests-theme/compare/0.1.13...0.1.14) +- NavigationLead variable items dep on width & fixed widths [`8283528`](https://github.com/eea/volto-forests-theme/commit/82835288bce93dc00f6ebb9f097f6675e4a74fe9) +- Lead nav w fixed items & dimensions [`a8c810e`](https://github.com/eea/volto-forests-theme/commit/a8c810efc9f6fa8f73b366750df41236798b6464) - Lead navigation responsive updates [`818f24e`](https://github.com/eea/volto-forests-theme/commit/818f24ea100f4a67581f9a679a26aa0f4819d178) #### [0.1.13](https://github.com/eea/volto-forests-theme/compare/0.1.12...0.1.13)