RedTurtle · deodorhunter · Apr 10, 2024 · Apr 10, 2024 · Apr 10, 2024 · Apr 10, 2024
diff --git 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
@@ -42,9 +42,10 @@ const FooterNavigation = () => {
         <Row tag="div">
           {items.map((item) => (
             <Col
-              lg={3}
-              md={3}
               sm={6}
+              md={6}
+              lg={4}
+              xl={3}
               className="pb-4"
               widths={['xs', 'sm', 'md', 'lg', 'xl']}
               key={item.url}

diff --git 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 <DesignIcon {...props} className={classes} {...rest} />;
     } else if (icon === 'telegram') {

diff --git a/src/components/ItaliaTheme/View/Commons/GenericCard.jsx b/src/components/ItaliaTheme/View/Commons/GenericCard.jsx
@@ -74,9 +74,9 @@ const GenericCard = ({
             <UniversalLink item={item}>{item.title}</UniversalLink>
           </div>
           {(showDescription || children) && (
-            <div className="card-text">
+            <p className="card-text">
               {item.description} {children}
-            </div>
+            </p>
           )}
         </div>
       </div>
@@ -94,9 +94,9 @@ const GenericCard = ({
             <UniversalLink item={item}>{item.title}</UniversalLink>
           </div>
           {(showDescription || children) && (
-            <div className="card-text">
+            <p className="card-text">
               {item.description} {children}
-            </div>
+            </p>
           )}
         </div>
       </div>

diff --git a/src/components/ItaliaTheme/View/Commons/OfficeCard.jsx b/src/components/ItaliaTheme/View/Commons/OfficeCard.jsx
@@ -59,10 +59,10 @@ const OfficeCard = ({
           <div>
             {office?.sede?.map((sede, i) => {
               return (
-                <div className="card-text" key={i}>
-                  {sede.street && <p>{sede.street}</p>}
+                <div key={i}>
+                  {sede.street && <p className="card-text">{sede.street}</p>}
                   {(sede.city || sede.zip_code) && (
-                    <p>
+                    <p className="card-text">
                       {sede.zip_code} {sede.city}
                     </p>
                   )}
@@ -71,8 +71,10 @@ const OfficeCard = ({
             })}
           </div>
         )}
-
-        {children && <div className="card-text">{children}</div>}
+        {/* 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 && <div>{children}</div>}
       </div>
       {image && <div className="image-container">{image}</div>}
     </div>

diff --git 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 }) => {
           )}
         >
           <div className="card-body">
-            <div className="card-text">
+            <p className="card-text">
               <Icon
                 className="me-2"
                 color=""
@@ -51,7 +51,7 @@ const PageHeaderBando = ({ content }) => {
               />
               {intl.formatMessage(messages.bando)}{' '}
               <BandoStatus content={content} />
-            </div>
+            </p>
           </div>
         </div>
       )}

diff --git 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}
             </UniversalLink>
           </div>
-          <div className="card-text">
+          <div>
             {venue_fo.telefono && (
-              <p>
+              <p className="card-text">
                 <ContactLink tel={venue_fo.telefono} />
               </p>
             )}
             {venue_fo.fax && (
-              <p>
+              <p className="card-text">
                 <ContactLink fax={venue_fo.fax} />
               </p>
             )}
             {venue_fo.email && (
-              <p>
+              <p className="card-text">
                 <ContactLink email={venue_fo.email} />
               </p>
             )}
             {venue_fo.pec && (
-              <p>
+              <p className="card-text">
                 <ContactLink email={venue_fo.pec} />
               </p>
             )}
             {venue_fo.web && (
-              <p>
+              <p className="card-text">
                 <a
                   href={
                     venue_fo.web.match(/^(http:\/\/|https:\/\/)/gm)

diff --git a/src/components/ItaliaTheme/View/Commons/VenuesSmall.jsx b/src/components/ItaliaTheme/View/Commons/VenuesSmall.jsx
@@ -33,15 +33,15 @@ const Location = ({ location, show_icon }) => {
         {show_icon && <Icon icon={'it-pin'} />}
         <div className="card-body">
           <div className="card-title h5">{location.title}</div>
-          <div className="card-text">
+          <div>
             {(location.street || location.zip_code) && (
-              <p>
+              <p className="card-text">
                 {location.street && location.street}
                 {location.street && location.zip_code ? ' - ' : ' '}
                 {location.zip_code}
               </p>
             )}
-            <p className="mt-3">
+            <p className="mt-3 card-text">
               <Link
                 to={flattenToAppURL(location['@id'])}
                 title={location.title}

diff --git a/src/components/ItaliaTheme/View/ServizioView/ServizioContatti.jsx b/src/components/ItaliaTheme/View/ServizioView/ServizioContatti.jsx
@@ -17,7 +17,9 @@ const messages = defineMessages({
 
 const ServizioContatti = ({ content }) => {
   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 ? (
     <RichTextSection
       tag_id="contatti"
       title={intl.formatMessage(messages.contatti)}

diff --git a/src/components/ItaliaTheme/View/ServizioView/ServizioView.jsx b/src/components/ItaliaTheme/View/ServizioView/ServizioView.jsx
@@ -3,7 +3,7 @@
  * @module components/theme/View/ServizioView
  */
 
-import React, { createRef } from 'react';
+import React, { createRef, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
@@ -108,7 +108,7 @@ const ServizioView = ({ content, moment }) => {
   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
@@ -43,7 +43,6 @@ export const useSideMenu = (content, documentBody) => {
   const SideMenuComponent =
     config.settings?.italiaThemeViewsConfig?.[content['@type']]?.sideMenu ??
     SideMenu;
-
   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
@@ -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/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -75,15 +75,17 @@
       }
     }
 
-    .title {
+    .title,
+    .title p {
       font-size: 2.25rem;
       font-weight: bold;
       line-height: 2.8rem;
     }
   }
 
   .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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
+  }
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -82,10 +82,6 @@ @@
             }
           }
         }
-        .event-recurrences-more {
-          bottom: $v-gap * 3;
-        }
       }
       .in-evidence-cards-wrapper {
@@ Expand Down @@