Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate jumbo hero pattern from cf.gov to design system #6689

Merged
merged 8 commits into from
Nov 2, 2021
Merged

Migrate jumbo hero pattern from cf.gov to design system #6689

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d04fc84
Replace jumbo hero CSS with new 50/50 hero
contolini Sep 8, 2021
e2884ea
Move jumbo hero inline styles out of homepage template
contolini Sep 9, 2021
c257211
Rename 50/50 hero to jumbo hero
contolini Sep 13, 2021
e304aab
Migrate jumbo hero CSS rules to design system repo
contolini Sep 17, 2021
17869d3
Revert wagtail image placeholder flag
contolini Sep 17, 2021
37ecd15
Add wagtail block boolean option
contolini Sep 30, 2021
b778d31
Remove unnecessary hero padding
contolini Oct 31, 2021
cbb9d87
Add jumbo hero migration
contolini Nov 2, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 12 additions & 4 deletions cfgov/jinja2/v1/_includes/molecules/hero.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,9 @@

value.is_overlay: A boolean to change the hero to an overlay hero.

value.is_50_50: A boolean to split the hero's heading/image area
50/50 and add a border around the container.

value.is_jumbo: A boolean that indicates whether the image is
extra large (jumbo).

Expand All @@ -54,9 +57,10 @@
<section class="m-hero
{{- ' m-hero__knockout' if value.is_white_text else '' }}
{{- ' m-hero__bleeding' if value.is_bleeding else '' }}
{{- ' m-hero__overlay' if ( value.is_overlay or value.is_jumbo ) else '' }}
{{- ' m-hero__overlay' if value.is_overlay else '' }}
{{- ' m-hero__50-50' if value.is_50_50 else '' }}
{{- ' m-hero__jumbo' if value.is_jumbo else '' }}">
<div class="m-hero_wrapper wrapper">
<div class="m-hero_wrapper">
<div class="m-hero_text">
<h1 class="m-hero_heading">{{ value.heading | safe }}</h1>
<div class="m-hero_subhead">
Expand All @@ -74,7 +78,10 @@ <h1 class="m-hero_heading">{{ value.heading | safe }}</h1>
these styles are set in an element to both contain them and make
it clear where to change them in the future. #}
<style>
.m-hero {
{# If the hero is in 50/50 mode and constrained by a border, only
the inner wrapper container gets the background color to prevent
it from bleeding horizontally to the edges of the screen. #}
.m-hero{%- if value.is_50_50 %}_wrapper{% endif %} {
{%- if value.background_color %}
background-color: {{ value.background_color }};
{% endif -%}
Expand All @@ -97,9 +104,10 @@ <h1 class="m-hero_heading">{{ value.heading | safe }}</h1>
padding-bottom: {{ img.height / img.width * 100 }}%;
}

.m-hero__jumbo .m-hero_wrapper,
.m-hero__50-50 .m-hero_wrapper,
.m-hero__overlay .m-hero_wrapper {
background-image: url('{{ img.url }}');
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='{{ img.url }}',
sizingMethod='scale');
Expand Down
45 changes: 0 additions & 45 deletions cfgov/unprocessed/css/enhancements/layout.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -276,51 +276,6 @@
padding-left: unit( 18px / @base-font-size-px, em );
}


// Fix hero padding on medium screens to spec in Design System
.respond-to-min( @bp-sm-min, {
.m-hero_wrapper {
padding-right: unit( ( @grid_gutter-width / 2 ) / @base-font-size-px, em );
padding-left: unit( ( @grid_gutter-width / 2 ) / @base-font-size-px, em );
}
} );


// Jumbo hero for CampaignPages and the HomePage
.m-hero__jumbo {
.m-hero_subhead {
.lead-paragraph();
}

.respond-to-min( @bp-sm-min, {
// margin-top: unit( ( -@grid_gutter-width * 1.5 ) / @base-font-size-px, em);
// margin-right: unit( -@grid_gutter-width / @base-font-size-px, em);
// margin-left: unit( -@grid_gutter-width / @base-font-size-px, em);

> .m-hero_wrapper {
height: 290px;
}

.m-hero_heading {
.heading-1();
}

.m-hero_subhead {
.heading-3();
}
} );

.respond-to-min( @bp-lg-min, {
.m-hero_heading {
.superheading();
}
.m-hero_subhead {
.heading-2();
}
} );
}


// Center content and bleed full-width images into gutters
// Used on our story pages
.content__center-image-bleed {
Expand Down
10 changes: 10 additions & 0 deletions cfgov/v1/atomic_elements/molecules.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,16 @@ def is_jumbo(self):


class JumboHero(AbstractHero):
is_50_50 = blocks.BooleanBlock(
label="50/50 layout",
required=False,
help_text=mark_safe(
'<b>Optional.</b> Set both the hero text and image to 50% width, '
'prevent the background color from appearing in the left/right '
'margins of the hero, and also add a border to the hero area. '
'Requires the uploaded large image to be 755px x 575px.')
)

class Meta:
value_class = JumboHeroValue

Expand Down
7 changes: 0 additions & 7 deletions cfgov/v1/jinja2/v1/home_page/home_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,6 @@
{% block css %}
{{ super() }}
<style>
/* TODO: remove inline styles when new homepage design is finalized in 2021. */
.m-hero_wrapper {
/* #b4b5b6 is @gray-40 */
border-right: 1px solid #b4b5b6;
border-bottom: 1px solid #b4b5b6;
border-left: 1px solid #b4b5b6;
}
/* Swap the homepage hero's white text to black on small screens */
@media only all and (max-width: 37.5625em) {
.m-hero__knockout {
Expand Down
Loading