@eeacms/volto-clms-theme 1.1.12 → 1.1.13

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.
package/CHANGELOG.md CHANGED
@@ -4,11 +4,15 @@ 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
- ### [1.1.12](https://github.com/eea/volto-clms-theme/compare/1.1.11...1.1.12) - 16 June 2023
7
+ ### [1.1.13](https://github.com/eea/volto-clms-theme/compare/1.1.12...1.1.13) - 21 June 2023
8
8
 
9
- #### :bug: Bug Fixes
9
+ #### :hammer_and_wrench: Others
10
10
 
11
- - fix: timeseries year selector and peridodicity [ionlizarazu - [`3778728`](https://github.com/eea/volto-clms-theme/commit/37787280561c00591d9ad243ab4dbde199d2bc5c)]
11
+ - fix stylelint [ionlizarazu - [`1049291`](https://github.com/eea/volto-clms-theme/commit/10492913bc08396b8b7108eb3b751197963a78cf)]
12
+ - cary taula txukundu [Zaloa Etxaniz - [`5073540`](https://github.com/eea/volto-clms-theme/commit/5073540d8e149c86e6373822104255150cbc585d)]
13
+ - goup configurables [ionlizarazu - [`fb4f286`](https://github.com/eea/volto-clms-theme/commit/fb4f28670f8d5d11e6bfb37fd9881d1a2e7fd261)]
14
+ - compacting cart [ionlizarazu - [`046ff0a`](https://github.com/eea/volto-clms-theme/commit/046ff0a624b129be4772a95cbe24ed1db3e8fba5)]
15
+ ### [1.1.12](https://github.com/eea/volto-clms-theme/compare/1.1.11...1.1.12) - 16 June 2023
12
16
 
13
17
  ### [1.1.11](https://github.com/eea/volto-clms-theme/compare/1.1.10...1.1.11) - 15 June 2023
14
18
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eeacms/volto-clms-theme",
3
- "version": "1.1.12",
3
+ "version": "1.1.13",
4
4
  "description": "volto-clms-theme: Volto theme for CLMS site",
5
5
  "main": "src/index.js",
6
6
  "author": "CodeSyntax for the European Environment Agency",
@@ -1,3 +1,4 @@
1
+ import { Label } from 'semantic-ui-react';
1
2
  export const AreaNaming = (areaProps) => {
2
3
  const { item } = areaProps;
3
4
  switch (item.area?.type) {
@@ -8,12 +9,12 @@ export const AreaNaming = (areaProps) => {
8
9
  <br />
9
10
  <span className="cart-bounding-boxes">
10
11
  <span className="cart-bounding-box-row">
11
- <span>{`N: ${item.area.value[1].toFixed(1)}º `}</span>&nbsp;
12
- <span>{`E: ${item.area.value[2].toFixed(1)}º `}</span>
13
- </span>
14
- <span className="cart-bounding-box-row">
15
- <span>{`S: ${item.area.value[3].toFixed(1)}º `}</span>&nbsp;
16
- <span>{`W: ${item.area.value[0].toFixed(1)}º `}</span>
12
+ <Label>{`N: ${item.area.value[1].toFixed(1)}º`}</Label>&nbsp;
13
+ <Label>{`E: ${item.area.value[2].toFixed(1)}º`}</Label>&nbsp;
14
+ {/* </span>
15
+ <span className="cart-bounding-box-row"> */}
16
+ <Label>{`S: ${item.area.value[3].toFixed(1)}º`}</Label>&nbsp;
17
+ <Label>{`W: ${item.area.value[0].toFixed(1)}º`}</Label>
17
18
  </span>
18
19
  </span>
19
20
  </>
@@ -1,7 +1,7 @@
1
1
  import React, { useEffect, useState } from 'react';
2
2
  import { useDispatch, useSelector } from 'react-redux';
3
3
  import { toast } from 'react-toastify';
4
- import { Checkbox, Modal, Segment, Select } from 'semantic-ui-react';
4
+ import { Checkbox, Modal, Segment, Select, Table } from 'semantic-ui-react';
5
5
 
6
6
  import { Icon } from '@plone/volto/components';
7
7
  import { Toast } from '@plone/volto/components';
@@ -206,11 +206,11 @@ const CLMSCartContent = (props) => {
206
206
  <div className="custom-table cart-table">
207
207
  <Segment basic loading={loadingTable}>
208
208
  <h2>My cart</h2>
209
- <table>
210
- <thead>
211
- <tr>
212
- <th className="table-th-warning"></th>
213
- <th className="table-th-checkbox">
209
+ <Table responsive>
210
+ <Table.Header>
211
+ <Table.Row>
212
+ <Table.HeaderCell className="table-th-warning"></Table.HeaderCell>
213
+ <Table.HeaderCell className="table-th-checkbox">
214
214
  <div className="ccl-form">
215
215
  <div className="ccl-form-group">
216
216
  <Checkbox
@@ -219,20 +219,15 @@ const CLMSCartContent = (props) => {
219
219
  />
220
220
  </div>
221
221
  </div>
222
- </th>
223
- <th>Name</th>
224
- <th>Source</th>
225
- <th>Area</th>
226
- <th>Type</th>
227
- <th>Collection</th>
228
- <th>Format</th>
229
- <th>Layer/Band</th>
230
- <th>Projection</th>
231
- <th>Timeseries</th>
232
- <th></th>
233
- <th></th>
234
- </tr>
235
- </thead>
222
+ </Table.HeaderCell>
223
+ <Table.HeaderCell width={5}>Static info</Table.HeaderCell>
224
+ <Table.HeaderCell>Configurable</Table.HeaderCell>
225
+ <Table.HeaderCell></Table.HeaderCell>
226
+ <Table.HeaderCell>Projection</Table.HeaderCell>
227
+ <Table.HeaderCell>Timeseries</Table.HeaderCell>
228
+ <Table.HeaderCell></Table.HeaderCell>
229
+ </Table.Row>
230
+ </Table.Header>
236
231
  <tbody>
237
232
  {cartItems.length > 0 &&
238
233
  cartItems.map((item, key) => (
@@ -270,49 +265,70 @@ const CLMSCartContent = (props) => {
270
265
  </div>
271
266
  </div>
272
267
  </td>
273
- {/* {item.title ? (
274
- <td>
275
- {item.title} ({contentOrDash(item.name)})
276
- </td>
277
- ) : ( */}
278
- <td>{contentOrDash(item.name)}</td>
279
- {/* )} */}
280
- <td>{contentOrDash(item.source)}</td>
281
- <td style={{ wordBreak: 'break-word' }}>
282
- <AreaNaming item={item} />
283
- </td>
284
268
  <td>
285
- <TypeNaming
286
- item={item}
287
- datasets_items={datasets_items}
288
- cartItems={cartItems}
289
- setCartItems={setCartItems}
290
- />
269
+ <div className="mb-2">
270
+ <strong>Name: </strong>
271
+ {contentOrDash(item.name)}
272
+ </div>
273
+ <div className="mb-2">
274
+ <strong>Source: </strong>
275
+ {contentOrDash(item.source)}
276
+ </div>
277
+ <div className="mb-2">
278
+ <strong>Area: </strong>
279
+ <AreaNaming item={item} />
280
+ </div>
281
+
282
+ {/* <td style={{ wordBreak: 'break-word' }}> */}
291
283
  </td>
292
284
  <td>
293
- <CollectionNaming
294
- item={item}
295
- datasets_items={datasets_items}
296
- cartItems={cartItems}
297
- setCartItems={setCartItems}
298
- />
285
+ <div className="mb-2">
286
+ <strong>Type: </strong>
287
+ </div>
288
+ <div className="mb-2">
289
+ <strong>Collection: </strong>
290
+ </div>
291
+ <div className="mb-2">
292
+ <strong>Format: </strong>
293
+ </div>
294
+ <div className="mb-2">
295
+ <strong>Layer/Band: </strong>
296
+ </div>
299
297
  </td>
300
- <td className="table-td-format">
301
- {formatConversionTable && item && (
302
- <FormatNaming
298
+ <td>
299
+ <div className="mb-2">
300
+ <TypeNaming
303
301
  item={item}
302
+ datasets_items={datasets_items}
304
303
  cartItems={cartItems}
305
304
  setCartItems={setCartItems}
306
- formatConversionTable={formatConversionTable}
307
305
  />
308
- )}
309
- </td>
310
- <td className="table-td-format">
311
- <LayerNaming
312
- item={item}
313
- cartItems={cartItems}
314
- setCartItems={setCartItems}
315
- />
306
+ </div>
307
+ <div className="mb-2">
308
+ <CollectionNaming
309
+ item={item}
310
+ datasets_items={datasets_items}
311
+ cartItems={cartItems}
312
+ setCartItems={setCartItems}
313
+ />
314
+ </div>
315
+ <div className="mb-2">
316
+ {formatConversionTable && item && (
317
+ <FormatNaming
318
+ item={item}
319
+ cartItems={cartItems}
320
+ setCartItems={setCartItems}
321
+ formatConversionTable={formatConversionTable}
322
+ />
323
+ )}
324
+ </div>
325
+ <div className="mb-2">
326
+ <LayerNaming
327
+ item={item}
328
+ cartItems={cartItems}
329
+ setCartItems={setCartItems}
330
+ />
331
+ </div>
316
332
  </td>
317
333
  <td className="table-td-projections">
318
334
  {!item.file_id ? (
@@ -357,77 +373,78 @@ const CLMSCartContent = (props) => {
357
373
  <>-</>
358
374
  )}
359
375
  </td>
360
- <td>
361
- {item.task_in_progress ? (
362
- <FontAwesomeIcon icon="spinner" spin />
363
- ) : !item.file_id ? (
364
- <span
365
- className="info-icon"
366
- tooltip="Add a duplicated row below"
367
- direction="up"
368
- >
369
- <button
370
- onClick={() => {
371
- duplicateCartItem(
372
- item.unique_id,
373
- cartItems,
374
- setCartItems,
375
- updateCart,
376
- );
377
- }}
378
- style={{
379
- backgroundColor: 'transparent',
380
- color: 'inherit',
381
- border: 'none',
382
- padding: 0,
383
- font: 'inherit',
384
- cursor: 'pointer',
385
- outline: 'inherit',
386
- }}
376
+ <td className="text-end">
377
+ <div style={{ display: 'flex' }}>
378
+ {item.task_in_progress ? (
379
+ <FontAwesomeIcon icon="spinner" spin />
380
+ ) : !item.file_id ? (
381
+ <span
382
+ className="info-icon"
383
+ tooltip="Add a duplicated row below"
384
+ direction="up"
387
385
  >
388
- <Icon name={addDocumentSVG} size={25} />
389
- </button>
390
- </span>
391
- ) : (
392
- <></>
393
- )}
394
- </td>
395
- <td>
396
- {item.task_in_progress ? (
397
- <FontAwesomeIcon icon="spinner" spin />
398
- ) : (
399
- <span
400
- className="info-icon"
401
- tooltip="Remove this row from the cart"
402
- direction="up"
403
- >
404
- <button
405
- onClick={() => {
406
- removeCartItem(item.unique_id);
407
- }}
408
- style={{
409
- backgroundColor: 'transparent',
410
- color: 'inherit',
411
- border: 'none',
412
- padding: 0,
413
- font: 'inherit',
414
- cursor: 'pointer',
415
- outline: 'inherit',
416
- }}
386
+ <button
387
+ onClick={() => {
388
+ duplicateCartItem(
389
+ item.unique_id,
390
+ cartItems,
391
+ setCartItems,
392
+ updateCart,
393
+ );
394
+ }}
395
+ style={{
396
+ backgroundColor: 'transparent',
397
+ color: 'inherit',
398
+ border: 'none',
399
+ padding: 0,
400
+ font: 'inherit',
401
+ cursor: 'pointer',
402
+ outline: 'inherit',
403
+ }}
404
+ >
405
+ <Icon name={addDocumentSVG} size={25} />
406
+ </button>
407
+ </span>
408
+ ) : (
409
+ <></>
410
+ )}
411
+
412
+ {item.task_in_progress ? (
413
+ <FontAwesomeIcon icon="spinner" spin />
414
+ ) : (
415
+ <span
416
+ className="info-icon"
417
+ tooltip="Remove this row from the cart"
418
+ direction="up"
417
419
  >
418
- <Icon
419
- name={removeSVG}
420
- size={25}
421
- color="#e40166"
422
- />
423
- </button>
424
- </span>
425
- )}
420
+ <button
421
+ onClick={() => {
422
+ removeCartItem(item.unique_id);
423
+ }}
424
+ style={{
425
+ backgroundColor: 'transparent',
426
+ color: 'inherit',
427
+ border: 'none',
428
+ padding: 0,
429
+ font: 'inherit',
430
+ cursor: 'pointer',
431
+ outline: 'inherit',
432
+ }}
433
+ >
434
+ <Icon
435
+ name={removeSVG}
436
+ size={25}
437
+ color="#e40166"
438
+ />
439
+ </button>
440
+ </span>
441
+ )}
442
+ </div>
426
443
  </td>
427
444
  </tr>
428
445
  ))}
429
446
  </tbody>
430
- </table>
447
+ </Table>
431
448
  </Segment>
432
449
  </div>
433
450
  ) : (
@@ -20,6 +20,7 @@ export const CollectionNaming = ({
20
20
  return this_type_collections.length > 1 ? (
21
21
  <Select
22
22
  placeholder="Select type"
23
+ className="collection-selector"
23
24
  value={
24
25
  item.type
25
26
  ? item.type
@@ -18,6 +18,7 @@ export const FormatNaming = ({
18
18
  format_options.length > 1 ? (
19
19
  <Select
20
20
  placeholder="Select format"
21
+ className="format-selector"
21
22
  value={item_format_name}
22
23
  options={format_options}
23
24
  onChange={(e, data) => {
@@ -16,6 +16,7 @@ export const LayerNaming = ({ item, cartItems, setCartItems }) => {
16
16
  this_type_layers[0].layers.length > 0 ? (
17
17
  <Select
18
18
  placeholder="Select layer"
19
+ className="layer-selector"
19
20
  value={
20
21
  item.layer
21
22
  ? item.layer
@@ -1,7 +1,69 @@
1
1
  td {
2
- vertical-align: middle !important;
2
+ vertical-align: top !important;
3
+ }
4
+
5
+ td li {
6
+ margin-bottom: 0.5rem;
7
+ font-size: 1rem !important;
8
+ line-height: 1rem !important;
9
+ }
10
+
11
+ .cart-bounding-boxes {
12
+ margin-top: 0.8rem;
13
+ }
14
+
15
+ .cart-bounding-boxes .ui.label {
16
+ padding: 0;
17
+ background-color: transparent;
18
+ color: #273b4b;
19
+ }
20
+
21
+ .ui.selection.dropdown {
22
+ width: 95%;
23
+ min-height: 1.3rem !important;
24
+ padding: 0 0.3rem !important;
25
+ margin-left: 0 !important;
26
+ background-color: #e5e5e5 !important;
27
+ font-size: 0.8rem !important;
28
+ }
29
+
30
+ .ui.selection.dropdown .menu {
31
+ max-width: 200px;
32
+ background-color: #efefef;
33
+ }
34
+
35
+ .ui.selection.dropdown .menu > .item {
36
+ padding: 0.2rem !important;
37
+ font-size: 0.8rem;
38
+ word-break: break-word;
39
+ }
40
+
41
+ .ui.selection.dropdown > .dropdown.icon {
42
+ width: 2rem !important;
43
+ min-width: 4rem !important;
3
44
  }
4
45
 
5
46
  .cart-table .ui.selection.dropdown .menu > .item {
47
+ padding: 0.4rem !important;
6
48
  word-wrap: break-word;
7
49
  }
50
+
51
+ div.mb-2 {
52
+ margin-bottom: 0.5rem;
53
+ }
54
+
55
+ .info-icon button {
56
+ font-size: 0.8rem !important;
57
+ }
58
+
59
+ .text-end > div {
60
+ justify-content: flex-end;
61
+ }
62
+
63
+ .tag.tag-vector,
64
+ .tag.tag-raster {
65
+ padding: 0;
66
+ background-color: transparent;
67
+ color: black;
68
+ font-weight: 400;
69
+ }
@@ -1061,25 +1061,32 @@ body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
1061
1061
  margin: 1rem 0;
1062
1062
  }
1063
1063
 
1064
- .custom-table table {
1064
+ .custom-table table,
1065
+ .custom-table table.ui.table {
1065
1066
  width: 100%;
1067
+ border: initial;
1066
1068
  border-collapse: collapse;
1067
1069
  }
1068
1070
 
1069
- .custom-table th {
1071
+ .custom-table th,
1072
+ .custom-table table.ui.table thead th {
1070
1073
  padding: 0 0.75rem 0.75rem 0;
1071
1074
  border-bottom: solid 1px #a0b128;
1075
+ background-color: transparent;
1072
1076
  color: #a0b128;
1077
+ font-weight: bold;
1073
1078
  text-align: left;
1079
+ text-transform: none;
1074
1080
  }
1075
1081
 
1076
- .custom-table td {
1082
+ .custom-table td,
1083
+ .custom-table table.ui.table td {
1077
1084
  padding: 0.75rem 0.75rem 0.75rem 0;
1078
1085
  }
1079
1086
 
1080
- .custom-table td:last-of-type {
1081
- padding: 0.75rem 0;
1082
- }
1087
+ // .custom-table td:last-of-type {
1088
+ // padding: 0.75rem 0;
1089
+ // }
1083
1090
 
1084
1091
  .custom-table tr:not(:last-of-type) td {
1085
1092
  border-bottom: solid 0.5px #a0b12833;
@@ -1108,6 +1115,13 @@ body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
1108
1115
  border-bottom: solid 1px #a0b128;
1109
1116
  }
1110
1117
 
1118
+ .custom-table .ui.selection.dropdown.collection-selector:not(.multiple),
1119
+ .custom-table .ui.selection.dropdown.format-selector:not(.multiple),
1120
+ .custom-table .ui.selection.dropdown.layer-selector:not(.multiple) {
1121
+ display: inline-flex;
1122
+ margin-left: 0.5rem;
1123
+ }
1124
+
1111
1125
  .custom-table .ui.selection.active.dropdown .menu:last-child {
1112
1126
  border: none;
1113
1127
  }