@kitconcept/volto-light-theme 3.0.0-alpha.2 → 3.0.0

package/src/index.js

@@ -10,6 +10,7 @@ import { videoBlockSchemaEnhancer } from './components/Blocks/Video/schema';
 import { gridTeaserDisableStylingSchema } from '@plone/volto/components/manage/Blocks/Teaser/schema';
 import { gridImageDisableSizeAndPositionHandlersSchema } from '@plone/volto/components/manage/Blocks/Image/schema';
 import { disableBgColorSchema } from './components/Blocks/disableBgColorSchema';
+import BlockSettingsSchema from '@plone/volto/components/manage/Blocks/Block/Schema';
 
 import ContainerQueriesPolyfill from './components/CQPolyfill';
 import Container from './components/Atoms/Container/Container';
@@ -27,10 +28,12 @@ import { searchBlockSchemaEnhancer } from './components/Blocks/Search/schema';
 
 import gridSVG from './icons/block_icn_grid.svg';
 import accordionSVG from './icons/block_icn_accordion.svg';
+import descriptionSVG from '@plone/volto/icons/description.svg';
 import EventView from './components/Theme/EventView';
 import { tocBlockSchemaEnhancer } from './components/Blocks/Toc/schema';
 import { mapsBlockSchemaEnhancer } from './components/Blocks/Maps/schema';
 import { sliderBlockSchemaEnhancer } from './components/Blocks/Slider/schema';
+import EventMetadataView from './components/Blocks/EventMetadata/View';
 
 const BG_COLORS = [
   { name: 'transparent', label: 'Transparent' },
@@ -55,11 +58,26 @@ const applyConfig = (config) => {
   config.settings.slate.useLinkedHeadings = false;
   config.settings.contentMetadataTagsImageField = 'preview_image';
 
+  // Initial block for event content type
+  config.blocks.initialBlocks = {
+    Event: [
+      { '@type': 'title' },
+      { '@type': 'eventMetadata', fixed: true, required: true },
+      { '@type': 'slate' },
+    ],
+  };
+
+  config.settings.siteLabel = '';
+  config.settings.intranetHeader = false;
+
   // Remove Hero Block
   config.blocks.blocksConfig.hero.restricted = true;
 
   // No required blocks (eg. Title)
-  config.blocks.requiredBlocks = [];
+  config.blocks.requiredBlocks = [
+    ...config.blocks.requiredBlocks,
+    'eventMetadata',
+  ];
 
   // Register custom Container component
   config.registerComponent({
@@ -296,6 +314,20 @@ const applyConfig = (config) => {
     colors: BG_COLORS,
   };
 
+  config.blocks.blocksConfig.eventMetadata = {
+    id: 'eventMetadata',
+    title: 'EventMetadata',
+    icon: descriptionSVG,
+    group: 'common',
+    view: EventMetadataView,
+    edit: EventMetadataView,
+    schema: BlockSettingsSchema,
+    restricted: ({ properties, block }) =>
+      properties['@type'] === 'Event' ? false : true,
+    mostUsed: false,
+    sidebarTab: 0,
+  };
+
   // Check if the separator is present before enhancing it
   if (config.blocks.blocksConfig?.separator?.id) {
     config.blocks.blocksConfig.separator = {

package/src/theme/_header.scss

@@ -96,6 +96,7 @@
         border: none;
         border-radius: 50%;
         background-color: transparent;
+        color: $black;
         transition:
           background-color 200ms ease-in-out,
           color 300ms ease-in-out;
@@ -220,8 +221,25 @@
   .tools-wrapper {
     display: flex;
     flex-direction: row-reverse;
+    justify-content: space-between;
     padding-top: 16px;
 
+    .intranet {
+      padding: 10px $spacing-small;
+      margin-top: -16px;
+      margin-left: 213px;
+      background-color: $secondary-grey;
+      @media only screen and (max-width: $narrow-container-width) {
+        margin-left: 0px;
+      }
+
+      p {
+        @include marginal-title();
+        font-weight: 400;
+        text-transform: capitalize;
+      }
+    }
+
     .language-selector {
       padding-left: 40px;
     }
@@ -265,6 +283,99 @@
   }
 }
 
+// Intranet Header
+
+.header-wrapper.intranet-header {
+  .header {
+    flex-direction: column;
+
+    .logo-nav-wrapper {
+      flex-wrap: wrap;
+      justify-content: flex-start;
+
+      .logo {
+        flex: 0 1 auto;
+      }
+
+      @media only screen and (max-width: $narrow-container-width) {
+        position: relative;
+      }
+
+      .mobile-nav.mobile.only {
+        @media only screen and (max-width: $narrow-container-width) {
+          position: absolute;
+          top: 19px;
+          right: 0;
+        }
+
+        .menu-drawer {
+          @media only screen and (max-width: $computer-breakpoint) {
+            top: 210px;
+          }
+        }
+      }
+      .navigation {
+        flex-basis: 100%;
+        margin: 29px auto 0 auto;
+      }
+    }
+
+    .search-wrapper {
+      flex: 0 1 auto;
+      align-self: center;
+      margin-left: 209px;
+      @media only screen and (max-width: $narrow-container-width) {
+        width: 100%;
+        margin-left: 0%;
+      }
+
+      .search {
+        width: 100%;
+        border-bottom: 2px solid $secondary-grey;
+        .field.searchbox {
+          border: none;
+
+          .ui.input input {
+            width: 500px;
+
+            &::placeholder {
+              color: #808080;
+              @include body-text();
+            }
+            @media only screen and (max-width: $narrow-container-width) {
+              width: 100%;
+            }
+          }
+
+          button {
+            @media only screen and (max-width: $narrow-container-width) {
+              padding-left: 9px;
+            }
+            &:hover {
+              background-color: transparent;
+              color: $black;
+              cursor: pointer;
+            }
+          }
+        }
+      }
+    }
+
+    .tools-wrapper {
+      justify-content: space-between;
+      @media only screen and (max-width: $narrow-container-width) {
+        flex-direction: row;
+      }
+
+      .tools {
+        @media only screen and (max-width: $narrow-container-width) {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
 /* we have to align the search hide with desktop naviation hide.
 And destktop navigation uses different breakpoint for different mode and it is coming
 from volto core */
@@ -409,6 +520,7 @@ body.has-toolbar.has-sidebar {
             color: $white;
 
             a {
+              padding-bottom: 0;
               font-size: 14px;
               font-weight: 400;
               line-height: 18px;
@@ -490,12 +602,7 @@ body.has-toolbar.has-sidebar {
             }
           }
 
-          li {
-            position: relative;
-            padding-top: 0;
-          }
-
-          li a.current {
+          a.current {
             .left-arrow {
               visibility: visible;
             }
@@ -513,14 +620,13 @@ body.has-toolbar.has-sidebar {
         display: flex;
       }
 
-      li {
-        padding: 8px 0;
-      }
-
-      li a {
+      a {
+        position: relative;
         display: inline-flex;
         align-items: flex-start;
+        padding-bottom: 8px;
         color: $black;
+
         @include body-text-bold();
 
         span {

package/src/theme/_layout.scss

@@ -197,6 +197,7 @@ External link removal for all the blocks.
   & > .block.video.align.wide .video-inner,
   & > .block.maps.align.wide .maps-inner,
   & > .block.__button,
+  & > .block.eventMetadata .details-container,
   & > .block.listing .listing-item,
   & > .block.listing .emptyListing,
   & > .block.listing .image-gallery,
@@ -308,6 +309,7 @@ External link removal for all the blocks.
   .block-editor-search .searchBlock-container,
   .block-editor-separator.has--align--full .block.separator .line,
   .block.teaser.has--align--center,
+  .block.eventMetadata .details-container,
   .block-editor-teaser .teaser-item.default,
   .block-editor-slateTable .block.table,
   .block-editor-highlight .teaser-description-title,

package/src/theme/blocks/_eventMetadata.scss

@@ -0,0 +1,73 @@
+.block.eventMetadata {
+  .details-container {
+    padding-top: $spacing-xlarge;
+    padding-bottom: $spacing-xlarge;
+    border-top: 1px solid $black;
+    border-bottom: 1px solid $black;
+    margin-top: 0px;
+    margin-bottom: $spacing-xlarge;
+    @container (max-width: #{$largest-mobile-screen} ) {
+      padding-top: $spacing-large;
+      padding-bottom: $spacing-large;
+      margin-bottom: $spacing-large;
+    }
+    .content-container {
+      display: flex;
+      justify-content: space-between;
+      .event-details {
+        flex: 1;
+
+        .event-title {
+          margin-bottom: 25px;
+          .event-heading {
+            @include headtitle2();
+            letter-spacing: 1px;
+            text-transform: uppercase;
+          }
+          .event-detail {
+            margin-top: 10px;
+            font-size: 24px;
+            font-weight: 300;
+            line-height: 33px;
+            p,
+            a {
+              margin-top: 10px;
+              margin-bottom: 10px;
+              font-size: 24px;
+              font-weight: 300;
+              line-height: 33px;
+            }
+          }
+          .separator {
+            width: 170px;
+            height: 30px;
+            border-right: none;
+            border-bottom: 1px solid #000;
+          }
+        }
+      }
+    }
+    .event-button {
+      padding-top: 50px;
+      a:after {
+        display: none !important;
+      }
+      .event-btn {
+        padding: 8px 20px;
+        border: 1px solid #000;
+        border-radius: 5px;
+        background-color: transparent;
+        color: #000;
+        font-size: 16px;
+        font-weight: $bolder;
+        line-height: 20px;
+        a {
+          color: #000;
+          font-size: 16px;
+          font-weight: $bolder;
+          line-height: 20px;
+        }
+      }
+    }
+  }
+}

package/src/theme/blocks/_image.scss

@@ -171,7 +171,7 @@ figcaption {
   }
 
   .description {
-    div,
+    p,
     a {
       @include marginal-description();
     }

package/src/theme/blocks/_introduction.scss

@@ -4,11 +4,11 @@
 
 .block.introduction {
   .block-container p,
-  .block-container ul,
-  .block-container ol,
+  .block-container ul li,
+  .block-container ol li,
   .slate-editor p,
-  .slate-editor ul,
-  .slate-editor ol {
+  .slate-editor ul li,
+  .slate-editor ol li {
     margin: 0;
     @include introduction();
     strong,

package/src/theme/main.scss

@@ -32,6 +32,7 @@
 @import 'blocks/table';
 @import 'blocks/maps';
 @import 'blocks-chooser';
+@import 'blocks/eventMetadata';
 
 @import 'temp';