@eeacms/volto-clms-theme 1.0.208 → 1.0.209

package/CHANGELOG.md

@@ -4,6 +4,18 @@ 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.0.209](https://github.com/eea/volto-clms-theme/compare/1.0.208...1.0.209) - 24 May 2023
+
+#### :hammer_and_wrench: Others
+
+- style [Unai - [`3a18444`](https://github.com/eea/volto-clms-theme/commit/3a18444caf19394cffa6404d73d03dcf8f8a2f23)]
+- basic image editor style [Unai - [`3d1f0ef`](https://github.com/eea/volto-clms-theme/commit/3d1f0ef685ae9f9216d23e8eee966465511ddb91)]
+- green bg image working [Unai - [`90e1d1d`](https://github.com/eea/volto-clms-theme/commit/90e1d1d98c3c2a4d7d40257f8ce5f9289b031395)]
+- image white background working [Unai - [`7d4c3cf`](https://github.com/eea/volto-clms-theme/commit/7d4c3cfff8855663f49a41028b4ec016c3e6bd26)]
+- block choser position fix inside section [Unai - [`787b713`](https://github.com/eea/volto-clms-theme/commit/787b71325a9d95fc5e13a820a9a1c379720f3521)]
+- srcSet adjustment and unused background style commented [Unai - [`aac7a02`](https://github.com/eea/volto-clms-theme/commit/aac7a0225d9f22f9479bd331871f2c0e7c2df1d3)]
+- new scales added [Unai - [`b37168d`](https://github.com/eea/volto-clms-theme/commit/b37168d5258c4a77a0c336f07dd4e1830c38a155)]
+- feat CLMS:2142: first try changing home white bg block to use srcSet [Unai - [`89611cd`](https://github.com/eea/volto-clms-theme/commit/89611cd6fde1e86b53dbf3d7f0abb2477ef20389)]
 ### [1.0.208](https://github.com/eea/volto-clms-theme/compare/1.0.207...1.0.208) - 19 May 2023
 
 #### :hammer_and_wrench: Others
@@ -1131,7 +1143,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - related products and datasets added to news and meeting views and login-plone route created [Unai - [`5704a1a`](https://github.com/eea/volto-clms-theme/commit/5704a1a766148746162b60efaf232ea90dc20cf4)]
-- Revert "[JENKINS] Use eeacms/plone-backend and Volto alpha version- Refs #151967" [Mikel Larreategi - [`46eb694`](https://github.com/eea/volto-clms-theme/commit/46eb69415280a3c982405299135027ae4221426a)]
 - sort items according to the lowercased label and put those with special meaning at the end [Mikel Larreategi - [`6410abe`](https://github.com/eea/volto-clms-theme/commit/6410abe096f60dcad54dced2026c9df9b7946d68)]
 - lint fix [Unai - [`1264a7a`](https://github.com/eea/volto-clms-theme/commit/1264a7adfe8d679fea1bd821ad087add20f4271d)]
 - footer newsletter subscription change, global search maxLength change from 8000 to 200 and /login design change [Unai - [`a09d24a`](https://github.com/eea/volto-clms-theme/commit/a09d24adbb6fa053fb2a2cc0071506b906593b42)]
@@ -1282,7 +1293,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - search block new features [ionlizarazu - [`8e814cb`](https://github.com/eea/volto-clms-theme/commit/8e814cbd359782540c21fe37b37ef146d331f0d6)]
 - language selector cookie management [ionlizarazu - [`1385ac9`](https://github.com/eea/volto-clms-theme/commit/1385ac95795702206d3623ba6e780faa43a89e0a)]
 - toolbar cookie management [ionlizarazu - [`5c23200`](https://github.com/eea/volto-clms-theme/commit/5c23200790b20e1d4f1bc966463c37bf4c808f47)]
-- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`0316a0d`](https://github.com/eea/volto-clms-theme/commit/0316a0d8b6fb0fa14af13002415f3c95d9f8ede3)]
 ### [1.0.84](https://github.com/eea/volto-clms-theme/compare/1.0.83...1.0.84) - 18 March 2022
 
 #### :hammer_and_wrench: Others
@@ -2187,13 +2197,11 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - replace @collective/volto-dropdownmenu with volto-dropdownmenu [ionlizarazu - [`07f004f`](https://github.com/eea/volto-clms-theme/commit/07f004fe0219e403fb51bc045c83d34f3b981f76)]
-- yarn.lock [ionlizarazu - [`fe1ca04`](https://github.com/eea/volto-clms-theme/commit/fe1ca04889d29fe7b653db4c69af2751b84b8a1a)]
 - add NODE_ENV parameter [ionlizarazu - [`101f27c`](https://github.com/eea/volto-clms-theme/commit/101f27c25b8fbd192e1b11865e95cf5ffee08c1b)]
 - upgrade volto-dropdownmenu version [ionlizarazu - [`2081855`](https://github.com/eea/volto-clms-theme/commit/2081855301f4c708776e0dbab39db143cee00dbc)]
 - HomeSearch block missing url behaviour [ionlizarazu - [`d20a378`](https://github.com/eea/volto-clms-theme/commit/d20a378ce3f254b8343692348f314bf281974542)]
 - babel configuration [ionlizarazu - [`203ea2d`](https://github.com/eea/volto-clms-theme/commit/203ea2de07f99ca3403e4ca220ca74d7ce69b61d)]
 - prettier [ionlizarazu - [`e79e26b`](https://github.com/eea/volto-clms-theme/commit/e79e26bf2fa40ba7b4eb53a24dabd87928221c28)]
-- add yarn lock [ionlizarazu - [`e1ab28b`](https://github.com/eea/volto-clms-theme/commit/e1ab28b060d5a74431c368b0de82a68dabce1eab)]
 - Jenkinsfile cypress test [ionlizarazu - [`b385d65`](https://github.com/eea/volto-clms-theme/commit/b385d65986f717c60f8c434a08fc11b829d08eb4)]
 - cypress [ionlizarazu - [`a243cf0`](https://github.com/eea/volto-clms-theme/commit/a243cf0182fa3dd113c16ff495c71e310252d83b)]
 - some fixes [ionlizarazu - [`046279b`](https://github.com/eea/volto-clms-theme/commit/046279b9d05bea8a64eca03eed493e02621534c9)]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.208",
+  "version": "1.0.209",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",

package/src/components/Blocks/CclHomeBgImageBlock/CclGreenBgView.jsx

@@ -7,12 +7,23 @@ const CclGreenBgView = (props) => {
   const { showInfo, setShowInfo } = props?.content || {};
   return (
     <div className="ccl-banner-top-container">
-      <div
-        className="ccl-banner-top-main"
-        style={{
-          backgroundImage: `url(${data?.image?.url}/@@images/image/huge)`,
-        }}
-      >
+      <div className="ccl-banner-top-main">
+        <img
+          src={
+            `${data?.image?.url}/@@images/image/huge` ||
+            'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
+          }
+          srcSet={`${data?.image?.url}/@@images/image/huge4000 4200w,
+          ${data?.image?.url}/@@images/image/huge3000 4000w,
+          ${data?.image?.url}/@@images/image/huge2400 3000w,
+          ${data?.image?.url}/@@images/image/huge 2400w,
+          ${data?.image?.url}/@@images/image/great 1600w,
+          ${data?.image?.url}/@@images/image/larger 1000w,
+          ${data?.image?.url}/@@images/image/large 800w,
+          ${data?.image?.url}/@@images/image/teaser 600w,
+          `}
+          alt={data.image.alt}
+        />
         {isEditMode && <CclHomeImageEditor {...props} />}
         <div className="ccl-container">
           <div className="ccl-banner-top-main-block-title">

package/src/components/Blocks/CclHomeBgImageBlock/CclWhiteBgView.jsx

@@ -6,14 +6,23 @@ const CclWhiteBgView = (props) => {
   const { data, isEditMode } = props;
 
   return (
-    <div
-      className="home-map-container"
-      style={{
-        backgroundImage:
-          `url(${data?.image?.url}/@@images/image)` ||
-          'url(https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg)',
-      }}
-    >
+    <div className="home-map-container">
+      <img
+        src={
+          `${data?.image?.url}/@@images/image/huge` ||
+          'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
+        }
+        srcSet={`${data?.image?.url}/@@images/image/huge4000 4200w,
+          ${data?.image?.url}/@@images/image/huge3000 4000w,
+          ${data?.image?.url}/@@images/image/huge2400 3000w,
+          ${data?.image?.url}/@@images/image/huge 2400w,
+          ${data?.image?.url}/@@images/image/great 1600w,
+          ${data?.image?.url}/@@images/image/larger 1000w,
+          ${data?.image?.url}/@@images/image/large 800w,
+          ${data?.image?.url}/@@images/image/teaser 600w,
+          `}
+        alt={data.image.alt}
+      />
       {isEditMode && <CclHomeImageEditor {...props} />}
       <div className="ccl-container">
         <div className="home-map-banner">

package/src/components/Blocks/CclHomeBgImageBlock/styles.less

@@ -8,6 +8,11 @@
 }
 
 .image-message {
+  position: absolute !important;
+  z-index: 9999 !important;
+  width: auto;
+  min-width: 100%;
+  max-width: 100%;
   opacity: 0.8;
 }
 

package/theme/clms/css/home.css

@@ -96,9 +96,9 @@
 .ccl-banner-top-bar .ccl-container {
   display: flex;
   height: 100%;
-  padding: 0 2rem;
   align-items: center;
   justify-content: space-between;
+  padding: 0 2rem;
 }
 
 .ccl-banner-top-bar-left .ccl-banner-top-bar-right {
@@ -118,12 +118,37 @@
   margin-left: 0.5rem;
 }
 
-.home-carousel .ccl-banner-top-main {
+/* .home-carousel .ccl-banner-top-main {
   padding: 4rem 4rem;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
+} */
+
+.ccl-banner-top-main {
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+
+.ccl-banner-top-main img {
+  width: auto;
+  min-width: 100%;
+  max-width: 100%;
+  min-height: 349px;
+  max-height: 349px;
+  object-fit: cover;
+  object-position: center;
+}
+
+.ccl-banner-top-main > .ccl-container {
+  position: absolute;
+  bottom: 4rem;
+  width: 100%;
+  max-width: 1400px;
+  padding: 0 2rem;
 }
+
 @media (max-width: 480px) {
   .home-carousel .ccl-banner-top-main {
     padding: 2rem 2rem;
@@ -327,12 +352,26 @@
 
 /* Map band */
 .home-map-container {
-  padding: 4rem 1rem;
-  background: url(../img/home-map-background.jpg) no-repeat center;
-  background-size: cover;
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+
+.home-map-container img {
+  width: auto;
+  min-width: 100%;
+  max-width: 100%;
+  min-height: 262px;
+  max-height: 262px;
+  object-fit: cover;
+  object-position: center;
 }
 
 .home-map-container > .ccl-container {
+  position: absolute;
+  bottom: 4rem;
+  width: 100%;
+  max-width: 1400px;
   padding: 0 2rem;
 }
 

package/theme/clms/css/ownstyles.less

@@ -717,10 +717,9 @@ main .search-form button {
 }
 
 .ccl-banner-top-container {
-  padding: 4rem 2rem;
-  background-image: url('../img/home-main-background.png');
-  background-position: center;
-  background-size: cover;
+  position: relative;
+  display: flex;
+  justify-content: center;
 }
 @media (max-width: 1250px) {
   .ccl-banner-top-container {
@@ -754,10 +753,10 @@ main .search-form button {
   height: 2rem;
 }
 
-.ccl-banner-top-container .ccl-banner-top-main-block-title {
+/* .ccl-banner-top-container .ccl-banner-top-main-block-title {
   max-width: 100%;
   padding: 1.5rem;
-}
+} */
 
 @media (min-width: 576px) {
   .ccl-banner-top-container .ccl-banner-top-main-block-title {
@@ -837,9 +836,26 @@ main .search-form button {
 }
 
 .home-map-container {
-  padding: 4rem 1rem;
-  background: url('../img/home-map-background.jpg') no-repeat center;
-  background-size: cover;
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+
+.home-map-container img {
+  width: auto;
+  min-width: 100%;
+  min-height: 262px;
+  max-height: 262px;
+  object-fit: cover;
+  object-position: center;
+}
+
+.home-map-container > .ccl-container {
+  position: absolute;
+  bottom: 4rem;
+  width: 100%;
+  max-width: 1400px;
+  padding: 0 2rem;
 }
 
 .home-datasets-container h4 {

package/theme/clms/css/volto-block-style-override.css

@@ -395,3 +395,9 @@ body:not(.is-authenticated):not(.document_wide_view).stretch {
   left: auto !important;
   margin-top: 50px;
 }
+
+.section-block .blocks-chooser {
+  right: 0;
+  left: auto !important;
+  margin-top: 50px;
+}