@eeacms/volto-eea-design-system 1.11.0 → 1.12.0

package/CHANGELOG.md

@@ -4,6 +4,32 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.12.0](https://github.com/eea/volto-eea-design-system/compare/1.11.0...1.12.0) - 19 May 2023
+
+#### :boom: Breaking Change
+
+- breaking(menu): removed css hiding of home link [David Ichim - [`81bdcc6`](https://github.com/eea/volto-eea-design-system/commit/81bdcc6857b724927c92d4b9de463629a3f9fdd6)]
+
+#### :bug: Bug Fixes
+
+- fix(container): width of position ov view-wrapper container [David Ichim - [`c3230cb`](https://github.com/eea/volto-eea-design-system/commit/c3230cb3a946801dd6a00e2ea4d7215445ac8a81)]
+
+#### :nail_care: Enhancements
+
+- change(mega-menu): removed need for hardcoded sub-section of countries mega menu [David Ichim - [`d8dab69`](https://github.com/eea/volto-eea-design-system/commit/d8dab69a03595784e208cddc076788bc3399bc85)]
+
+#### :hammer_and_wrench: Others
+
+- bump package version as we have some breaking changes [David Ichim - [`064e170`](https://github.com/eea/volto-eea-design-system/commit/064e170ee40a8e58533a2e6db0ed6b58c38ad7bb)]
+- printing at topics [Dobricean Ioan Dorian - [`6c9e4a0`](https://github.com/eea/volto-eea-design-system/commit/6c9e4a072785e74022e7557132ae067e00066ef0)]
+- printing at topics [Dobricean Ioan Dorian - [`341866a`](https://github.com/eea/volto-eea-design-system/commit/341866ab4ade6ba29c160e857003ca4dbda7106b)]
+- printing at topics [Dobricean Ioan Dorian - [`b9d6853`](https://github.com/eea/volto-eea-design-system/commit/b9d6853ee717cc208419593590539697ced3b709)]
+- Use variables instead of hardcoded dimensions [dana-cfc4 - [`064b2a4`](https://github.com/eea/volto-eea-design-system/commit/064b2a4e004e8f71aaae2ac710159f004e928777)]
+- (fix): Remove copyright of hero block and extra spaces on print [dana-cfc4 - [`afbf212`](https://github.com/eea/volto-eea-design-system/commit/afbf2122ec1133979df22864ce243d50afb647b6)]
+- (fix): Remove header and hero block extra space [dana-cfc4 - [`03d08fb`](https://github.com/eea/volto-eea-design-system/commit/03d08fbe5f99ef082a87a22697cafe593f7ea5e3)]
+- moved customcss [Dobricean Ioan Dorian - [`8af6b0f`](https://github.com/eea/volto-eea-design-system/commit/8af6b0f620a5b9c71ed2b20c485e650c0553e56c)]
+- break hero block [Dobricean Ioan Dorian - [`cfa7d0d`](https://github.com/eea/volto-eea-design-system/commit/cfa7d0d0c8e7db505d6ca2a1cadb9ac9b9f99a64)]
+- hero print [Dobricean Ioan Dorian - [`a988c8c`](https://github.com/eea/volto-eea-design-system/commit/a988c8c745569e58e031c0f6cf680e58dccc2c6d)]
 ### [1.11.0](https://github.com/eea/volto-eea-design-system/compare/1.0.7...1.11.0) - 11 May 2023
 
 #### :boom: Breaking Change
@@ -49,6 +75,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
+- Release 1.11.0 #344 from eea/develop [ichim-david - [`02ccaa1`](https://github.com/eea/volto-eea-design-system/commit/02ccaa149d26b387e197eabec841691abd752fc2)]
 - Release 1.11.0 [alin - [`acc76ea`](https://github.com/eea/volto-eea-design-system/commit/acc76ea7b81e31a8d83179cb0af48482a8f84709)]
 - bump package version [David Ichim - [`3dfa3f0`](https://github.com/eea/volto-eea-design-system/commit/3dfa3f088a4c012ac1bb36f3ef08fac9079f3f81)]
 - added possibility to configure button url [Zoltan Szabo - [`91cd277`](https://github.com/eea/volto-eea-design-system/commit/91cd27764f646429f168c09361b370632e900c80)]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/ui/Header/HeaderMenuPopUp.js

@@ -88,7 +88,7 @@ const Countries = ({ menuItem, renderMenuItem }) => (
     <Grid.Column width={8}>
       {menuItem.items.map((section, index) => (
         <React.Fragment key={index}>
-          {section.title === 'EEA member countries' && (
+          {index === 0 && (
             <ItemGrid
               sectionTitle={section.title}
               item={section}
@@ -103,7 +103,7 @@ const Countries = ({ menuItem, renderMenuItem }) => (
       <Grid columns={1} className="nested-grid">
         {menuItem.items.map((section, index) => (
           <React.Fragment key={index}>
-            {section.title !== 'EEA member countries' && (
+            {index !== 0 && (
               <Grid.Column>
                 <ItemGrid
                   sectionTitle={section.title}

package/theme/themes/eea/elements/header.overrides

@@ -100,106 +100,3 @@
   flex: 1 0 auto;
   align-items: center;
 }
-
-//@media only screen and (max-width: @mobileWidth) {
-//  .ui.segment.header-wrapper {
-//    position: sticky !important;
-//    z-index: 3;
-//    background: @white;
-//  }
-//
-//  .ui.segment {
-//    position: initial !important;
-//  }
-//
-//  .header .logo-nav-wrapper {
-//    margin: 10px 0 10px;
-//  }
-//}
-//
-//.ui.segment.header-wrapper {
-//  padding: 0;
-//}
-//
-//.ui.segment .header {
-//  padding: 0 15px;
-//}
-//
-//.header .logo-nav-wrapper {
-//  align-items: center;
-//
-//  .navigation {
-//    display: flex;
-//    width: 100%;
-//    align-items: center;
-//    justify-content: center;
-//  }
-//}
-//
-//.header .logo-nav-wrapper .ui.pointing.secondary {
-//  display: flex;
-//  width: 100%;
-//  max-width: 100%;
-//  justify-content: unset;
-//  margin: 0 !important;
-//
-//  .navigation-links {
-//    display: inline-flex;
-//    width: 100%;
-//    justify-content: center;
-//  }
-//
-//  .tools-wrapper {
-//    display: flex;
-//    flex: 1 0 auto;
-//    align-items: center;
-//  }
-//
-//  .tools-search-wrapper {
-//    margin-left: 0;
-//  }
-//
-//  .search form {
-//    padding-top: 0 !important;
-//  }
-//}
-//
-//@media only screen and (max-width: 766px) {
-//  // #141204 take into account that for the header wrapper on mobile views
-//  // we have the volto toolbar on top
-//  .has-toolbar-collapsed .header-wrapper {
-//    top: 20px;
-//  }
-//
-//  .has-toolbar .header-wrapper {
-//    top: 100px;
-//  }
-//}
-//
-//@media only screen and (min-width: 768px) and (max-width: @mobileWidth) {
-//  // #141204 use fixed position instead of sticky in order to always
-//  // have the header on top from 768px to 1279px
-//  .ui.segment.header-wrapper {
-//    position: fixed !important;
-//    top: 0;
-//  }
-//
-//  .header-wrapper {
-//    width: 100%; // when position fixed div behaves as inline
-//  }
-//
-//  .has-toolbar .header-wrapper {
-//    width: calc(100% - 80px); // toolbar width
-//  }
-//
-//  .has-toolbar-collapsed .header-wrapper {
-//    width: calc(100% - 20px);
-//  }
-//}
-//
-//.ui.right.sidebar.metadata-sidebar.menu,
-//.ui.left.sidebar.metadata-sidebar.menu {
-//  .ui.header {
-//    padding: 0;
-//  }
-//}

package/theme/themes/eea/elements/segment.overrides

@@ -8,6 +8,13 @@
   padding-left: 0;
 }
 
+@media print {
+  .ui.basic.segment.content-area {
+    margin-top: 0;
+    padding-top: 0;
+  }
+}
+
 .ui.primary.segment {
   border-bottom: @4px solid @greyBorderColor;
   font-size: @16px;

package/theme/themes/eea/extras/banner.less

@@ -228,4 +228,16 @@
   }
 }
 
+@media print {
+  .eea.banner .gradient .content,
+  .eea.banner .image .gradient .content {
+    padding-top: @printContentPadding;
+  }
+
+  .eea.banner .gradient .content > div > div {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
+
 .loadUIOverrides();

package/theme/themes/eea/extras/banner.variables

@@ -17,11 +17,13 @@
 @mobileContentPadding      : 1rem 0 1.25rem;
 @tabletContentPadding      : 3rem 0 1.25rem;
 @computerContentPadding    : 5rem 0 1.25rem;
+@printContentPadding       : 15px;
 
 @mobileContentPaddingWithImage      : 6.25rem 0 1.25rem;
 @tabletContentPaddingWithImage      : 12.5rem 0 1.25rem;
 @computerContentPaddingWithImage    : 15.625rem 0 1.25rem;
 
+
 /* Title */
 @titleFontWeight           : @bold;
 @titleMaxWidth             : 100%;

package/theme/themes/eea/extras/header.less

@@ -281,10 +281,6 @@
   }
 }
 
-#main .main-menu .item:first-child {
-  display: none; // hide home nav item
-}
-
 .main-menu.inverted {
   .item a {
     color: @mainMenuItemInvertedColor;
@@ -874,11 +870,6 @@
   }
 }
 
-// hide home link and accordion content from mobile menu
-#main #mega-menu .mobile > .ui.accordion > .title:first-child {
-  display: none;
-}
-
 // hide content of accordion titles that are not active
 #main #mega-menu .ui.accordion .title:first-child + .content:not(.active) {
   display: none;

package/theme/themes/eea/extras/hero.less

@@ -100,4 +100,37 @@
   }
 }
 
+@media print {
+  .eea.hero-block.full-height,
+  .eea.hero-block.full-height .hero-block-image-wrapper,
+  .eea.hero-block.full-height .hero-block-inner-wrapper {
+    min-height: unset;
+  }
+
+  .hero-block-inner-wrapper {
+    padding-top: @heroBlockPrintPadding;
+    padding-bottom: @heroBlockPrintPadding;
+  }
+
+  .hero-block-image-wrapper {
+    left: 0 !important;
+    right: 0 !important;
+    padding-left: 0 !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    padding-right: 0% !important;
+    width: 100% !important;
+    break-inside: avoid-page;
+  }
+
+  .hero-block {
+    break-inside: avoid-page;
+  }
+
+  .hero-block-body .eea.copyright {
+    display: none;
+    visibility: hidden;
+  }
+}
+
 .loadUIOverrides();

package/theme/themes/eea/extras/hero.variables

@@ -26,6 +26,7 @@
 @heroBlockWrapperPadding : 5rem;
 @tableHeroBlockWrapperPadding: 6rem;
 @desktopHeroBlockWrapperPadding: 194px 96px;
+@heroBlockPrintPadding: 20px;
 
 /* Body */
 @mobileHeroBlockBodyGap  : @rem-space-6;

package/theme/themes/eea/globals/site.overrides

@@ -29,7 +29,9 @@ h2, h3, h4, h5, h6 {
   color: @contentAreaColor;
 }
 
-[id="page-document"] > * {
+[id="page-document"] > *,
+.view-wrapper > *
+{
   margin-left: auto !important;
   margin-right: auto !important;
 }
@@ -37,7 +39,8 @@ h2, h3, h4, h5, h6 {
 [class~="view-defaultview"] [id="page-document"] > *,
 [class~="view-viewview"] [id="page-document"] > *,
 #main .container_width,
-#main .has--size--container_width
+#main .has--size--container_width,
+.view-wrapper > *
 {
   max-width: @containerWidth !important;
 }
@@ -150,3 +153,38 @@ a {
       }
   }
 }
+
+@media print {
+  .skiplinks-wrapper,
+  .top.bar,
+  .main.bar.transparency,
+  .main-menu,
+  .eea .header .action,
+  .slider-arrow,
+  #footer,
+  #page-header .action,
+  #inpage-navigation {
+    display: none;
+    visibility: hidden;
+  }
+  .logo {
+    margin-left: 0;
+  }
+  .static-banner {
+    display: none;
+    visibility: hidden;
+  }
+  .image {
+   page-break-inside: avoid;  
+  }
+  img {
+   page-break-inside: avoid;  
+  }
+  .card { 
+  page-break-inside: avoid;  
+
+  }
+  .grid-block-teaser .card{
+    page-break-inside: auto;  
+  }
+}