From 953e0192fefc06bdd47a1b9bc6280f70cf05604c Mon Sep 17 00:00:00 2001 From: =?utf8?q?Je=CC=81re=CC=81my=20Fabre?= Date: Tue, 7 Feb 2017 17:57:17 +0100 Subject: [PATCH] Integration of homepage slider, homepage bio, homepage body. Fix footer. --- app/static/src/sass/layout/_footer.scss | 5 + app/static/src/sass/modules/_page.scss | 4 + .../src/sass/modules/_section-title.scss | 15 +- .../src/sass/modules/boxes/_article-box.scss | 119 +++++++++----- .../sass/modules/sliders/_slider-home.scss | 89 +++++++++-- app/static/src/sass/pages/_home.scss | 16 ++ .../agenda/event/includes/event_card.html | 46 +++--- app/templates/core/inc/generic_card.html | 7 +- app/templates/home/inc/bio.html | 11 +- app/templates/home/inc/body.html | 59 ++++--- app/templates/home/inc/slider.html | 149 ++++++++---------- app/templates/includes/footer.html | 10 +- app/templates/index.html | 4 +- .../article/includes/article_card.html | 45 +++--- .../custompage/includes/custompage_card.html | 36 +++-- 15 files changed, 371 insertions(+), 244 deletions(-) diff --git a/app/static/src/sass/layout/_footer.scss b/app/static/src/sass/layout/_footer.scss index 41597241..f1c96fe9 100755 --- a/app/static/src/sass/layout/_footer.scss +++ b/app/static/src/sass/layout/_footer.scss @@ -24,6 +24,7 @@ $module: ".footer"; /* Rectangle 2: */ background-image: linear-gradient(-180deg, #000F24 0%, #FF203C 100%); + @include margin-top(5); @include mq($until: xs) { div[class^="col-"] { @@ -31,6 +32,10 @@ $module: ".footer"; } } + .section-title { + @include margin-bottom(2); + } + &__pre { border-bottom: 3px solid white; diff --git a/app/static/src/sass/modules/_page.scss b/app/static/src/sass/modules/_page.scss index d1f43574..37289e2d 100644 --- a/app/static/src/sass/modules/_page.scss +++ b/app/static/src/sass/modules/_page.scss @@ -240,6 +240,10 @@ $module: ".page"; @include margin-top(0); } + strong { + font-weight: weight(regular); + } + } p:last-child { diff --git a/app/static/src/sass/modules/_section-title.scss b/app/static/src/sass/modules/_section-title.scss index 96e7bab1..64464d21 100644 --- a/app/static/src/sass/modules/_section-title.scss +++ b/app/static/src/sass/modules/_section-title.scss @@ -8,25 +8,34 @@ $module: ".section-title"; text-align: center; color: white; + display: inline-block; - @include margin-bottom(2); + @include margin-bottom(4); + @include margin-top(0); &--uppercase { text-transform: uppercase; } &--underline { - text-decoration: underline; + border-bottom: 1px solid white; } &--dark { color: $color-background; } + &--accent { + border-color: $color-accent; + &:before { + color: $color-accent; + } + } + &:before { content: '_'; display: block; - text-decoration: none; + text-decoration: none !important; @include font-size(m); @include margin-bottom(.5); } diff --git a/app/static/src/sass/modules/boxes/_article-box.scss b/app/static/src/sass/modules/boxes/_article-box.scss index 6ec91c45..33dc88b0 100644 --- a/app/static/src/sass/modules/boxes/_article-box.scss +++ b/app/static/src/sass/modules/boxes/_article-box.scss @@ -23,29 +23,59 @@ $module: ".article-box"; #{$module} { position: relative; - background: white; display: block; @include margin-bottom(1); @include transition(all 0.25s ease-in-out); + border: 1px solid $color-main; + @include padding(1); + + .slider-home & { + @include margin(0); + max-width: none; + } + &:hover { - box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.17); + + background: white; + + .article-box__image-container { + background: black; + } + .article-box__image { img { - @include transform(scale(1.1)); + -webkit-filter: grayscale(0); + filter: grayscale(0); } - &:after { - border-width: 12px; - } } + + .article-box__title { + color: $color-background; + } + .article-box__tags { + color: $color-background; + } + .article-box__subtitle { + color: $color-background; + } + .article-box__desc { + color: $color-background; + } + } &__header { position: relative; } + &__image-container { + background: $color-background; + @include transition(all 0.5s ease-in-out); + } + &__image { margin: 0; padding: 0; @@ -60,22 +90,14 @@ $module: ".article-box"; width: 100%; max-width: 100%; height: auto; - @include transition(all 0.3s ease-in-out); - } - &:after { - content: ''; - display: block; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border-width: 0px; - border-color: white; - border-style: solid; - @include transition(all 0.25s ease-in-out); + @include transition(all 0.5s ease-in-out); + + -webkit-filter: grayscale(1); + filter: grayscale(1); + mix-blend-mode: screen; } + } &__placeholder { @@ -106,11 +128,15 @@ $module: ".article-box"; } &__tags { - position: absolute; - bottom: 0; - left: 0; - @include margin-bottom(.55); + text-transform: uppercase; + @include font-size(s); + @include line-height(1.25); + @include typeface(sans-serif); + @include margin(0 0 0 0); + font-weight: weight(regular); + color: $color-main; + @include transition(color 0.5s ease-in-out); } &__btn { @@ -123,7 +149,7 @@ $module: ".article-box"; } &__content { - @include padding(.25 .25 1 .25); + @include padding(.25 .25 .25 .25); position: relative; overflow: hidden; @@ -149,30 +175,47 @@ $module: ".article-box"; @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); + } } &__title { @include font-size(xl); @include line-height(1.25); @include typeface(sans-serif); - @include margin(0 0 .25 0); + @include margin(.5 0 0 0); + font-weight: weight(bold); + color: $color-main; + @include transition(color 0.5s ease-in-out); + } + + &__tag { + color: $color-main; } &__subtitle { - @include font-size(s); + @include font-size(m); @include line-height(.75); - @include typeface(serif); + @include typeface(sans-serif); @include margin-top(.25); - font-weight: weight(regular); - - .slider-home & { - - @include font-size(m); - @include line-height(1); - @include typeface(sans-serif); - @include margin-top(.25); + font-weight: weight(bold); + color: white; + text-transform: uppercase; + @include transition(color 0.5s ease-in-out); + + span { + @include typeface(serif); + @include font-size(s); font-weight: weight(regular); + text-transform: none; + display: block; + @include margin-top(.25); + } + .slider-home & { + @include margin-top(.5); } } @@ -183,6 +226,8 @@ $module: ".article-box"; @include typeface(serif); @include margin(1 0 .25 0); font-weight: weight(light); + color: white; + @include transition(color 0.5s ease-in-out); } &--small { @@ -206,7 +251,7 @@ $module: ".article-box"; background: transparent; &__content { - background: white; + background: transparent; margin-top: 1px; } } diff --git a/app/static/src/sass/modules/sliders/_slider-home.scss b/app/static/src/sass/modules/sliders/_slider-home.scss index 16541246..260630cd 100644 --- a/app/static/src/sass/modules/sliders/_slider-home.scss +++ b/app/static/src/sass/modules/sliders/_slider-home.scss @@ -23,12 +23,9 @@ $module: ".slider-home"; #{$module} { position: relative; + @include margin-bottom(4); @include mq($until: sm) { - @include margin-bottom(1); - } - - @include mq($until: xs) { display: none; } @@ -41,28 +38,83 @@ $module: ".slider-home"; &__slide { width: 100%; - height: $home-slider-height; - background-repeat: no-repeat; - background-position: center center; - background-size: cover; position: relative; } &__wrapper { - position: absolute; - bottom: 75px; - left: 0; - right: 0; + position: relative; + + @include padding(1); + border: 1px solid $color-main; + display: table; + width: 100%; + background: $color-background; + @include transition(background 0.5s ease-in-out); + + &:hover { + background: $color-main; + #{$module}__image-container { + background: black; + } + #{$module}__image { + -webkit-filter: grayscale(0); + filter: grayscale(0); + } + .article-box__title { + color: $color-background; + } + .article-box__tags { + color: $color-background; + } + .article-box__subtitle { + color: $color-background; + } + .article-box__desc { + color: $color-background; + } + } + + } + + &__image-container { + background: $color-background; + @include transition(all 0.5s ease-in-out); + } + + &__image { + + width: 100%; + display: block; + @include transition(all 0.5s ease-in-out); + + -webkit-filter: grayscale(1); + filter: grayscale(1); + mix-blend-mode: screen; + transition: all 0.5s ease-in-out; } &__content { - background: white; - display: inline-block; - @include padding(1); + display: table-cell; + vertical-align: middle; + height: 373px; + + @include mq($until: lg) { + height: 296px; + } + + @include mq($until: md) { + height: 245px; + } + + @include mq($until: sm) { + height: auto; + display: block; + @include margin-top(1); + } } @@ -83,6 +135,13 @@ $module: ".slider-home"; } + .article-box { + + @include padding(0); + border: 0; + + } + // // Overrides lightSlider // diff --git a/app/static/src/sass/pages/_home.scss b/app/static/src/sass/pages/_home.scss index 6699e292..a969cf06 100644 --- a/app/static/src/sass/pages/_home.scss +++ b/app/static/src/sass/pages/_home.scss @@ -268,6 +268,22 @@ $module: ".home"; } + .lSAction { + > a { + background: transparent; + &:before { + color: #F2EDDC; + font-size: 40px; + } + } + > a.lSPrev { + + } + > a.lSNext { + + } + } + } .home-mobile-nav { diff --git a/app/templates/agenda/event/includes/event_card.html b/app/templates/agenda/event/includes/event_card.html index 1be01e29..332dedf3 100644 --- a/app/templates/agenda/event/includes/event_card.html +++ b/app/templates/agenda/event/includes/event_card.html @@ -14,38 +14,36 @@ {% endblock %} {% block image %} - {% with object.images.all|get_type:'card' as images %} - {% if images %} -
- -
- {% else %} -
- {% if object.departments.first %} - {% with object.departments.first as department %} -
- {% endwith %} - {% else %} -
- {% endif %} -
- {% endif %} - {% endwith %} +
+ {% with object.images.all|get_type:'card' as images %} + {% if images %} +
+ +
+ {% else %} +
+ {% if object.departments.first %} + {% with object.departments.first as department %} +
+ {% endwith %} + {% else %} +
+ {% endif %} +
+ {% endif %} + {% endwith %} +
{% endblock %} {% block tags %}
{% if object.departments.first %} {% with object.departments.first as department %} -
- {{ department.department.name }} -
+ {{ department.department.name }} {% endwith %} {% endif %} {% if object.category %} -
- {{ object.category|truncatechars:15 }} -
+ {{ object.category|truncatechars:15 }} {% endif %}
{% endblock %} @@ -59,7 +57,7 @@ {% include 'agenda/includes/event_date_line.html' %} {% if object.location %} -
{{ object.location }} +
{{ object.location }} {% endif %} {% endblock %} diff --git a/app/templates/core/inc/generic_card.html b/app/templates/core/inc/generic_card.html index 538d5d6c..de65aeb4 100644 --- a/app/templates/core/inc/generic_card.html +++ b/app/templates/core/inc/generic_card.html @@ -6,9 +6,6 @@ {% block image %} {% endblock %} - {% block tags %} - {% endblock %} - {% block btn %} {% endblock %} @@ -19,6 +16,10 @@ {% block title %} {% endblock %} +
+ {% block tags %} + {% endblock %} +
{% block subtitle %} {% endblock %} diff --git a/app/templates/home/inc/bio.html b/app/templates/home/inc/bio.html index a38f30c8..b52ab283 100644 --- a/app/templates/home/inc/bio.html +++ b/app/templates/home/inc/bio.html @@ -1,9 +1,16 @@ {% load i18n %} -
+
- {{ host_organization.bio|safe }} + {% if host_organization.bio %} + {{ host_organization.bio|safe }} + {% else %} + « LES FORMES DU DIGITAL » questionnera les enjeux des mutations + formelles au sein d’un monde digitalisé dans les domaines de la musique, de l’art, du + design et de l’architecture au regard des avancées des technosciences. Comment les + champs de création se sont-ils emparés des technologies numériques ? + {% endif %}
diff --git a/app/templates/home/inc/body.html b/app/templates/home/inc/body.html index 5942ea92..e073d8c0 100644 --- a/app/templates/home/inc/body.html +++ b/app/templates/home/inc/body.html @@ -1,35 +1,42 @@ {% load i18n pages_tags mezzanine_tags media_tags organization_tags %}
- {% for slider in home.dynamiccontenthomeslider_set.all %} - {% with slider.content_object.images.all|get_type:'slider' as images %} - {% if images %} -
- {% if slider.content_type.model == "brief" %} +
+
+ Autres articles +
+
+ {% for slider in home.dynamiccontenthomeslider_set.all %} + {% with slider.content_object.images.all|get_type:'slider' as images %} + {% if images %} +
+ {% if slider.content_type.model == "brief" %} + {% include "magazine/brief/inc/brief_card.html" %} + {% elif slider.content_type.model == "article" %} + {% include "magazine/article/includes/article_card.html" with object=slider.content_object %} + {% elif slider.content_type.model == "event" %} + {% include "agenda/event/includes/event_card.html" with object=slider.content_object %} + {% elif slider.content_type.model == "custompage" %} + {% include "pages/page/includes/page_card.html" with object=slider.content_object %} + {% endif %} +
+ {% endif %} + {% endwith %} + {% endfor %} + {% for content in home.dynamiccontenthomebody_set.all %} +
+ {% if content.content_type.model == "brief" %} {% include "magazine/brief/inc/brief_card.html" %} - {% elif slider.content_type.model == "article" %} - {% include "magazine/article/includes/article_card.html" with object=slider.content_object %} - {% elif slider.content_type.model == "event" %} - {% include "agenda/event/includes/event_card.html" with object=slider.content_object %} - {% elif slider.content_type.model == "custompage" %} - {% include "pages/page/includes/page_card.html" with object=slider.content_object %} + {% elif 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 %}
- {% endif %} - {% endwith %} - {% endfor %} - {% for content in home.dynamiccontenthomebody_set.all %} -
- {% if content.content_type.model == "brief" %} - {% include "magazine/brief/inc/brief_card.html" %} - {% elif 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/slider.html b/app/templates/home/inc/slider.html index ff635563..64f307de 100644 --- a/app/templates/home/inc/slider.html +++ b/app/templates/home/inc/slider.html @@ -1,94 +1,77 @@ {% load i18n pages_tags mezzanine_tags media_tags organization_tags %} -
-
+ + {% endif %} + {% endwith %} - {% endfor %} - -
-
-
-
-
    - {% for slider in home.dynamiccontenthomeslider_set.all %} - {% with slider.content_object.images.all|get_type:'slider' as images %} - {% if images %} -
  • - -
    • - {% endif %} - {% endwith %} {% endfor %}
-
+{% endif %} diff --git a/app/templates/includes/footer.html b/app/templates/includes/footer.html index 2de6af26..54e9b2a9 100644 --- a/app/templates/includes/footer.html +++ b/app/templates/includes/footer.html @@ -18,8 +18,10 @@ {% if linked_organization_footer %} -
- Porté par +
+
+ {% trans "Porté par" %} +
{% include 'pages/page/includes/linked_organization_footer.html' %} {% endif %} @@ -45,8 +47,8 @@
-
- + +
diff --git a/app/templates/index.html b/app/templates/index.html index 3c69ecbc..723b3c15 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -17,10 +17,8 @@ {% include "home/inc/slider.html" %} - {% include "home/inc/body.html" %} - {% include "home/inc/bio.html" %} - {% include "home/inc/services.html" %} + {% include "home/inc/body.html" %} {% endblock %} diff --git a/app/templates/magazine/article/includes/article_card.html b/app/templates/magazine/article/includes/article_card.html index 0e2fb82d..9d2906d8 100644 --- a/app/templates/magazine/article/includes/article_card.html +++ b/app/templates/magazine/article/includes/article_card.html @@ -23,46 +23,37 @@ {% block image %} {% with object.images.all|get_type:'card' as images %} - {% if images %} -
- -
- {% else %} -
- {% if object.department %} -
- {% else %} -
- {% endif %} -
- {% endif %} - {% endwith %} -{% endblock %} +
+ + {% if images %} +
+ +
+ {% else %} +
+ {% if object.department %} +
+ {% else %} +
+ {% endif %} +
+ {% endif %} -{% block tags %} -
-
- {% trans 'News' %}
- {% if object.department %} -
- {{ object.department.name }} -
- {% endif %} -
+ {% endwith %} {% endblock %} {% block content %} {{ object.description|richtext_filters|safe|truncatechars_html:200 }} {% endblock %} -{% block subtitle %} +{% block tags %} {% comment %} {{ object.publish_date|date:"DATE_FORMAT" }} {% endcomment %} {% for category in object.categories.all %} {% comment %}{% if forloop.first %} | {% endif %}{% endcomment %} {% if not forloop.first %}, {% endif %} - {{ category }} + {{ category }} {% endfor %} {% endblock %} diff --git a/app/templates/pages/custompage/includes/custompage_card.html b/app/templates/pages/custompage/includes/custompage_card.html index 92f46ee5..0ec9ffaf 100644 --- a/app/templates/pages/custompage/includes/custompage_card.html +++ b/app/templates/pages/custompage/includes/custompage_card.html @@ -13,23 +13,25 @@ {{ object.get_absolute_url }} {% endblock %} {% block image %} - {% with object.images.all|get_type:'card' as images %} - {% if images %} -
- -
- {% else %} -
- {% with object.get_ascendants|last as top_level_parent %} - {% if top_level_parent.get_content_model %} -
- {% else %} -
- {% endif %} - {% endwith %} -
- {% endif %} - {% endwith %} +
+ {% with object.images.all|get_type:'card' as images %} + {% if images %} +
+ +
+ {% else %} +
+ {% with object.get_ascendants|last as top_level_parent %} + {% if top_level_parent.get_content_model %} +
+ {% else %} +
+ {% endif %} + {% endwith %} +
+ {% endif %} + {% endwith %} +
{% endblock %} {% block content %} -- 2.39.5