Skip to content

Commit 99586fc

Browse files
maxnoelp2maxnoelp2
authored
Merge branch 'main' into feat/mega-menu
2 parents 0c4a739 + cd309d8 commit 99586fc

File tree

5 files changed

+271
-0
lines changed

5 files changed

+271
-0
lines changed

‎backend/static/scss/_related_people.scss‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
@mixin create-grid($cols) {
2+
display: grid;
3+
gap: 1.5rem;
4+
grid-template-columns: repeat(1, 1fr);
5+
6+
@if $cols > 1 {
7+
@media (min-width: 768px) {
8+
grid-template-columns: repeat(if($cols > 2, 2, $cols), 1fr);
9+
}
10+
}
11+
12+
@if $cols > 2 {
13+
@media (min-width: 992px) {
14+
grid-template-columns: repeat($cols, 1fr);
15+
}
16+
}
17+
}
18+
19+
.related-people-card {
20+
border-radius: 1rem;
21+
border: none;
22+
overflow: hidden;
23+
max-width: 400px;
24+
width: 100%;
25+
min-height: 550px;
26+
display: flex;
27+
flex-direction: column;
28+
margin: 0 auto;
29+
padding: 1.75rem !important;
30+
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.10) !important;
31+
32+
.card-img {
33+
height: 27vh;
34+
width: 100%;
35+
object-fit: cover;
36+
}
37+
38+
.card-body {
39+
flex-grow: 1;
40+
display: flex;
41+
flex-direction: column;
42+
43+
padding: 28px;
44+
45+
margin-top: 0.5rem;
46+
}
47+
}
48+
49+
.button-group {
50+
a {
51+
@extend .rounded-3;
52+
@extend .px-3;
53+
font-size: 1.3rem;
54+
display: inline-flex;
55+
align-items: center;
56+
justify-content: center;
57+
width: 63px;
58+
height: 63px;
59+
}
60+
i {
61+
margin: 0 !important;
62+
}
63+
}
64+
65+
.profile-wrapper {
66+
position: relative;
67+
width: 100%;
68+
max-width: 250px;
69+
margin: 0 auto;
70+
71+
.shape-tl, .shape-br {
72+
position: absolute;
73+
border-radius: 10px;
74+
z-index: 0;
75+
}
76+
77+
.shape-tl {
78+
width: 50px;
79+
height: 80px;
80+
top: 25px;
81+
left: -25px;
82+
}
83+
84+
.shape-br {
85+
width: 150px;
86+
height: 160px;
87+
bottom: -30px;
88+
right: -40px;
89+
}
90+
91+
img {
92+
position: relative;
93+
z-index: 1;
94+
}
95+
}
96+
97+
.grid-1 { @include create-grid(1); }
98+
.grid-2 { @include create-grid(2); }
99+
.grid-3 { @include create-grid(3); }

‎backend/static/scss/main.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
@import "./footer";
2020
@import "./code_block";
2121
@import "./benefits_panel";
22+
@import "./related_people";
2223

2324
/* optional custom styles */
2425
.kitchensink-page {

‎cms_theme/cms_components.py‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -354,3 +354,100 @@ class Meta:
354354
label=_("Logo Image"),
355355
required=False,
356356
)
357+
358+
359+
@components.register
360+
class RelatedPeople(CMSFrontendComponent):
361+
"""Related People component"""
362+
363+
class Meta:
364+
name = _("Related People")
365+
render_template = "related_people/related_people.html"
366+
allow_children = True
367+
child_classes = [
368+
"HeadingPlugin",
369+
"PeopleCardPlugin",
370+
]
371+
mixins = ["Background", "Spacing", "Attributes"]
372+
373+
eyebrow_text = forms.CharField(
374+
label=_("Eyebrow text"),
375+
required=False,
376+
)
377+
378+
eyebrow_text_color = forms.ChoiceField(
379+
label=_("Eyebrow text color"),
380+
choices=settings.DJANGOCMS_FRONTEND_COLOR_STYLE_CHOICES,
381+
required=False,
382+
initial="default",
383+
widget=ColoredButtonGroup(attrs={"class": "flex-wrap"}),
384+
help_text=_("Eyebrow text color."),
385+
)
386+
387+
grid_columns = forms.ChoiceField(
388+
label=_("Grid columns"),
389+
choices=[
390+
("1", _("1")),
391+
("2", _("2")),
392+
("3", _("3")),
393+
],
394+
initial="3",
395+
help_text=_("Number of grid columns."),
396+
)
397+
398+
399+
@components.register
400+
class PeopleCard(CMSFrontendComponent):
401+
"""People card component"""
402+
403+
class Meta:
404+
name = _("People Card")
405+
render_template = "related_people/person_card.html"
406+
allow_children = True
407+
parent_classes = [
408+
"RelatedPeoplePlugin",
409+
]
410+
child_classes = [
411+
"ImagePlugin",
412+
"TextPlugin",
413+
"HeadingPlugin",
414+
"TextLinkPlugin",
415+
]
416+
mixins = ["Background", "Spacing", "Attributes"]
417+
418+
image_accent = forms.BooleanField(
419+
label=_("Image accent"),
420+
required=False,
421+
initial=False,
422+
help_text=_("Add image accent"),
423+
)
424+
425+
image_accent_color = forms.ChoiceField(
426+
label=_("Image accent color"),
427+
choices=settings.DJANGOCMS_FRONTEND_COLOR_STYLE_CHOICES,
428+
required=False,
429+
initial="primary",
430+
help_text=_("Image accent color."),
431+
widget=ColoredButtonGroup(attrs={"class": "flex-wrap"}),
432+
)
433+
434+
role = forms.CharField(
435+
label=_("Role"),
436+
required=False,
437+
help_text=_("Role displayed in people card."),
438+
)
439+
440+
description = HTMLFormField(
441+
label=_("Description"),
442+
required=False,
443+
help_text=_("Description displayed in people card."),
444+
)
445+
446+
text_color = forms.ChoiceField(
447+
label=_("Text Color"),
448+
choices=settings.DJANGOCMS_FRONTEND_COLOR_STYLE_CHOICES,
449+
required=False,
450+
initial="dark",
451+
help_text=_("Card content text color."),
452+
widget=ColoredButtonGroup(attrs={"class": "flex-wrap"}),
453+
)

‎cms_theme/templates/related_people/person_card.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{% load static frontend cms_tags cms_theme_tags thumbnail %}
2+
<div class="{{ instance.get_classes }} card related-people-card p-4 shadow-lg"
3+
{{ instance.get_attributes }}>
4+
{% with child_plugins=instance.child_plugin_instances %}
5+
{% for plugin in child_plugins %}
6+
{% if plugin.plugin_type == "ImagePlugin" %}
7+
{% if instance.image_accent %}
8+
<div class="profile-wrapper mb-4 mt-3">
9+
<div class="position-absolute {% if instance.image_accent_color %}bg-{{ instance.image_accent_color }}{% endif %} shape-tl z-0">
10+
</div>
11+
<div class="position-absolute {% if instance.image_accent_color %}bg-{{ instance.image_accent_color }}{% endif %} shape-br z-0">
12+
</div>
13+
{% render_plugin plugin %}
14+
</div>
15+
{% else %}
16+
{% render_plugin plugin %}
17+
{% endif %}
18+
{% endif %}
19+
{% endfor %}
20+
<div class="card-body p-0 mt-4 text-{{ instance.text_color }}">
21+
<div class="pt-1">
22+
<div class="text-uppercase mb-1 overline pb-2">contact:</div>
23+
{% with texts=instance.child_plugin_instances|filter_by_type:"TextPlugin,HeadingPlugin" %}
24+
{% if texts and texts|length > 0 %}
25+
{% for text in texts %}
26+
{% render_plugin text %}
27+
{% endfor %}
28+
{% endif %}
29+
{% endwith %}
30+
{% if instance.role %}
31+
<p>{{ instance.role }}</p>
32+
{% endif %}
33+
{% if instance.description %}{{ instance.description|safe }}{% endif %}
34+
{% with buttons=instance.child_plugin_instances|filter_by_type:"TextLinkPlugin" %}
35+
{% if buttons and buttons|length > 0 %}
36+
<div class="d-flex gap-2 button-group pt-1 mt-4">
37+
{% for button in buttons %}
38+
{% render_plugin button %}
39+
{% endfor %}
40+
</div>
41+
{% endif %}
42+
{% endwith %}
43+
</div>
44+
</div>
45+
{% endwith %}
46+
</div>

‎cms_theme/templates/related_people/related_people.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{% load static cms_tags frontend cms_theme_tags %}
2+
<section class="{{ instance.get_classes }}" {{ instance.get_attributes }}>
3+
<div class="container">
4+
<div class="mb-5 text-white text-center text-lg-start">
5+
{% if instance.eyebrow_text %}
6+
<h6 class="overline pb-2 {% if instance.eyebrow_text_color %}text-{{ instance.eyebrow_text_color }}{% endif %}">
7+
{{ instance.eyebrow_text }}
8+
</h6>
9+
{% endif %}
10+
{% with heading_texts=instance.child_plugin_instances|filter_by_type:"HeadingPlugin" %}
11+
{% if heading_texts %}
12+
{% for plugin in heading_texts %}
13+
{% render_plugin plugin %}
14+
{% endfor %}
15+
{% endif %}
16+
{% endwith %}
17+
</div>
18+
<div class="grid-{{ instance.grid_columns }}">
19+
{% with person_cards=instance.child_plugin_instances|filter_by_type:"PeopleCardPlugin" %}
20+
{% if person_cards %}
21+
{% for plugin in person_cards %}
22+
{% render_plugin plugin %}
23+
{% endfor %}
24+
{% endif %}
25+
{% endwith %}
26+
</div>
27+
</div>
28+
</section>

0 commit comments

Comments
 (0)