design-comuni-plone-theme 11.3.2 → 11.3.3

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 
 
+## [11.3.3](https://github.com/redturtle/design-comuni-plone-theme/compare/v11.3.2...v11.3.3) (2024-01-30)
+
+
+### Bug Fixes
+
+* alignment of CardPersona images and better layout for tablets, 2 cards max per row at this screen size ([#501](https://github.com/redturtle/design-comuni-plone-theme/issues/501)) ([8a8fe7a](https://github.com/redturtle/design-comuni-plone-theme/commit/8a8fe7af3f4c93036579ff200a69b65dfe19b478))
+* color contrast in icons block ([#498](https://github.com/redturtle/design-comuni-plone-theme/issues/498)) ([2099b12](https://github.com/redturtle/design-comuni-plone-theme/commit/2099b12b535610eee1b5be0382e7e6d58582a91b))
+* ct Cartella Modulistica layout fixes, handle long text and fix mobile layout ([#497](https://github.com/redturtle/design-comuni-plone-theme/issues/497)) ([40ca2c9](https://github.com/redturtle/design-comuni-plone-theme/commit/40ca2c98645f28bafaf65b67929fbf8d67c649d5))
+* gallery grid block scale for index 3 ([#492](https://github.com/redturtle/design-comuni-plone-theme/issues/492)) ([2800f1d](https://github.com/redturtle/design-comuni-plone-theme/commit/2800f1d50f3f158af19b817d6403cee88bba173b))
+* layout and link color for BandiInEvidence ([e064d22](https://github.com/redturtle/design-comuni-plone-theme/commit/e064d22ea57561dcaa92f4a58bd249ad1337ceec))
+* layout for LocationItem and VenuesSmall fixed for tablet ([#505](https://github.com/redturtle/design-comuni-plone-theme/issues/505)) ([656238a](https://github.com/redturtle/design-comuni-plone-theme/commit/656238a82ec88ea9cab6dfc92171fd9b92690655))
+* layout of OfficeCard component in tablet resolutions, fix wrapper of Office cards in all views that can have multiple OfficeCards ([#506](https://github.com/redturtle/design-comuni-plone-theme/issues/506)) ([aa7a1e9](https://github.com/redturtle/design-comuni-plone-theme/commit/aa7a1e9baa71fe1d63b4b28ab734cf0c7d89202a))
+* removed unnecessary link color variable ([a60599a](https://github.com/redturtle/design-comuni-plone-theme/commit/a60599a873992e0a7254e261540fd63cc83ce042))
+* removed width style from card-body, added align-items style to overwrite listing-item style ([aad1c80](https://github.com/redturtle/design-comuni-plone-theme/commit/aad1c800705e0e3d3bc1ad3abdc0a369bba42b3b))
+* styles for highlitedContent block for subsites ([#503](https://github.com/redturtle/design-comuni-plone-theme/issues/503)) ([d51135e](https://github.com/redturtle/design-comuni-plone-theme/commit/d51135e356a7a1203e706f48781fb3ff11392ee9))
+* **subsites:** changed select pill text color when theme is light ([#494](https://github.com/redturtle/design-comuni-plone-theme/issues/494)) ([2421e20](https://github.com/redturtle/design-comuni-plone-theme/commit/2421e202274b0376b1e12ca16f586502a3d2830a))
+* the default maximum b_size allowed in redturtle.volto is 500, this fix remove annoying log warning ([#499](https://github.com/redturtle/design-comuni-plone-theme/issues/499)) ([970e4f4](https://github.com/redturtle/design-comuni-plone-theme/commit/970e4f401f16c4b1fda7cbe2b0ed9a158445ffa9))
+* visualizzazione altri argomenti in blocco argomenti quando il loro numero è esiguo ([#493](https://github.com/redturtle/design-comuni-plone-theme/issues/493)) ([9644292](https://github.com/redturtle/design-comuni-plone-theme/commit/96442927aa9ac3cc85fcf90c8aa64e204231f61b))
+
+
+### Maintenance
+
+* preparing release v11.3.3 ([4ccd4e2](https://github.com/redturtle/design-comuni-plone-theme/commit/4ccd4e26bd61f84df4d90059862f510b40d44913))
+
 ## [11.3.2](https://github.com/redturtle/design-comuni-plone-theme/compare/v11.3.1...v11.3.2) (2024-01-19)
 
 

package/RELEASE.md

@@ -41,7 +41,23 @@
 - ...
 -->
 
-## Versione 11.3.2 (19/01/2023)
+## Versione 11.3.3 (30/01/2024)
+
+### Fix
+
+- Sistemato il layout del blocco elenco per i Bandi
+- Sistemato il layout del template Galliery a griglia per il blocco elenco, le immagini più piccole ora sono correttamente contenute dentro il loro riquadro e il titolo non fuoriesce più
+- Sistemati problemi negli stili per i sottositi
+- Risolto un problema di visualizzazione degli argomenti indicati come altri argomenti nel blocco Argomenti quando il loro numero è esiguo
+- Sistemato il layout e la visualizzazione della vista del CT Cartella Modulistica per gestire al meglio gli elementi
+  titolo, titolo del modulo e link al download in caso di testi lunghi, specialmente su mobile
+- Colore di sfondo per il blocco icone impostato sul colore primario. Sistemato il contrasto tra descrizione e lo sfondo
+- Sistemata la visualizzazione delle card Uffici (card Unità Organizzativa) nelle risoluzioni tablet più comuni
+- Layout delle card per i luoghi migliorato per dispositivi tablet
+- Risolto un problema di visualizzazione e allineamento delle immagini per le card dei blocchi elenco che rappresentano Persone,
+  migliorata la visualizzazione e il layout su dispositivi tablet (intervallo dimensioni: 992px-1199px)
+
+## Versione 11.3.2 (19/01/2024)
 
 ### Fix
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "design-comuni-plone-theme",
   "description": "Volto Theme for Italia design guidelines",
   "license": "GPL-v3",
-  "version": "11.3.2",
+  "version": "11.3.3",
   "main": "src/index.js",
   "keywords": [
     "volto-addon",

package/publiccode.yml

@@ -227,9 +227,9 @@ maintenance:
 name: io-Comune - Il sito AgID per Comuni ed Enti Pubblici
 platforms:
   - web
-releaseDate: '2024-01-19'
+releaseDate: '2024-01-30'
 softwareType: standalone/web
-softwareVersion: 11.3.2
+softwareVersion: 11.3.3
 url: 'https://github.com/italia/design-comuni-plone-theme'
 usedBy:
   - ASP Comuni Modenesi Area Nord

package/src/components/ItaliaTheme/Blocks/ArgumentsInEvidence/BottomBody.jsx

@@ -17,13 +17,13 @@ const messages = defineMessages({
 const BottomBody = ({ data, intl }) => {
   return data?.arguments?.length > 0 ? (
     <Container className="text-center">
-      <div className="row d-lg-inline-flex pt-5">
-        <div className="col-lg-3">
+      <div className="row d-lg-inline-flex align-items-center pt-5">
+        <div className="col-lg-auto">
           <h6 className="text-uppercase text-center mt-1">
             {intl?.formatMessage(messages.otherArguments)}
           </h6>
         </div>
-        <div className="col-lg-9 text-start">
+        <div className="col-lg-auto">
           {data?.arguments?.map((argument, index) => (
             <Chip
               color="primary"

package/src/components/ItaliaTheme/Blocks/Listing/CardWithImageTemplate.jsx

@@ -104,17 +104,19 @@ const CardWithImageTemplate = (props) => {
               name: 'BlockExtraTags',
               dependencies: ['CardWithImageTemplate', item['@type']],
             }).component;
+            const layoutSelected = set_four_columns ? '3' : '4';
 
             return (
               <Col
-                lg={set_four_columns ? '3' : '4'}
+                xl={layoutSelected}
+                lg={item['@type'] === 'Persona' ? 6 : layoutSelected}
                 key={item['@id']}
                 className="col-item mb-3"
               >
                 {item['@type'] === 'Persona' ? (
                   <CardPersona
                     item={item}
-                    className="listing-item card-bg shadow-sm"
+                    className="card-bg shadow-sm"
                     showImage={showImage}
                     natural_image_size={natural_image_size}
                     show_description={show_description}

package/src/components/ItaliaTheme/Blocks/Listing/GridGalleryTemplate.jsx

@@ -35,7 +35,6 @@ const GridGalleryTemplate = ({
   linkmore_id_lighthouse,
 }) => {
   const intl = useIntl();
-
   return (
     <div className="grid-gallery-template">
       <Container className="px-4">
@@ -60,9 +59,8 @@ const GridGalleryTemplate = ({
               item,
               className: '',
             });
-
             let scale = null;
-            if (index % 7 === 0 || index % 7 === 6) {
+            if (index % 7 === 0 || index % 7 === 6 || index % 7 === 3) {
               scale = 'great';
             }
             if (index % 7 === 1 || index % 7 === 5) {
@@ -71,21 +69,18 @@ const GridGalleryTemplate = ({
             if (index % 7 === 2 || index % 7 === 4) {
               scale = 'large';
             }
-
             if (scale && item?.image?.scales?.[scale]) {
               image = (
-                <picture className="volto-image responsive">
-                  <img
-                    src={flattenToAppURL(item.image.scales[scale].download)}
-                    width={item.image.scales[scale].width}
-                    height={item.image.scales[scale].height}
-                    alt=""
-                    role="presentation"
-                    aria-hidden="true"
-                    title={item.title}
-                    loading={critical ? 'eager' : 'lazy'}
-                  />
-                </picture>
+                <img
+                  src={flattenToAppURL(item.image.scales[scale].download)}
+                  width={item.image.scales[scale].width}
+                  height={item.image.scales[scale].height}
+                  alt=""
+                  role="presentation"
+                  aria-hidden="true"
+                  title={item.title}
+                  loading={critical ? 'eager' : 'lazy'}
+                />
               );
             }
 
@@ -98,7 +93,11 @@ const GridGalleryTemplate = ({
                   item={!isEditMode ? item : null}
                   href={isEditMode ? '#' : null}
                 >
-                  {image && image}
+                  {image && (
+                    <picture className="volto-image responsive">
+                      {image}
+                    </picture>
+                  )}
                   <h3>{item.title}</h3>
                 </UniversalLink>
               </div>

package/src/components/ItaliaTheme/View/Commons/Attachments.jsx

@@ -54,7 +54,8 @@ const Attachments = ({
             sort_on: 'getObjPositionInParent',
             metadata_fields: '_all',
             fullobjects: 1,
-            b_size: 900,
+            // the default maximum b_size allowed in redturtle.volto is 500
+            b_size: 499,
           },
           key,
         ),

package/src/components/ItaliaTheme/View/Commons/OfficeCard.jsx

@@ -29,7 +29,7 @@ const OfficeCard = ({
   return (
     <div
       className={cx(
-        'card card-teaser preview-image-card border-left-card rounded shadow p-3 ',
+        'card card-teaser office-card preview-image-card border-left-card rounded shadow p-3 ',
         size === 'big' ? 'card-big-io-comune' : 'card-small',
         {
           'mb-3': margin_bottom,

package/src/components/ItaliaTheme/View/Commons/VenuesSmall.jsx

@@ -29,7 +29,7 @@ const Location = ({ location, show_icon }) => {
   const image = Image({ item: location, loading: 'lazy', sizes: '80px' });
   return (
     location && (
-      <div className="card card-teaser shadow border-left-card mt-3 rounded">
+      <div className="card card-teaser shadow border-left-card mt-3 rounded location-item">
         {show_icon && <Icon icon={'it-pin'} />}
         <div className="card-body">
           <div className="card-title h5">{location.title}</div>

package/src/components/ItaliaTheme/View/IncaricoView/IncaricoView.jsx

@@ -127,9 +127,11 @@ const IncaricoView = (props) => {
             tag_id="ufficio"
             title={intl.formatMessage(messages.ufficio)}
           >
-            {content.unita_organizzativa?.map((item) => (
-              <OfficeCard key={flattenToAppURL(item['@id'])} office={item} />
-            ))}
+            <div className="card-wrapper card-teaser-wrapper card-teaser-wrapper-equal">
+              {content.unita_organizzativa?.map((item) => (
+                <OfficeCard key={flattenToAppURL(item['@id'])} office={item} />
+              ))}
+            </div>
           </RichTextSection>
         )}
         {content.responsabile_struttura?.length > 0 && (
@@ -137,9 +139,11 @@ const IncaricoView = (props) => {
             tag_id="responsabile"
             title={intl.formatMessage(messages.responsabile)}
           >
-            {content.responsabile_struttura?.map((item) => (
-              <OfficeCard key={flattenToAppURL(item['@id'])} office={item} />
-            ))}
+            <div className="card-wrapper card-teaser-wrapper card-teaser-wrapper-equal">
+              {content.responsabile_struttura?.map((item) => (
+                <OfficeCard key={flattenToAppURL(item['@id'])} office={item} />
+              ))}
+            </div>
           </RichTextSection>
         )}
         {content.atto_nomina?.length > 0 && (

package/src/components/ItaliaTheme/View/ServizioView/ServizioAccedi.jsx

@@ -56,14 +56,15 @@ const ServizioAccedi = ({ content }) => {
           title={intl.formatMessage(messages.dove_rivolgersi)}
           lighthouseId="service-generic-access"
         >
-          {content.dove_rivolgersi?.map?.((dove) => (
-            <div
-              key={dove['@id']}
-              className="card-wrapper card-teaser-wrapper card-teaser-wrapper-equal"
-            >
-              <OfficeCard office={dove} data-element="service-generic-access" />
-            </div>
-          ))}
+          <div className="card-wrapper card-teaser-wrapper card-teaser-wrapper-equal">
+            {content.dove_rivolgersi?.map?.((dove) => (
+              <OfficeCard
+                office={dove}
+                data-element="service-generic-access"
+                key={dove['@id']}
+              />
+            ))}
+          </div>
           <RichText
             data={content.dove_rivolgersi_extra}
             lighthouseId="service-generic-access"

package/src/theme/ItaliaTheme/Blocks/_bandiInEvidenceTemplate.scss

@@ -19,12 +19,15 @@
       grid-row: 1;
     }
 
-    .card-body {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      padding: 2.5rem;
-      padding-bottom: 0rem;
+    .listing-item {
+      align-items: normal;
+      .card-body {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        padding: 2.5rem;
+        padding-bottom: 0rem;
+      }
     }
   }
 
@@ -122,7 +125,6 @@
       @media (max-width: #{map-get($grid-breakpoints, sm)}) {
         display: flex;
         align-items: center;
-        color: $analogue-1-a7;
         font-size: 0.77778rem;
         font-weight: bold;
         letter-spacing: 0.9px;

package/src/theme/ItaliaTheme/Blocks/_iconBlocks.scss

@@ -34,7 +34,7 @@
       position: absolute;
       width: 100%;
       height: 100%;
-      background-color: rgba($primary, 0.85);
+      background-color: $primary;
       content: '';
     }
   }

package/src/theme/ItaliaTheme/Components/_cardLocationItem.scss

@@ -0,0 +1,5 @@
+@media (min-width: #{map-get($grid-breakpoints, lg)}) and (max-width: #{map-get($grid-breakpoints, xl)}) {
+  .card-wrapper.card-teaser-wrapper .card-teaser.location-item {
+    flex: 0 0 100%;
+  }
+}

package/src/theme/ItaliaTheme/Components/_officeCard.scss

@@ -0,0 +1,5 @@
+@media (min-width: #{map-get($grid-breakpoints, lg)}) and (max-width: #{map-get($grid-breakpoints, xl)}) {
+  .card-wrapper.card-teaser-wrapper .card-teaser.office-card {
+    flex: 0 0 100%;
+  }
+}

package/src/theme/ItaliaTheme/Subsites/ItaliaTheme/Blocks/_cta.scss

@@ -1,6 +1,6 @@
 @use '../../all_variables' as *;
 
-@mixin block($subsite-secondary) {
+@mixin block($subsite-secondary, $subsite-secondary-text) {
   .cta-block {
     .cta-block-wrapper {
       background-color: $subsite-secondary;
@@ -8,6 +8,13 @@
       &.has-image {
         background: none;
       }
+
+      a {
+        color: $subsite-secondary-text;
+      }
     }
   }
+  .cms-ui .cta-block a {
+    color: $subsite-secondary-text;
+  }
 }

package/src/theme/ItaliaTheme/Subsites/ItaliaTheme/Blocks/_highlitedContent.scss

@@ -10,7 +10,7 @@
     .bg-primary {
       .card .card-body {
         .categoryicon-top {
-          .text {
+          span {
             color: $subsite-primary-text;
           }
 
@@ -37,10 +37,9 @@
         }
 
         .chip.chip-primary {
-          border-color: $subsite-link-color;
-
+          border-color: $subsite-primary-text;
           & > .chip-label {
-            color: $subsite-link-color;
+            color: $subsite-primary-text;
           }
 
           &:hover,
@@ -83,8 +82,14 @@
         }
 
         .chip.chip-primary {
+          border-color: $subsite-secondary-text;
+          > .chip-label {
+            color: $subsite-secondary-text;
+          }
           &:hover,
           &:active {
+            border-color: $subsite-secondary;
+            background-color: $subsite-secondary-text;
             > .chip-label {
               color: $subsite-secondary;
             }

package/src/theme/ItaliaTheme/Subsites/ItaliaTheme/Blocks/_searchSections.scss

@@ -5,7 +5,8 @@
   $subsite-primary-text,
   $subsite-secondary,
   $subsite-secondary-text,
-  $subsite-primary-a0
+  $subsite-primary-a0,
+  $subsite-light-theme
 ) {
   .container .block {
     .searchSections {
@@ -41,7 +42,11 @@
 
     &.search {
       .search-wrapper .autocomplete-icon .icon {
-        fill: $subsite-primary;
+        @if $subsite-light-theme {
+          fill: $subsite-secondary;
+        } @else {
+          fill: $subsite-primary;
+        }
       }
     }
   }

package/src/theme/ItaliaTheme/Subsites/ItaliaTheme/_common.scss

@@ -57,7 +57,11 @@
     color: $subsite-primary-text !important;
   }
   .select-pill.text-primary {
-    color: $subsite-primary !important;
+    @if ($subsite-light-theme) {
+      color: $subsite-link-color !important;
+    } @else {
+      color: $subsite-primary !important;
+    }
 
     div {
       color: inherit;
@@ -83,15 +87,6 @@
     }
   }
 
-  // icon external link
-  .external-link {
-    @if $subsite-light-theme {
-      fill: $subsite-link-color !important;
-    } @else {
-      fill: $subsite-primary !important;
-    }
-  }
-
   .flag-icon {
     background: $subsite-secondary;
   }

package/src/theme/ItaliaTheme/Subsites/_mixin.scss

@@ -129,7 +129,7 @@
         $subsite-secondary-text
       );
       @include it-contacts.block($subsite-primary, $subsite-primary-text);
-      @include it-cta.block($subsite-secondary);
+      @include it-cta.block($subsite-secondary, $subsite-secondary-text);
       @include it-form.block(
         $subsite-primary,
         $subsite-primary-text,
@@ -169,7 +169,8 @@
         $subsite-primary-text,
         $subsite-secondary,
         $subsite-secondary-text,
-        $subsite-primary-a0
+        $subsite-primary-a0,
+        $subsite-light-theme
       );
       @include it-table-contents.block($subsite-primary);
       @include it-views.common(
@@ -206,7 +207,8 @@
 
       #categoryCollapse .btn-icon.btn.btn-outline-secondary {
         border-color: $subsite-primary;
-        box-shadow: inset 0 0 0 1px $subsite-primary,
+        box-shadow:
+          inset 0 0 0 1px $subsite-primary,
           0 0 0 0.2rem rgba(var($subsite-primary), 0.2);
         color: $subsite-primary;
       }

package/src/theme/ItaliaTheme/Views/_cartellaModulistica.scss

@@ -48,7 +48,9 @@ $docs-section-margin: 3em;
           justify-content: space-between;
           padding: 0.4em 0;
           gap: 4rem;
-
+          .title {
+            flex: 1;
+          }
           .title-wrap {
             flex: 1;
 
@@ -182,6 +184,14 @@ $docs-section-margin: 3em;
       .documents-section,
       .document-row-section {
         .doc-row {
+          .doc:not(.modulo) {
+            flex-direction: column;
+            align-items: flex-start;
+            justify-content: center;
+            .downloads {
+              width: 100%;
+            }
+          }
           .doc {
             flex-wrap: wrap;
             align-items: center;
@@ -211,6 +221,7 @@ $docs-section-margin: 3em;
 
             &.modulo {
               justify-content: space-between;
+              flex-wrap: nowrap;
 
               .title,
               .downloads {

package/src/theme/site.scss

@@ -128,6 +128,8 @@
 @import 'ItaliaTheme/Components/breadcrumbs';
 @import 'ItaliaTheme/Components/card';
 @import 'ItaliaTheme/Components/cardPersona';
+@import 'ItaliaTheme/Components/officeCard';
+@import 'ItaliaTheme/Components/cardLocationItem';
 @import 'ItaliaTheme/Components/contactsCard';
 @import 'ItaliaTheme/Components/navscroll';
 @import 'ItaliaTheme/Components/customerSatisfaction';