@eeacms/volto-n2k 1.0.31 → 1.0.32

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 (10) hide show
  1. package/CHANGELOG.md +6 -1
  2. package/package.json +1 -1
  3. package/src/components/manage/Blocks/CDDACountryProfileMap/Edit.jsx +0 -1
  4. package/src/components/manage/Blocks/HabitatsBanner/View.jsx +1 -57
  5. package/src/components/manage/Blocks/HabitatsBanner/style.less +3 -3
  6. package/src/components/manage/Blocks/N2KCountryProfileMap/Edit.jsx +0 -1
  7. package/src/components/manage/Blocks/SpeciesBanner/View.jsx +2 -58
  8. package/src/components/manage/Blocks/SpeciesBanner/style.less +3 -3
  9. package/src/components/manage/Blocks/CDDACountryProfileMap/style.less +0 -240
  10. package/src/components/manage/Blocks/N2KCountryProfileMap/style.less +0 -240
package/CHANGELOG.md CHANGED
@@ -4,12 +4,17 @@ 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.0.32](https://github.com/eea/volto-n2k/compare/1.0.31...1.0.32) - 20 June 2023
8
+
9
+ #### :hammer_and_wrench: Others
10
+
11
+ - Update style.less Refs#254603 [Claudia Ifrim - [`57f53b3`](https://github.com/eea/volto-n2k/commit/57f53b3fc9d5418cf1aa4139abd2843f6651ebd3)]
12
+ - Update style.less Refs#254603 [Claudia Ifrim - [`84c68f3`](https://github.com/eea/volto-n2k/commit/84c68f3bf64569bafcf528b21baca7fa3f236f1e)]
7
13
  ### [1.0.31](https://github.com/eea/volto-n2k/compare/1.0.30...1.0.31) - 16 June 2023
8
14
 
9
15
  #### :hammer_and_wrench: Others
10
16
 
11
17
  - update [Miu Razvan - [`f4ea5ea`](https://github.com/eea/volto-n2k/commit/f4ea5ea381a015c32cff24957bd677e47fc0df05)]
12
- - don't swipe carousel with touch moves [Miu Razvan - [`057088d`](https://github.com/eea/volto-n2k/commit/057088d411874c9b8c2fe7731107b8da97be0515)]
13
18
  ### [1.0.30](https://github.com/eea/volto-n2k/compare/1.0.29...1.0.30) - 12 June 2023
14
19
 
15
20
  #### :bug: Bug Fixes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eeacms/volto-n2k",
3
- "version": "1.0.31",
3
+ "version": "1.0.32",
4
4
  "description": "volto-n2k: Volto add-on",
5
5
  "main": "src/index.js",
6
6
  "author": "European Environment Agency: IDM2 A-Team",
package/src/components/manage/Blocks/CDDACountryProfileMap/Edit.jsx CHANGED
@@ -3,7 +3,6 @@ import { SidebarPortal } from '@plone/volto/components';
3
3
  import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
4
4
  import getSchema from './schema';
5
5
  import View from './View';
6
- import './style.less';
7
6
 
8
7
  const Edit = (props) => {
9
8
  const schema = useMemo(() => getSchema(props), [props]);
package/src/components/manage/Blocks/HabitatsBanner/View.jsx CHANGED
@@ -59,13 +59,7 @@ const _View = (props) => {
59
59
  </p>
60
60
  </div>
61
61
  {pictures_length > 0 && (
62
- <div
63
- className={cx('carousel', {
64
- 'one-slide': pictures_length === 1,
65
- 'two-slides': pictures_length === 2,
66
- 'three-slides': pictures_length > 2,
67
- })}
68
- >
62
+ <div className={cx('carousel one-slide')}>
69
63
  <div className="arrows">
70
64
  <button
71
65
  className="swiper-button image-swiper-button-prev"
@@ -137,56 +131,6 @@ const _View = (props) => {
137
131
  </SwiperSlide>
138
132
  ))}
139
133
  </Swiper>
140
- {pictures_length > 1 && (
141
- <Swiper
142
- className="preview preview-one"
143
- loop={true}
144
- allowTouchMove={false}
145
- initialSlide={1}
146
- slidesPerView={1}
147
- spaceBetween={0}
148
- onBeforeInit={(swiper) => {
149
- if (!previewEl.current) {
150
- previewEl.current = [];
151
- }
152
- previewEl.current[0] = swiper;
153
- }}
154
- >
155
- {pictures.map((source, index) => (
156
- <SwiperSlide>
157
- <img
158
- src={getSource(source)}
159
- alt={pictures[index]}
160
- />
161
- </SwiperSlide>
162
- ))}
163
- </Swiper>
164
- )}
165
- {pictures_length > 2 && (
166
- <Swiper
167
- className="preview preview-two"
168
- loop={true}
169
- allowTouchMove={false}
170
- initialSlide={2}
171
- slidesPerView={1}
172
- spaceBetween={0}
173
- onBeforeInit={(swiper) => {
174
- if (!previewEl.current) {
175
- previewEl.current = [];
176
- }
177
- previewEl.current[1] = swiper;
178
- }}
179
- >
180
- {pictures.map((source, index) => (
181
- <SwiperSlide>
182
- <img
183
- src={getSource(source)}
184
- alt={pictures[index]}
185
- />
186
- </SwiperSlide>
187
- ))}
188
- </Swiper>
189
- )}
190
134
  </>
191
135
  );
192
136
  }}
package/src/components/manage/Blocks/HabitatsBanner/style.less CHANGED
@@ -81,8 +81,8 @@ div#view .habitat-banner-details .ui.container > * {
81
81
  font-family: inherit;
82
82
 
83
83
  font-family: RajdhaniB, 'Helvetica Neue', Arial, Helvetica, sans-serif;
84
- font-size: 54px;
85
- line-height: 54px;
84
+ font-size: 40px;
85
+ line-height: 40px;
86
86
  text-transform: uppercase;
87
87
 
88
88
  > * {
@@ -189,7 +189,7 @@ div#view .habitat-banner-details .ui.container > * {
189
189
  display: block;
190
190
  width: 100%;
191
191
  height: 100%;
192
- object-fit: cover;
192
+ object-fit: contain;
193
193
  }
194
194
  }
195
195
 
package/src/components/manage/Blocks/N2KCountryProfileMap/Edit.jsx CHANGED
@@ -3,7 +3,6 @@ import { SidebarPortal } from '@plone/volto/components';
3
3
  import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
4
4
  import getSchema from './schema';
5
5
  import View from './View';
6
- import './style.less';
7
6
 
8
7
  const Edit = (props) => {
9
8
  const schema = useMemo(() => getSchema(props), [props]);
package/src/components/manage/Blocks/SpeciesBanner/View.jsx CHANGED
@@ -98,13 +98,7 @@ const _View = (props) => {
98
98
  </div>
99
99
 
100
100
  {pictures_length > 0 && (
101
- <div
102
- className={cx('carousel', {
103
- 'one-slide': pictures_length === 1,
104
- 'two-slides': pictures_length === 2,
105
- 'three-slides': pictures_length > 2,
106
- })}
107
- >
101
+ <div className={cx('carousel one-slide')}>
108
102
  <div className="arrows">
109
103
  <button
110
104
  className="swiper-button image-swiper-button-prev"
@@ -163,7 +157,7 @@ const _View = (props) => {
163
157
  <>
164
158
  <Swiper
165
159
  loop={true}
166
- allowTouchMove={false}
160
+ allowTouchMove={true}
167
161
  initialSlide={0}
168
162
  slidesPerView={1}
169
163
  spaceBetween={0}
@@ -180,56 +174,6 @@ const _View = (props) => {
180
174
  </SwiperSlide>
181
175
  ))}
182
176
  </Swiper>
183
- {pictures_length > 1 && (
184
- <Swiper
185
- className="preview preview-one"
186
- loop={true}
187
- allowTouchMove={false}
188
- initialSlide={1}
189
- slidesPerView={1}
190
- spaceBetween={0}
191
- onBeforeInit={(swiper) => {
192
- if (!previewEl.current) {
193
- previewEl.current = [];
194
- }
195
- previewEl.current[0] = swiper;
196
- }}
197
- >
198
- {pictures.map((source, index) => (
199
- <SwiperSlide>
200
- <img
201
- src={getSource(source)}
202
- alt={pictures[index]}
203
- />
204
- </SwiperSlide>
205
- ))}
206
- </Swiper>
207
- )}
208
- {pictures_length > 2 && (
209
- <Swiper
210
- className="preview preview-two"
211
- loop={true}
212
- allowTouchMove={false}
213
- initialSlide={2}
214
- slidesPerView={1}
215
- spaceBetween={0}
216
- onBeforeInit={(swiper) => {
217
- if (!previewEl.current) {
218
- previewEl.current = [];
219
- }
220
- previewEl.current[1] = swiper;
221
- }}
222
- >
223
- {pictures.map((source, index) => (
224
- <SwiperSlide>
225
- <img
226
- src={getSource(source)}
227
- alt={pictures[index]}
228
- />
229
- </SwiperSlide>
230
- ))}
231
- </Swiper>
232
- )}
233
177
  </>
234
178
  );
235
179
  }}
package/src/components/manage/Blocks/SpeciesBanner/style.less CHANGED
@@ -81,8 +81,8 @@ div#view .species-banner-details .ui.container > * {
81
81
  font-family: inherit;
82
82
 
83
83
  font-family: RajdhaniB, 'Helvetica Neue', Arial, Helvetica, sans-serif;
84
- font-size: 54px;
85
- line-height: 54px;
84
+ font-size: 40px;
85
+ line-height: 40px;
86
86
  text-transform: uppercase;
87
87
 
88
88
  > * {
@@ -185,7 +185,7 @@ div#view .species-banner-details .ui.container > * {
185
185
  display: block;
186
186
  width: 100%;
187
187
  height: 100%;
188
- object-fit: cover;
188
+ object-fit: contain;
189
189
  }
190
190
  }
191
191
 
package/src/components/manage/Blocks/CDDACountryProfileMap/style.less DELETED
@@ -1,240 +0,0 @@
1
- @type: extra;
2
- @element: custom;
3
-
4
- @import (multiple, reference, optional) '../../theme.config';
5
-
6
- @import 'swiper/swiper.less';
7
-
8
- @{view} {
9
- .species-banner-details {
10
- &::before {
11
- .full-width();
12
- position: absolute;
13
- z-index: -1;
14
- }
15
-
16
- .carousel {
17
- .half-width(960px);
18
-
19
- @media @mobile {
20
- width: calc(@pageFullWidth - 2rem) !important;
21
- }
22
- }
23
- }
24
- }
25
-
26
- @{edit} {
27
- .species-banner-details {
28
- &::before {
29
- .full-width-edit();
30
- position: absolute;
31
- z-index: -1;
32
- }
33
-
34
- .carousel {
35
- .half-width-edit(960px);
36
-
37
- @media @mobile {
38
- width: calc(@pageFullWidthEdit - 2rem) !important;
39
- }
40
- }
41
- }
42
- }
43
-
44
- div#view .species-banner-details .ui.container > * {
45
- margin-top: 0;
46
- margin-bottom: 0;
47
- }
48
-
49
- .species-banner-details {
50
- position: relative;
51
- padding: 0;
52
- margin-bottom: 1rem;
53
- color: #fff !important;
54
- font-family: 'RajdhaniB', 'Helvetica Neue', Arial, Helvetica, sans-serif;
55
-
56
- &::before {
57
- display: block;
58
- height: 100%;
59
- background-color: #00a390;
60
- content: '';
61
- }
62
-
63
- .species-details {
64
- display: flex;
65
- align-items: center;
66
- justify-content: space-between;
67
-
68
- .species-metadata {
69
- display: flex;
70
- width: 50%;
71
- height: 320px !important;
72
- flex: 0 0 50%;
73
- flex-direction: column;
74
- justify-content: center;
75
- word-wrap: break-word;
76
-
77
- .name {
78
- margin-top: 0 !important;
79
- margin-bottom: 0 !important;
80
- color: #fff !important;
81
- font-family: inherit;
82
-
83
- font-family: RajdhaniB, 'Helvetica Neue', Arial, Helvetica, sans-serif;
84
- font-size: 54px;
85
- line-height: 54px;
86
- text-transform: uppercase;
87
-
88
- > * {
89
- font-family: RajdhaniB, 'Helvetica Neue', Arial, Helvetica, sans-serif;
90
- }
91
- }
92
-
93
- h3 {
94
- margin-top: 0 !important;
95
- margin-bottom: 0 !important;
96
- color: #fff !important;
97
- font-family: inherit;
98
- font-size: 32px;
99
- line-height: 32px;
100
- text-transform: uppercase;
101
- }
102
-
103
- h4 {
104
- margin-top: 0 !important;
105
- margin-bottom: 0 !important;
106
- color: #fff !important;
107
- font-family: inherit;
108
- font-size: 32px;
109
- line-height: 32px;
110
- text-transform: uppercase;
111
- }
112
-
113
- .info,
114
- .info > * {
115
- font-family: 'RajdhaniR', 'Helvetica Neue', Arial, Helvetica, sans-serif;
116
- font-size: 18px;
117
- font-weight: 600;
118
- line-height: 18px;
119
-
120
- a {
121
- color: #fff;
122
-
123
- &:hover {
124
- color: #fff;
125
- }
126
- }
127
- }
128
- }
129
-
130
- .carousel {
131
- display: flex;
132
- height: 320px;
133
-
134
- p {
135
- font-family: 'RajdhaniB', 'Helvetica Neue', Arial, Helvetica, sans-serif;
136
- }
137
-
138
- img {
139
- width: 100%;
140
- }
141
-
142
- &.one-slide .swiper {
143
- width: 100%;
144
- }
145
-
146
- &.two-slides .swiper {
147
- width: 50%;
148
-
149
- @media @mobile {
150
- width: 100%;
151
-
152
- &.preview.preview-one {
153
- display: none;
154
- }
155
- }
156
- }
157
-
158
- &.three-slides .swiper {
159
- width: 33.33%;
160
-
161
- @media @tablet {
162
- width: 50%;
163
-
164
- &.preview.preview-two {
165
- display: none;
166
- }
167
- }
168
-
169
- @media @mobile {
170
- width: 100%;
171
-
172
- &.preview.preview-two,
173
- &.preview.preview-one {
174
- display: none;
175
- }
176
- }
177
- }
178
-
179
- .swiper {
180
- &.preview .swiper-slide {
181
- filter: grayscale(100%);
182
- }
183
-
184
- img {
185
- display: block;
186
- width: 100%;
187
- height: 100%;
188
- object-fit: cover;
189
- }
190
- }
191
-
192
- .arrows {
193
- position: absolute;
194
- z-index: 2;
195
- bottom: 0;
196
- left: 0;
197
- display: flex;
198
- width: 100%;
199
- align-items: center;
200
-
201
- button {
202
- padding: 0;
203
- border: none;
204
- margin: 0;
205
- background-color: transparent;
206
- }
207
-
208
- .icon {
209
- display: block;
210
- width: 32px;
211
- background-color: #fff;
212
- cursor: pointer;
213
- }
214
-
215
- p {
216
- overflow: hidden;
217
- width: calc(100% - 64px);
218
- padding: 0.25rem 0.25rem 0.25rem 1rem;
219
- margin: 0;
220
- backdrop-filter: brightness(0.5);
221
- text-overflow: ellipsis;
222
- white-space: nowrap;
223
- }
224
- }
225
- }
226
-
227
- @media @mobile {
228
- flex-flow: column;
229
-
230
- .species-metadata {
231
- width: 100%;
232
- margin-top: 2rem;
233
- }
234
-
235
- .carousel {
236
- margin: 0 1rem 1rem 1rem;
237
- }
238
- }
239
- }
240
- }
package/src/components/manage/Blocks/N2KCountryProfileMap/style.less DELETED
@@ -1,240 +0,0 @@
1
- @type: extra;
2
- @element: custom;
3
-
4
- @import (multiple, reference, optional) '../../theme.config';
5
-
6
- @import 'swiper/swiper.less';
7
-
8
- @{view} {
9
- .species-banner-details {
10
- &::before {
11
- .full-width();
12
- position: absolute;
13
- z-index: -1;
14
- }
15
-
16
- .carousel {
17
- .half-width(960px);
18
-
19
- @media @mobile {
20
- width: calc(@pageFullWidth - 2rem) !important;
21
- }
22
- }
23
- }
24
- }
25
-
26
- @{edit} {
27
- .species-banner-details {
28
- &::before {
29
- .full-width-edit();
30
- position: absolute;
31
- z-index: -1;
32
- }
33
-
34
- .carousel {
35
- .half-width-edit(960px);
36
-
37
- @media @mobile {
38
- width: calc(@pageFullWidthEdit - 2rem) !important;
39
- }
40
- }
41
- }
42
- }
43
-
44
- div#view .species-banner-details .ui.container > * {
45
- margin-top: 0;
46
- margin-bottom: 0;
47
- }
48
-
49
- .species-banner-details {
50
- position: relative;
51
- padding: 0;
52
- margin-bottom: 1rem;
53
- color: #fff !important;
54
- font-family: 'RajdhaniB', 'Helvetica Neue', Arial, Helvetica, sans-serif;
55
-
56
- &::before {
57
- display: block;
58
- height: 100%;
59
- background-color: #00a390;
60
- content: '';
61
- }
62
-
63
- .species-details {
64
- display: flex;
65
- align-items: center;
66
- justify-content: space-between;
67
-
68
- .species-metadata {
69
- display: flex;
70
- width: 50%;
71
- height: 320px !important;
72
- flex: 0 0 50%;
73
- flex-direction: column;
74
- justify-content: center;
75
- word-wrap: break-word;
76
-
77
- .name {
78
- margin-top: 0 !important;
79
- margin-bottom: 0 !important;
80
- color: #fff !important;
81
- font-family: inherit;
82
-
83
- font-family: RajdhaniB, 'Helvetica Neue', Arial, Helvetica, sans-serif;
84
- font-size: 54px;
85
- line-height: 54px;
86
- text-transform: uppercase;
87
-
88
- > * {
89
- font-family: RajdhaniB, 'Helvetica Neue', Arial, Helvetica, sans-serif;
90
- }
91
- }
92
-
93
- h3 {
94
- margin-top: 0 !important;
95
- margin-bottom: 0 !important;
96
- color: #fff !important;
97
- font-family: inherit;
98
- font-size: 32px;
99
- line-height: 32px;
100
- text-transform: uppercase;
101
- }
102
-
103
- h4 {
104
- margin-top: 0 !important;
105
- margin-bottom: 0 !important;
106
- color: #fff !important;
107
- font-family: inherit;
108
- font-size: 32px;
109
- line-height: 32px;
110
- text-transform: uppercase;
111
- }
112
-
113
- .info,
114
- .info > * {
115
- font-family: 'RajdhaniR', 'Helvetica Neue', Arial, Helvetica, sans-serif;
116
- font-size: 18px;
117
- font-weight: 600;
118
- line-height: 18px;
119
-
120
- a {
121
- color: #fff;
122
-
123
- &:hover {
124
- color: #fff;
125
- }
126
- }
127
- }
128
- }
129
-
130
- .carousel {
131
- display: flex;
132
- height: 320px;
133
-
134
- p {
135
- font-family: 'RajdhaniB', 'Helvetica Neue', Arial, Helvetica, sans-serif;
136
- }
137
-
138
- img {
139
- width: 100%;
140
- }
141
-
142
- &.one-slide .swiper {
143
- width: 100%;
144
- }
145
-
146
- &.two-slides .swiper {
147
- width: 50%;
148
-
149
- @media @mobile {
150
- width: 100%;
151
-
152
- &.preview.preview-one {
153
- display: none;
154
- }
155
- }
156
- }
157
-
158
- &.three-slides .swiper {
159
- width: 33.33%;
160
-
161
- @media @tablet {
162
- width: 50%;
163
-
164
- &.preview.preview-two {
165
- display: none;
166
- }
167
- }
168
-
169
- @media @mobile {
170
- width: 100%;
171
-
172
- &.preview.preview-two,
173
- &.preview.preview-one {
174
- display: none;
175
- }
176
- }
177
- }
178
-
179
- .swiper {
180
- &.preview .swiper-slide {
181
- filter: grayscale(100%);
182
- }
183
-
184
- img {
185
- display: block;
186
- width: 100%;
187
- height: 100%;
188
- object-fit: cover;
189
- }
190
- }
191
-
192
- .arrows {
193
- position: absolute;
194
- z-index: 2;
195
- bottom: 0;
196
- left: 0;
197
- display: flex;
198
- width: 100%;
199
- align-items: center;
200
-
201
- button {
202
- padding: 0;
203
- border: none;
204
- margin: 0;
205
- background-color: transparent;
206
- }
207
-
208
- .icon {
209
- display: block;
210
- width: 32px;
211
- background-color: #fff;
212
- cursor: pointer;
213
- }
214
-
215
- p {
216
- overflow: hidden;
217
- width: calc(100% - 64px);
218
- padding: 0.25rem 0.25rem 0.25rem 1rem;
219
- margin: 0;
220
- backdrop-filter: brightness(0.5);
221
- text-overflow: ellipsis;
222
- white-space: nowrap;
223
- }
224
- }
225
- }
226
-
227
- @media @mobile {
228
- flex-flow: column;
229
-
230
- .species-metadata {
231
- width: 100%;
232
- margin-top: 2rem;
233
- }
234
-
235
- .carousel {
236
- margin: 0 1rem 1rem 1rem;
237
- }
238
- }
239
- }
240
- }