@kitconcept/volto-light-theme 1.0.0-rc.3 → 1.0.0-rc.4

package/.github/workflows/deploy.yml

@@ -1,6 +1,7 @@
 name: Release and deploy
 on:
-  - push
+  push:
+  workflow_dispatch:
 
 env:
   ENVIRONMENT: "light-theme.kitconcept.io"

package/CHANGELOG.md

@@ -8,6 +8,13 @@
 
 <!-- towncrier release notes start -->
 
+## 1.0.0-rc.4 (2023-07-11)
+
+### Bugfix
+
+- Fix Teaser block CSS. @danalvrz [#134](https://github.com/kitconcept/volto-light-theme/pull/134)
+
+
 ## 1.0.0-rc.3 (2023-07-10)
 
 ### Breaking

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "1.0.0-rc.3",
+  "version": "1.0.0-rc.4",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.js",
   "repository": {

package/src/components/Blocks/Listing/GridTemplate.jsx

@@ -40,10 +40,10 @@ const GridTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
                     componentName="PreviewImage"
                     item={item}
                     alt=""
-                    className="grid-item-image"
+                    className="item-image"
                   />
                 )}
-                <div className="grid-item">
+                <div className="item">
                   <div className="content">
                     {item?.head_title && (
                       <div className="headline">{item.head_title}</div>

package/src/index.js

@@ -35,6 +35,7 @@ defineMessages({
 
 const applyConfig = (config) => {
   config.settings.enableAutoBlockGroupingByBackgroundColor = true;
+  config.settings.navDepth = 3;
 
   // No required blocks (eg. Title)
   config.blocks.requiredBlocks = [];
@@ -49,7 +50,14 @@ const applyConfig = (config) => {
     ...config.settings.apiExpanders,
     {
       match: '',
-      GET_CONTENT: ['breadcrumbs', 'navigation', 'actions', 'types'],
+      GET_CONTENT: ['breadcrumbs', 'actions', 'types'],
+    },
+    {
+      match: '',
+      GET_CONTENT: ['navigation'],
+      querystring: {
+        'expand.navigation.depth': config.settings.navDepth,
+      },
     },
   ];
 

package/src/theme/_content.scss

@@ -30,3 +30,9 @@
     }
   }
 }
+
+.contenttype-file {
+  .content-area a {
+    text-decoration: underline;
+  }
+}

package/src/theme/_layout.scss

@@ -164,7 +164,7 @@ footer {
   & > .block.heading .heading-wrapper,
   & > .block.separator.has--align--full .line,
   & > .block.introduction .block-container,
-  & > .block.teaser .grid-teaser-item.default,
+  & > .block.teaser .teaser-item.default,
   & > .table-of-contents,
   & > .slate blockquote {
     @include default-container-width();
@@ -233,7 +233,7 @@ footer {
   .block-editor-separator.has--align--full .block.separator,
   .block-editor-separator .block.separator.has--align--full,
   .block.teaser.has--align--center,
-  .block-editor-teaser .grid-teaser-item.default,
+  .block-editor-teaser .teaser-item.default,
   .block-editor-toc {
     @include default-container-width();
     @include adjustMarginsToContainer($default-container-width);
@@ -301,10 +301,4 @@ body.has-toolbar.has-sidebar .block .ui.basic.button.delete-button {
   }
 }
 
-.contenttype-file {
-  a {
-    text-decoration: underline;
-  }
-}
-
 @import 'bgcolor-blocks-layout';

package/src/theme/blocks/_grid.scss

@@ -16,10 +16,10 @@
   .block.teaser {
     margin-bottom: 0;
     background-color: $lightgrey;
-    .grid-teaser-item {
+    .teaser-item {
       height: 100%;
 
-      .grid-image-wrapper {
+      .image-wrapper {
         margin: 0 0 40px 0 !important;
 
         img {
@@ -54,7 +54,7 @@
   .block-editor-teaser {
     padding: 0;
     margin: 0.5rem !important;
-    .grid-teaser-item {
+    .teaser-item {
       border: none !important;
     }
   }
@@ -128,10 +128,18 @@
     margin: 0.5rem !important;
   }
 
-  .listing {
+  .block.listing {
     h2 {
       margin-bottom: 40px !important;
     }
+    &.previous--is--same--block-type.previous--has--same--backgroundColor:not(.has--headline) {
+      margin-top: unset;
+    }
+    .listing-item,
+    .listing-item:last-child {
+      padding-bottom: 40px !important;
+      border-bottom: 1px solid $black !important;
+    }
   }
 
   .block-editor-empty {
@@ -144,7 +152,7 @@
 .block.gridBlock,
 .block-editor-gridBlock {
   .one {
-    .grid-teaser-item .content h2 {
+    .teaser-item .content h2 {
       margin-bottom: 40px !important;
       @include text-heading-h2();
     }
@@ -159,7 +167,7 @@
   .two,
   .three {
     .teaser {
-      .grid-teaser-item .content {
+      .teaser-item .content {
         h2 {
           margin-bottom: 20px !important;
           @include text-heading-h3();
@@ -187,8 +195,8 @@
 
   .four {
     .teaser {
-      .grid-teaser-item {
-        .grid-image-wrapper {
+      .teaser-item {
+        .image-wrapper {
           margin-bottom: 20px !important;
         }
         .content {
@@ -239,7 +247,7 @@
 #page-add .block-editor-gridBlock.has--backgroundColor--grey,
 #page-edit .block-editor-gridBlock.has--backgroundColor--grey {
   background-color: $lightgrey;
-  .grid-teaser-item {
+  .teaser-item {
     background: white;
   }
   .slate {

package/src/theme/blocks/_listing.scss

@@ -1,5 +1,6 @@
 // Listing Block
-.block.listing {
+.block.listing,
+.column > .block.listing {
   &.next--has--same--backgroundColor.next--is--same--block-type,
   &.next--is--__button {
     .listing-item:last-child {
@@ -13,7 +14,7 @@
     border-bottom: 1px solid $black;
     margin-bottom: 40px;
 
-    &:last-child:not(> .column) {
+    &:last-child {
       padding-bottom: 0 !important;
       border-bottom: none !important;
       margin-bottom: 0;
@@ -62,7 +63,7 @@
         aspect-ratio: $aspect-ratio;
       }
       h3 {
-        margin-bottom: 40px;
+        margin-bottom: 40px !important;
         color: $black;
         @include text-heading-h2();
       }
@@ -138,13 +139,13 @@
         }
       }
 
-      img.grid-item-image {
+      img.item-image {
         width: 100%;
         margin: 0;
         aspect-ratio: $aspect-ratio;
       }
 
-      .grid-item {
+      .item {
         margin-top: 40px;
       }
 

package/src/theme/blocks/_teaser.scss

@@ -8,13 +8,13 @@
   // We want the image to extend in all its container width
   height: 100%;
 
-  .grid-teaser-item.default {
+  .teaser-item.default {
     align-items: start;
     padding-bottom: 40px; // same as vertical spacing in margin-bottom
     border-bottom: 1px solid $black;
   }
 
-  .grid-image-wrapper {
+  .image-wrapper {
     width: 100%;
     img {
       object-position: center;
@@ -23,10 +23,10 @@
 
   &.has--align--left,
   &.has--align--right {
-    .grid-teaser-item.default {
+    .teaser-item.default {
       display: flex;
 
-      .grid-image-wrapper {
+      .image-wrapper {
         align-self: flex-start;
       }
 
@@ -37,10 +37,10 @@
   }
 
   &.has--align--left {
-    .grid-teaser-item.default {
+    .teaser-item.default {
       flex-direction: row;
 
-      .grid-image-wrapper {
+      .image-wrapper {
         margin-right: 20px;
 
         @media only screen and (max-width: $largest-mobile-screen) {
@@ -52,10 +52,10 @@
   }
 
   &.has--align--right {
-    .grid-teaser-item.default {
+    .teaser-item.default {
       flex-direction: row-reverse;
 
-      .grid-image-wrapper {
+      .image-wrapper {
         margin-left: 20px;
 
         @media only screen and (max-width: $largest-mobile-screen) {
@@ -67,13 +67,13 @@
   }
 
   &.has--align--center {
-    .grid-teaser-item.default {
+    .teaser-item.default {
       display: block;
       a {
         display: block;
       }
 
-      .grid-image-wrapper {
+      .image-wrapper {
         margin-bottom: 26px;
       }
     }
@@ -102,12 +102,12 @@
 
   &.is--last--of--block-type,
   &.next--has--different--backgroundColor {
-    .grid-teaser-item.default {
+    .teaser-item.default {
       padding-bottom: 0;
       border-bottom: none;
     }
     &.next--is--__button {
-      .grid-teaser-item.default {
+      .teaser-item.default {
         padding-bottom: 40px;
         border-bottom: 1px solid $black;
       }