From af63579b8a5d5f315c4f3f017cfcba9caf883dfc Mon Sep 17 00:00:00 2001 From: =?utf8?q?Je=CC=81re=CC=81my=20Fabre?= Date: Thu, 9 Feb 2017 12:28:55 +0100 Subject: [PATCH] Custom page templates. Overrides the mutations-creations template to include the hero. --- app/static/src/sass/modules/_hero.scss | 26 ++++ app/static/src/sass/modules/_page.scss | 102 +++++++++++++- .../src/sass/modules/boxes/_article-box.scss | 41 +++--- .../src/sass/modules/boxes/_media-box.scss | 130 ++++++++++++------ app/templates/agenda/event_list.html | 4 - app/templates/core/inc/block.html | 7 +- app/templates/core/inc/related_content.html | 29 ++-- app/templates/home/inc/hero-small.html | 25 ++++ .../magazine/article/article_list.html | 70 ++++++++-- .../media/inc/playlist_video_slider.html | 4 +- .../media/media/includes/media_card.html | 32 +++-- .../network/inc/person/list_circle_style.html | 12 +- .../network/inc/person/list_square_style.html | 16 ++- .../inc/person/person_card_circle.html | 4 +- app/templates/pages/mutations-creations.html | 100 ++++++++++++++ app/templates/pages/page.html | 3 + 16 files changed, 470 insertions(+), 135 deletions(-) create mode 100644 app/templates/home/inc/hero-small.html create mode 100644 app/templates/pages/mutations-creations.html diff --git a/app/static/src/sass/modules/_hero.scss b/app/static/src/sass/modules/_hero.scss index 67e67426..5cc7854c 100644 --- a/app/static/src/sass/modules/_hero.scss +++ b/app/static/src/sass/modules/_hero.scss @@ -128,4 +128,30 @@ $module: ".hero"; } + &--small { + + @include margin-bottom(4); + @include mq($until: xs) { + @include margin-bottom(4); + } + + &:after { + display: none; + } + + #{$module}__logo { + + @include margin-top(15); + text-align: center; + @include mq($until: xs) { + @include margin-top(8); + img { + width: 159px; + } + } + + } + + } + } diff --git a/app/static/src/sass/modules/_page.scss b/app/static/src/sass/modules/_page.scss index 67af0f3e..9eac8526 100644 --- a/app/static/src/sass/modules/_page.scss +++ b/app/static/src/sass/modules/_page.scss @@ -23,7 +23,6 @@ $module: ".page"; #{$module} { min-height: 500px; - @include margin-top(3); @include mq($until: sm) { min-height: 0; @@ -130,19 +129,35 @@ $module: ".page"; } + &__block-title { + text-align: left; + } + &__block { @include padding-bottom(1); + h2:first-child { + @include font-size(l); + @include line-height(1); + @include typeface(serif); + font-weight: weight(bold); + } + &--yellow { + #{$module}__block-title { + text-align: center; + } + background-color: $color-main; @include padding-top(2); @include padding-bottom(2); @include margin(2 0 0 0); + color: $color-background; h2:first-child { - margin-top: 0; + } & + hr { @@ -158,12 +173,13 @@ $module: ".page"; position: relative; z-index: 1; text-decoration: none; - border-color: $color-black; - border-bottom: 1px solid $color-black; + border-color: $color-background; + border-bottom: 1px solid $color-background; + color: $color-background; @include transition(all 0.15s ease-in-out); &:hover { - box-shadow: inset 0 -30px $color-black; + box-shadow: inset 0 -30px $color-background; color: $color-main; } @@ -171,6 +187,47 @@ $module: ".page"; } + &--white { + + background-color: white; + color: $color-background; + @include padding-top(2); + @include padding-bottom(2); + @include margin(2 0 0 0); + + #{$module}__block-title { + text-align: center; + } + + a:not(.button) { + + color: $color-background; + position: relative; + z-index: 1; + text-decoration: none; + border-color: $color-background; + + &:hover { + box-shadow: none; + color: $color-background; + } + + } + + h2:first-child { + + } + + & + hr { + margin-top: 1px; + } + + & + .page__block { + @include margin-top(2); + } + + } + &--black { background-color: $color-black; @@ -179,6 +236,10 @@ $module: ".page"; @include padding-bottom(2); @include margin(2 0 0 0); + #{$module}__block-title { + text-align: center; + } + a:not(.button) { color: white; @@ -195,7 +256,7 @@ $module: ".page"; } h2:first-child { - margin-top: 0; + } & + hr { @@ -216,8 +277,35 @@ $module: ".page"; @include padding-bottom(2); @include margin(2 0); + #{$module}__block-title { + text-align: center; + } + + a:not(.button) { + + color: white; + position: relative; + z-index: 1; + text-decoration: none; + border-color: white; + + &:hover { + box-shadow: none; + color: white; + } + + } + h2:first-child { - margin-top: 0; + + } + + & + hr { + margin-top: 1px; + } + + & + .page__block { + @include margin-top(2); } } diff --git a/app/static/src/sass/modules/boxes/_article-box.scss b/app/static/src/sass/modules/boxes/_article-box.scss index 057d3c20..ec737b72 100644 --- a/app/static/src/sass/modules/boxes/_article-box.scss +++ b/app/static/src/sass/modules/boxes/_article-box.scss @@ -159,24 +159,6 @@ $module: ".article-box"; height: auto; } - /*&:after { - - @include mq($until: xs) { - display: none; - } - - content: ""; - display: block; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 100px; - background-color: rgba(255,255,255,0); - @include filter-gradient(#ffffff, #ffffff, vertical); - @include background-image(linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%)); - }*/ - .slider-home & { @include padding(0); } @@ -261,8 +243,8 @@ $module: ".article-box"; @include margin-top(2); position: relative; - - + border: 0; + @include padding(0); &:after { @@ -270,7 +252,7 @@ $module: ".article-box"; display: block; height: 1px; width: 100%; - background: #979797; + background: $color-main; position: absolute; bottom: -24px; left: 0; @@ -319,13 +301,24 @@ $module: ".article-box"; left: 0; right: 0; height: 100px; - background-color: rgba(255,255,255,0); - @include filter-gradient(#ffffff, #ffffff, vertical); - @include background-image(linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%)); + background-color: rgba($color-background, 0); + @include filter-gradient(rgba($color-background, 1), rgba($color-background, 1), vertical); + @include background-image(linear-gradient(top, rgba($color-background, 0) 0%, rgba($color-background, 1) 50%)); } } + &:hover { + border: 0; + background-color: $color-background; + #{$module}__title { + color: $color-main; + } + #{$module}__desc { + color: white; + } + } + } } diff --git a/app/static/src/sass/modules/boxes/_media-box.scss b/app/static/src/sass/modules/boxes/_media-box.scss index f77d5b9c..49cf366c 100644 --- a/app/static/src/sass/modules/boxes/_media-box.scss +++ b/app/static/src/sass/modules/boxes/_media-box.scss @@ -24,76 +24,117 @@ $module: ".media-box"; position: relative; display: block; - @include margin-bottom(2); - @include padding-bottom(.5); - @include transition(all 0.25s ease-in-out); + @include margin-bottom(1); + @include transition(all 0.5s ease-in-out); + + border: 1px solid rgba($color-main, 0.35); + @include padding(1); &:hover { - box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.17); + + border: 1px solid rgba($color-main, 1); + background: $color-main; + + .media-box__image-container { + background: black; + } + .media-box__image { img { - @include transform(scale(1.1)); + -webkit-filter: grayscale(0); + filter: grayscale(0); } - &:after { - background: $color-black; - color: white; - } + } + + .media-box__title { + color: $color-background; + } + .media-box__type { + color: $color-background; + } + .media-box__subtitle { + color: $color-background; + } + .media-box__desc { + color: $color-background; } } - &__image { + &__image-container { + background: $color-background; + @include transition(all 0.5s ease-in-out); + } + + &__placeholder { + + background: $color-main; + + } - @include fluid-aspect(320 190); + &__content { + @include padding(.25 .25 .25 .25); + + position: relative; overflow: hidden; - img { - @include transition(all 0.3s ease-in-out); + @include mq($until: xs) { + height: auto; } - &:after { - @include transition(all 0.5s ease-in-out); + .slider-home & { + @include padding(0); + } + } - font-family: FontAwesome; + &__image { + margin: 0; + padding: 0; + width: 100%; + position: relative; + overflow: hidden; + + @include fluid-aspect(427 286); + + img { display: block; - content: "\f04b"; - background: white; - width: 50px; - height: 50px; - border-radius: 50px; + width: 100%; + max-width: 100%; + height: auto; - font-size: 25px; + @include transition(all 0.5s ease-in-out); + + -webkit-filter: grayscale(1); + filter: grayscale(1); + mix-blend-mode: screen; + } + &:after { + content: "\f04b"; + text-indent: 0px; + color: white; + font-family: FontAwesome; + font-size: 50px; position: absolute; top: 50%; left: 50%; - margin-top: -25px; - margin-left: -25px; - - line-height: 50px; - text-align: center; - text-indent: 3px; - } - - &--audio { - &:after { - content: "\f028"; - text-indent: 0px; - } + @include transform(translateX(-50%) translateY(-50%)); } } &__type { - @include font-size(m); + text-transform: uppercase; + @include font-size(s); @include line-height(1.25); @include typeface(sans-serif); - @include margin(.25 0 0 0); - - @include padding(0 .25); + @include margin(0 0 0 0); + font-weight: weight(regular); + color: $color-main; + @include transition(color 0.5s ease-in-out); } @@ -102,9 +143,10 @@ $module: ".media-box"; @include font-size(xl); @include line-height(1.25); @include typeface(sans-serif); - @include margin(0 0 .25 0); - - @include padding(0 .25); + @include margin(.5 0 0 0); + font-weight: weight(bold); + color: $color-main; + @include transition(color 0.5s ease-in-out); } @@ -115,8 +157,8 @@ $module: ".media-box"; @include typeface(serif); @include margin(1 0 .25 0); font-weight: weight(light); - - @include padding(0 .25); + color: white; + @include transition(color 0.5s ease-in-out); } diff --git a/app/templates/agenda/event_list.html b/app/templates/agenda/event_list.html index e0386e28..0e699732 100644 --- a/app/templates/agenda/event_list.html +++ b/app/templates/agenda/event_list.html @@ -25,10 +25,6 @@ {% endmetablock %} {% endblock %} -{% block breadcrumb_menu %} - {{ block.super }} -{% endblock %} - {% block main %}
diff --git a/app/templates/core/inc/block.html b/app/templates/core/inc/block.html index 0cda6024..c270bab0 100644 --- a/app/templates/core/inc/block.html +++ b/app/templates/core/inc/block.html @@ -1,9 +1,6 @@ {% load i18n mezzanine_tags keyword_tags pages_tags organization_tags %} {% if blocks %}
- {% if blocks.first %} -
- {% endif %} {% for block in blocks %} {% if block.content %} {% if not forloop.first and block.with_separator %} @@ -14,7 +11,9 @@
{% editable block.title %} -

{{ block.title }}

+
+

{{ block.title }}

+
{% endeditable %} {% if block.description %}
diff --git a/app/templates/core/inc/related_content.html b/app/templates/core/inc/related_content.html index e8f61a9a..9e81611c 100644 --- a/app/templates/core/inc/related_content.html +++ b/app/templates/core/inc/related_content.html @@ -1,25 +1,28 @@ {% load i18n mezzanine_tags keyword_tags organization_tags pages_tags %} {% if dynamic_content.first.content_object %} -
-

{% if object.related_title.title %}{{ object.related_title.title }}{% else %}{% trans "Also discover" %}{% endif %}

+

{% if object.related_title.title %}{{ object.related_title.title }}{% else %}{% trans "Also discover" %}{% endif %}

-
- {% for content in dynamic_content %} -
- {% if content.content_type.model == "article" %} - {% include "magazine/article/includes/article_card.html" with object=content.content_object %} - {% elif content.content_type.model == "event" %} - {% include "agenda/event/includes/event_card.html" with object=content.content_object %} - {% elif content.content_type.model == "custompage" %} - {% include "pages/page/includes/page_card.html" with object=content.content_object %} - {% endif %} +
+
+
+ {% for content in dynamic_content %} +
+ {% if content.content_type.model == "article" %} + {% include "magazine/article/includes/article_card.html" with object=content.content_object %} + {% elif content.content_type.model == "event" %} + {% include "agenda/event/includes/event_card.html" with object=content.content_object %} + {% elif content.content_type.model == "custompage" %} + {% include "pages/page/includes/page_card.html" with object=content.content_object %} + {% endif %} +
+ {% endfor %}
- {% endfor %} +
diff --git a/app/templates/home/inc/hero-small.html b/app/templates/home/inc/hero-small.html new file mode 100644 index 00000000..06cee32f --- /dev/null +++ b/app/templates/home/inc/hero-small.html @@ -0,0 +1,25 @@ +{% load i18n pages_tags mezzanine_tags staticfiles keyword_tags event_tags organization_tags %} + +
+ +
+ +
+ +
+ +
+ +
+ + + +
+ +
+ +
+ +
diff --git a/app/templates/magazine/article/article_list.html b/app/templates/magazine/article/article_list.html index 18e2d3ac..6f4d325f 100644 --- a/app/templates/magazine/article/article_list.html +++ b/app/templates/magazine/article/article_list.html @@ -1,17 +1,65 @@ -{% extends "base.html" %} -{% load mezzanine_tags organization_tags %} +{% extends "pages/page.html" %} +{% load i18n future mezzanine_tags event_tags keyword_tags disqus_tags organization_tags staticfiles pages_tags %} + +{% block meta_title %} + {% if page %} + {{ page.title }} + {% else %} + {% trans "News" %} + {% endif %} +{% endblock %} + +{% block meta_keywords %} + {% metablock %} + {% keywords_for page as keywords %} + {% for keyword in keywords %} + {% if not forloop.first %}, {% endif %} + {{ keyword }} + {% endfor %} + {% endmetablock %} +{% endblock %} + +{% block meta_description %} + {% metablock %} + {{ page.description }} + {% endmetablock %} +{% endblock %} {% block main %} +
+
+
+
+

{% trans "News" %}

+
+
+ +
-{% for object in objects %} -
- {% with app_label=object|app_label_short classname=object|classname|lower %} - {% with app_label|add:"/"|add:classname|add:"/includes/"|add:classname|add:"_card.html" as template %} - {% include template %} - {% endwith %} - {% endwith %} +
+
+
+
+ {% for object in objects %} +
+ {% with app_label=object|app_label_short classname=object|classname|lower %} + {% with app_label|add:"/"|add:classname|add:"/includes/"|add:classname|add:"_card.html" as template %} + {% include template %} + {% endwith %} + {% endwith %} +
+ {% endfor %} +
+
+
+ {% pagination_for objects %} +
+
+
+
+
+
-{% endfor %} -{% pagination_for objects %} +
{% endblock %} diff --git a/app/templates/media/inc/playlist_video_slider.html b/app/templates/media/inc/playlist_video_slider.html index 43aa8cc3..a9672773 100644 --- a/app/templates/media/inc/playlist_video_slider.html +++ b/app/templates/media/inc/playlist_video_slider.html @@ -7,7 +7,9 @@
{% if playlist.title %} -

{{playlist.title}}

+
+

{{playlist.title}}

+
{% endif %} {% if playlist.description %}

diff --git a/app/templates/media/media/includes/media_card.html b/app/templates/media/media/includes/media_card.html index a16e61a6..311b0049 100644 --- a/app/templates/media/media/includes/media_card.html +++ b/app/templates/media/media/includes/media_card.html @@ -1,20 +1,26 @@ {% load mezzanine_tags keyword_tags i18n organization_tags staticfiles %}

diff --git a/app/templates/network/inc/person/list_circle_style.html b/app/templates/network/inc/person/list_circle_style.html index df00a8c1..e9730e2d 100644 --- a/app/templates/network/inc/person/list_circle_style.html +++ b/app/templates/network/inc/person/list_circle_style.html @@ -1,16 +1,18 @@ {% load organization_tags mezzanine_tags i18n %} {% if person_list_block.title %} -
+
-
-
+
+ +
+

{{ person_list_block.title }}

+
-

{{ person_list_block.title }}

{% if person_list_block.description %}

{{ person_list_block.description }}

{% endif %} @@ -25,7 +27,7 @@
-
+
{% for person_list_block_inline in person_list_block.person_list_block_inlines.all %} {% with person_list_block_inline.person as person %} diff --git a/app/templates/network/inc/person/list_square_style.html b/app/templates/network/inc/person/list_square_style.html index 17b90fdb..e2c5f0f5 100644 --- a/app/templates/network/inc/person/list_square_style.html +++ b/app/templates/network/inc/person/list_square_style.html @@ -1,16 +1,18 @@ {% load organization_tags mezzanine_tags %} {% if person_list_block.title %} -
+
-
-
+
+ +
+

{{ person_list_block.title }}

+
-

{{ person_list_block.title }}

{% if person_list_block.description %}

{{ person_list_block.description }}

{% endif %} @@ -24,13 +26,13 @@
-
+
-
+
{% for person_list_block_inline in person_list_block.person_list_block_inlines.all %} -
+
{% with person_list_block_inline.person as person %} diff --git a/app/templates/network/inc/person/person_card_circle.html b/app/templates/network/inc/person/person_card_circle.html index d714d3a7..8467eed9 100644 --- a/app/templates/network/inc/person/person_card_circle.html +++ b/app/templates/network/inc/person/person_card_circle.html @@ -3,7 +3,7 @@
-
+
@@ -19,7 +19,7 @@
-
+

{{ person.first_name }} {{ person.last_name }}

diff --git a/app/templates/pages/mutations-creations.html b/app/templates/pages/mutations-creations.html new file mode 100644 index 00000000..e39b3994 --- /dev/null +++ b/app/templates/pages/mutations-creations.html @@ -0,0 +1,100 @@ +{% extends "pages/page.html" %} +{% load i18n mezzanine_tags keyword_tags pages_tags organization_tags %} + + {% with page.custompage as object %} + {% block page_class %} + custompage + {% endblock %} + + {% block body_class %} + {% with page.get_ascendants|last as top_level_parent %} + {% if top_level_parent.get_content_model.weaving_css_class %} + pattern pattern-bg {{ top_level_parent.get_content_model.weaving_css_class }} + {% endif %} + {% endwith %} + {% endblock %} + + {% block hero %} + {% include "home/inc/hero-small.html" %} + {% endblock %} + + {% block page_title %} + {% editable page.custompage.title %} +

{{ page.custompage.title }}

+ {% endeditable %} + {% endblock %} + + {% block page_content %} + + {% with page.get_ascendants|last as top_level_parent %} + {% if linked_organization_content and research_slug == top_level_parent.slug %} + {% include 'pages/page/includes/linked_organization_content.html' %} + {% endif %} + {% endwith %} + + {% if page.custompage.sub_title %} + {% editable page.custompage.sub_title %} +
+ {{ page.custompage.sub_title }} +
+ {% endeditable %} + {% endif %} + + {% if page.custompage.content %} + {% editable page.custompage.content %} + {{ page.custompage.content|richtext_filters|safe }} + {% endeditable %} + {% endif %} + + {% if page.get_ascendants|length == 1 %} + {% children_pages page.id as childrens %} + {% if childrens %} +
+ {% for child in childrens %} + {% if child.in_menus.0 %} + {% with child as object %} + {% include "pages/page/includes/page_box.html" %} + {% endwith %} + {% endif %} + {% endfor %} +
+ {% endif %} + {% endif %} + + {% endblock %} + + {% block page_audio %} + {% with page.custompage as object %} + {{ block.super }} + {% endwith %} + {% endblock %} + + {% block page_slider %} + {% with page.custompage as object %} + {{ block.super }} + {% endwith %} + {% endblock %} + + {% block page_video %} + {% with page.custompage as object %} + {{ block.super }} + {% endwith %} + {% endblock %} + + {% block page_person_list %} + {% for page_custom_person_list_block_inline in page.custompage.page_custom_person_list_block_inlines.all %} + {% with page_custom_person_list_block_inline.person_list_block as person_list_block %} + {% with "network/inc/person/list_"|add:person_list_block.style|add:"_style.html" as template %} + {% include template %} + {% endwith %} + {% endwith %} + {% endfor %} + {% endblock %} + + {% block page_sub_content %} + {% with page.custompage.blocks.all as blocks %} + {% include "core/inc/block.html" %} + {% endwith %} + {% endblock %} + +{% endwith %} diff --git a/app/templates/pages/page.html b/app/templates/pages/page.html index bd585525..146c8ca6 100644 --- a/app/templates/pages/page.html +++ b/app/templates/pages/page.html @@ -17,6 +17,9 @@ {% block main %} + {% block hero %} + {% endblock %} +
-- 2.39.5