Merge pull request #784 from eea/develop

Develop
eea · Jun 18, 2024 · 8cee938 · 8cee938
2 parents 32cb538 + 6a29894
commit 8cee938
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 54 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,8 @@ 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.1.289](https://github.com/eea/volto-arcgis-block/compare/0.1.288...0.1.289) - 18 June 2024
+
 ### [0.1.288](https://github.com/eea/volto-arcgis-block/compare/0.1.287...0.1.288) - 14 June 2024
 
 #### :hammer_and_wrench: Others

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-arcgis-block",
-  "version": "0.1.288",
+  "version": "0.1.289",
   "description": "volto-arcgis-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: CodeSyntax",

diff --git a/src/components/MapViewer/AreaWidget.jsx b/src/components/MapViewer/AreaWidget.jsx
@@ -1080,7 +1080,7 @@ class AreaWidget extends React.Component {
                         className="ccl-form-radio-label"
                         htmlFor="download_prepackage"
                       >
-                        <span>
+                        <span className="prepackage-option">
                           For fast download check out the pre-packaged data
                           collection
                         </span>
@@ -1092,7 +1092,10 @@ class AreaWidget extends React.Component {
                   Area selection options for custom download:
                 </div>
                 <div className="area-header2">
+                  <div className="area-dot">·</div>
                   Select by country or region on the map:
+                </div>
+                <div className="nuts-selection">
                   <div className="ccl-form">
                     <fieldset className="ccl-fieldset">
                       <div className="ccl-form-group">
@@ -1194,57 +1197,66 @@ class AreaWidget extends React.Component {
                     </fieldset>
                   </div>
                 </div>
-                <div className="area-header">Type country or region code:</div>
-                <input
-                  type="text"
-                  maxLength="6"
-                  id="area-searchtext"
-                  placeholder="Search"
-                />
-                <button
-                  aria-label="Search"
-                  class="esri-button area-searchbutton"
-                  onClick={this.areaSearch.bind(this)}
-                  onKeyDown={(e) => {
-                    if (
-                      !e.altKey &&
-                      e.code !== 'Tab' &&
-                      !e.ctrlKey &&
-                      e.code !== 'Delete' &&
-                      !e.shiftKey &&
-                      !e.code.startsWith('F')
-                    ) {
-                      this.areaSearch.bind(this);
-                    }
-                  }}
-                >
-                  <span class="ccl-icon-zoom"></span>
-                </button>
-                <div className="no-result-message">No result found</div>
+                <div className="area-header2">
+                  <div className="area-dot">·</div>
+                  Type country or region code:
+                </div>
+                <div className="area-search-block">
+                  <input
+                    type="text"
+                    maxLength="6"
+                    id="area-searchtext"
+                    placeholder="Search"
+                  />
+                  <button
+                    aria-label="Search"
+                    class="esri-button area-searchbutton"
+                    onClick={this.areaSearch.bind(this)}
+                    onKeyDown={(e) => {
+                      if (
+                        !e.altKey &&
+                        e.code !== 'Tab' &&
+                        !e.ctrlKey &&
+                        e.code !== 'Delete' &&
+                        !e.shiftKey &&
+                        !e.code.startsWith('F')
+                      ) {
+                        this.areaSearch.bind(this);
+                      }
+                    }}
+                  >
+                    <span class="ccl-icon-zoom"></span>
+                  </button>
+                  <div className="no-result-message">No result found</div>
+                </div>
                 <br></br>
                 <div className="ccl-form">
                   <fieldset className="ccl-fieldset">
                     <div className="ccl-form-group">
-                      <input
-                        type="radio"
-                        id="download_area_select_rectangle"
-                        name="downloadAreaSelect"
-                        value="area"
-                        className="ccl-radio ccl-required ccl-form-check-input"
-                        onClick={this.rectanglehandler.bind(this)}
-                      ></input>
-                      <label
-                        className="ccl-form-radio-label"
-                        htmlFor="download_area_select_rectangle"
-                      >
-                        <span className="rectangle-header">
-                          Draw a rectangle on the map
-                        </span>
-                      </label>
+                      <div className="rectangle-block">
+                        <div className="area-dot">·</div>
+                        <input
+                          type="radio"
+                          id="download_area_select_rectangle"
+                          name="downloadAreaSelect"
+                          value="area"
+                          className="ccl-radio ccl-required ccl-form-check-input"
+                          onClick={this.rectanglehandler.bind(this)}
+                        ></input>
+                        <label
+                          className="ccl-form-radio-label"
+                          htmlFor="download_area_select_rectangle"
+                        >
+                          <span className="rectangle-header">
+                            Draw a rectangle on the map
+                          </span>
+                        </label>
+                      </div>
                     </div>
                   </fieldset>
                 </div>
-                <div className="area-header">
+                <div className="area-header2">
+                  <div className="area-dot">·</div>
                   Upload a file with your area of interest
                   <a
                     href="https://land.copernicus.eu/en/faq/map-viewer/how-can-i-upload-a-file-with-my-area-of-interest"

diff --git a/src/components/MapViewer/css/ArcgisMap.css b/src/components/MapViewer/css/ArcgisMap.css
@@ -318,29 +318,67 @@ div.esri-popover
 }
 
 .area-panel {
-  padding-top: 13rem;
+  padding-top: 0;
 }
 
 /* .area-container .area-header { */
 /* margin-bottom: 1rem; */
 /* } */
 
 .area-header {
-  padding: 1rem;
+  padding-top: 0.5rem;
+  padding-right: 1rem;
+  padding-left: 1rem;
+  font-size: 14px;
   font-weight: bold;
 }
 
 .area-header2 {
+  display: flex;
   padding-right: 0;
-  margin-left: 1.5rem;
+  margin-left: 2rem;
+  color: #000;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.file-upload {
+  margin-left: 2rem;
+  color: #5a5a5a;
+  font-size: 14px;
+}
+
+.nuts-selection {
+  margin-left: 2rem;
+  color: #5a5a5a;
+  font-size: 14px;
+}
+
+.area-dot {
+  margin-right: 0.5rem;
+  color: #a0b128;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.area-search-block {
+  display: flex;
+  margin-left: 1rem;
+}
+
+.rectangle-block {
+  display: flex;
+  margin-left: 1rem;
+  font-size: 14px;
 }
 
 .rectangle-header {
-  font-weight: bold;
+  color: #000;
+  font-weight: 400;
 }
 
 .area-panel .ccl-form {
-  padding-bottom: 1rem !important;
+  padding-bottom: 0.5rem !important;
   margin-left: 1rem !important;
 }
 
@@ -373,7 +411,7 @@ label.ccl-form-radio-label span.nuts-menu-icon {
   max-width: fit-content;
   padding: 6px;
   border-color: #a0b128;
-  margin-top: 1rem;
+  margin-top: 0;
   margin-left: auto;
   background-color: #a0b128;
   color: white !important;
@@ -389,10 +427,19 @@ label.ccl-form-radio-label span.nuts-menu-icon {
 #area-searchtext {
   width: 7rem;
   height: 1.5rem;
-  margin-bottom: 1rem;
+  border: 1px solid #dadada;
+  margin-bottom: 0.5rem;
   margin-left: 1rem !important;
 }
 
+#area-searchtext > input:focus-visible {
+  outline: -webkit-focus-ring-color auto 1px;
+}
+
+.prepackage-option {
+  font-size: 14px;
+}
+
 .area-searchbutton {
   width: 1.5rem !important;
   height: 1.5rem !important;
@@ -406,6 +453,7 @@ label.ccl-form-radio-label span.nuts-menu-icon {
   margin-top: 0.1rem;
   margin-left: 0.5rem;
   color: red;
+  font-size: 12px;
 }
 /* Left menu */
 .map-menu {
@@ -1219,7 +1267,7 @@ label.ccl-form-radio-label span.nuts-menu-icon {
 }
 
 .right-panel-content {
-  overflow: auto !important;
+  overflow: auto;
   height: 100%;
   padding: 1rem;
 }