design-comuni-plone-theme 12.1.1 → 12.1.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [12.1.2](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v12.1.1...v12.1.2) (2025-05-07)
+
+
+### Bug Fixes
+
+* full width and center alignment of video block ([#941](https://github.com/RedTurtle/design-comuni-plone-theme/issues/941)) ([51b57da](https://github.com/RedTurtle/design-comuni-plone-theme/commit/51b57dac7fb120b29541a3c0261a3ec37397325e))
+* mobile style of callout block ([#944](https://github.com/RedTurtle/design-comuni-plone-theme/issues/944)) ([dcf13fa](https://github.com/RedTurtle/design-comuni-plone-theme/commit/dcf13faaa6617ef8b654ddc3a3f3026c0f805217))
+* multiple location condition in query widget ([#943](https://github.com/RedTurtle/design-comuni-plone-theme/issues/943)) ([8177214](https://github.com/RedTurtle/design-comuni-plone-theme/commit/8177214242124f8e7ebe2413d39085a5a5d293f7))
+* small blocks links image height ([#940](https://github.com/RedTurtle/design-comuni-plone-theme/issues/940)) ([37f3f4c](https://github.com/RedTurtle/design-comuni-plone-theme/commit/37f3f4c6edc604d0b35dc01d895b71997a671b3e))
+
+
+### Documentation
+
+* updated publiccode and release log ([fe19c88](https://github.com/RedTurtle/design-comuni-plone-theme/commit/fe19c887770a07d86b1d1e86aa7a3eec0eea0143))
+
 ## [12.1.1](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v12.1.0...v12.1.1) (2025-04-14)
 
 

package/RELEASE.md

@@ -41,6 +41,14 @@
 - ...
  -->
 
+## Versione 12.1.2 (07/05/2025)
+
+### Fix
+
+- L'altezza delle immagini all'interno del blocco "link solo immagini" è stata aumentata e non ha più un limite massimo. Ora tutte le card avranno la stessa altezza.
+- Sistemato stile del blocco callout per la versione mobile.
+- Sistemati i formati "A pieno schermo" e "Allineamento al centro" del blocco Video, l"immagine in anteprima dava problemi nella visualizzazione di video di Youtube.
+
 ## Versione 12.1.1 (14/04/2025)
 
 ### Fix

package/package.json

@@ -2,7 +2,7 @@
   "name": "design-comuni-plone-theme",
   "description": "Volto Theme for Italia design guidelines",
   "license": "GPL-v3",
-  "version": "12.1.1",
+  "version": "12.1.2",
   "main": "src/index.js",
   "repository": {
     "type": "git",
@@ -156,7 +156,7 @@
     "volto-gdpr-privacy": "2.2.12",
     "volto-google-analytics": "2.0.0",
     "volto-multilingual-widget": "3.2.1",
-    "volto-querywidget-with-browser": "0.4.2",
+    "volto-querywidget-with-browser": "0.4.4",
     "volto-rss-block": "3.0.0",
     "volto-secondarymenu": "4.1.1",
     "volto-site-settings": "0.4.4",

package/publiccode.yml

@@ -227,9 +227,9 @@ maintenance:
 name: io-Comune - Il sito AgID per Comuni ed Enti Pubblici
 platforms:
   - web
-releaseDate: '2025-04-14'
+releaseDate: '2025-05-07'
 softwareType: standalone/web
-softwareVersion: 12.1.1
+softwareVersion: 12.1.2
 url: 'https://github.com/italia/design-comuni-plone-theme'
 usedBy:
   - ASP Comuni Modenesi Area Nord

package/src/components/ItaliaTheme/Blocks/Callout/Edit.jsx

@@ -66,6 +66,7 @@ const Edit = (props) => {
               onSelectBlock={onSelectBlock}
             />
           </div>
+          {data.style !== 'highlight' && <div className="text-line"></div>}
         </CalloutTitle>
         <CalloutText>
           <TextEditorWidget

package/src/components/ItaliaTheme/Blocks/Callout/View.jsx

@@ -25,6 +25,7 @@ const View = ({ data, id }) => {
         <CalloutTitle>
           {data.icon && <Icon icon={data.icon} padding={false} aria-hidden />}
           <span className="text">{data.title}</span>
+          {data.style !== 'highlight' && <span className="text-line"></span>}
         </CalloutTitle>
         <CalloutText>
           <TextBlockView id={id} data={{ value: data.text }} />

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

@@ -9,7 +9,7 @@
     position: relative;
     display: flex;
     overflow: hidden;
-    height: 100px;
+    height: 100%;
     align-items: center;
     justify-content: center;
     border: 8px solid $white;

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

@@ -1,46 +1,74 @@
 .block.video {
-  .ui.embed {
-    position: relative;
+  .video-inner {
+    > div {
+      position: relative;
+      overflow: hidden;
+      max-width: 100%;
+      height: 0;
+      padding-bottom: 56.25%;
+
+      .icon-play {
+        position: absolute;
+        z-index: 2;
+        top: 50%;
+        left: 50%;
+        width: 4rem;
+        height: 2.6rem;
+        border-radius: 15px;
+        background-color: rgba(0, 0, 0, 0.7);
+        color: $white;
+        cursor: pointer;
+        line-height: 2.6rem;
+        text-align: center;
+        transform: translateX(-50%) translateY(-50%);
+      }
+    }
+
+    .ui.embed.active {
+      .icon-play,
+      img.placeholder {
+        display: none;
+      }
+    }
 
     img.placeholder {
       position: absolute;
       top: 50%;
       left: 0;
       width: 100%;
+      min-width: 100%;
+      height: unset;
+      min-height: 100%;
+      object-fit: cover;
       transform: translateY(-50%);
     }
+  }
 
-    .icon-play {
-      position: absolute;
-      z-index: 2;
-      top: 50%;
-      left: 50%;
-      width: 4rem;
-      height: 2.6rem;
-      border-radius: 15px;
-      background-color: rgba(0, 0, 0, 0.7);
-      color: $white;
-      cursor: pointer;
-      line-height: 2.6rem;
-      text-align: center;
-      transform: translateX(-50%) translateY(-50%);
+  .ui.embed img.placeholder {
+    cursor: pointer;
+  }
 
-      svg {
-        width: 1.2rem;
-        height: 1.2rem;
-      }
+  &.full {
+    .video-inner.full-width > div {
+      height: 100%;
+      padding-bottom: 0;
+    }
+  }
 
-      &:hover,
-      &:active,
-      &:focus {
-        background-color: $primary;
-        color: $primary-text;
+  @media (max-width: #{map-get($grid-breakpoints, md)}) {
+    &.align.right,
+    &.align.left {
+      .video-inner {
+        width: 100%;
+        margin-right: 0 !important;
+        margin-left: 0 !important;
+        float: unset;
       }
-    }
 
-    &.active {
-      .icon-play {
-        display: none;
+      img {
+        margin-right: 0 !important;
+        margin-left: 0 !important;
+        float: unset;
       }
     }
   }

package/src/theme/bootstrap-override/bootstrap-italia/_callout.scss

@@ -1,8 +1,61 @@
 div.callout {
   max-width: none;
-  padding: 0; //override volto's style
+  padding: 0; // override volto's style
   border: none;
   border-radius: unset;
   margin: 0;
   box-shadow: none;
+
+  .callout-title {
+    display: flex;
+    width: calc(100% + 1.389rem * 2 + 1.4rem); // padding + icon
+    margin-right: 0;
+
+    svg.icon {
+      min-width: 1.4rem;
+    }
+
+    .text {
+      width: auto;
+      padding-right: 1rem;
+
+      &::after {
+        display: none;
+      }
+    }
+
+    .text-line {
+      position: relative;
+      top: 0.8rem;
+      width: 100%;
+      min-width: 3rem;
+      height: 2px;
+      flex: 1;
+      background-color: $color-border-secondary;
+    }
+  }
+
+  &.danger {
+    .text-line {
+      background-color: $danger;
+    }
+  }
+
+  &.success {
+    .text-line {
+      background-color: $success;
+    }
+  }
+
+  &.warning {
+    .text-line {
+      background-color: $warning;
+    }
+  }
+
+  &.note {
+    .text-line {
+      background-color: $primary;
+    }
+  }
 }