Skip to content

Commit fe8cb44

Browse files
Anton-88Anton-88
authored
[416] Added Teams Leaders Table widget (#118)
Added new Team Leaders table widget
1 parent 2138b8d commit fe8cb44

9 files changed

Lines changed: 321 additions & 26 deletions

File tree

‎website/app.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@ function createAposConfig() {
104104
'vacancies-list-widget': {},
105105
'case-studies-carousel-widget': {},
106106
'container-widget': {},
107+
'leadership-team-widget': {},
107108
'table-widget': {},
108109
},
109110
};

‎website/lib/mainWidgets.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ module.exports = {
3434
'@apostrophecms/html': {},
3535
'page-intro': {},
3636
'home-hero': {},
37+
'leadership-team': {},
3738
},
3839
columns: 2,
3940
},

‎website/modules/asset/ui/src/index.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@
2222
@import './scss/_page-intro';
2323
@import './scss/_cases.scss';
2424
@import './scss/_container.scss';
25+
@import './scss/_leadership-team.scss';
2526
@import './scss/_not-found.scss';
2627
@import './scss/_table-widget';
2728
@import './scss/_vacancies';
29+
@import './scss/_animation';

‎website/modules/asset/ui/src/scss/_animation.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@keyframes fadeSlideIn {
2+
from {
3+
opacity: 0;
4+
transform: translateY(24px) scale(0.97);
5+
}
6+
to {
7+
opacity: 1;
8+
transform: translateY(0) scale(1);
9+
}
10+
}

‎website/modules/asset/ui/src/scss/_carousel.scss‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,8 @@
190190
}
191191
}
192192
}
193-
// Leadership team
193+
194+
//Leadership team
194195
.sf-leadership {
195196
.sf-person__photo {
196197
@include transition(opacity);
@@ -227,17 +228,3 @@
227228
}
228229
}
229230
}
230-
.sf-leadership-header {
231-
display: flex;
232-
gap: 20px;
233-
@include breakpoint-medium {
234-
flex-direction: column;
235-
gap: 0;
236-
&__bio {
237-
padding: 40px 40px 0 40px;
238-
@include border(border);
239-
border-bottom: 0;
240-
border-left: 0;
241-
}
242-
}
243-
}

‎website/modules/asset/ui/src/scss/_leadership-team.scss‎

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
.leadership-list {
2+
display: flex;
3+
flex-direction: column;
4+
align-items: center;
5+
6+
@include breakpoint-large {
7+
flex-direction: row;
8+
}
9+
10+
// prevent extra top border when leader-card is hovered in second row
11+
& + .leadership-list {
12+
.leader-card {
13+
&:hover {
14+
.leader-header {
15+
.leader-title-block {
16+
@include breakpoint-large {
17+
border-top: 1px solid transparent;
18+
}
19+
}
20+
}
21+
}
22+
}
23+
}
24+
}
25+
26+
.leader-card {
27+
flex: 1 1 33%;
28+
min-width: 300px;
29+
box-sizing: border-box;
30+
font-style: $font-style-normal;
31+
width: 100%;
32+
height: 100%;
33+
margin-bottom: 24px;
34+
35+
@include breakpoint-large {
36+
max-height: 383px;
37+
max-width: 400px;
38+
margin-bottom: 0;
39+
}
40+
41+
// avoid double border
42+
&:not(:first-child) {
43+
.leader-header {
44+
.leader-title-block {
45+
@include breakpoint-large {
46+
border-left: none;
47+
}
48+
}
49+
}
50+
51+
.leader-footer {
52+
@include breakpoint-large {
53+
border-left: none;
54+
}
55+
}
56+
}
57+
58+
// avoid double border on hover for leader-card
59+
&:has(+ .leader-card:hover) {
60+
.leader-header {
61+
.leader-title-block {
62+
@include breakpoint-large {
63+
border-right: none;
64+
}
65+
}
66+
}
67+
68+
.leader-footer {
69+
@include breakpoint-large {
70+
border-right: none;
71+
}
72+
}
73+
}
74+
75+
.leader-header {
76+
display: flex;
77+
max-width: calc(100% - 102px);
78+
79+
@include breakpoint-large {
80+
flex-direction: column;
81+
max-width: none;
82+
}
83+
84+
.leader-title-block {
85+
padding: 29px 24px;
86+
width: 100%;
87+
88+
@include breakpoint-large {
89+
padding: 40px 40px 0;
90+
border: 1px solid $whisper;
91+
border-bottom: none;
92+
width: auto;
93+
}
94+
}
95+
}
96+
97+
.leader-footer {
98+
padding: 24px;
99+
border: 1px solid $whisper;
100+
101+
@include breakpoint-large {
102+
padding: 0 40px 40px;
103+
border-top: none;
104+
}
105+
}
106+
107+
.leader-photo {
108+
height: 102px;
109+
width: 102px;
110+
111+
@include breakpoint-large {
112+
height: 225px;
113+
width: 225px;
114+
}
115+
}
116+
117+
.leader-title {
118+
@include responsive-font(16px, 22px);
119+
@include responsive-line-height(140%, 110%);
120+
@include truncate-lines(1);
121+
font-weight: $font-weight-extra-bold;
122+
color: $gray-500;
123+
margin: 0;
124+
}
125+
126+
.leader-position {
127+
@include font-settings(10px, 140%, $font-weight-medium);
128+
@include truncate-lines(1);
129+
font-weight: $font-weight-medium;
130+
text-transform: capitalize;
131+
color: $gray-300;
132+
margin: 8px 0 0;
133+
134+
@include breakpoint-large {
135+
margin: 4px 0 16px;
136+
}
137+
}
138+
139+
.leader-bio {
140+
@include font-settings(14px, 150%, $font-weight-medium);
141+
color: $gray-300;
142+
margin-bottom: 16px;
143+
144+
@include breakpoint-large {
145+
color: $gray-500;
146+
display: none;
147+
148+
.bio-inner {
149+
opacity: 0;
150+
}
151+
}
152+
}
153+
154+
.leader-meta {
155+
display: flex;
156+
justify-content: space-between;
157+
158+
.leader-experience {
159+
@include font-settings(11px, 120%, $font-weight-300);
160+
color: $gray-300;
161+
text-transform: lowercase;
162+
}
163+
164+
.leader-link {
165+
@include font-settings(11px, 120%, $font-weight-300);
166+
color: $gray-300;
167+
text-decoration: underline;
168+
text-transform: lowercase;
169+
}
170+
}
171+
172+
&:hover {
173+
.leader-photo {
174+
@include breakpoint-large {
175+
display: none;
176+
}
177+
}
178+
179+
.leader-bio {
180+
@include breakpoint-large {
181+
display: block;
182+
overflow-y: auto;
183+
max-height: 209px;
184+
height: 100%;
185+
min-height: 209px;
186+
187+
.bio-inner {
188+
animation: fadeSlideIn 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
189+
}
190+
}
191+
}
192+
193+
.leader-header {
194+
.leader-title-block {
195+
@include breakpoint-large {
196+
border-left: 1px solid $whisper;
197+
}
198+
}
199+
}
200+
201+
.leader-footer {
202+
@include breakpoint-large {
203+
border-left: 1px solid $whisper;
204+
}
205+
}
206+
}
207+
}

‎website/modules/leadership-team-widget/index.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
const headingToolbar = require('../../lib/headingToolbar');
2+
3+
module.exports = {
4+
extend: '@apostrophecms/widget-type',
5+
options: {
6+
label: 'Leadership Team Widget',
7+
previewImage: 'png',
8+
icon: 'flare-icon',
9+
},
10+
fields: {
11+
add: {
12+
intro: {
13+
label: 'Intro',
14+
type: 'area',
15+
options: {
16+
max: 1,
17+
widgets: {
18+
'@apostrophecms/rich-text': {
19+
...headingToolbar,
20+
},
21+
},
22+
},
23+
},
24+
_teamLeaders: {
25+
label: 'Team Leaders',
26+
help: 'Select and order the Team Leaders',
27+
required: true,
28+
type: 'relationship',
29+
withType: 'team-members',
30+
builders: {
31+
project: {
32+
title: 1,
33+
position: 1,
34+
headshot: 1,
35+
order: 1,
36+
experience: 1,
37+
linkedin: 1,
38+
bio: 1,
39+
},
40+
},
41+
},
42+
},
43+
},
44+
};

‎website/modules/leadership-team-widget/views/widget.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<section class="sf-section" data-leadership-team-widget>
2+
{% area data.widget, 'intro' %}
3+
4+
<div class="leadership-list">
5+
{% for leader in data.widget._teamLeaders %} {% if loop.index0 % 3 == 0 and
6+
loop.index0 > 0 %}
7+
</div>
8+
<div class="leadership-list">
9+
{% endif %}
10+
11+
<article class="leader-card">
12+
<div class="leader-header">
13+
{% if leader.headshot %} {% set attachment =
14+
apos.image.first(leader.headshot) %} {% if attachment %}
15+
<img
16+
srcset="{{ apos.image.srcset(attachment) }}"
17+
src="{{ apos.attachment.url(attachment, { size: data.options.size or 'full' }) }}"
18+
alt="{{ attachment._alt or leader.title }}"
19+
class="leader-photo"
20+
/>
21+
{% endif %} {% endif %}
22+
23+
<div class="leader-title-block">
24+
<h3 class="leader-title">{{ leader.title }}</h3>
25+
<p class="leader-position">{{ leader.position }}</p>
26+
</div>
27+
</div>
28+
29+
<div class="leader-footer">
30+
<div class="leader-bio">
31+
<div class="bio-inner">{{ leader.bio }}</div>
32+
</div>
33+
34+
<div class="leader-meta">
35+
<span class="leader-experience">{{ leader.experience }} yrs</span>
36+
<a
37+
class="leader-link"
38+
href="{{ leader.linkedin }}"
39+
target="_blank"
40+
rel="noopener noreferrer"
41+
>LinkedIn</a
42+
>
43+
</div>
44+
</div>
45+
</article>
46+
47+
{% endfor %}
48+
</div>
49+
</section>

0 commit comments

Comments
 (0)