From a37f66a5e2c0825baf284dcd18ae60193003d717 Mon Sep 17 00:00:00 2001 From: Martina Bustacchini Date: Wed, 10 Apr 2024 14:59:26 +0200 Subject: [PATCH 1/4] feat! :update bootstrap-italia to 2.8.3 --- package.json | 2 +- .../ItaliaTheme/Footer/FooterNavigation.jsx | 5 +++-- .../ItaliaTheme/View/Commons/GenericCard.jsx | 8 ++++---- .../ItaliaTheme/View/Commons/OfficeCard.jsx | 12 ++++++----- .../Commons/PageHeader/PageHeaderBando.jsx | 4 ++-- .../ItaliaTheme/View/Commons/SideMenu.jsx | 2 ++ .../ItaliaTheme/View/Commons/SmallVenue.jsx | 12 +++++------ .../ItaliaTheme/View/Commons/VenuesSmall.jsx | 6 +++--- .../View/ServizioView/ServizioContatti.jsx | 4 +++- .../View/ServizioView/ServizioView.jsx | 4 ++-- src/components/ItaliaTheme/View/ViewUtils.jsx | 2 +- .../manage/Blocks/Listing/ListingBody.jsx | 2 +- .../manage/UniversalLink/UniversalLink.jsx | 2 +- .../ItaliaTheme/Blocks/_cardWithImage.scss | 7 +++---- .../Blocks/_contentInEvidenceTemplate.scss | 2 -- src/theme/ItaliaTheme/Blocks/_iconBlocks.scss | 6 ++++-- .../Blocks/_inEvidenceTemplate.scss | 4 ---- src/theme/ItaliaTheme/Blocks/_listing.scss | 3 --- src/theme/ItaliaTheme/Blocks/_numbers.scss | 9 ++++++--- .../Components/_customerSatisfaction.scss | 2 +- .../Components/_galleryPreview.scss | 1 + .../ItaliaTheme/Components/_navigation.scss | 4 ++-- .../ItaliaTheme/Components/_officeCard.scss | 5 +++++ src/theme/_cms-ui.scss | 2 -- .../_bootstrap-italia-site.scss | 4 +++- .../bootstrap-italia/_callout.scss | 20 +++++++++++++++++++ .../bootstrap-italia/_mobileMenu.scss | 10 ++++++++++ .../bootstrap-italia/_type.scss | 9 ++++++--- 28 files changed, 97 insertions(+), 56 deletions(-) create mode 100644 src/theme/bootstrap-override/bootstrap-italia/_mobileMenu.scss diff --git a/package.json b/package.json index 524f7cc87..801cd5ec2 100644 --- a/package.json +++ b/package.json @@ -126,7 +126,7 @@ "@eeacms/volto-taxonomy": "^1.0.0", "@loadable/babel-plugin": "5.13.2", "@plone-collective/volto-sentry": "0.3.0", - "bootstrap-italia": "2.6.1", + "bootstrap-italia": "2.8.4", "classnames": "^2.3.2", "design-react-kit": "5.0.0-1", "htmldiff-js": "1.0.5", diff --git a/src/components/ItaliaTheme/Footer/FooterNavigation.jsx b/src/components/ItaliaTheme/Footer/FooterNavigation.jsx index 39947177c..fb3aab8da 100644 --- a/src/components/ItaliaTheme/Footer/FooterNavigation.jsx +++ b/src/components/ItaliaTheme/Footer/FooterNavigation.jsx @@ -42,9 +42,10 @@ const FooterNavigation = () => { {items.map((item) => ( {item.title} {(showDescription || children) && ( -
+

{item.description} {children} -

+

)} @@ -94,9 +94,9 @@ const GenericCard = ({ {item.title} {(showDescription || children) && ( -
+

{item.description} {children} -

+

)} diff --git a/src/components/ItaliaTheme/View/Commons/OfficeCard.jsx b/src/components/ItaliaTheme/View/Commons/OfficeCard.jsx index b67c5d20c..7fdc85a4f 100644 --- a/src/components/ItaliaTheme/View/Commons/OfficeCard.jsx +++ b/src/components/ItaliaTheme/View/Commons/OfficeCard.jsx @@ -59,10 +59,10 @@ const OfficeCard = ({
{office?.sede?.map((sede, i) => { return ( -
- {sede.street &&

{sede.street}

} +
+ {sede.street &&

{sede.street}

} {(sede.city || sede.zip_code) && ( -

+

{sede.zip_code} {sede.city}

)} @@ -71,8 +71,10 @@ const OfficeCard = ({ })}
)} - - {children &&
{children}
} + {/* Con bootstrap-italia 2.8.x e' OBBLIGATORIO che i children siano in clusi in un p + con class card-text se volete che si veda bene e con la stessa tipografia del resto + della card */} + {children &&
{children}
}
{image &&
{image}
}
diff --git a/src/components/ItaliaTheme/View/Commons/PageHeader/PageHeaderBando.jsx b/src/components/ItaliaTheme/View/Commons/PageHeader/PageHeaderBando.jsx index e95154f99..1bed37b8d 100644 --- a/src/components/ItaliaTheme/View/Commons/PageHeader/PageHeaderBando.jsx +++ b/src/components/ItaliaTheme/View/Commons/PageHeader/PageHeaderBando.jsx @@ -34,7 +34,7 @@ const PageHeaderBando = ({ content }) => { )} >
-
+

{ /> {intl.formatMessage(messages.bando)}{' '} -

+

)} diff --git a/src/components/ItaliaTheme/View/Commons/SideMenu.jsx b/src/components/ItaliaTheme/View/Commons/SideMenu.jsx index 148cd3142..191c6761f 100644 --- a/src/components/ItaliaTheme/View/Commons/SideMenu.jsx +++ b/src/components/ItaliaTheme/View/Commons/SideMenu.jsx @@ -78,7 +78,9 @@ const SideMenu = ({ data, content_uid }) => { const handleScroll = useCallback(() => { const scrollOffset = 0.1 * window.innerHeight; + console.log('sosteniamo di aver scrollato per ', window.scrollY); setScrollY(window.scrollY); + // debugger; const headersHeights = headers .map((section) => { const element = document.getElementById(section.id); diff --git a/src/components/ItaliaTheme/View/Commons/SmallVenue.jsx b/src/components/ItaliaTheme/View/Commons/SmallVenue.jsx index c301b2c3e..7e12a0eb6 100644 --- a/src/components/ItaliaTheme/View/Commons/SmallVenue.jsx +++ b/src/components/ItaliaTheme/View/Commons/SmallVenue.jsx @@ -41,29 +41,29 @@ const SmallVenue = ({ venue }) => { {venue_fo.title} -
+
{venue_fo.telefono && ( -

+

)} {venue_fo.fax && ( -

+

)} {venue_fo.email && ( -

+

)} {venue_fo.pec && ( -

+

)} {venue_fo.web && ( -

+

{ {show_icon && }

{location.title}
-
+
{(location.street || location.zip_code) && ( -

+

{location.street && location.street} {location.street && location.zip_code ? ' - ' : ' '} {location.zip_code}

)} -

+

{ const intl = useIntl(); - return content.ufficio_responsabile?.length > 0 || content.area.length > 0 ? ( + return content.ufficio_responsabile?.length > 0 || + content.area.length > 0 || + content.contact_info.length > 0 ? ( { const Moment = moment.default; Moment.locale(intl.locale); - const documentBody = createRef(); + const documentBody = useRef(null); const { sideMenuElements, SideMenu } = useSideMenu(content, documentBody); return ( diff --git a/src/components/ItaliaTheme/View/ViewUtils.jsx b/src/components/ItaliaTheme/View/ViewUtils.jsx index f7085304b..bbc1c565e 100644 --- a/src/components/ItaliaTheme/View/ViewUtils.jsx +++ b/src/components/ItaliaTheme/View/ViewUtils.jsx @@ -43,7 +43,7 @@ export const useSideMenu = (content, documentBody) => { const SideMenuComponent = config.settings?.italiaThemeViewsConfig?.[content['@type']]?.sideMenu ?? SideMenu; - + console.log(content, documentBody); useEffect(() => { if (documentBody.current) { if (__CLIENT__) { diff --git a/src/customizations/volto/components/manage/Blocks/Listing/ListingBody.jsx b/src/customizations/volto/components/manage/Blocks/Listing/ListingBody.jsx index c6b86975d..799312423 100644 --- a/src/customizations/volto/components/manage/Blocks/Listing/ListingBody.jsx +++ b/src/customizations/volto/components/manage/Blocks/Listing/ListingBody.jsx @@ -82,7 +82,7 @@ const ListingBody = React.memo( isSearchBlockResults ? '' : 'full-width' }`; } else { - return `py-5 ${bg_color} ${ + return `py-5 ${ isSearchBlockResults ? 'template-wrapper' : 'full-width' }`; } diff --git a/src/customizations/volto/components/manage/UniversalLink/UniversalLink.jsx b/src/customizations/volto/components/manage/UniversalLink/UniversalLink.jsx index 1d48aa773..f1bd9c745 100644 --- a/src/customizations/volto/components/manage/UniversalLink/UniversalLink.jsx +++ b/src/customizations/volto/components/manage/UniversalLink/UniversalLink.jsx @@ -25,7 +25,7 @@ import config from '@plone/volto/registry'; const UniversalLink = ({ href, item = null, - openLinkInNewTab, + openLinkInNewTab = false, download = false, children, className = null, diff --git a/src/theme/ItaliaTheme/Blocks/_cardWithImage.scss b/src/theme/ItaliaTheme/Blocks/_cardWithImage.scss index 6b2104b3c..de0713e24 100644 --- a/src/theme/ItaliaTheme/Blocks/_cardWithImage.scss +++ b/src/theme/ItaliaTheme/Blocks/_cardWithImage.scss @@ -82,15 +82,14 @@ } } } - - .event-recurrences-more { - bottom: $v-gap * 3; - } } } .card-with-image-default-item.listing-item.card { .card-body { + display: flex; + flex-direction: column; + .category-top { color: $caption-text; font-size: 0.875rem; diff --git a/src/theme/ItaliaTheme/Blocks/_contentInEvidenceTemplate.scss b/src/theme/ItaliaTheme/Blocks/_contentInEvidenceTemplate.scss index 273c4b0f8..d576b5eb7 100644 --- a/src/theme/ItaliaTheme/Blocks/_contentInEvidenceTemplate.scss +++ b/src/theme/ItaliaTheme/Blocks/_contentInEvidenceTemplate.scss @@ -23,8 +23,6 @@ } .event-recurrences-more { - position: unset; - bottom: 0; margin-top: 2.5em; } } diff --git a/src/theme/ItaliaTheme/Blocks/_iconBlocks.scss b/src/theme/ItaliaTheme/Blocks/_iconBlocks.scss index a086535c6..d282d6cc7 100644 --- a/src/theme/ItaliaTheme/Blocks/_iconBlocks.scss +++ b/src/theme/ItaliaTheme/Blocks/_iconBlocks.scss @@ -59,7 +59,8 @@ } .block-header { - .title { + .title, + .title p { margin: 1rem 0 2rem 0; color: #fff; font-size: 2.35rem; @@ -192,7 +193,8 @@ } } - .iconblock-title { + .iconblock-title, + .iconblock-title p { font-size: 1.5rem; font-weight: bold; line-height: 1.8rem; diff --git a/src/theme/ItaliaTheme/Blocks/_inEvidenceTemplate.scss b/src/theme/ItaliaTheme/Blocks/_inEvidenceTemplate.scss index 9aba74934..b5fa041c7 100644 --- a/src/theme/ItaliaTheme/Blocks/_inEvidenceTemplate.scss +++ b/src/theme/ItaliaTheme/Blocks/_inEvidenceTemplate.scss @@ -82,10 +82,6 @@ } } } - - .event-recurrences-more { - bottom: $v-gap * 3; - } } .in-evidence-cards-wrapper { diff --git a/src/theme/ItaliaTheme/Blocks/_listing.scss b/src/theme/ItaliaTheme/Blocks/_listing.scss index 5ff8df4e5..0372501f1 100644 --- a/src/theme/ItaliaTheme/Blocks/_listing.scss +++ b/src/theme/ItaliaTheme/Blocks/_listing.scss @@ -9,9 +9,6 @@ } .event-recurrences-more { - position: absolute; - bottom: $v-gap * 8; - display: flex; align-items: center; color: $body-color; diff --git a/src/theme/ItaliaTheme/Blocks/_numbers.scss b/src/theme/ItaliaTheme/Blocks/_numbers.scss index 9a9716a62..4edd85da2 100644 --- a/src/theme/ItaliaTheme/Blocks/_numbers.scss +++ b/src/theme/ItaliaTheme/Blocks/_numbers.scss @@ -75,7 +75,8 @@ } } - .title { + .title, + .title p { font-size: 2.25rem; font-weight: bold; line-height: 2.8rem; @@ -83,7 +84,8 @@ } .block-number { - .subblock-title { + .subblock-title, + .subblock-title p { font-size: 5.5rem; font-weight: 500; line-height: 1em; @@ -97,7 +99,8 @@ } } - .subblock-text { + .subblock-text, + .subblock-text p { font-size: 1.35rem; font-weight: 500; line-height: 1.5rem; diff --git a/src/theme/ItaliaTheme/Components/_customerSatisfaction.scss b/src/theme/ItaliaTheme/Components/_customerSatisfaction.scss index 76ece51c1..2cf45bbd3 100644 --- a/src/theme/ItaliaTheme/Components/_customerSatisfaction.scss +++ b/src/theme/ItaliaTheme/Components/_customerSatisfaction.scss @@ -72,7 +72,7 @@ fill: $primary; } - input.volto-feedback-rating:focus + label { + input.volto-feedback-rating:not(.focus--mouse):focus + label { border: 0; box-shadow: 0 0 0.2rem $focus-outline-color, diff --git a/src/theme/ItaliaTheme/Components/_galleryPreview.scss b/src/theme/ItaliaTheme/Components/_galleryPreview.scss index a9e2c3aaf..b9c252c2c 100644 --- a/src/theme/ItaliaTheme/Components/_galleryPreview.scss +++ b/src/theme/ItaliaTheme/Components/_galleryPreview.scss @@ -57,6 +57,7 @@ justify-content: center; border-radius: 100%; transform: translateY(-50%); + padding: 10px 20px; // Fix bootstrap-italia 2.8.3 making it oval &.prev { left: -2.75rem; diff --git a/src/theme/ItaliaTheme/Components/_navigation.scss b/src/theme/ItaliaTheme/Components/_navigation.scss index fe6451c66..e3494cb10 100644 --- a/src/theme/ItaliaTheme/Components/_navigation.scss +++ b/src/theme/ItaliaTheme/Components/_navigation.scss @@ -2,10 +2,10 @@ .navbar { .navbar-collapsable { .navbar-nav { - li { + li.nav-item { a.nav-link { &.focus--mouse { - border-color: unset !important; + border-color: $navigation-link-active-bar-color-desk !important; // Bugged with bootstrap-italia 2.8.3 } } } diff --git a/src/theme/ItaliaTheme/Components/_officeCard.scss b/src/theme/ItaliaTheme/Components/_officeCard.scss index c44583d67..fdc8e0a8b 100644 --- a/src/theme/ItaliaTheme/Components/_officeCard.scss +++ b/src/theme/ItaliaTheme/Components/_officeCard.scss @@ -3,3 +3,8 @@ flex: 0 0 100%; } } + +// Fix bootstrap-italia 2.8.x +.card.card-teaser.office-card .card-body div .card-text + .card-text { + margin-top: 0; +} diff --git a/src/theme/_cms-ui.scss b/src/theme/_cms-ui.scss index fe3cf30ce..08fe20c9d 100644 --- a/src/theme/_cms-ui.scss +++ b/src/theme/_cms-ui.scss @@ -9,8 +9,6 @@ body.cms-ui { margin-bottom: $headings-margin-bottom; color: $headings-color; font-family: $font-family-sans-serif; - font-weight: $headings-font-weight; - line-height: $headings-line-height; } h1 { diff --git a/src/theme/bootstrap-override/_bootstrap-italia-site.scss b/src/theme/bootstrap-override/_bootstrap-italia-site.scss index 1fa6bb54a..6e136c897 100644 --- a/src/theme/bootstrap-override/_bootstrap-italia-site.scss +++ b/src/theme/bootstrap-override/_bootstrap-italia-site.scss @@ -137,7 +137,7 @@ @import './bootstrap-italia/callout'; @import 'bootstrap-italia/src/scss/custom/toolbar'; @import 'bootstrap-italia/src/scss/custom/sections'; - @import 'bootstrap-italia/src/scss/custom/dialog'; + // @import 'bootstrap-italia/src/scss/custom/dialog'; Rimosso in bootstrap-italia v2.7.0 @import 'bootstrap-italia/src/scss/custom/notifications'; @import 'bootstrap-italia/src/scss/custom/avatar'; @import 'bootstrap-italia/src/scss/custom/thumbnav'; @@ -205,4 +205,6 @@ @import 'bootstrap-italia/src/scss/utilities/focus'; @import 'bootstrap-italia/src/scss/utilities/icons'; @import './bootstrap-italia/focus'; + + @import './bootstrap-italia/mobileMenu'; } diff --git a/src/theme/bootstrap-override/bootstrap-italia/_callout.scss b/src/theme/bootstrap-override/bootstrap-italia/_callout.scss index 095643d36..4f0b21db1 100644 --- a/src/theme/bootstrap-override/bootstrap-italia/_callout.scss +++ b/src/theme/bootstrap-override/bootstrap-italia/_callout.scss @@ -6,3 +6,23 @@ div.callout { margin: 0; box-shadow: none; } + +// Fix display bug in bootstrap-italia 2.8.x +.callout:not(.callout-highlight):not(.callout-more) .callout-title .text:after { + content: ''; + top: 0.78em; // Fix + border-top: 2px solid; + position: absolute; + width: 100lvw; // Fix + margin-left: -1rem; // Fix + @media (max-width: #{map-get($grid-breakpoints, sm)}) { + top: 0.6em; // Fix + } + @media (min-width: #{map-get($grid-breakpoints, sm)}) and (max-width: #{map-get($grid-breakpoints, xl)}) { + top: 0.75em; // Fix + } +} + +.callout:not(.callout-highlight):not(.callout-more) .callout-title.text:empty { + padding: 0; +} diff --git a/src/theme/bootstrap-override/bootstrap-italia/_mobileMenu.scss b/src/theme/bootstrap-override/bootstrap-italia/_mobileMenu.scss new file mode 100644 index 000000000..d756c6594 --- /dev/null +++ b/src/theme/bootstrap-override/bootstrap-italia/_mobileMenu.scss @@ -0,0 +1,10 @@ +@include media-breakpoint-down(md) { + .navbar + .navbar-collapsable + .menu-wrapper + .navbar-nav + li.nav-item.active + a.nav-link { + border-left: 5px solid $primary !important; + } +} diff --git a/src/theme/bootstrap-override/bootstrap-italia/_type.scss b/src/theme/bootstrap-override/bootstrap-italia/_type.scss index 479c266cd..e3444a136 100644 --- a/src/theme/bootstrap-override/bootstrap-italia/_type.scss +++ b/src/theme/bootstrap-override/bootstrap-italia/_type.scss @@ -1,10 +1,13 @@ html, body.public-ui { - font-size: 16px; - line-height: 1.5; + // font-size: 16px; ? Already set by bootstrap-italia + // line-height: 1.5; ? Already set by bootstrap-italia @include media-breakpoint-up(sm) { font-size: 18px; - line-height: 1.555; + // line-height: 1.555; ? Already set by bootstrap-italia + } + blockquote:before { + top: 0.78rem; // Fix bootstrap-italia 2.8.4 } } From 1d2622e69db16397d71ecaabf4906d4292cc128a Mon Sep 17 00:00:00 2001 From: Martina Bustacchini Date: Wed, 10 Apr 2024 15:02:09 +0200 Subject: [PATCH 2/4] fix: remove stray console.logs --- src/components/ItaliaTheme/View/Commons/SideMenu.jsx | 2 -- src/components/ItaliaTheme/View/ViewUtils.jsx | 1 - 2 files changed, 3 deletions(-) diff --git a/src/components/ItaliaTheme/View/Commons/SideMenu.jsx b/src/components/ItaliaTheme/View/Commons/SideMenu.jsx index 191c6761f..148cd3142 100644 --- a/src/components/ItaliaTheme/View/Commons/SideMenu.jsx +++ b/src/components/ItaliaTheme/View/Commons/SideMenu.jsx @@ -78,9 +78,7 @@ const SideMenu = ({ data, content_uid }) => { const handleScroll = useCallback(() => { const scrollOffset = 0.1 * window.innerHeight; - console.log('sosteniamo di aver scrollato per ', window.scrollY); setScrollY(window.scrollY); - // debugger; const headersHeights = headers .map((section) => { const element = document.getElementById(section.id); diff --git a/src/components/ItaliaTheme/View/ViewUtils.jsx b/src/components/ItaliaTheme/View/ViewUtils.jsx index bbc1c565e..bf1ca9221 100644 --- a/src/components/ItaliaTheme/View/ViewUtils.jsx +++ b/src/components/ItaliaTheme/View/ViewUtils.jsx @@ -43,7 +43,6 @@ export const useSideMenu = (content, documentBody) => { const SideMenuComponent = config.settings?.italiaThemeViewsConfig?.[content['@type']]?.sideMenu ?? SideMenu; - console.log(content, documentBody); useEffect(() => { if (documentBody.current) { if (__CLIENT__) { From 5ac131bc70eb4bde3e363e9e745243373d346d4d Mon Sep 17 00:00:00 2001 From: Martina Bustacchini Date: Wed, 10 Apr 2024 15:03:47 +0200 Subject: [PATCH 3/4] fix: revert an unwanted change to openLinkInNewTab for UniversalLink --- .../volto/components/manage/UniversalLink/UniversalLink.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/customizations/volto/components/manage/UniversalLink/UniversalLink.jsx b/src/customizations/volto/components/manage/UniversalLink/UniversalLink.jsx index f1bd9c745..1d48aa773 100644 --- a/src/customizations/volto/components/manage/UniversalLink/UniversalLink.jsx +++ b/src/customizations/volto/components/manage/UniversalLink/UniversalLink.jsx @@ -25,7 +25,7 @@ import config from '@plone/volto/registry'; const UniversalLink = ({ href, item = null, - openLinkInNewTab = false, + openLinkInNewTab, download = false, children, className = null, From dba4c98933edcab99129bd329c9ffcefe32e275a Mon Sep 17 00:00:00 2001 From: Martina Bustacchini Date: Wed, 10 Apr 2024 15:18:26 +0200 Subject: [PATCH 4/4] chore: left some comments --- src/components/ItaliaTheme/Icons/Icon.jsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/ItaliaTheme/Icons/Icon.jsx b/src/components/ItaliaTheme/Icons/Icon.jsx index 06939fb88..9ae9b2b3d 100644 --- a/src/components/ItaliaTheme/Icons/Icon.jsx +++ b/src/components/ItaliaTheme/Icons/Icon.jsx @@ -27,6 +27,9 @@ const Icon = (props) => { const parts = icon.split(' '); // TO DO: rimuovere le condizioni dell'icona di twitter quando verrà aggiornato Bootstrap Italia + // Il commento qui sopra e' fuorviante. La 2.8.0 di bootstrap-italia ha l'icona twitter, la versione + // usata oggi di design-react-kit e' la 5.0.0-1 e ha bootstrap-italia alla 2.6.1 + // Finche' design-react-kit non ha > 2.8.0 non possiamo usarla, dipende da design-react-kit if (icon.indexOf('it-') === 0 && icon !== 'it-twitter') { return ; } else if (icon === 'telegram') {