@eeacms/volto-n2k 1.0.31 → 1.0.33

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 +12 -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 +48 -98
  5. package/src/components/manage/Blocks/HabitatsBanner/style.less +10 -4
  6. package/src/components/manage/Blocks/N2KCountryProfileMap/Edit.jsx +0 -1
  7. package/src/components/manage/Blocks/SpeciesBanner/View.jsx +49 -99
  8. package/src/components/manage/Blocks/SpeciesBanner/style.less +10 -4
  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,23 @@ 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.33](https://github.com/eea/volto-n2k/compare/1.0.32...1.0.33) - 3 July 2023
8
+
9
+ #### :hammer_and_wrench: Others
10
+
11
+ - hide arrows if pictures length <= 1 [Miu Razvan - [`5dfee21`](https://github.com/eea/volto-n2k/commit/5dfee212b039d92c325665eed203c99280fd8155)]
12
+ ### [1.0.32](https://github.com/eea/volto-n2k/compare/1.0.31...1.0.32) - 26 June 2023
13
+
14
+ #### :hammer_and_wrench: Others
15
+
16
+ - update [Miu Razvan - [`835cf25`](https://github.com/eea/volto-n2k/commit/835cf25febc14f7dcace0e943db84b1cbd186e40)]
17
+ - Update style.less Refs#254603 [Claudia Ifrim - [`57f53b3`](https://github.com/eea/volto-n2k/commit/57f53b3fc9d5418cf1aa4139abd2843f6651ebd3)]
18
+ - Update style.less Refs#254603 [Claudia Ifrim - [`84c68f3`](https://github.com/eea/volto-n2k/commit/84c68f3bf64569bafcf528b21baca7fa3f236f1e)]
7
19
  ### [1.0.31](https://github.com/eea/volto-n2k/compare/1.0.30...1.0.31) - 16 June 2023
8
20
 
9
21
  #### :hammer_and_wrench: Others
10
22
 
11
23
  - 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
24
  ### [1.0.30](https://github.com/eea/volto-n2k/compare/1.0.29...1.0.30) - 12 June 2023
14
25
 
15
26
  #### :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.33",
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,54 +59,54 @@ 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
- >
69
- <div className="arrows">
70
- <button
71
- className="swiper-button image-swiper-button-prev"
72
- onClick={() => {
73
- swiperEl.current.slidePrev();
74
- if (previewEl.current?.[0]) {
75
- previewEl.current[0].slidePrev();
76
- }
77
- if (previewEl.current?.[1]) {
78
- previewEl.current[1].slidePrev();
79
- }
80
- setActiveSlide(swiperEl.current.realIndex);
81
- }}
82
- >
83
- <Icon
84
- className="icon-left"
85
- color="#000"
86
- name={arrowLeft}
87
- size="32px"
88
- />
89
- </button>
90
- <button
91
- className="swiper-button image-swiper-button-next"
92
- onClick={() => {
93
- swiperEl.current.slideNext();
94
- if (previewEl.current?.[0]) {
95
- previewEl.current[0].slideNext();
96
- }
97
- if (previewEl.current?.[1]) {
98
- previewEl.current[1].slideNext();
99
- }
100
- setActiveSlide(swiperEl.current.realIndex);
101
- }}
102
- >
103
- <Icon
104
- className="icon-right"
105
- color="#000"
106
- name={arrowRight}
107
- size="32px"
108
- />
109
- </button>
62
+ <div className={cx('carousel one-slide')}>
63
+ <div
64
+ className={cx('arrows', { 'arrows-hidden': pictures_length < 2 })}
65
+ >
66
+ {pictures_length > 1 && (
67
+ <>
68
+ <button
69
+ className="swiper-button image-swiper-button-prev"
70
+ onClick={() => {
71
+ swiperEl.current.slidePrev();
72
+ if (previewEl.current?.[0]) {
73
+ previewEl.current[0].slidePrev();
74
+ }
75
+ if (previewEl.current?.[1]) {
76
+ previewEl.current[1].slidePrev();
77
+ }
78
+ setActiveSlide(swiperEl.current.realIndex);
79
+ }}
80
+ >
81
+ <Icon
82
+ className="icon-left"
83
+ color="#000"
84
+ name={arrowLeft}
85
+ size="32px"
86
+ />
87
+ </button>
88
+ <button
89
+ className="swiper-button image-swiper-button-next"
90
+ onClick={() => {
91
+ swiperEl.current.slideNext();
92
+ if (previewEl.current?.[0]) {
93
+ previewEl.current[0].slideNext();
94
+ }
95
+ if (previewEl.current?.[1]) {
96
+ previewEl.current[1].slideNext();
97
+ }
98
+ setActiveSlide(swiperEl.current.realIndex);
99
+ }}
100
+ >
101
+ <Icon
102
+ className="icon-right"
103
+ color="#000"
104
+ name={arrowRight}
105
+ size="32px"
106
+ />
107
+ </button>
108
+ </>
109
+ )}
110
110
  {!!attribution_copyright[activeSlide] && (
111
111
  <p>{attribution_copyright[activeSlide]}</p>
112
112
  )}
@@ -137,56 +137,6 @@ const _View = (props) => {
137
137
  </SwiperSlide>
138
138
  ))}
139
139
  </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
140
  </>
191
141
  );
192
142
  }}
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
 
@@ -218,13 +218,19 @@ div#view .habitat-banner-details .ui.container > * {
218
218
 
219
219
  p {
220
220
  overflow: hidden;
221
- width: calc(100% - 64px);
221
+ width: 100%;
222
222
  padding: 0.25rem 0.25rem 0.25rem 1rem;
223
223
  margin: 0;
224
224
  backdrop-filter: brightness(0.5);
225
225
  text-overflow: ellipsis;
226
226
  white-space: nowrap;
227
227
  }
228
+
229
+ &:not(.arrows-hidden) {
230
+ p {
231
+ width: calc(100% - 64px);
232
+ }
233
+ }
228
234
  }
229
235
  }
230
236
 
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,54 +98,54 @@ 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
- >
108
- <div className="arrows">
109
- <button
110
- className="swiper-button image-swiper-button-prev"
111
- onClick={() => {
112
- swiperEl.current.slidePrev();
113
- if (previewEl.current?.[0]) {
114
- previewEl.current[0].slidePrev();
115
- }
116
- if (previewEl.current?.[1]) {
117
- previewEl.current[1].slidePrev();
118
- }
119
- setActiveSlide(swiperEl.current.realIndex);
120
- }}
121
- >
122
- <Icon
123
- className="icon-left"
124
- color="#000"
125
- name={arrowLeft}
126
- size="32px"
127
- />
128
- </button>
129
- <button
130
- className="swiper-button image-swiper-button-next"
131
- onClick={() => {
132
- swiperEl.current.slideNext();
133
- if (previewEl.current?.[0]) {
134
- previewEl.current[0].slideNext();
135
- }
136
- if (previewEl.current?.[1]) {
137
- previewEl.current[1].slideNext();
138
- }
139
- setActiveSlide(swiperEl.current.realIndex);
140
- }}
141
- >
142
- <Icon
143
- className="icon-right"
144
- color="#000"
145
- name={arrowRight}
146
- size="32px"
147
- />
148
- </button>
101
+ <div className={cx('carousel one-slide')}>
102
+ <div
103
+ className={cx('arrows', { 'arrows-hidden': pictures_length < 2 })}
104
+ >
105
+ {pictures_length > 1 && (
106
+ <>
107
+ <button
108
+ className="swiper-button image-swiper-button-prev"
109
+ onClick={() => {
110
+ swiperEl.current.slidePrev();
111
+ if (previewEl.current?.[0]) {
112
+ previewEl.current[0].slidePrev();
113
+ }
114
+ if (previewEl.current?.[1]) {
115
+ previewEl.current[1].slidePrev();
116
+ }
117
+ setActiveSlide(swiperEl.current.realIndex);
118
+ }}
119
+ >
120
+ <Icon
121
+ className="icon-left"
122
+ color="#000"
123
+ name={arrowLeft}
124
+ size="32px"
125
+ />
126
+ </button>
127
+ <button
128
+ className="swiper-button image-swiper-button-next"
129
+ onClick={() => {
130
+ swiperEl.current.slideNext();
131
+ if (previewEl.current?.[0]) {
132
+ previewEl.current[0].slideNext();
133
+ }
134
+ if (previewEl.current?.[1]) {
135
+ previewEl.current[1].slideNext();
136
+ }
137
+ setActiveSlide(swiperEl.current.realIndex);
138
+ }}
139
+ >
140
+ <Icon
141
+ className="icon-right"
142
+ color="#000"
143
+ name={arrowRight}
144
+ size="32px"
145
+ />
146
+ </button>
147
+ </>
148
+ )}
149
149
  {!!attribution_copyright[activeSlide] ? (
150
150
  <p>{attribution_copyright[activeSlide]}</p>
151
151
  ) : !!source[activeSlide] && !!license[activeSlide] ? (
@@ -163,7 +163,7 @@ const _View = (props) => {
163
163
  <>
164
164
  <Swiper
165
165
  loop={true}
166
- allowTouchMove={false}
166
+ allowTouchMove={true}
167
167
  initialSlide={0}
168
168
  slidesPerView={1}
169
169
  spaceBetween={0}
@@ -180,56 +180,6 @@ const _View = (props) => {
180
180
  </SwiperSlide>
181
181
  ))}
182
182
  </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
183
  </>
234
184
  );
235
185
  }}
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
 
@@ -214,13 +214,19 @@ div#view .species-banner-details .ui.container > * {
214
214
 
215
215
  p {
216
216
  overflow: hidden;
217
- width: calc(100% - 64px);
217
+ width: 100%;
218
218
  padding: 0.25rem 0.25rem 0.25rem 1rem;
219
219
  margin: 0;
220
220
  backdrop-filter: brightness(0.5);
221
221
  text-overflow: ellipsis;
222
222
  white-space: nowrap;
223
223
  }
224
+
225
+ &:not(.arrows-hidden) {
226
+ p {
227
+ width: calc(100% - 64px);
228
+ }
229
+ }
224
230
  }
225
231
  }
226
232
 
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
- }