@eeacms/volto-n2k 1.0.15 → 1.0.17

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 (19) hide show
  1. package/CHANGELOG.md +16 -2
  2. package/package.json +1 -1
  3. package/src/components/manage/Blocks/CddaShape/View.jsx +5 -2
  4. package/src/components/manage/Blocks/HabitatDistribution/View.jsx +5 -2
  5. package/src/components/manage/Blocks/HabitatProtectedSites/View.jsx +5 -2
  6. package/src/components/manage/Blocks/HabitatsBanner/View.jsx +11 -8
  7. package/src/components/manage/Blocks/HabitatsBanner/style.less +29 -1
  8. package/src/components/manage/Blocks/Landing/DefalutView.jsx +4 -1
  9. package/src/components/manage/Blocks/NavigationAnchors/styles.less +2 -0
  10. package/src/components/manage/Blocks/SiteShape/View.jsx +5 -2
  11. package/src/components/manage/Blocks/SpeciesBanner/View.jsx +36 -9
  12. package/src/components/manage/Blocks/SpeciesBanner/style.less +35 -0
  13. package/src/components/manage/Blocks/SpeciesDistribution/View.jsx +12 -4
  14. package/src/components/manage/Blocks/SpeciesDistribution/index.js +7 -1
  15. package/src/components/manage/Blocks/SpeciesProtectedSites/View.jsx +6 -2
  16. package/src/components/theme/Header/Header.jsx +82 -37
  17. package/src/components/theme/LanguageSelector/styles.less +29 -18
  18. package/src/components/theme/Navigation/Navigation.jsx +148 -234
  19. package/src/less/styles.less +77 -234
package/src/components/theme/Navigation/Navigation.jsx CHANGED
@@ -10,7 +10,7 @@ import { compose } from 'redux';
10
10
  import { matchPath, withRouter } from 'react-router';
11
11
  import { Link } from 'react-router-dom';
12
12
  import { defineMessages, injectIntl } from 'react-intl';
13
- import { Menu, Dropdown, Image } from 'semantic-ui-react';
13
+ import { Menu, Dropdown } from 'semantic-ui-react';
14
14
  import cx from 'classnames';
15
15
  import {
16
16
  getBaseUrl,
@@ -23,7 +23,6 @@ import { getNavigation } from '@plone/volto/actions';
23
23
  import config from '@plone/volto/registry';
24
24
  import { withLocalStorage } from '@eeacms/volto-n2k/hocs';
25
25
  import LanguageSelector from '../LanguageSelector/LanguageSelector';
26
- import BISELogo from '@eeacms/volto-bise/customizations/volto/components/theme/Logo/Logo.svg';
27
26
 
28
27
  const dropdownBlacklist = ['/natura2000'];
29
28
 
@@ -248,7 +247,7 @@ class Navigation extends Component {
248
247
  className={cx('navigation', this.props.className || '')}
249
248
  ref={this.container}
250
249
  >
251
- <div className="mobile only">
250
+ <div className="mobile only tablet only computer only">
252
251
  <Hamburger
253
252
  {...this.props}
254
253
  isMobileMenuOpen={this.state.isMobileMenuOpen}
@@ -263,30 +262,14 @@ class Navigation extends Component {
263
262
  open: this.state.isMobileMenuOpen,
264
263
  'is-sdf': this.state.isSdf,
265
264
  'is-sticky': this.state.isSdf || this.props.isSticky,
266
- 'mobile hidden': !this.state.isMobileMenuOpen,
267
- 'mobile only': this.state.isMobileMenuOpen,
265
+ 'mobile hidden tablet hidden computer hidden': !this.state
266
+ .isMobileMenuOpen,
267
+ 'mobile only tablet only computer only': this.state
268
+ .isMobileMenuOpen,
268
269
  })}
269
270
  onClick={this.closeMobileMenu}
270
271
  onBlur={() => this.closeMobileMenu}
271
272
  >
272
- <div className="mobile only">
273
- <Hamburger
274
- {...this.props}
275
- isMobileMenuOpen={this.state.isMobileMenuOpen}
276
- toggleMobileMenu={this.toggleMobileMenu}
277
- />
278
- </div>
279
- <Menu.Item className="home-button">
280
- <Link title="Natura 2000" to="/">
281
- <Image
282
- src={BISELogo}
283
- alt="Biodiversity logo"
284
- title="Biodiversity logo"
285
- height={64}
286
- width={192}
287
- />
288
- </Link>
289
- </Menu.Item>
290
273
  {this.state.isSdf ? (
291
274
  <>
292
275
  <button
@@ -320,228 +303,159 @@ class Navigation extends Component {
320
303
  ''
321
304
  )}
322
305
 
323
- {this.props.isRoot &&
324
- this.props.biseItems
325
- .filter((item) => !['/natura2000'].includes(item.url))
326
- .map((item) => {
327
- const flatUrl = flattenToAppURL(item.url);
328
- const itemID = item.title.split(' ').join('-').toLowerCase();
329
- return item.items &&
330
- item.items.length &&
331
- !dropdownBlacklist.includes(item.url) ? (
332
- <Dropdown
333
- id={itemID}
334
- className={
335
- this.isActive(flatUrl)
336
- ? 'item firstLevel menuActive'
337
- : 'item firstLevel'
338
- }
339
- key={flatUrl}
340
- trigger={
341
- <Link to={flatUrl === '' ? '/' : flatUrl} key={flatUrl}>
342
- {item.title}
343
- </Link>
344
- }
345
- item
346
- simple
347
- >
348
- {item.title === 'Countries' ? (
349
- <Dropdown.Menu>
350
- <div className="submenu-wrapper">
351
- <div className="submenu countries-submenu">
352
- {item.items.map((subsubitem) => {
353
- const flatSubSubUrl = flattenToAppURL(
354
- subsubitem.url,
355
- );
356
- return (
357
- <Link
358
- to={
359
- flatSubSubUrl === '' ? '/' : flatSubSubUrl
360
- }
361
- title={subsubitem.title}
362
- key={flatSubSubUrl}
363
- className={
364
- this.isActive(flatSubSubUrl)
365
- ? 'item thirdLevel menuActive'
366
- : 'item thirdLevel'
367
- }
368
- >
369
- {subsubitem.title}
370
- </Link>
371
- );
372
- })}
306
+ {(this.props.isRoot || this.props.isExplorer) && (
307
+ <>
308
+ {this.props.biseItems
309
+ .filter((item) => !['/natura2000'].includes(item.url))
310
+ .map((item) => {
311
+ const flatUrl = flattenToAppURL(item.url);
312
+ const itemID = item.title.split(' ').join('-').toLowerCase();
313
+ return item.items &&
314
+ item.items.length &&
315
+ !dropdownBlacklist.includes(item.url) ? (
316
+ <Dropdown
317
+ id={itemID}
318
+ className={
319
+ this.isActive(flatUrl)
320
+ ? 'item firstLevel menuActive'
321
+ : 'item firstLevel'
322
+ }
323
+ key={flatUrl}
324
+ trigger={
325
+ <Link to={flatUrl === '' ? '/' : flatUrl} key={flatUrl}>
326
+ {item.title}
327
+ </Link>
328
+ }
329
+ item
330
+ simple
331
+ >
332
+ {item.title === 'Countries' ? (
333
+ <Dropdown.Menu>
334
+ <div className="submenu-wrapper">
335
+ <div className="submenu countries-submenu">
336
+ {item.items.map((subsubitem) => {
337
+ const flatSubSubUrl = flattenToAppURL(
338
+ subsubitem.url,
339
+ );
340
+ return (
341
+ <Link
342
+ to={
343
+ flatSubSubUrl === '' ? '/' : flatSubSubUrl
344
+ }
345
+ title={subsubitem.title}
346
+ key={flatSubSubUrl}
347
+ className={
348
+ this.isActive(flatSubSubUrl)
349
+ ? 'item thirdLevel menuActive'
350
+ : 'item thirdLevel'
351
+ }
352
+ >
353
+ {subsubitem.title}
354
+ </Link>
355
+ );
356
+ })}
357
+ </div>
373
358
  </div>
374
- </div>
375
- </Dropdown.Menu>
376
- ) : (
377
- <Dropdown.Menu>
378
- {item.items.map((subitem) => {
379
- const flatSubUrl = flattenToAppURL(subitem.url);
380
- const subItemID = subitem.title
381
- .split(' ')
382
- .join('-')
383
- .toLowerCase();
384
- return (
385
- <Dropdown.Item key={flatSubUrl}>
386
- <div className="secondLevel-wrapper">
387
- <Link
388
- id={subItemID}
389
- to={flatSubUrl === '' ? '/' : flatSubUrl}
390
- key={flatSubUrl}
391
- className={
392
- this.isActive(flatSubUrl)
393
- ? 'item secondLevel menuActive'
394
- : 'item secondLevel'
395
- }
396
- >
397
- {subitem.title}
398
- </Link>
399
- </div>
400
- {subitem.items && (
401
- <div className="submenu-wrapper">
402
- <div className="submenu">
403
- {subitem.items.map((subsubitem) => {
404
- const flatSubSubUrl = flattenToAppURL(
405
- subsubitem.url,
406
- );
407
- return (
408
- <Link
409
- to={
410
- flatSubSubUrl === ''
411
- ? '/'
412
- : flatSubSubUrl
413
- }
414
- title={subsubitem.title}
415
- key={flatSubSubUrl}
416
- className={
417
- this.isActive(flatSubSubUrl)
418
- ? 'item thirdLevel menuActive'
419
- : 'item thirdLevel'
420
- }
421
- >
422
- {subsubitem.title}
423
- </Link>
424
- );
425
- })}
426
- </div>
359
+ </Dropdown.Menu>
360
+ ) : (
361
+ <Dropdown.Menu>
362
+ {item.items.map((subitem) => {
363
+ const flatSubUrl = flattenToAppURL(subitem.url);
364
+ const subItemID = subitem.title
365
+ .split(' ')
366
+ .join('-')
367
+ .toLowerCase();
368
+ return (
369
+ <Dropdown.Item key={flatSubUrl}>
370
+ <div className="secondLevel-wrapper">
371
+ <Link
372
+ id={subItemID}
373
+ to={flatSubUrl === '' ? '/' : flatSubUrl}
374
+ key={flatSubUrl}
375
+ className={
376
+ this.isActive(flatSubUrl)
377
+ ? 'item secondLevel menuActive'
378
+ : 'item secondLevel'
379
+ }
380
+ >
381
+ {subitem.title}
382
+ </Link>
427
383
  </div>
428
- )}
429
- </Dropdown.Item>
430
- );
431
- })}
432
- </Dropdown.Menu>
433
- )}
434
- </Dropdown>
435
- ) : (
436
- <Link
437
- to={flatUrl === '' ? '/' : flatUrl}
438
- key={flatUrl}
439
- className={
440
- this.isActive(flatUrl)
441
- ? 'item menuActive firstLevel'
442
- : 'item firstLevel'
443
- }
444
- >
445
- {item.title}
446
- </Link>
447
- );
448
- })}
384
+ {subitem.items && (
385
+ <div className="submenu-wrapper">
386
+ <div className="submenu">
387
+ {subitem.items.map((subsubitem) => {
388
+ const flatSubSubUrl = flattenToAppURL(
389
+ subsubitem.url,
390
+ );
391
+ return (
392
+ <Link
393
+ to={
394
+ flatSubSubUrl === ''
395
+ ? '/'
396
+ : flatSubSubUrl
397
+ }
398
+ title={subsubitem.title}
399
+ key={flatSubSubUrl}
400
+ className={
401
+ this.isActive(flatSubSubUrl)
402
+ ? 'item thirdLevel menuActive'
403
+ : 'item thirdLevel'
404
+ }
405
+ >
406
+ {subsubitem.title}
407
+ </Link>
408
+ );
409
+ })}
410
+ </div>
411
+ </div>
412
+ )}
413
+ </Dropdown.Item>
414
+ );
415
+ })}
416
+ </Dropdown.Menu>
417
+ )}
418
+ </Dropdown>
419
+ ) : (
420
+ <Link
421
+ to={flatUrl === '' ? '/' : flatUrl}
422
+ key={flatUrl}
423
+ className={
424
+ this.isActive(flatUrl)
425
+ ? 'item menuActive firstLevel'
426
+ : 'item firstLevel'
427
+ }
428
+ >
429
+ {item.title}
430
+ </Link>
431
+ );
432
+ })}
433
+ </>
434
+ )}
449
435
 
450
- {(!this.state.isSdf && !this.props.isRoot) || this.props.isExplorer
436
+ {!this.state.isSdf && !this.props.isExplorer && !this.props.isRoot
451
437
  ? this.props.items.map((item) => {
452
438
  const flatUrl = flattenToAppURL(item.url);
453
- const itemID = item.title.split(' ').join('-').toLowerCase();
454
- return item.items && item.items.length && false ? (
455
- <Dropdown
456
- id={itemID}
457
- className={cx({
458
- item: true,
459
- firstLevel: true,
439
+ return (
440
+ <div
441
+ key={flatUrl}
442
+ className={cx('item firstLevel', {
460
443
  menuActive: this.isActive(flatUrl),
461
444
  })}
462
- key={flatUrl}
463
- trigger={
464
- <Link to={flatUrl === '' ? '/' : flatUrl} key={flatUrl}>
465
- {item.title}
466
- </Link>
467
- }
468
- item
469
- simple
445
+ role="listbox"
446
+ tabIndex={0}
447
+ aria-expanded={false}
470
448
  >
471
- <Dropdown.Menu>
472
- {item.items.map((subitem) => {
473
- const flatSubUrl = flattenToAppURL(subitem.url);
474
- const subItemID = subitem.title
475
- .split(' ')
476
- .join('-')
477
- .toLowerCase();
478
- return (
479
- <Dropdown.Item key={flatSubUrl}>
480
- <div className="secondLevel-wrapper">
481
- <Link
482
- id={subItemID}
483
- to={flatSubUrl === '' ? '/' : flatSubUrl}
484
- key={flatSubUrl}
485
- className={
486
- this.isActive(flatSubUrl)
487
- ? 'item secondLevel menuActive'
488
- : 'item secondLevel'
489
- }
490
- >
491
- {subitem.title}
492
- </Link>
493
- </div>
494
- {subitem.items && (
495
- <div className="submenu-wrapper">
496
- <div className="submenu">
497
- {subitem.items.map((subsubitem) => {
498
- const flatSubSubUrl = flattenToAppURL(
499
- subsubitem.url,
500
- );
501
- return (
502
- <Link
503
- to={
504
- flatSubSubUrl === ''
505
- ? '/'
506
- : flatSubSubUrl
507
- }
508
- title={subsubitem.title}
509
- key={flatSubSubUrl}
510
- className={
511
- this.isActive(flatSubSubUrl)
512
- ? 'item thirdLevel menuActive'
513
- : 'item thirdLevel'
514
- }
515
- >
516
- {subsubitem.title}
517
- </Link>
518
- );
519
- })}
520
- </div>
521
- </div>
522
- )}
523
- </Dropdown.Item>
524
- );
525
- })}
526
- </Dropdown.Menu>
527
- </Dropdown>
528
- ) : (
529
- <Link
530
- to={flatUrl === '' ? '/' : flatUrl}
531
- key={flatUrl}
532
- className={
533
- this.isActive(flatUrl)
534
- ? 'item menuActive firstLevel'
535
- : 'item firstLevel'
536
- }
537
- >
538
- {item.title}
539
- </Link>
449
+ <Link to={flatUrl === '' ? '/' : flatUrl}>
450
+ {item.title}
451
+ </Link>
452
+ </div>
540
453
  );
541
454
  })
542
455
  : ''}
543
- {!this.state.isSdf && !this.props.isExplorer ? (
544
- <Menu.Item className="firstLevel language-selector-wrapper">
456
+
457
+ {!this.state.isSdf && !this.state.isExplorer ? (
458
+ <Menu.Item className="firstLevel language-selector-wrapper mobile only tablet only computer only">
545
459
  <LanguageSelector navigation={this.props.navigation} />
546
460
  </Menu.Item>
547
461
  ) : (