io-sanita-theme 2.12.0 → 2.12.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [2.12.1](https://github.com/RedTurtle/io-sanita-theme/compare/2.12.0...2.12.1) (2025-04-17)
+
+### Bug Fixes
+
+* fixed video block view and layout ([#81](https://github.com/RedTurtle/io-sanita-theme/issues/81)) ([70cf688](https://github.com/RedTurtle/io-sanita-theme/commit/70cf688645320a172b766e37383df52ae9ed4546))
+* root aggregation page - redirect to home ([50d9c52](https://github.com/RedTurtle/io-sanita-theme/commit/50d9c52f5b7fcc4249a8067af19f2dbb8e143de7))
+
 ## [2.12.0](https://github.com/RedTurtle/io-sanita-theme/compare/2.11.2...2.12.0) (2025-04-14)
 
 ### Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "io-sanita-theme",
-  "version": "2.12.0",
+  "version": "2.12.1",
   "description": "io-sanita-theme: Volto add-on",
   "main": "src/index.js",
   "license": "MIT",

package/src/components/View/AggregationPage/AggregationPage.jsx

@@ -6,6 +6,7 @@
 import React, { useState, useEffect } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
+import { Redirect } from 'react-router-dom';
 import { Spinner } from 'design-react-kit';
 import Helmet from '@plone/volto/helpers/Helmet/Helmet';
 import { resetContent } from '@plone/volto/actions/content/content';
@@ -57,6 +58,9 @@ const AggregationPage = ({ match, route, location }) => {
   const id = match?.params?.id ?? '';
   const type = route?.type;
 
+  if (id?.length === 0) {
+    return <Redirect to="/" />;
+  }
   //search
   const b_size = config.settings.defaultPageSize; //batchsize
   const [searchParams, setSearchParams] = useState({
@@ -145,6 +149,7 @@ const AggregationPage = ({ match, route, location }) => {
 
   return (
     <>
+      {/* <Helmet title={title} /> */}
       <Helmet title={title} />
 
       <div className="container px-4 my-4 aggregation-page-view public-ui">

package/src/config/ioSanitaConfig.js

@@ -54,8 +54,8 @@ import { component } from 'design-react-kit/dist/types/Icon/assets/ItAndroidSqua
 export const AGGREGATION_PAGE_ARGOMENTO = '/argomento/';
 export const AGGREGATION_PAGE_TIPOLOGIA_UTENTE = '/tipologia-utente/';
 
-const ReleaseLog = loadable(
-  () => import('io-sanita-theme/components/ReleaseLog/ReleaseLog'),
+const ReleaseLog = loadable(() =>
+  import('io-sanita-theme/components/ReleaseLog/ReleaseLog'),
 );
 
 const messages = defineMessages({
@@ -338,13 +338,19 @@ export default function applyConfig(config) {
       component: ReleaseLog,
     },
     {
-      path: [AGGREGATION_PAGE_ARGOMENTO + ':id'],
+      path: [
+        AGGREGATION_PAGE_ARGOMENTO + ':id',
+        AGGREGATION_PAGE_ARGOMENTO.replace(/\/+$/, ''),
+      ],
       component: AggregationPage,
       type: 'parliamo_di',
       breadcrumbs_title: ':id',
     },
     {
-      path: [AGGREGATION_PAGE_TIPOLOGIA_UTENTE + ':id'],
+      path: [
+        AGGREGATION_PAGE_TIPOLOGIA_UTENTE + ':id',
+        AGGREGATION_PAGE_TIPOLOGIA_UTENTE.replace(/\/+$/, ''),
+      ],
       component: AggregationPage,
       type: 'a_chi_si_rivolge_tassonomia',
       breadcrumbs_title: ':id',

package/src/theme/io-sanita/components/blocks/_video.scss

@@ -1,48 +1,91 @@
 .block.video {
-  .ui.embed {
-    position: relative;
-    aspect-ratio: 16 / 9;
+  .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%);
-      aspect-ratio: 16 / 9;
     }
+  }
 
-    .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;
+  .ui.embed {
+    position: relative;
+
+    img.placeholder {
       cursor: pointer;
-      line-height: 2.6rem;
-      text-align: center;
-      transform: translateX(-50%) translateY(-50%);
+    }
+  }
 
-      svg {
-        width: 1.2rem;
-        height: 1.2rem;
-      }
+  &.align.center iframe,
+  &.full .video-inner.full-width iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    border: none;
+    margin: 0;
+  }
 
-      &:hover,
-      &:active,
-      &:focus {
-        background-color: $primary;
-        color: $primary-text;
-      }
+  &.full {
+    .video-inner.full-width > div {
+      height: 480px;
+      position: relative;
+      padding-bottom: 0;
     }
+  }
 
-    &.active {
-      .icon-play {
-        display: none;
+  @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;
+      }
+
+      img {
+        margin-right: 0 !important;
+        margin-left: 0 !important;
+        float: unset;
       }
     }
   }