@eeacms/volto-arcgis-block 0.1.288 → 0.1.289

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/package.json +1 -1
  3. package/src/components/MapViewer/AreaWidget.jsx +57 -45
  4. package/src/components/MapViewer/css/ArcgisMap.css +56 -8
package/CHANGELOG.md CHANGED
@@ -4,6 +4,8 @@ All notable changes to this project will be documented in this file. Dates are d
4
4
 
5
5
  Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
6
6
 
7
+ ### [0.1.289](https://github.com/eea/volto-arcgis-block/compare/0.1.288...0.1.289) - 18 June 2024
8
+
7
9
  ### [0.1.288](https://github.com/eea/volto-arcgis-block/compare/0.1.287...0.1.288) - 14 June 2024
8
10
 
9
11
  #### :hammer_and_wrench: Others
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eeacms/volto-arcgis-block",
3
- "version": "0.1.288",
3
+ "version": "0.1.289",
4
4
  "description": "volto-arcgis-block: Volto add-on",
5
5
  "main": "src/index.js",
6
6
  "author": "European Environment Agency: CodeSyntax",
package/src/components/MapViewer/AreaWidget.jsx CHANGED
@@ -1080,7 +1080,7 @@ class AreaWidget extends React.Component {
1080
1080
  className="ccl-form-radio-label"
1081
1081
  htmlFor="download_prepackage"
1082
1082
  >
1083
- <span>
1083
+ <span className="prepackage-option">
1084
1084
  For fast download check out the pre-packaged data
1085
1085
  collection
1086
1086
  </span>
@@ -1092,7 +1092,10 @@ class AreaWidget extends React.Component {
1092
1092
  Area selection options for custom download:
1093
1093
  </div>
1094
1094
  <div className="area-header2">
1095
+ <div className="area-dot">·</div>
1095
1096
  Select by country or region on the map:
1097
+ </div>
1098
+ <div className="nuts-selection">
1096
1099
  <div className="ccl-form">
1097
1100
  <fieldset className="ccl-fieldset">
1098
1101
  <div className="ccl-form-group">
@@ -1194,57 +1197,66 @@ class AreaWidget extends React.Component {
1194
1197
  </fieldset>
1195
1198
  </div>
1196
1199
  </div>
1197
- <div className="area-header">Type country or region code:</div>
1198
- <input
1199
- type="text"
1200
- maxLength="6"
1201
- id="area-searchtext"
1202
- placeholder="Search"
1203
- />
1204
- <button
1205
- aria-label="Search"
1206
- class="esri-button area-searchbutton"
1207
- onClick={this.areaSearch.bind(this)}
1208
- onKeyDown={(e) => {
1209
- if (
1210
- !e.altKey &&
1211
- e.code !== 'Tab' &&
1212
- !e.ctrlKey &&
1213
- e.code !== 'Delete' &&
1214
- !e.shiftKey &&
1215
- !e.code.startsWith('F')
1216
- ) {
1217
- this.areaSearch.bind(this);
1218
- }
1219
- }}
1220
- >
1221
- <span class="ccl-icon-zoom"></span>
1222
- </button>
1223
- <div className="no-result-message">No result found</div>
1200
+ <div className="area-header2">
1201
+ <div className="area-dot">·</div>
1202
+ Type country or region code:
1203
+ </div>
1204
+ <div className="area-search-block">
1205
+ <input
1206
+ type="text"
1207
+ maxLength="6"
1208
+ id="area-searchtext"
1209
+ placeholder="Search"
1210
+ />
1211
+ <button
1212
+ aria-label="Search"
1213
+ class="esri-button area-searchbutton"
1214
+ onClick={this.areaSearch.bind(this)}
1215
+ onKeyDown={(e) => {
1216
+ if (
1217
+ !e.altKey &&
1218
+ e.code !== 'Tab' &&
1219
+ !e.ctrlKey &&
1220
+ e.code !== 'Delete' &&
1221
+ !e.shiftKey &&
1222
+ !e.code.startsWith('F')
1223
+ ) {
1224
+ this.areaSearch.bind(this);
1225
+ }
1226
+ }}
1227
+ >
1228
+ <span class="ccl-icon-zoom"></span>
1229
+ </button>
1230
+ <div className="no-result-message">No result found</div>
1231
+ </div>
1224
1232
  <br></br>
1225
1233
  <div className="ccl-form">
1226
1234
  <fieldset className="ccl-fieldset">
1227
1235
  <div className="ccl-form-group">
1228
- <input
1229
- type="radio"
1230
- id="download_area_select_rectangle"
1231
- name="downloadAreaSelect"
1232
- value="area"
1233
- className="ccl-radio ccl-required ccl-form-check-input"
1234
- onClick={this.rectanglehandler.bind(this)}
1235
- ></input>
1236
- <label
1237
- className="ccl-form-radio-label"
1238
- htmlFor="download_area_select_rectangle"
1239
- >
1240
- <span className="rectangle-header">
1241
- Draw a rectangle on the map
1242
- </span>
1243
- </label>
1236
+ <div className="rectangle-block">
1237
+ <div className="area-dot">·</div>
1238
+ <input
1239
+ type="radio"
1240
+ id="download_area_select_rectangle"
1241
+ name="downloadAreaSelect"
1242
+ value="area"
1243
+ className="ccl-radio ccl-required ccl-form-check-input"
1244
+ onClick={this.rectanglehandler.bind(this)}
1245
+ ></input>
1246
+ <label
1247
+ className="ccl-form-radio-label"
1248
+ htmlFor="download_area_select_rectangle"
1249
+ >
1250
+ <span className="rectangle-header">
1251
+ Draw a rectangle on the map
1252
+ </span>
1253
+ </label>
1254
+ </div>
1244
1255
  </div>
1245
1256
  </fieldset>
1246
1257
  </div>
1247
- <div className="area-header">
1258
+ <div className="area-header2">
1259
+ <div className="area-dot">·</div>
1248
1260
  Upload a file with your area of interest
1249
1261
  <a
1250
1262
  href="https://land.copernicus.eu/en/faq/map-viewer/how-can-i-upload-a-file-with-my-area-of-interest"
package/src/components/MapViewer/css/ArcgisMap.css CHANGED
@@ -318,7 +318,7 @@ div.esri-popover
318
318
  }
319
319
 
320
320
  .area-panel {
321
- padding-top: 13rem;
321
+ padding-top: 0;
322
322
  }
323
323
 
324
324
  /* .area-container .area-header { */
@@ -326,21 +326,59 @@ div.esri-popover
326
326
  /* } */
327
327
 
328
328
  .area-header {
329
- padding: 1rem;
329
+ padding-top: 0.5rem;
330
+ padding-right: 1rem;
331
+ padding-left: 1rem;
332
+ font-size: 14px;
330
333
  font-weight: bold;
331
334
  }
332
335
 
333
336
  .area-header2 {
337
+ display: flex;
334
338
  padding-right: 0;
335
- margin-left: 1.5rem;
339
+ margin-left: 2rem;
340
+ color: #000;
341
+ font-size: 14px;
342
+ font-weight: 400;
343
+ }
344
+
345
+ .file-upload {
346
+ margin-left: 2rem;
347
+ color: #5a5a5a;
348
+ font-size: 14px;
349
+ }
350
+
351
+ .nuts-selection {
352
+ margin-left: 2rem;
353
+ color: #5a5a5a;
354
+ font-size: 14px;
355
+ }
356
+
357
+ .area-dot {
358
+ margin-right: 0.5rem;
359
+ color: #a0b128;
360
+ font-size: 16px;
361
+ font-weight: 700;
362
+ }
363
+
364
+ .area-search-block {
365
+ display: flex;
366
+ margin-left: 1rem;
367
+ }
368
+
369
+ .rectangle-block {
370
+ display: flex;
371
+ margin-left: 1rem;
372
+ font-size: 14px;
336
373
  }
337
374
 
338
375
  .rectangle-header {
339
- font-weight: bold;
376
+ color: #000;
377
+ font-weight: 400;
340
378
  }
341
379
 
342
380
  .area-panel .ccl-form {
343
- padding-bottom: 1rem !important;
381
+ padding-bottom: 0.5rem !important;
344
382
  margin-left: 1rem !important;
345
383
  }
346
384
 
@@ -373,7 +411,7 @@ label.ccl-form-radio-label span.nuts-menu-icon {
373
411
  max-width: fit-content;
374
412
  padding: 6px;
375
413
  border-color: #a0b128;
376
- margin-top: 1rem;
414
+ margin-top: 0;
377
415
  margin-left: auto;
378
416
  background-color: #a0b128;
379
417
  color: white !important;
@@ -389,10 +427,19 @@ label.ccl-form-radio-label span.nuts-menu-icon {
389
427
  #area-searchtext {
390
428
  width: 7rem;
391
429
  height: 1.5rem;
392
- margin-bottom: 1rem;
430
+ border: 1px solid #dadada;
431
+ margin-bottom: 0.5rem;
393
432
  margin-left: 1rem !important;
394
433
  }
395
434
 
435
+ #area-searchtext > input:focus-visible {
436
+ outline: -webkit-focus-ring-color auto 1px;
437
+ }
438
+
439
+ .prepackage-option {
440
+ font-size: 14px;
441
+ }
442
+
396
443
  .area-searchbutton {
397
444
  width: 1.5rem !important;
398
445
  height: 1.5rem !important;
@@ -406,6 +453,7 @@ label.ccl-form-radio-label span.nuts-menu-icon {
406
453
  margin-top: 0.1rem;
407
454
  margin-left: 0.5rem;
408
455
  color: red;
456
+ font-size: 12px;
409
457
  }
410
458
  /* Left menu */
411
459
  .map-menu {
@@ -1219,7 +1267,7 @@ label.ccl-form-radio-label span.nuts-menu-icon {
1219
1267
  }
1220
1268
 
1221
1269
  .right-panel-content {
1222
- overflow: auto !important;
1270
+ overflow: auto;
1223
1271
  height: 100%;
1224
1272
  padding: 1rem;
1225
1273
  }