@kitconcept/volto-light-theme 7.0.0-alpha.7 → 7.0.0-alpha.9

package/.changelog.draft

@@ -1,7 +1,11 @@
-## 7.0.0-alpha.7 (2025-06-04)
+## 7.0.0-alpha.9 (2025-06-09)
 
-### Feature
+### Bugfix
 
-- Update pt_BR translation. @ericof 
+- Fixed Teaser styling @sneridagh [#573](https://github.com/kitconcept/volto-light-theme/pull/573)
+
+### Internal
+
+- Fix aspect ratio for images in file teaser block @iRohitSingh 
 
 

package/CHANGELOG.md

@@ -8,6 +8,24 @@
 
 <!-- towncrier release notes start -->
 
+## 7.0.0-alpha.9 (2025-06-09)
+
+### Bugfix
+
+- Fixed Teaser styling @sneridagh [#573](https://github.com/kitconcept/volto-light-theme/pull/573)
+
+### Internal
+
+- Fix aspect ratio for images in file teaser block @iRohitSingh 
+
+## 7.0.0-alpha.8 (2025-06-06)
+
+### Bugfix
+
+- Fix duplicated pagination on mobile. @danalvrz [#558](https://github.com/kitconcept/volto-light-theme/pull/558)
+- Fixed summaries on Events and News Items. @sneridagh [#567](https://github.com/kitconcept/volto-light-theme/pull/567)
+- Update volto-carousel-block, fixed adaptation needed for the latest VLT changes. @sneridagh 
+
 ## 7.0.0-alpha.7 (2025-06-04)
 
 ### Feature

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "7.0.0-alpha.7",
+  "version": "7.0.0-alpha.9",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -37,7 +37,7 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "release-it": "^19.0.3",
-    "@plone/types": "1.4.1"
+    "@plone/types": "1.4.5"
   },
   "dependencies": {
     "@dnd-kit/core": "6.0.8",
@@ -54,7 +54,7 @@
     "@eeacms/volto-accordion-block": "^10.4.6",
     "@kitconcept/volto-banner-block": "^1.0.1",
     "@kitconcept/volto-button-block": "^4.0.0-alpha.0",
-    "@kitconcept/volto-carousel-block": "^2.0.0-alpha.0",
+    "@kitconcept/volto-carousel-block": "^2.0.0-alpha.1",
     "@kitconcept/volto-dsgvo-banner": "^2.4.0",
     "@kitconcept/volto-heading-block": "^2.4.0",
     "@kitconcept/volto-highlight-block": "^4.1.0",

package/src/components/Blocks/Teaser/schema.js

@@ -1,5 +1,8 @@
 export const teaserSchemaEnhancer = ({ schema, formData, intl }) => {
   schema.properties.href.selectedItemAttrs.push('getRemoteUrl');
+  schema.properties.href.selectedItemAttrs.push('effective');
+  schema.properties.href.selectedItemAttrs.push('start');
+  schema.properties.href.selectedItemAttrs.push('end');
 
   return schema;
 };

package/src/theme/_bgcolor-blocks-layout.scss

@@ -290,42 +290,22 @@
           }
         }
       }
+
       .pagination-wrapper {
         .ui.pagination.desktop-pagination.menu {
-          display: flex;
           background: none;
 
           a {
-            max-height: 38px !important;
-            border-color: var(--theme-foreground-color);
-            color: var(--theme-foreground-color);
-
             &:nth-child(n):not(:last-child) {
               border-right: none;
             }
-
-            &.disabled {
-              color: var(--theme-low-contrast-foreground-color) !important;
-            }
-
-            &.active {
-              background: var(--theme-foreground-color);
-              color: var(--theme-color);
-            }
           }
         }
 
-        .total {
-          color: var(--theme-foreground-color);
-        }
-      }
-
-      .pagination-wrapper {
         .ui.pagination.menu {
-          display: flex;
           background: none;
 
-          a {
+          a.item {
             max-height: 38px !important;
             border-color: var(--theme-foreground-color);
             color: var(--theme-foreground-color);

package/src/theme/_layout.scss

@@ -283,7 +283,13 @@ External link removal for all the blocks.
       @include adjustMarginsToContainer($narrow-container-width);
     }
 
-    &:not(.highlight, .teaser, .gridBlock, .slider).has--block-width--default {
+    &:not(
+        .highlight,
+        .teaser,
+        .gridBlock,
+        .slider,
+        .listing
+      ).has--block-width--default {
       @include adjustMarginsToContainer($default-container-width);
     }
 

package/src/theme/_variables.scss

@@ -155,6 +155,7 @@ $secondary-grey: #ececec !default;
 
 // Image Aspect Ratio
 $aspect-ratio: calc(16 / 9) !default;
+$aspect-ratio-A4: calc(5 / 7) !default;
 
 // Weights
 $thin: 100 !default;

package/src/theme/blocks/_listing.scss

@@ -228,6 +228,24 @@
         right: -68px;
       }
 
+      @media only screen and (max-width: $narrow-container-width) {
+        &.image-gallery-left-nav {
+          left: -0.5rem;
+        }
+        &.image-gallery-right-nav {
+          right: -0.5rem;
+        }
+      }
+
+      @media only screen and (max-width: 1085px) {
+        &.image-gallery-left-nav {
+          left: -1rem;
+        }
+        &.image-gallery-right-nav {
+          right: -1rem;
+        }
+      }
+
       &.image-gallery-fullscreen-button,
       &.image-gallery-play-button {
         bottom: -94px;
@@ -361,7 +379,7 @@
 
       @container (max-width: #{$largest-mobile-screen}) {
         &.mobile-pagination {
-          display: unset;
+          display: table-row;
         }
 
         &.desktop-pagination {

package/src/theme/blocks/_teaser.scss

@@ -13,6 +13,12 @@
   // We want the image to extend in all its container width
   height: 100%;
 
+  &.file-teaser .card .card-inner .image-wrapper {
+    img {
+      aspect-ratio: var(--file-image-aspect-ratio, $aspect-ratio-A4) !important;
+    }
+  }
+
   a.external {
     .card-summary h2:after {
       @include external-link-icon();

package/src/theme/person.scss

@@ -1,6 +1,8 @@
 .card {
   .person-teaser.has--align--left:not(.contained) &,
   .has--align--left:not(.contained) .person-teaser &,
+  .has--align--right:not(.contained) .person-teaser &,
+  .has--align--center:not(.contained) .person-teaser &,
   .person-teaser.has--align--right:not(.contained) & {
     .card-inner {
       .image-wrapper {
@@ -28,18 +30,48 @@
     }
   }
 
+  // Teaser (standalone) top
+  .has--align--center:not(.contained) .person-teaser & {
+    width: calc(var(--default-container-width) / 2);
+    margin-right: auto;
+    margin-left: auto;
+
+    .image-wrapper {
+      display: flex;
+      justify-content: center;
+    }
+    .card-summary {
+      padding-right: 0px;
+      padding-left: 0px;
+      text-align: center;
+    }
+
+    .summary-extra-info,
+    .summary-room-phone {
+      justify-content: center;
+    }
+  }
+
+  // Teaser in Grid
   .contained.person-teaser & {
+    // Exploration for rounded images in person-teasers
+    // --person-image-height: auto;
+    // --person-image-border-radius: 10000px;
+    // --person-image-aspect-ratio: 1/1;
     .image-wrapper {
       display: flex;
-      height: 255px;
+      height: var(--person-image-height, 255px);
       justify-content: center;
-      aspect-ratio: var(--image-aspect-ratio, 1.7777777778);
+      // Removed since it was causing the cards to have more width than the available container
+      // for +2 columns
+      // aspect-ratio: var(--image-aspect-ratio, 1.7777777778);
 
       img {
         max-width: 198px; // 255x198px Roughly 3:4 (enough to cover the 16:9 portrait height)
         height: 100%;
         flex: 0 1 auto;
-        aspect-ratio: initial !important;
+        border-radius: var(--person-image-border-radius, 0px);
+        aspect-ratio: var(--person-image-aspect-ratio, initial) !important;
         object-fit: cover;
         object-position: top center;
       }
@@ -103,6 +135,13 @@ body .block.gridBlock .block.teaser.contained.person-teaser .card-inner {
   gap: $spacing-small;
 }
 
+// One person teaser in Grid, edit mode
+.block.gridBlock .one .cell-wrapper:has(.person-teaser) {
+  max-width: var(--default-container-width) / 2;
+  margin-right: auto;
+  margin-left: auto;
+}
+
 // Listings (no card)
 .block.listing {
   .listing-item.person-listing {