@eeacms/volto-cca-policy 0.2.70 → 0.2.72

package/CHANGELOG.md

@@ -4,6 +4,25 @@ 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).
 
+### [0.2.72](https://github.com/eea/volto-cca-policy/compare/0.2.71...0.2.72) - 14 October 2024
+
+#### :bug: Bug Fixes
+
+- fix: file formatting, cleanup [kreafox - [`bd0ca50`](https://github.com/eea/volto-cca-policy/commit/bd0ca5096912d76c1d6cc7cc55adcaccf501d88a)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`78293a1`](https://github.com/eea/volto-cca-policy/commit/78293a1562c33890e957ce3e1f5292b80beb68b8)]
+- style: fix filter & legend styling for country profiles map; cleanup CSS - refs #277718 [kreafox - [`9847b6b`](https://github.com/eea/volto-cca-policy/commit/9847b6b48e0e898c328954af80dac4e708a8987d)]
+
+#### :hammer_and_wrench: Others
+
+- update README [kreafox - [`be8bb46`](https://github.com/eea/volto-cca-policy/commit/be8bb4608560436f5ea150733fe684435d9f2f4e)]
+### [0.2.71](https://github.com/eea/volto-cca-policy/compare/0.2.70...0.2.71) - 9 October 2024
+
+#### :hammer_and_wrench: Others
+
+- core: update volto-datablocks version - refs #277718 [kreafox - [`a1dc7c7`](https://github.com/eea/volto-cca-policy/commit/a1dc7c768fe400406854cbc496545034748bad37)]
 ### [0.2.70](https://github.com/eea/volto-cca-policy/compare/0.2.69...0.2.70) - 7 October 2024
 
 #### :hammer_and_wrench: Others

package/README.md

@@ -14,6 +14,8 @@
 [![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-cca-policy-develop&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-cca-policy-develop)
 [![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-cca-policy-develop&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-cca-policy-develop)
 
+Climate-ADAPT Frontend Policy
+
 [Volto](https://github.com/plone/volto) add-on
 
 ## Release

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.2.70",
+  "version": "0.2.72",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -28,7 +28,7 @@
   ],
   "dependencies": {
     "@eeacms/volto-block-style": "github:eea/volto-block-style#6.x.x",
-    "@eeacms/volto-datablocks": "^7.2.2",
+    "@eeacms/volto-datablocks": "^7.2.5",
     "@eeacms/volto-eea-design-system": "*",
     "@eeacms/volto-eea-website-theme": "^1.33.2",
     "@eeacms/volto-embed": "^9.1.1",

package/src/components/manage/Blocks/CountryMapProfile/Interactions.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import {
   euCountryNames,
   setTooltipVisibility,
@@ -9,14 +8,13 @@ import { openlayers as ol } from '@eeacms/volto-openlayers-map';
 import { useMapContext } from '@eeacms/volto-openlayers-map/api';
 
 export const Interactions = ({
-  tooltipRef,
-  // onFeatureClick,
-  countries_metadata,
   baseUrl,
+  highlight,
+  tooltipRef,
   thematicMapMode,
   euCountryFeatures,
-  highlight,
   setStateHighlight,
+  countries_metadata,
 }) => {
   const map = useMapContext().map;
 
@@ -44,19 +42,18 @@ export const Interactions = ({
         feature &&
         euCountryNames.includes(feature.get('na'))
       ) {
-        // if (countries_metadata.length>0) {
         let countryName = feature.get('na');
         let noDataReportedMsg = `
-No data reported through the reporting mechanism of the Governance Regulation.
-Last information is available
-<a href="${baseUrl}/${countryName.toLowerCase()}">here</a>`;
+          No data reported through the reporting mechanism of the Governance Regulation.
+          Last information is available
+          <a href="${baseUrl}/${countryName.toLowerCase()}">here</a>`;
 
         if (countryName === 'Türkiye') {
           countryName = 'Turkiye';
           noDataReportedMsg = `
-Data reported in 2021 through the reporting mechanism of the Governance Regulation.
-Information is available
-<a href="${baseUrl}/${countryName.toLowerCase()}">here</a>`;
+            Data reported in 2021 through the reporting mechanism of the Governance Regulation.
+            Information is available
+            <a href="${baseUrl}/${countryName.toLowerCase()}">here</a>`;
         }
 
         if (!Object.hasOwn(countries_metadata[0], countryName)) {
@@ -78,29 +75,23 @@ Information is available
           tooltipContent =
             metadata[0]?.ccivportal_info ||
             '<span>No portal or platform reported</span>';
-          // tooltipContent.split('<p style="font-weight:bold;"></p>').join('');
         }
-        // overlaySource.addFeature(feature);
+
         map.getTargetElement().style.cursor = 'pointer';
         const node = tooltipRef.current;
         const flag = feature.get('flag').src;
         const cn = countryName.toLowerCase();
         let tooltipContentDiv = `
-<div class="country-tooltip">
-  <div id="country-name">
-    <a href="/en/countries-regions/countries/${cn}"><h3>${countryName}</h3></a>
-    <img class="tooltip-country-flag" src="${flag}" height="33" width="54">
-  </div>
-  <div class="tooltip-content">${tooltipContent}</div>
-</div>
-`;
+          <div class="country-tooltip">
+            <div id="country-name">
+              <a href="/en/countries-regions/countries/${cn}"><h3>${countryName}</h3></a>
+              <img class="tooltip-country-flag" src="${flag}" height="33" width="54">
+            </div>
+            <div class="tooltip-content">${tooltipContent}</div>
+          </div>`;
 
         setTooltipVisibility(node, tooltipContentDiv, domEvt, true);
       }
-
-      // if (feature) {
-      //   onFeatureClick(feature);
-      // }
     });
 
     map.on('pointermove', function (evt) {
@@ -118,6 +109,6 @@ Information is available
       setStateHighlight(highlight.current);
     });
   });
-  // }, [map, tooltipRef, onFeatureClick]);
+
   return null;
 };

package/src/components/manage/Blocks/CountryMapProfile/OLView.jsx

@@ -1,25 +1,22 @@
 import React from 'react';
 import { compose } from 'redux';
-import { clientOnly } from '@eeacms/volto-cca-policy/helpers';
-
-import { Map, Layer, Layers, Controls } from '@eeacms/volto-openlayers-map/api';
-import { openlayers as ol } from '@eeacms/volto-openlayers-map';
+import { Grid } from 'semantic-ui-react';
 import {
-  euCountryNames as euCountryNamesRaw,
-  tooltipStyle,
   getImageUrl,
+  tooltipStyle,
   adjustEuCountryNames,
+  euCountryNames as euCountryNamesRaw,
 } from '@eeacms/volto-cca-policy/helpers/country_map/countryMap';
 import { withGeoJsonData } from '@eeacms/volto-cca-policy/helpers/country_map/hocs';
-
-import withResponsiveContainer from '../withResponsiveContainer';
-import withVisibilitySensor from '../withVisibilitySensor';
+import { clientOnly } from '@eeacms/volto-cca-policy/helpers';
+import { openlayers as ol } from '@eeacms/volto-openlayers-map';
+import { Map, Layer, Layers, Controls } from '@eeacms/volto-openlayers-map/api';
 import { makeStyles } from './mapstyle';
 import { Interactions } from './Interactions';
-
-import Filter from './Filter';
-import { Grid } from 'semantic-ui-react';
 import { useCountriesMetadata } from './hooks';
+import Filter from './Filter';
+import withResponsiveContainer from '../withResponsiveContainer';
+import withVisibilitySensor from '../withVisibilitySensor';
 import { addAppURL } from '@plone/volto/helpers';
 
 import './styles.less';

package/src/components/manage/Blocks/CountryMapProfile/styles.less

@@ -1,4 +1,5 @@
 @height: 600px;
+@fpHeight: 450px;
 
 .countryMapProfile {
   height: @height;
@@ -55,10 +56,6 @@
     stroke-width: 0.6;
   }
 
-  .country-outline path {
-    fill: #e9e9e9;
-  }
-
   .country-outline path {
     fill: #f5f5f5;
     stroke: #d1d1d1;
@@ -69,24 +66,28 @@
     fill: #0170b7;
   }
 
+  label {
+    margin-bottom: 0.5em;
+  }
+
   .legend {
-    .legend-text {
-      width: 16em;
-    }
+    margin-top: 1em;
 
     .legend-el {
       display: flex;
       flex-direction: row;
-      padding: 0.8em 0;
+      padding: 0.6em 0;
     }
 
     .legend-box {
-      width: 40px;
-      height: 19px;
-      margin-top: 3px;
+      position: relative;
+      top: 4px;
+      height: 17px;
+      flex: 0 0 17px;
       margin-right: 0.5em;
     }
 
+    // Legend color mapping
     .content-available {
       background-color: #0170b7;
     }
@@ -103,12 +104,9 @@
       background-color: #78d9fc;
     }
 
-    .country-none {
-      border: 1px solid #ddd;
-      background-color: #fbfae6;
-    }
-
+    .country-none,
     .country-outside {
+      border: 1px solid #ddd;
       background-color: #fbfae6;
     }
   }
@@ -154,10 +152,7 @@
       background-color: #fff3ac;
     }
 
-    .country-none {
-      background-color: #f5f5f5;
-    }
-
+    .country-none,
     .country-outside {
       border: 1px solid #ddd;
       background-color: #fbfae6;
@@ -168,63 +163,55 @@
     }
   }
 
-  .country-blue path {
+  // Country color mapping and cursor style
+  .country-blue path,
+  .country-notreported path,
+  .country-noportal path,
+  .country-nasnapsap path,
+  .country-nassap path,
+  .country-napsap path,
+  .country-nasnap path,
+  .country-nas path,
+  .country-nap path,
+  .country-none path,
+  .country-nodata path {
     cursor: pointer;
-    // fill: @secondary-blue;
   }
 
   .country-notreported path {
-    cursor: pointer;
     fill: #fed7da;
   }
 
-  .country-noportal path {
-    cursor: pointer;
+  .country-noportal path,
+  .country-none path {
     fill: #e0e0e0;
   }
 
   .country-nasnapsap path {
-    cursor: pointer;
     fill: url(#nasnapsap);
   }
 
   .country-nassap path {
-    cursor: pointer;
     fill: url(#nassap);
   }
 
   .country-napsap path {
-    cursor: pointer;
     fill: url(#napsap);
   }
 
-  .country-nasnapsap path {
-    cursor: pointer;
-    fill: url(#nasnapsap);
-  }
-
   .country-nasnap path {
-    cursor: pointer;
     fill: #007db6;
   }
 
   .country-nas path {
-    cursor: pointer;
     fill: #78d9fc;
   }
 
   .country-nap path {
-    cursor: pointer;
     fill: #11cbff;
   }
 
-  .country-none path {
-    cursor: pointer;
-    fill: #e0e0e0;
-  }
-
   .country-nodata path {
-    cursor: pointer;
     fill: #f5f5f5;
   }
 
@@ -232,7 +219,9 @@
     fill: #8a9c3a;
   }
 
-  #map-tooltip {
+  // Tooltip for countries
+  #map-tooltip,
+  .country-tooltip {
     position: absolute;
     width: 400px;
     padding: 1em;
@@ -241,12 +230,6 @@
   }
 
   .country-tooltip {
-    position: absolute;
-    width: 400px;
-    padding: 1em;
-    border: 1px solid #c7c7c7;
-    background-color: #f7f7f7;
-
     span,
     li {
       color: #3a3a3a;
@@ -294,3 +277,37 @@
     }
   }
 }
+
+.cca-main-homepage .tabs-block {
+  .countryMapProfile {
+    min-height: @fpHeight;
+
+    .ol-map-wrapper,
+    .ol-map {
+      height: @fpHeight;
+    }
+
+    #country-map-filter {
+      padding-right: 0;
+      padding-left: 0;
+    }
+
+    .legend-box {
+      top: 2px;
+    }
+
+    label,
+    .legend .legend-text {
+      font-size: 14px !important;
+      line-height: 17px;
+    }
+
+    .legend {
+      margin-top: 0.2em;
+
+      .legend-el {
+        padding: 1em 0 0 0;
+      }
+    }
+  }
+}