@kitconcept/volto-light-theme 1.0.0-rc.0 → 1.0.0-rc.2

package/CHANGELOG.md

@@ -8,6 +8,22 @@
 
 <!-- towncrier release notes start -->
 
+## 1.0.0-rc.2 (2023-07-07)
+
+### Bugfix
+
+- Add NewsItemView @iFlamieng [#127](https://github.com/kitconcept/volto-light-theme/pull/127)
+- Add support for margins in responsive. Improve the spacing in grids. @sneridagh [#129](https://github.com/kitconcept/volto-light-theme/pull/129)
+
+
+## 1.0.0-rc.1 (2023-07-05)
+
+### Bugfix
+
+- Fix css issue of image block full width variante @iFlameing [#115](https://github.com/kitconcept/volto-light-theme/pull/115)
+- Fix minor style bugs in several components. @danalvrz [#122](https://github.com/kitconcept/volto-light-theme/pull/122)
+
+
 ## 1.0.0-rc.0 (2023-06-29)
 
 ### Feature

package/package.json

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

package/src/customizations/volto/components/theme/View/NewsItemView.jsx

@@ -0,0 +1,57 @@
+/**
+ * OVERRIDE NewsItemView.jsx
+ * REASON: BFS theme
+ * DATE: 2023-07-04
+ * DEVELOPER: @IFlameing
+ */
+
+/**
+ * NewsItemView view component.
+ * @module components/theme/View/NewsItemView
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
+import { FormattedDate } from '@plone/volto/components';
+
+/**
+ * NewsItemView view component class.
+ * @function NewsItemView
+ * @params {object} content Content object.
+ * @returns {string} Markup of the component.
+ */
+const NewsItemView = ({ content }) => {
+  return (
+    <div id="page-document" className="ui container viewwrapper event-view">
+      <div className="dates">
+        {content?.effective ? (
+          <span className="day">
+            <FormattedDate date={content?.effective} />{' '}
+          </span>
+        ) : (
+          <span className="day">No date</span>
+        )}{' '}
+        <span className="headtitle">| {content?.head_title}</span>
+      </div>
+      <RenderBlocks content={content} />
+    </div>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+NewsItemView.propTypes = {
+  content: PropTypes.shape({
+    title: PropTypes.string,
+    description: PropTypes.string,
+    text: PropTypes.shape({
+      data: PropTypes.string,
+    }),
+  }).isRequired,
+};
+
+export default NewsItemView;

package/src/index.js

@@ -202,6 +202,8 @@ const applyConfig = (config) => {
     ...config.blocks.blocksConfig.heading,
     sidebarTab: 0,
     allowed_headings: [['h2', 'h2']],
+    colors: BG_COLORS,
+    schemaEnhancer: defaultStylingSchema,
   };
 
   config.blocks.blocksConfig.search.variations = [
@@ -212,12 +214,22 @@ const applyConfig = (config) => {
       isDefault: true,
     },
   ];
+
   config.blocks.blocksConfig.__button = {
     ...config.blocks.blocksConfig.__button,
     schemaEnhancer: ButtonStylingSchema,
     colors: BG_COLORS,
   };
 
+  config.blocks.blocksConfig.separator = {
+    ...config.blocks.blocksConfig.separator,
+    schemaEnhancer: composeSchema(
+      config.blocks.blocksConfig.separator.schemaEnhancer,
+      defaultStylingSchema,
+    ),
+    colors: BG_COLORS,
+  };
+
   config.blocks.blocksConfig.listing = {
     ...config.blocks.blocksConfig.listing,
     colors: BG_COLORS,

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

@@ -31,7 +31,9 @@
     margin-bottom: $grid-block-vertical-spacing-bottom;
   }
   &.next--is--same--block-type.next--has--same--backgroundColor {
-    margin-bottom: -1rem;
+    // We rely on the grid gutter to keep the vertical spacing in case grid + grid
+    // So here we cancel the default block margin-bottom
+    margin-bottom: 0;
   }
 }
 

package/src/theme/_content.scss

@@ -5,3 +5,28 @@
   padding: 0;
   margin-top: 0;
 }
+
+.contenttype-news-item {
+  .documentFirstHeading {
+    margin-top: 0px;
+  }
+  .blocks-group-wrapper {
+    padding-top: 0px;
+  }
+  .dates {
+    max-width: var(--default-container-width) !important;
+    margin-top: 40px;
+    margin-right: auto;
+    margin-bottom: 40px;
+    margin-left: auto;
+    .day,
+    .headtitle {
+      font-size: 18px;
+
+      font-weight: 700;
+      letter-spacing: 1px;
+      line-height: 24px;
+      text-transform: uppercase;
+    }
+  }
+}

package/src/theme/_layout.scss

@@ -4,12 +4,12 @@
   --narrow-container-width: 620px;
 }
 
-// Container queries still do not work with CSS properties
+// Container queries still do not work with CSS custom properties
 // They should be exact numbers
 // For now, maintain in sync with the above
-$layout-container-width: 1440px;
-$default-container-width: 940px;
-$narrow-container-width: 620px;
+$layout-container-width: 1440px !default;
+$default-container-width: 940px !default;
+$narrow-container-width: 620px !default;
 
 @mixin narrow-container-width() {
   max-width: var(--narrow-container-width);
@@ -21,6 +21,13 @@ $narrow-container-width: 620px;
   max-width: var(--default-container-width);
   margin-right: auto;
   margin-left: auto;
+
+  // This is mostly aesthetical if you don't want to "see" the jump
+  // but a nice animation instead - PoC (WIP)
+  // @media only screen and (max-width: #{$default-container-width + 5px}) {
+  //   margin-right: 5px;
+  //   margin-left: 5px;
+  // }
 }
 
 @mixin layout-container-width() {
@@ -29,11 +36,24 @@ $narrow-container-width: 620px;
   margin-left: auto;
 }
 
-// One still cannot use variables or CSS properties directly on @container queries
+// One still cannot use CSS custom properties directly on @container queries
 @mixin adjustMarginsToContainer($width) {
+  // Next two ones are mostly aesthetical if you don't want to "see" the jump - PoC (WIP)
+  // transition: margin 1s ease;
+
+  // @container (max-width: #{$width + 5px}) {
+  //   margin-right: 5px;
+  //   margin-left: 5px;
+  // }
+
+  // @container (max-width: #{$width}) {
+  //   margin-right: 0px;
+  //   margin-left: 0px;
+  // }
+
   @container (max-width: #{$width - 1}) {
-    margin-right: 2rem;
-    margin-left: 2rem;
+    margin-right: 20px;
+    margin-left: 20px;
   }
 }
 
@@ -127,7 +147,9 @@ footer {
   & > pre,
   & > .block.code {
     @include narrow-container-width();
-    @include adjustMarginsToContainer($narrow-container-width + 2 * 36px);
+    // Why was this for? Removing for now (Victor: 2023-07-06)
+    // @include adjustMarginsToContainer($narrow-container-width + 2 * 36px);
+    @include adjustMarginsToContainer($narrow-container-width);
   }
 
   & > h1.documentFirstHeading,
@@ -146,6 +168,7 @@ footer {
   & > .table-of-contents,
   & > .slate blockquote {
     @include default-container-width();
+    @include adjustMarginsToContainer($default-container-width);
   }
 
   & > .block.teaser,
@@ -234,7 +257,18 @@ footer {
 .block.gridBlock .grid-items,
 .block.gridBlock h2.headline {
   @include default-container-width();
-  max-width: calc(var(--default-container-width) + 1rem);
+  // Adding 2 * 20px (one for each side) we force the container to extend the value of
+  // the gutter
+  max-width: calc(var(--default-container-width) + 2 * 20px);
+}
+
+.block.gridBlock {
+  .ui.grid > .column:not(.row):first-child {
+    padding-left: 20px;
+  }
+  .ui.grid > .column:not(.row):last-child {
+    padding-right: 20px;
+  }
 }
 
 // Fix for Image Grid with only one image
@@ -252,6 +286,11 @@ body.has-toolbar.has-sidebar .block .ui.basic.button.delete-button {
   margin-right: -30px !important;
 }
 
+// Listings edge case, conflicting with Pastanaga CSS
+.listing-item {
+  width: initial;
+}
+
 #page-add,
 #page-edit {
   .block-editor-accordion {

package/src/theme/_typo-custom.scss

@@ -55,7 +55,7 @@ h1.documentFirstHeading {
 // Block Title
 .block h2.headline {
   @include block-title();
-  @include vertical-space-h2();
+  @include vertical-space-block-title();
 }
 
 // Heading block

package/src/theme/_variables.scss

@@ -120,6 +120,11 @@ $block-vertical-space: 25px !default;
   margin-bottom: 80px;
 }
 
+@mixin vertical-space-block-title() {
+  margin-top: 80px;
+  margin-bottom: 80px;
+}
+
 // Change of color
 $color-block-change-vertical-spacing: 80px !default;
 

package/src/theme/blocks/_button.scss

@@ -4,6 +4,10 @@
 
     @include vertical-space-button();
   }
+
+  button {
+    margin: 0;
+  }
 }
 
 .block-editor-__button.has--buttonAlign--wide {
@@ -27,3 +31,7 @@
 
   @include body-text-bold();
 }
+
+.block-editor-__button.has--backgroundColor--grey {
+  background-color: $lightgrey;
+}

package/src/theme/blocks/_grid.scss

@@ -2,6 +2,17 @@
   margin-top: 0;
   margin-bottom: 0;
 
+  &.is--first--of--block-type {
+    .column {
+      padding-top: 0;
+    }
+  }
+  &.is--last--of--block-type {
+    .column {
+      padding-bottom: 0;
+    }
+  }
+
   .block.teaser {
     margin-bottom: 0;
     background-color: $lightgrey;
@@ -13,6 +24,7 @@
 
         img {
           position: relative;
+          object-position: center;
         }
       }
       .content {
@@ -51,6 +63,7 @@
     padding: 40px 20px 20px 20px;
     margin: 0;
     background-color: $lightgrey;
+
     p {
       padding: 0;
       margin-bottom: 20px;
@@ -59,6 +72,7 @@
 
   .block-editor-slate {
     padding: 0;
+    margin: 0.5rem !important;
   }
 
   .block.image {
@@ -88,6 +102,7 @@
     }
     img {
       z-index: revert !important;
+      object-position: center;
     }
     figure {
       position: relative;
@@ -113,6 +128,12 @@
     margin: 0.5rem !important;
   }
 
+  .listing {
+    h2 {
+      margin-bottom: 40px !important;
+    }
+  }
+
   .block-editor-empty {
     padding: 0;
     margin: 1rem 0.5rem 1rem 0.5rem !important;
@@ -205,6 +226,10 @@
         @include text-heading-h4();
       }
 
+      p {
+        margin-bottom: 0;
+      }
+
       padding-top: 20px !important;
     }
   }
@@ -218,14 +243,10 @@
     background: white;
   }
   .slate {
-    padding: 0 !important;
-    margin: 0 1rem 1rem 1rem;
     background-color: $white;
   }
 
   .slate-editor {
-    padding: 0 !important;
-    margin: 0 1rem 1rem 1rem;
     background-color: $white !important;
   }
 

package/src/theme/blocks/_image.scss

@@ -9,6 +9,11 @@ figure {
 .block.image.full figcaption {
   padding-right: 25px;
   padding-left: 25px;
+
+  @media only screen and (min-width: 1470px) {
+    padding-right: 0px;
+    padding-left: 0px;
+  }
 }
 
 .block.image {
@@ -38,7 +43,7 @@ figure {
     img {
       width: 100% !important;
       height: auto;
-      object-fit: contain;
+      aspect-ratio: $aspect-ratio;
     }
 
     &.right {
@@ -51,7 +56,6 @@ figure {
         margin-bottom: 0px;
         margin-left: 0 !important;
         float: none;
-        object-fit: contain;
         object-position: right;
       }
     }
@@ -65,7 +69,6 @@ figure {
         margin-right: 0 !important;
         margin-bottom: 0px;
         float: none;
-        object-fit: contain;
         object-position: left;
       }
     }

package/src/theme/blocks/_introduction.scss

@@ -22,6 +22,7 @@
   }
 
   h2 {
+    @include highlight-title();
     margin-bottom: 60px;
   }
 }

package/src/theme/blocks/_listing.scss

@@ -4,8 +4,10 @@
     @include block-title();
   }
   .listing-item {
-    padding-bottom: 25px;
+    padding-bottom: 40px;
     border-bottom: 1px solid $black;
+    margin-bottom: 40px;
+
     a {
       .listing-body {
         h2 {
@@ -24,8 +26,25 @@
   }
 }
 
-// Grid Listing Block
+.block.listing.summary {
+  .listing-item {
+    padding-top: 0 !important;
+    padding-bottom: 40px !important;
+    margin-bottom: 40px;
+    img {
+      width: 25%;
+      height: min-content;
+      aspect-ratio: $aspect-ratio;
+    }
+    h3 {
+      margin-bottom: 40px;
+      color: $black;
+      @include text-heading-h2();
+    }
+  }
+}
 
+// Grid Listing Block
 .block.listing.grid {
   .items {
     display: flex;
@@ -54,14 +73,27 @@
 
     img.grid-item-image {
       width: 100%;
+      aspect-ratio: $aspect-ratio;
+    }
+
+    .grid-item {
+      margin-top: 40px;
     }
 
     .content {
-      padding: 0 1rem 2.5rem 1rem;
+      padding: 0 20px 40px 20px;
+
+      .headline {
+        padding: 0 !important;
+        margin-bottom: 20px;
+        color: $black;
+        letter-spacing: 1px;
+        text-transform: uppercase;
+        @include headtitle1();
+      }
 
       h2 {
-        padding-top: 2rem;
-        margin-bottom: 0;
+        margin: 0 0 20px 0;
         color: $black;
         @include text-heading-h3();
       }
@@ -75,3 +107,24 @@
     }
   }
 }
+
+#page-add .block-editor-listing.has--backgroundColor--grey,
+#page-edit .block-editor-listing.has--backgroundColor--grey,
+.block.listing.has--backgroundColor--grey {
+  background-color: $lightgrey;
+
+  &.grid {
+    .listing-item {
+      .card-container {
+        background-color: $white;
+      }
+    }
+  }
+  .block.listing.grid {
+    .listing-item {
+      .card-container {
+        background-color: $white;
+      }
+    }
+  }
+}

package/src/theme/blocks/_separator.scss

@@ -11,3 +11,6 @@
 
   @include vertical-space-separator();
 }
+.block-editor-separator.has--backgroundColor--grey {
+  background-color: $lightgrey;
+}

package/src/theme/blocks/_teaser.scss

@@ -9,12 +9,16 @@
   height: 100%;
 
   .grid-teaser-item.default {
+    align-items: start;
     padding-bottom: 40px; // same as vertical spacing in margin-bottom
     border-bottom: 1px solid $black;
   }
 
   .grid-image-wrapper {
     width: 100%;
+    img {
+      object-position: center;
+    }
   }
 
   &.has--align--left,
@@ -96,14 +100,21 @@
     }
   }
 
-  &.is--last--of--block-type {
+  &.is--last--of--block-type,
+  &.next--has--different--backgroundColor {
     .grid-teaser-item.default {
+      padding-bottom: 0;
       border-bottom: none;
     }
     &.next--is--__button {
       .grid-teaser-item.default {
+        padding-bottom: 40px;
         border-bottom: 1px solid $black;
       }
     }
   }
 }
+
+#page-edit .block-editor-teaser.has--backgroundColor--grey {
+  background-color: $lightgrey;
+}

package/src/theme/collections/grid.variables

@@ -1,2 +1,7 @@
 // We want the separation between cells in grids to be 1rem only
-@gutterWidth: 1rem;
+@gutterWidth: 20px;
+@rowSpacing: 20px;
+
+// This has to be 2 * 20px because it's going to be 1/2 in the source.
+@stackableGutter: 2 * 20px;
+