custom article hero background color + dark/light text (#8507)
* almost done, just need to figure out how to get template to work with tailwind class * updated divs to use inline styling for background color * feedback from PR * passing tests * updated breadcrumb coloring
This commit is contained in:
Daniel Miranda
GitHub
Родитель
b9c8c4879e
Коммит
a5e9e7bff1
|
|
@ -219,6 +219,7 @@ INSTALLED_APPS = list(filter(None, [
|
|||
'wagtail.contrib.modeladmin',
|
||||
'wagtail.contrib.frontend_cache',
|
||||
'wagtail.contrib.settings',
|
||||
'wagtail_color_panel',
|
||||
'wagtailmedia',
|
||||
'wagtailinventory',
|
||||
'wagtail_footnotes',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,24 @@
|
|||
# Generated by Django 3.2.12 on 2022-04-04 22:11
|
||||
|
||||
from django.db import migrations, models
|
||||
import wagtail_color_panel.fields
|
||||
|
||||
|
||||
class Migration(migrations.Migration):
|
||||
|
||||
dependencies = [
|
||||
('wagtailpages', '0012_add_image_grid_block_to_blog'),
|
||||
]
|
||||
|
||||
operations = [
|
||||
migrations.AddField(
|
||||
model_name='articlepage',
|
||||
name='hero_background_color',
|
||||
field=wagtail_color_panel.fields.ColorField(default='#ffffff', help_text='Please check your chosen background color with https://webaim.org/resources/contrastchecker/ to see if your text and background color pass accessibility standards. If your text is black enter #000000 in the Foreground Color box and #FFFFFF if your text is white. After you have selected your background color, please contact the design team for a design review!', max_length=7),
|
||||
),
|
||||
migrations.AddField(
|
||||
model_name='articlepage',
|
||||
name='hero_text_color',
|
||||
field=models.CharField(choices=[('black', 'Black'), ('white', 'White')], default='black', help_text='For proper contrast, we recommend using “White” for dark background colors, and “Black” for light background colors.', max_length=25),
|
||||
),
|
||||
]
|
||||
|
|
@ -7,6 +7,8 @@ from wagtail.admin.edit_handlers import FieldPanel, InlinePanel, MultiFieldPanel
|
|||
from wagtail.documents.edit_handlers import DocumentChooserPanel
|
||||
from wagtail.images.edit_handlers import ImageChooserPanel
|
||||
from wagtail.snippets.edit_handlers import SnippetChooserPanel
|
||||
from wagtail_color_panel.fields import ColorField
|
||||
from wagtail_color_panel.edit_handlers import NativeColorPanel
|
||||
from django import forms
|
||||
|
||||
from wagtail_localize.fields import SynchronizedField, TranslatableField
|
||||
|
|
@ -77,13 +79,41 @@ class ArticlePage(FoundationMetadataPageMixin, Page):
|
|||
'click "Advanced", "Distribution", '
|
||||
'and "Video File Links". Copy and paste the link here.'
|
||||
)
|
||||
|
||||
HERO_CONTENT_IMAGE = 'image'
|
||||
HERO_CONTENT_VIDEO = 'video'
|
||||
|
||||
displayed_hero_content = models.CharField(
|
||||
max_length=25,
|
||||
choices=[
|
||||
('image', 'Image'),
|
||||
('video', 'Video'),
|
||||
(HERO_CONTENT_IMAGE, 'Image'),
|
||||
(HERO_CONTENT_VIDEO, 'Video'),
|
||||
],
|
||||
default='image'
|
||||
default=HERO_CONTENT_IMAGE
|
||||
)
|
||||
|
||||
hero_background_color = ColorField(
|
||||
default='#ffffff',
|
||||
help_text='Please check your chosen background color with '
|
||||
'https://webaim.org/resources/contrastchecker/ to see if your text and background '
|
||||
'color pass accessibility standards. If your text is black '
|
||||
'enter #000000 in the Foreground Color box and #FFFFFF if '
|
||||
'your text is white. After you have selected your background color, '
|
||||
'please contact the design team for a design review!'
|
||||
)
|
||||
|
||||
HERO_TEXT_COLOR_DARK = "black"
|
||||
HERO_TEXT_COLOR_LIGHT = "white"
|
||||
|
||||
hero_text_color = models.CharField(
|
||||
max_length=25,
|
||||
choices=[
|
||||
(HERO_TEXT_COLOR_DARK, 'Black'),
|
||||
(HERO_TEXT_COLOR_LIGHT, 'White'),
|
||||
],
|
||||
default=HERO_TEXT_COLOR_DARK,
|
||||
help_text='For proper contrast, we recommend using “White” for dark background colors, '
|
||||
'and “Black” for light background colors.'
|
||||
)
|
||||
|
||||
subtitle = models.CharField(
|
||||
|
|
@ -106,25 +136,34 @@ class ArticlePage(FoundationMetadataPageMixin, Page):
|
|||
related_name='+',
|
||||
)
|
||||
|
||||
HERO_LAYOUT_FULL_SCREEN = 'full_screen'
|
||||
HERO_LAYOUT_IMAGE_LEFT = 'image_left'
|
||||
HERO_LAYOUT_IMAGE_RIGHT = 'image_right'
|
||||
HERO_LAYOUT_STATIC = 'static'
|
||||
|
||||
hero_layout = models.CharField(
|
||||
max_length=25,
|
||||
choices=[
|
||||
('full_screen', 'Full Screen'),
|
||||
('image_left', 'Image Left'),
|
||||
('image_right', 'Image Right'),
|
||||
('static', 'Static'),
|
||||
(HERO_LAYOUT_FULL_SCREEN, 'Full Screen'),
|
||||
(HERO_LAYOUT_IMAGE_LEFT, 'Image Left'),
|
||||
(HERO_LAYOUT_IMAGE_RIGHT, 'Image Right'),
|
||||
(HERO_LAYOUT_STATIC, 'Static'),
|
||||
],
|
||||
default='static',
|
||||
default=HERO_LAYOUT_STATIC,
|
||||
)
|
||||
|
||||
HERO_BTN_STYLE_PRIMARY = 'primary'
|
||||
HERO_BTN_STYLE_SECONDARY = 'secondary'
|
||||
HERO_BTN_STYLE_TERTIARY = 'tertiary'
|
||||
|
||||
download_button_style = models.CharField(
|
||||
max_length=25,
|
||||
choices=[
|
||||
('primary', 'Primary'),
|
||||
('secondary', 'Secondary'),
|
||||
('tertiary', 'Tertiary'),
|
||||
(HERO_BTN_STYLE_PRIMARY, 'Primary'),
|
||||
(HERO_BTN_STYLE_SECONDARY, 'Secondary'),
|
||||
(HERO_BTN_STYLE_TERTIARY, 'Tertiary'),
|
||||
],
|
||||
default='primary',
|
||||
default=HERO_BTN_STYLE_PRIMARY,
|
||||
)
|
||||
|
||||
# Since wagtail cannot save SVG files as images,
|
||||
|
|
@ -162,10 +201,12 @@ class ArticlePage(FoundationMetadataPageMixin, Page):
|
|||
], heading="Table of Content Thumbnail"),
|
||||
MultiFieldPanel([
|
||||
FieldPanel('hero_layout', widget=forms.RadioSelect),
|
||||
FieldPanel("show_authors"),
|
||||
ImageChooserPanel("hero_image"),
|
||||
FieldPanel("hero_video"),
|
||||
FieldPanel('show_authors'),
|
||||
ImageChooserPanel('hero_image'),
|
||||
FieldPanel('hero_video'),
|
||||
FieldPanel('displayed_hero_content', widget=forms.RadioSelect),
|
||||
NativeColorPanel('hero_background_color'),
|
||||
FieldPanel('hero_text_color', widget=forms.RadioSelect),
|
||||
FieldPanel('subtitle'),
|
||||
FieldPanel('secondary_subtitle'),
|
||||
FieldPanel('publication_date'),
|
||||
|
|
|
|||
|
|
@ -4,12 +4,16 @@
|
|||
|
||||
{% with control_btn_classes="ml-auto tw-opacity-80 hover:tw-opacity-100 tw-hidden" full_screen_content_classes="tw-absolute tw-min-w-full tw-min-h-full tw-max-w-none tw-top-0" two_col_content_classes="tw-h-full tw-w-full tw-object-center tw-object-cover" %}
|
||||
|
||||
{% comment %}
|
||||
We are using inline styling to update the hero sections background color as this is selected by the user on the cms,
|
||||
and tailwind would not pick it up in time to render correctly if we did it through a tw-class.
|
||||
{% endcomment %}
|
||||
|
||||
{% if page.hero_layout != "full_screen" %}
|
||||
{% if page.hero_layout != page.HERO_LAYOUT_FULL_SCREEN %}
|
||||
|
||||
<div class="article-hero tw-relative tw-flex tw-flex-col large:tw-flex-row tw-h-full tw-overflow-hidden {% if not get_titles %} tw-mb-[0px] medium:tw-mb-[100px] {% endif %}">
|
||||
<div class="article-hero tw-relative tw-flex tw-flex-col large:tw-flex-row tw-h-full tw-overflow-hidden {% if not get_titles %} tw-mb-[0px] medium:tw-mb-[100px] {% endif %}" style="background: {{page.hero_background_color}}">
|
||||
<div class="tw-w-full large:tw-w-1/2 tw-min-h-full {% if page.hero_layout == "image_right" %} tw-order-last {% endif %}">
|
||||
{% if page.displayed_hero_content == "video" %}
|
||||
{% if page.displayed_hero_content == page.HERO_CONTENT_VIDEO %}
|
||||
<video class="hero-video {{two_col_content_classes}}" playsinline muted loop preload>
|
||||
<source src="{{ page.hero_video }}" type="video/mp4">
|
||||
</video>
|
||||
|
|
@ -18,10 +22,10 @@
|
|||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="tw-w-full large:tw-w-1/2 tw-min-h-full tw-py-[65px] large:tw-pb-[184px] large:tw-pt-[137px] {% if page.hero_layout == "image_left" %} tw-order-last tw-pb-[100px] large:tw-pb-[137px] {% if not get_titles %} tw-pb-[0px] {% endif %}{% endif %}}">
|
||||
<div class="tw-w-full large:tw-w-1/2 tw-min-h-full tw-py-[65px] large:tw-pb-[184px] large:tw-pt-[137px] {% if page.hero_layout == "image_left" %} tw-order-last tw-pb-[100px] {% if not get_titles %} tw-pb-[0px] {% endif %}{% endif %}">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="tw-px-3 large:tw-px-[3.75rem] tw-max-w-[650px]">
|
||||
<div class="tw-px-5 large:tw-px-[3.75rem] tw-max-w-[650px] {% if page.hero_layout == "image_right" %} large:tw-ml-auto {% endif %}">
|
||||
{% include "./article_hero_guts.html" %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -32,8 +36,8 @@
|
|||
|
||||
{% else %}
|
||||
|
||||
<div class="article-hero tw-relative tw-flex tw-flex-col tw-items-center tw-justify-center tw-h-full tw-overflow-hidden">
|
||||
{% if page.displayed_hero_content == "video" %}
|
||||
<div class="article-hero tw-relative tw-flex tw-flex-col tw-items-center tw-justify-center tw-h-full tw-overflow-hidden " style="background: {{page.hero_background_color}}">
|
||||
{% if page.displayed_hero_content == page.HERO_CONTENT_VIDEO %}
|
||||
<video class="hero-video {{full_screen_content_classes}}" autoplay loop muted>
|
||||
<source src="{{ page.hero_video }}" type="video/mp4">
|
||||
</video>
|
||||
|
|
|
|||
|
|
@ -3,13 +3,13 @@
|
|||
|
||||
|
||||
|
||||
<div class="article-hero-content">
|
||||
<div class="article-hero-content {% if page.hero_text_color == page.HERO_TEXT_COLOR_LIGHT %} tw-dark {% endif %}">
|
||||
{% if is_publication_article or is_publication_page %}
|
||||
<div class="mb-2 body-small publication-breadcrumb">
|
||||
{% for entry in self.breadcrumb_list %}
|
||||
{% with parent_page=entry.localized %}
|
||||
<a href="{{ parent_page.url }}" class="body-small">{{ parent_page.title }}</a>
|
||||
<span class='body-small'> › </span>
|
||||
<a href="{{ parent_page.url }}" class="body-small {% if page.hero_text_color == page.HERO_TEXT_COLOR_DARK %} tw-text-black {% endif %}">{{ parent_page.title }}</a>
|
||||
<span class='body-small {% if page.hero_text_color == page.HERO_TEXT_COLOR_LIGHT %} tw-text-gray-20 {% endif %}' > › </span>
|
||||
{% endwith %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
|
@ -19,13 +19,13 @@
|
|||
</h1>
|
||||
|
||||
{% if page.subtitle %}
|
||||
<h2 class="tw-mt-4 body-large">
|
||||
<h2 class="tw-mt-4 tw-body-large">
|
||||
{{ page.subtitle }}
|
||||
</h2>
|
||||
{% endif %}
|
||||
|
||||
{% if page.secondary_subtitle or page.publication_date %}
|
||||
<div class="mt-2 mb-4 body-small publication-secondary-subtitle">
|
||||
<div class="mt-2 mb-4 tw-body-small publication-secondary-subtitle {% if page.hero_text_color == page.HERO_TEXT_COLOR_DARK %} tw-text-gray-80 {% else %} tw-text-gray-20 {% endif %}">
|
||||
{% if page.secondary_subtitle %}
|
||||
{{ page.secondary_subtitle }}
|
||||
{% endif %}
|
||||
|
|
@ -74,11 +74,11 @@
|
|||
|
||||
{% with btn_setting=page.download_button_style primary_icon_class="tw-invert dark:group-hover:tw-invert-0" secondary_icon_class="group-hover:tw-invert dark:tw-invert dark:group-hover:tw-invert-0" tertiary_btn_class="tw-text-black tw-font-light tw-underline hover:tw-opacity-50" %}
|
||||
|
||||
<a class="tw-inline-flex tw-group {% if btn_setting == "primary" %} tw-btn-primary {% elif btn_setting == "secondary" %} tw-btn-secondary {% else %} {{ tertiary_btn_class }} {% endif %}"
|
||||
<a class="tw-inline-flex tw-group {% if btn_setting == page.HERO_BTN_STYLE_PRIMARY %} tw-btn-primary {% elif btn_setting == page.HERO_BTN_STYLE_SECONDARY %} tw-btn-secondary {% else %} {{ tertiary_btn_class }} {% endif %}"
|
||||
href="{{ download_file.url }}" download>
|
||||
<img
|
||||
src=" {% if page.download_button_icon %} {{ page.download_button_icon.url }} {% else %} {% static '_images/glyphs/download-file.svg' %} {% endif %}"
|
||||
class='tw-h-[18px] tw-w-[18px] tw-mr-3 tw-mt-[1px] tw-brightness-0 {% if btn_setting == "primary"%} {{primary_icon_class}} {% elif btn_setting == "secondary"%} {{secondary_icon_class}} {% endif %}'/>
|
||||
class='tw-h-[18px] tw-w-[18px] tw-mr-3 tw-mt-[1px] tw-brightness-0 {% if btn_setting == page.HERO_BTN_STYLE_PRIMARY %} {{primary_icon_class}} {% elif btn_setting == page.HERO_BTN_STYLE_SECONDARY %} {{secondary_icon_class}} {% endif %}'/>
|
||||
{% trans "Download PDF" %}
|
||||
{% if download_file.file_size %}
|
||||
<span class="tw-font-thin tw-ml-2">({{ download_file.file_size|filesizeformat }})</span>
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ requests
|
|||
social-auth-app-django
|
||||
wagtail-airtable
|
||||
wagtail==2.16.1
|
||||
wagtail-color-panel
|
||||
wagtail-factories
|
||||
wagtail-localize==1.1
|
||||
wagtail-localize-git==0.12.0
|
||||
|
|
|
|||
|
|
@ -228,6 +228,7 @@ wagtail==2.16.1
|
|||
# via
|
||||
# -r requirements.in
|
||||
# wagtail-airtable
|
||||
# wagtail-color-panel
|
||||
# wagtail-factories
|
||||
# wagtail-footnotes
|
||||
# wagtail-inventory
|
||||
|
|
@ -237,6 +238,8 @@ wagtail==2.16.1
|
|||
# wagtailmedia
|
||||
wagtail-airtable==0.2.1
|
||||
# via -r requirements.in
|
||||
wagtail-color-panel==1.3.1
|
||||
# via -r requirements.in
|
||||
wagtail-factories==2.0.1
|
||||
# via -r requirements.in
|
||||
wagtail-footnotes @ git+https://github.com/MozillaFoundation/wagtail-footnotes.git@localized-footnotes
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче