diff --git a/network-api/networkapi/mozfest/templates/mozfest/mozfest-base.html b/network-api/networkapi/mozfest/templates/mozfest/mozfest-base.html index 4b1f963fb7b..4dd99228103 100644 --- a/network-api/networkapi/mozfest/templates/mozfest/mozfest-base.html +++ b/network-api/networkapi/mozfest/templates/mozfest/mozfest-base.html @@ -32,26 +32,27 @@ {% block content %} {% block secondary_nav %}{% endblock %} -
-
+ {% if page.signup != None %} - {# Use a two-colum layout #} -
- {% include "partials/streamfield.html" with twocolumn=True %} + {# Use a two-column layout #} +
+
+
+ {% include "partials/streamfield.html" with twocolumn=True %} +
+ {% block cta %}{% include "partials/signup.html" %}{% endblock %} +
- {% block cta %}{% include "partials/signup.html" %}{% endblock %} - {% else %} {# Single column layout #} -
+
{% include "partials/streamfield.html" %}
{% endif %} -
-
+ {% endblock %} diff --git a/network-api/networkapi/mozfest/templates/partials/streamfield.html b/network-api/networkapi/mozfest/templates/partials/streamfield.html index 749f53e43a9..658775f1f84 100644 --- a/network-api/networkapi/mozfest/templates/partials/streamfield.html +++ b/network-api/networkapi/mozfest/templates/partials/streamfield.html @@ -1,9 +1,19 @@ {% load wagtailcore_tags %} {% for block in page.body %} - {% if block.block_type == 'heading' %} -

{{ block.value }}

- {% else %} - {% include_block block %} - {% endif %} +{% if block.block_type == 'paragraph'%} +
+
+
+ {% if block.block_type == 'heading' %} +

{{ block.value }}

+ {% else %} + {% include_block block with parent_page=page page_type="blog"%} + {% endif %} +
+
+
+{% else %} +{% include_block block with parent_page=page page_type="blog" %} +{% endif %} {% endfor %} diff --git a/network-api/networkapi/wagtailpages/migrations/0010_blogpage_hero_image.py b/network-api/networkapi/wagtailpages/migrations/0010_blogpage_hero_image.py new file mode 100644 index 00000000000..6493d6735b3 --- /dev/null +++ b/network-api/networkapi/wagtailpages/migrations/0010_blogpage_hero_image.py @@ -0,0 +1,20 @@ +# Generated by Django 3.0.14 on 2021-06-18 20:58 + +from django.db import migrations, models +import django.db.models.deletion + + +class Migration(migrations.Migration): + + dependencies = [ + ('wagtailimages', '0023_add_choose_permissions'), + ('wagtailpages', '0009_auto_20210603_1034'), + ] + + operations = [ + migrations.AddField( + model_name='blogpage', + name='hero_image', + field=models.ForeignKey(blank=True, help_text='Image for the blog page hero section.', null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='hero_banner_image', to='wagtailimages.Image', verbose_name='Hero Image'), + ), + ] diff --git a/network-api/networkapi/wagtailpages/pagemodels/blog/blog.py b/network-api/networkapi/wagtailpages/pagemodels/blog/blog.py index de431c73549..059fb68f703 100644 --- a/network-api/networkapi/wagtailpages/pagemodels/blog/blog.py +++ b/network-api/networkapi/wagtailpages/pagemodels/blog/blog.py @@ -13,6 +13,7 @@ from wagtail.core.models import Orderable, Page from wagtail.core.fields import StreamField from wagtail.snippets.edit_handlers import SnippetChooserPanel +from wagtail.images.edit_handlers import ImageChooserPanel from taggit.models import TaggedItemBase from modelcluster.fields import ParentalKey, ParentalManyToManyField @@ -88,6 +89,22 @@ class BlogPage(FoundationMetadataPageMixin, Page): zen_nav = True + hero_image = models.ForeignKey( + 'wagtailimages.Image', + null=True, + blank=True, + on_delete=models.SET_NULL, + related_name='hero_banner_image', + verbose_name='Hero Image', + help_text='Image for the blog page hero section.', + ) + hero_video = models.CharField( + blank=True, + max_length=500, + help_text='URL to video for blog page hero section. (Will take priority over hero image if both entered)', + + ) + feature_comments = models.BooleanField( default=False, help_text='Check this box to add a comment section for this blog post.', @@ -101,6 +118,8 @@ class BlogPage(FoundationMetadataPageMixin, Page): heading="Author(s)" ), FieldPanel('category'), + FieldPanel('hero_video'), + ImageChooserPanel('hero_image'), StreamFieldPanel('body'), FieldPanel('feature_comments'), ] diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/article_page.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/article_page.html index 48d78e81aee..662d1c8ba19 100644 --- a/network-api/networkapi/wagtailpages/templates/wagtailpages/article_page.html +++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/article_page.html @@ -15,7 +15,7 @@
-
+
{% if page.show_side_share_buttons %}
@@ -33,19 +33,30 @@
{% endif %} - - - {% for block in page.body %} - {% comment %} - `is_last` is used to determine if a streamfield should close - after breaking out of its parent container - {% endcomment %} - {% include_block block with is_last=forloop.last page_type="article" %} - {% endfor %}
+
+ {% for block in page.body %} + {% if block.block_type == 'content'%} +
+
+
+ {% if block.block_type == 'heading' %} +

{{ block.value }}

+ {% else %} + {% include_block block with page_type="article" %} + {% endif %} +
+
+
+ {% else %} + {% include_block block with parent_page=page page_type="article" %} + {% endif %} + {% endfor %} +
+ {% if page.footnotes_list %} {% include "fragments/footnotes.html" %} {% endif %} diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/advanced_table_block.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/advanced_table_block.html index 97b98f9d45b..c02666c29b4 100644 --- a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/advanced_table_block.html +++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/advanced_table_block.html @@ -1,52 +1,59 @@ {% load wagtailcore_tags %} -
- - {% if self.caption %} - - {% endif %} - {# Loop through every row #} - {% for row in self.table %} - {# If the "header" is checked, the first row will be a with a highlighted background #} - {% if self.header and forloop.first %} - - - {% for cell in row.value %} - - {% endfor %} - - - {% else %} - {# For every other row that's not a header... #} - - {% for cell in row.value %} - {# If the first cell is supposed to be highlighted; when "column" is checked #} - {% if self.column %} - +
+
+
+
+
{{ self.caption }}
- {{ cell.value.content|richtext }} -
- {{ cell.value.content|richtext }} -
+ {% if self.caption %} + + {% endif %} + + {# Loop through every row #} + {% for row in self.table %} + {# If the "header" is checked, the first row will be a with a highlighted background #} + {% if self.header and forloop.first %} + + + {% for cell in row.value %} + + {% endfor %} + + {% else %} - {# For every other cell; when "column" is not checked #} - + {# For every other row that's not a header... #} + + {% for cell in row.value %} + {# If the first cell is supposed to be highlighted; when "column" is checked #} + {% if self.column %} + + {% else %} + {# For every other cell; when "column" is not checked #} + + {% endif %} + {% endfor %} + {% endif %} {% endfor %} - - {% endif %} - {% endfor %} -
{{ self.caption }}
+ {{ cell.value.content|richtext }} +
- {{ cell.value.content|richtext }} -
+ {{ cell.value.content|richtext }} + + {{ cell.value.content|richtext }} +
+ +
+
+
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/airtable_block.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/airtable_block.html index e08c34fa5ee..341a5daf6c9 100644 --- a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/airtable_block.html +++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/airtable_block.html @@ -1 +1,10 @@ - +
+
+
+ +
+
+
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/annotated_image_block.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/annotated_image_block.html index 66f50640e02..e30b7596a28 100644 --- a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/annotated_image_block.html +++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/annotated_image_block.html @@ -2,29 +2,23 @@ {% image value.image original as img %} -{% if value.wide_image %} - - - +
+
+
+
+ {{ value.altText }} + {% if value.caption %} +
+ {% if value.captionURL %}{% endif %} + {{ value.caption }} + {% if value.captionURL %}{% endif %} +
+ {% endif %} +
+
+
+
-
-{% endif %} -
- {{ value.altText }} - {% if value.caption %} -
- {% if value.captionURL %}{% endif %} - {{ value.caption }} - {% if value.captionURL %}{% endif %} -
- {% endif %} -
-{% if value.wide_image %} -
-
-
-
-{% endif %} diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/article_blockquote_block.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/article_blockquote_block.html index 7e1f6e03917..47ebc40796b 100644 --- a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/article_blockquote_block.html +++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/article_blockquote_block.html @@ -1,3 +1,10 @@ -
- {{ self }} + +
+
+
+
+ {{ self }} +
+
+
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/article_double_image_block.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/article_double_image_block.html index 346d49376f9..7fc874de028 100644 --- a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/article_double_image_block.html +++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/article_double_image_block.html @@ -1,37 +1,38 @@ {% load wagtailcore_tags wagtailimages_tags remove_richtext_wrapping %} -
-
-
-
+
+
+
+
+
+
- {% image self.image_1 fill-445x324 as img1 %} -
- {{ img1.alt }} - {% if self.image_1_caption %} -
- {{ self.image_1_caption|richtext|remove_wrapping|safe }} -
- {% endif %} -
+ {% image self.image_1 fill-445x324 as img1 %} +
+ {{ img1.alt }} + {% if self.image_1_caption %} +
+ {{ self.image_1_caption|richtext|remove_wrapping|safe }} +
+ {% endif %} +
-
-
+
+
- {% image self.image_2 fill-445x324 as img2 %} -
- {{ img2.alt }} - {% if self.image_2_caption %} -
- {{ self.image_2_caption|richtext|remove_wrapping|safe }} -
- {% endif %} -
+ {% image self.image_2 fill-445x324 as img2 %} +
+ {{ img2.alt }} + {% if self.image_2_caption %} +
+ {{ self.image_2_caption|richtext|remove_wrapping|safe }} +
+ {% endif %} +
+
+
-{% if not is_last %} - {# Re-start the same containing row thats on the main article_page.html file #} -
-{% endif %} +
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/article_full_width_image_block.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/article_full_width_image_block.html index b9bc384f139..dbc54993666 100644 --- a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/article_full_width_image_block.html +++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/article_full_width_image_block.html @@ -1,33 +1,27 @@ {% load wagtailimages_tags wagtailcore_tags custom_image_tags remove_richtext_wrapping %} - {% comment %} End the Article Block bootstrap grid {% endcomment %} -
-
-
-
- {% custom_image_height self.image self.image_height as img %} -
- {{ img.alt }} - {% if self.caption %} -
-
-
+
+
+
+
+ {% custom_image_height self.image self.image_height as img %} +
+ {{ img.alt }} + {% if self.caption %} +
+
+
-
- {{ self.caption|richtext|remove_wrapping|safe }} -
+
+ {{ self.caption|richtext|remove_wrapping|safe }} +
+
+
-
-
- {% endif %} -
+ {% endif %} + +
+
- - {% comment %} Restart the Article Block bootstrap grid. If it is the last item, hide the empty container to keep from pushing footer down a couple px{% endcomment %} -
-
-
- - - +
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/article_image_block.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/article_image_block.html index 22dd1977623..58d0930f93b 100644 --- a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/article_image_block.html +++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/article_image_block.html @@ -1,23 +1,19 @@ {% load wagtailimages_tags wagtailcore_tags remove_richtext_wrapping %} -{% comment %} We need to break out of the main container and re-open the container at the end {% endcomment %} -{% if self.wide_image %} -
-{% endif %} - -
- {% comment %}Use a 2x resolution image{% endcomment %} - {% image self.image width-1840 as img %} -
- {% if self.alt_text %}{{ self.alt_text }}{% else %}{{ img.alt }}{% endif %} - {% if self.caption %} +
+
+
+ {% comment %}Use a 2x resolution image{% endcomment %} + {% image self.image width-1840 as img %} +
+ {% if self.alt_text %}{{ self.alt_text }}{% else %}{{ img.alt }}{% endif %} + {% if self.caption %}
{{ self.caption|richtext|remove_wrapping|safe }}
- {% endif %} -
+ {% endif %} +
+
+
- -{% if self.wide_image %} -
-{% endif %} diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/article_table_block.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/article_table_block.html index 8b698bd64c9..a7f757bf9c7 100644 --- a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/article_table_block.html +++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/article_table_block.html @@ -1,71 +1,70 @@ {% load table_block_tags %} -
-
- -
- {% comment %} - Modified table template comes from "table_block/blocks/table.html" - {% endcomment %} - - {% if table_caption %} - - {% endif %} - {% if table_header %} - - - {% for column in table_header %} - {% with forloop.counter0 as col_index %} - - {% endwith %} - {% endfor %} - - - {% endif %} - - {% for row in data %} - {% with forloop.counter0 as row_index %} - - {% for column in row %} - {% with forloop.counter0 as col_index %} - {% if first_col_is_header and forloop.first %} - - {% else %} - + {% endwith %} + {% endfor %} + +
{{ table_caption }}
- {% if column.strip %} - {% if html_renderer %} - {{ column.strip|safe|linebreaksbr }} - {% else %} - {{ column.strip|linebreaksbr }} - {% endif %} - {% endif %} -
- {% if column.strip %} - {% if html_renderer %} - {{ column.strip|safe|linebreaksbr }} - {% else %} - {{ column.strip|linebreaksbr }} - {% endif %} - {% endif %} - - {% if column.strip %} - {% if html_renderer %} - {{ column.strip|safe|linebreaksbr }} +
+
+
+
+ {% comment %} + Modified table template comes from "table_block/blocks/table.html" + {% endcomment %} + + {% if table_caption %} + + {% endif %} + {% if table_header %} + + + {% for column in table_header %} + {% with forloop.counter0 as col_index %} + + {% endwith %} + {% endfor %} + + + {% endif %} + + {% for row in data %} + {% with forloop.counter0 as row_index %} + + {% for column in row %} + {% with forloop.counter0 as col_index %} + {% if first_col_is_header and forloop.first %} + {% else %} - {{ column.strip|linebreaksbr }} + {% endif %} - {% endif %} - - {% endif %} - {% endwith %} - {% endfor %} - - {% endwith %} - {% endfor %} - -
{{ table_caption }}
+ {% if column.strip %} + {% if html_renderer %} + {{ column.strip|safe|linebreaksbr }} + {% else %} + {{ column.strip|linebreaksbr }} + {% endif %} + {% endif %} +
+ {% if column.strip %} + {% if html_renderer %} + {{ column.strip|safe|linebreaksbr }} + {% else %} + {{ column.strip|linebreaksbr }} + {% endif %} + {% endif %} + + {% if column.strip %} + {% if html_renderer %} + {{ column.strip|safe|linebreaksbr }} + {% else %} + {{ column.strip|linebreaksbr }} + {% endif %} + {% endif %} +
-
+ {% endwith %} + {% endfor %} +
+
+
+
- -{# Re-start the same containing row thats on the main article_page.html file #} -
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/iframe_block.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/iframe_block.html index 71df1e37b7d..2c110be6a8b 100644 --- a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/iframe_block.html +++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/iframe_block.html @@ -1,52 +1,30 @@ {% load wagtailcore_tags %} {% comment %} - The iframe_block.html is used on Article pages and Blog pages. - Blog pages need to break out of the current grid system and open a 12 column block - for it to align with other content. - The Article page doesn't require as much "breaking out" of the parent grid because there's - less nesting in the article pages. But we still need to break out of the grid, and - use a 12 column grid. +The iframe_block.html is used on Article pages and Blog pages. +Blog pages need to break out of the current grid system and open a 12 column block +for it to align with other content. +The Article page doesn't require as much "breaking out" of the parent grid because there's +less nesting in the article pages. But we still need to break out of the grid, and +use a 12 column grid. {% endcomment %} -{% if page_type == "blog" %} - {# Break out of the blog_page.html containment grid #} -
- - -{% elif page_type == "article" %} - {# Break out of the article_page.html containment grid #} - -{% else %} - {# Mozfest page. Break out of the containment grid #} +
+
+
+
+
+ +
+ {% if value.caption %} +

+ {% if value.captionURL %}{% endif %} + {{ value.caption }} + {% if value.captionURL %}{% endif %} +

+ {% endif %} +
-{% endif %} - -
-
-
- -
- {% if value.caption %} -

- {% if value.captionURL %}{% endif %} - {{ value.caption }} - {% if value.captionURL %}{% endif %} -

- {% endif %} -
-
- -{% if page_type == "blog" %} - {# Re-open the original grid even if it's immediately closed afterwards. #} -
-
-
-{% elif page_type == "article" %} - {# Re-open the original article_page.html grid #} -
-{% else %} - {# Re-open the Mozfest containment grid #} -
-
-{% endif %} +
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/image_block.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/image_block.html index bf2a8e23afa..ad11de3fae4 100644 --- a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/image_block.html +++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/image_block.html @@ -1,4 +1,12 @@ {% load wagtailcore_tags wagtailimages_tags %} {% image value.image original as img %} -{{ img.alt }} + + +
+
+
+ {{ img.alt }} +
+
+
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/image_grid_block.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/image_grid_block.html index 4ff79e34e84..647466ad642 100644 --- a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/image_grid_block.html +++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/image_grid_block.html @@ -1,9 +1,15 @@ {% load wagtailcore_tags wagtailimages_tags %} -
-{% for block in self.grid_items %} - {% with value=block count=self.grid_items|length %} - {% include "./figure_block.html" %} - {% endwith %} -{% endfor %} +
+
+
+
+ {% for block in self.grid_items %} + {% with value=block count=self.grid_items|length %} + {% include "./figure_block.html" %} + {% endwith %} + {% endfor %} +
+
+
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/image_text.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/image_text.html index 9b1d72eed9b..a29849991f3 100644 --- a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/image_text.html +++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/image_text.html @@ -1,29 +1,37 @@ {% load wagtailcore_tags wagtailimages_tags %} -
- {% if value.small %} -
- -
- {{ value.text|richtext }} -
-
- {% else %} -
-
- -
- {{ value.text|richtext }} + + +
+
+
+
+ {% if value.small %} +
+ +
+ {{ value.text|richtext }} +
+
+ {% else %} +
+
+ +
+ {{ value.text|richtext }} +
+
+ {% endif %}
+
- {% endif %}
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/image_text_mini.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/image_text_mini.html index 16efb395f0f..d84e12bb969 100644 --- a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/image_text_mini.html +++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/image_text_mini.html @@ -1,12 +1,20 @@ {% load wagtailcore_tags wagtailimages_tags %} -
-
-
- {% image value.image fill-100x100-c100 format-jpeg class="w-100" %} -
-
- {{ value.text|richtext }} +
+
+
+
+
+
+ {% image value.image fill-100x100-c100 format-jpeg class="w-100" %} +
+
+ {{ value.text|richtext }} +
+
+
+ + diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/link_button_block.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/link_button_block.html index ecc1c9d6ce8..eb46c01438f 100644 --- a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/link_button_block.html +++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/link_button_block.html @@ -1,5 +1,11 @@ {% load wagtailcore_tags %} -
- {{ value.label }} +
+
+ +
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/profile_blocks.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/profile_blocks.html index 4c04fcfe4ff..8acacfb7504 100644 --- a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/profile_blocks.html +++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/profile_blocks.html @@ -1,9 +1,16 @@ {% load static %} -
-
- {% for profile in profiles %} - {% include "./profile_block.html" with profile=profile %} - {% endfor %} +
+
+
+
+
+ {% for profile in profiles %} + {% include "./profile_block.html" with profile=profile %} + {% endfor %} +
+
+
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/profile_directory.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/profile_directory.html index 35933365228..d018850b497 100644 --- a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/profile_directory.html +++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/profile_directory.html @@ -1,18 +1,24 @@ {% load static %} -
-
- {% for label in filters %} -
- +
+
+
+
+ {% for label in filters %} +
+ +
+ {% endfor %} +
- {% endfor %} -
+
- {% include "./profile_blocks.html" %} + {% include "./profile_blocks.html" %} - {% if filters|length > 0 %} - - - {% endif %} + {% if filters|length > 0 %} + + + {% endif %} +
+
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/pulse_project_list.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/pulse_project_list.html index 2161ef0969b..02a4b9f27ad 100644 --- a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/pulse_project_list.html +++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/pulse_project_list.html @@ -1,9 +1,16 @@ -
+
+
+
+
+
+
+
+
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/quote_block.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/quote_block.html index 77eaa927e51..4d059e8a11a 100644 --- a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/quote_block.html +++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/quote_block.html @@ -1,15 +1,22 @@ {% load wagtailcore_tags %} -
-
- {% for quote in value.quotes %} - {% comment %} Next task for this component is to handle multiple quotes. For now, let's use just the first {% endcomment %} - {% if forloop.counter is 1 %} -
-

{{quote.quote}}

-

{{quote.attribution}}

+ +
+
+
+
+
+ {% for quote in value.quotes %} + {% comment %} Next task for this component is to handle multiple quotes. For now, let's use just the first {% endcomment %} + {% if forloop.counter is 1 %} +
+

{{quote.quote}}

+

{{quote.attribution}}

+
+ {% endif %} + {% endfor %} +
+
- {% endif %} - {% endfor %}
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/recent_blog_entries.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/recent_blog_entries.html index 7f2b6eb5e79..e54002ac263 100644 --- a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/recent_blog_entries.html +++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/recent_blog_entries.html @@ -1,19 +1,25 @@ {% load i18n %} -{% if entries|length != 0 %} -
-
-

{{ value.title }}

+
+
+
+ {% if entries|length != 0 %} +
+
+

{{ value.title }}

+
+
+ {% include "../fragments/entry_cards.html" %} +
+ {% if more_entries %} + + {% endif %} +
+ {% endif %} +
-
- {% include "../fragments/entry_cards.html" %} -
- {% if more_entries %} - - {% endif %}
-{% endif %} diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/typeform_block.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/typeform_block.html index ad0872c6c47..0a8bad9c149 100644 --- a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/typeform_block.html +++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/typeform_block.html @@ -1,7 +1,14 @@ -{{ value.button_text }} - +
+ +
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/video_block.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/video_block.html index 584ff6317f7..592d2a62fa0 100644 --- a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/video_block.html +++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/video_block.html @@ -1,20 +1,27 @@ {% load wagtailcore_tags %} -
-
- + +
+
+
+
+
+ +
+ {% if value.caption %} +

+ {% if value.captionURL %}{% endif %} + {{ value.caption }} + {% if value.captionURL %}{% endif %} +

+ {% endif %} +
+
- {% if value.caption %} -

- {% if value.captionURL %}{% endif %} - {{ value.caption }} - {% if value.captionURL %}{% endif %} -

- {% endif %}
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blog_page.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blog_page.html index 66549a4b0e6..cdcb634d343 100644 --- a/network-api/networkapi/wagtailpages/templates/wagtailpages/blog_page.html +++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/blog_page.html @@ -3,55 +3,88 @@ {% load wagtailcore_tags mini_site_tags i18n %} {% block commento_meta %} - - - {% if page.last_published_at %} - - {% endif %} - {% with category=page.specific.category.first %} - {% if category %} - - {% endif %} - {% endwith %} - + + +{% if page.last_published_at %} + +{% endif %} +{% with category=page.specific.category.first %} +{% if category %} + +{% endif %} +{% endwith %} + {% endblock %} + {% block hero_guts %} + {% if page.hero_image != None or page.hero_video != "" %} + {% include "./fragments/blog_page_heroguts.html" with page=page %} + {% endif %} + {% endblock %} {% block body_id %}blog{% endblock %} + {% block subcontent %} -
-
- + +
+ -
-
-

{{ page.title }}

- {% include "./fragments/blog_authors.html" with blog_page=page show_full_info=True %} -
- {% for stream_block in page.body %} - {% include_block stream_block with page_type="blog" %} - {% endfor %} - + {% for block in page.body %} + {% if block.block_type == 'paragraph'%} +
+
+
+ {% if block.block_type == 'heading' %} +

{{ block.value }}

+ {% else %} + {% include_block block with parent_page=page page_type="blog"%} + {% endif %}
+
+ {% else %} + {% include_block block with parent_page=page page_type="blog" %} + {% endif %} + {% endfor %} +
+ + {% include "./fragments/post_tags.html" %} +
{% endblock %} {% block prefooter %} - {% include "./fragments/related_posts.html" %} +{% include "./fragments/related_posts.html" %} {% endblock %} {% block extra_scripts %} - {% if show_comments %} - - {% endif %} +{% if show_comments %} + +{% endif %} {% endblock %} diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/campaign_page.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/campaign_page.html index b4574d07b79..8d1af02c7a1 100644 --- a/network-api/networkapi/wagtailpages/templates/wagtailpages/campaign_page.html +++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/campaign_page.html @@ -43,13 +43,25 @@

{% endblock %} {% block html_content %} +
{% for block in page.body %} - {% if block.block_type == 'heading' %} -

{{ block.value }}

+ {% if block.block_type == 'paragraph'%} +
+
+
+ {% if block.block_type == 'heading' %} +

{{ block.value }}

+ {% else %} + {% include_block block%} + {% endif %} +
+
+
{% else %} - {% include_block block %} + {% include_block block with parent_page=page %} {% endif %} {% endfor %} +
{% endblock %}
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/blog_authors.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/blog_authors.html index b67783f62cf..dbba025bd0c 100644 --- a/network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/blog_authors.html +++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/blog_authors.html @@ -13,7 +13,7 @@ {% endfor %}
-

+

{% with authors_length=authors|length %} {% spaceless %} {% if show_full_info %}{% trans "By" %} {% endif %} diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/blog_page_heroguts.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/blog_page_heroguts.html new file mode 100644 index 00000000000..139fd856f6a --- /dev/null +++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/blog_page_heroguts.html @@ -0,0 +1,36 @@ +{% load wagtailcore_tags wagtailimages_tags i18n static%} +{% image page.hero_image original as img %} + + +

+ + +
+
+
+
+
+
+ +
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/opportunity_page.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/opportunity_page.html index d02d0bc63c6..8994af8e9ba 100644 --- a/network-api/networkapi/wagtailpages/templates/wagtailpages/opportunity_page.html +++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/opportunity_page.html @@ -25,12 +25,18 @@

{{ page.title }} {% endif %}

-
+
{% for block in page.body %} - {% if block.block_type == 'heading' %} -

{{ block.value }}

+ {% if block.block_type == 'paragraph'%} +
+
+
+ {% include_block block%} +
+
+
{% else %} - {% include_block block %} + {% include_block block with parent_page=page %} {% endif %} {% endfor %}
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/primary_page.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/primary_page.html index c48570bb6e0..a37c3a36f63 100644 --- a/network-api/networkapi/wagtailpages/templates/wagtailpages/primary_page.html +++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/primary_page.html @@ -16,17 +16,19 @@ {% primary_page_menu page %} -
-
-
- {% for block in page.body %} - {% if block.block_type == 'heading' %} -

{{ block.value }}

- {% else %} - {% include_block block %} - {% endif %} - {% endfor %} -
-
+
+ {% for block in page.body %} + {% if block.block_type == 'paragraph'%} +
+
+
+ {% include_block block%} +
+
+
+ {% else %} + {% include_block block with parent_page=page %} + {% endif %} + {% endfor %}
-{% endblock %} +{% endblock %} diff --git a/source/images/video_pause_button.svg b/source/images/video_pause_button.svg new file mode 100644 index 00000000000..4ba277262c0 --- /dev/null +++ b/source/images/video_pause_button.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/source/images/video_play_button.svg b/source/images/video_play_button.svg new file mode 100644 index 00000000000..a1c46432338 --- /dev/null +++ b/source/images/video_play_button.svg @@ -0,0 +1,4 @@ + + + + diff --git a/source/js/foundation/pages/directory-listing-filters.js b/source/js/foundation/pages/directory-listing-filters.js index 81bf1ff9caf..d1e0c430bc5 100644 --- a/source/js/foundation/pages/directory-listing-filters.js +++ b/source/js/foundation/pages/directory-listing-filters.js @@ -3,7 +3,7 @@ const profileCache = {}; const labels = document.querySelectorAll( - `.profile-directory .fellowships-directory-filter .filter-option button` + `.fellowships-directory-filter .filter-option button` ); const profileContainer = document.querySelector(`.profiles .row`); const { profileType, programType } = document.querySelector( diff --git a/source/js/foundation/template-js-handler/header-video-block-handler.js b/source/js/foundation/template-js-handler/header-video-block-handler.js new file mode 100644 index 00000000000..7c79cd27b52 --- /dev/null +++ b/source/js/foundation/template-js-handler/header-video-block-handler.js @@ -0,0 +1,52 @@ +const backgroundVideoHandler = () => { + let homepageBanner = document.querySelector("#page-hero .banner"); + + if (!homepageBanner) { + return; + } + + let video = homepageBanner.querySelector("video.banner-video"); + let pauseButton = homepageBanner.querySelector( + ".btn-video-control.btn-pause" + ); + let playButton = homepageBanner.querySelector(".btn-video-control.btn-play"); + + if (video && pauseButton && playButton) { + const HIDE = `d-none`; + + const showPauseButton = () => { + playButton.classList.add(HIDE); + pauseButton.classList.remove(HIDE); + }; + + const showPlayButton = () => { + pauseButton.classList.add(HIDE); + playButton.classList.remove(HIDE); + }; + + pauseButton.addEventListener(`click`, () => { + video.pause(); + }); + + playButton.addEventListener(`click`, () => { + video.play(); + }); + + video.addEventListener(`pause`, () => { + showPlayButton(); + }); + + video.addEventListener(`playing`, () => { + showPauseButton(); + }); + + video.play(); + } +}; + +/** + * Bind handlers to blog video banner + */ +export default () => { + backgroundVideoHandler(); +}; diff --git a/source/js/foundation/template-js-handler/index.js b/source/js/foundation/template-js-handler/index.js index 93f9e334863..6fb0bc72e63 100644 --- a/source/js/foundation/template-js-handler/index.js +++ b/source/js/foundation/template-js-handler/index.js @@ -7,6 +7,7 @@ import participatePageDonateHandler from "./participate-page-donate.js"; import publicationSummaryBar from "./publication-summary-bar.js"; import pulseProfileCardHandler from "./pulse-profile-card.js"; import pulseProfileListFilterHandler from "./pulse-profile-list-filter.js"; +import headerVideoBlockHandler from "./header-video-block-handler.js"; /** * Bind global event handlers @@ -28,4 +29,5 @@ export const bindEventHandlers = () => { publicationSummaryBar(); pulseProfileCardHandler(); pulseProfileListFilterHandler(); + headerVideoBlockHandler(); }; diff --git a/source/js/foundation/template-js-handler/window/sticky-share-button-group.js b/source/js/foundation/template-js-handler/window/sticky-share-button-group.js index da5f9853db2..624efcce57f 100644 --- a/source/js/foundation/template-js-handler/window/sticky-share-button-group.js +++ b/source/js/foundation/template-js-handler/window/sticky-share-button-group.js @@ -6,7 +6,7 @@ export default () => { `#view-blog .blog-sticky-side .share-button-group` ); let blogPageFullButtons = document.querySelector( - `#view-blog .blog-body .share-button-group` + `.bottom-share-button-container .share-button-group` ); if (blogPageStickyButtons && blogPageFullButtons) { diff --git a/source/sass/components/video-hero.scss b/source/sass/components/video-hero.scss new file mode 100644 index 00000000000..2766ab36c6f --- /dev/null +++ b/source/sass/components/video-hero.scss @@ -0,0 +1,27 @@ +// Hero Video or Images + +.video-hero-banner { + height: 480px !important; +} + +.video-background-wrapper { + position: absolute; + width: 100%; + height: 100%; +} + +.video-overlay { + position: absolute; + width: 100%; + height: 100%; + background: linear-gradient(120deg, #0e11bf 0%, #8f14fb 100%); + opacity: 0.8; + z-index: 2; +} + +.video-control-wrapper { + // bottom: calc(40px + 1rem); + z-index: 2; + position: absolute; + width: 100%; +} diff --git a/source/sass/views/article.scss b/source/sass/views/article.scss index 7a6b6b49658..0871af06b66 100644 --- a/source/sass/views/article.scss +++ b/source/sass/views/article.scss @@ -2,7 +2,7 @@ // Also see publication-page.scss and chapter-page.scss #view-article { - .article-blocks { + .article-page-content { p, ul, ol { @@ -153,7 +153,7 @@ } // StreamBlocks -.article-blocks .rich-text { +.article-page-content .rich-text { /** * .rich-text styling needs to be specified in CSS rather than Bootstrap classes * because we don't have access to the individual elements. diff --git a/source/sass/views/blog.scss b/source/sass/views/blog.scss index 132af5e029b..0ab2b4a1568 100644 --- a/source/sass/views/blog.scss +++ b/source/sass/views/blog.scss @@ -2,9 +2,9 @@ margin-top: 95px; } -.blog-sticky-side { +.blog-sticky-side-container { position: sticky; - top: 140px; + top: 90px; .share-button-group { transition: opacity 0.2s ease-in-out; @@ -25,3 +25,132 @@ a.category { #view-blog-index .result-info { font-family: $font-family-slab-serif; } + +#page-hero { + $breakpoint: $bp-md; + $banner-height-mobile: 300px; + $banner-height-desktop: 580px; + $banner-background-z-index: 1; + $banner-video-control-z-index: 2; + $cutoff-offset: 40px; + + .video-control-wrapper { + z-index: $banner-video-control-z-index; + position: absolute; + width: 100%; + bottom: 1rem; + + @media screen and (min-width: $breakpoint) { + // bottom: calc(#{$cutoff-offset} + 1rem); + } + + .btn.btn-video-control { + $icon-size: 30px; + + border: none; + height: $icon-size; + background: center left/$icon-size $icon-size no-repeat transparent; + // padding-left: calc(#{$icon-size} + 0.5rem); + // due to a Safari bug, we have to remove transition for these buttons + // so background SVGs don't get resized on hover + transition: none; + + &:hover { + color: $white; + text-decoration: underline; + } + + &.btn-pause { + background-image: url("../_images/video_pause_button.svg"); + opacity: 0.8; + + &:hover { + opacity: 1; + } + } + + &.btn-play { + background-image: url("../_images/video_play_button.svg"); + opacity: 0.8; + + &:hover { + opacity: 1; + } + } + } + } + + .banner { + height: $banner-height-mobile; + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + + @media screen and (min-width: $breakpoint) { + height: $banner-height-desktop; + } + } + + .homepage-banner-content.container { + z-index: $banner-background-z-index + 3; + + @media screen and (min-width: $breakpoint) { + padding-bottom: $cutoff-offset; + } + } + + .cutout { + z-index: $banner-background-z-index + 2; + margin-bottom: 0; + background-color: white; + @media screen and (min-width: $breakpoint) { + margin-top: -$cutoff-offset; + } + + @media (max-width: $bp-lg) { + opacity: 0; + } + } + + .background-wrapper { + position: absolute; + width: 100%; + height: 100%; + + video, + img { + width: 100%; + height: 100%; + display: flex; + position: absolute; + z-index: $banner-background-z-index; + top: 0; + left: 0; + object-fit: cover; + object-position: center center; + } + } +} + +.video-control-wrapper { + .row { + justify-content: right; + } +} + +.header-image { + width: 100%; + height: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + position: absolute; + z-index: 1; + top: 0; + left: 0; + -o-object-fit: cover; + object-fit: cover; + -o-object-position: center center; + object-position: center center; +} diff --git a/source/sass/wagtail/blocks.scss b/source/sass/wagtail/blocks.scss index 4f1995506de..17123868f82 100644 --- a/source/sass/wagtail/blocks.scss +++ b/source/sass/wagtail/blocks.scss @@ -1,3 +1,96 @@ .cms { @import "./profiles"; } + +.wide { + @extend .no-gutters; + @extend .px-0; + @extend .mx-0; + @extend .w-100; + @extend .mw-100; +} + +.primary-page-content { + &.wide { + .streamfield-content { + @extend .col-12; + } + } + + &.narrow { + .streamfield-content { + @extend .col-8; + } + } +} + +.article-page-content { + .streamfield-content { + @extend .col-10; + &.wide { + @extend .col-12; + } + } +} + +.blog-body { + .streamfield-content { + @extend .col-lg-8; + } +} + +.opportunity-page-content { + .streamfield-content { + @extend .col-lg-12; + @extend .px-0; + } +} + +.campaign-page-content { + .streamfield-content { + @extend .px-0; + } + &.wide { + .streamfield-content { + @extend .col-12; + } + } + + &.narrow { + .streamfield-content { + @extend .col-7; + } + } +} + +.image-block { + @extend .px-0; +} + +.iframe-block { + @extend .px-0; + .wide { + @extend .col-12; + } +} + +.quote-block-content { + width: 100%; +} + +.mozfest-content { + &.two-col { + @extend .p-0; + @extend .col-lg-7; + .streamfield-content { + @extend .col-lg-12; + } + } + .streamfield-content { + @extend .col-lg-8; + } +} + +.share-button-blog-title-container { + margin-bottom: -2em; +}