From 53fc50ce756c116981a1f60ffdce6603c7b2589e Mon Sep 17 00:00:00 2001 From: =?utf8?q?Je=CC=81re=CC=81my=20Fabre?= Date: Tue, 14 Feb 2017 11:52:53 +0100 Subject: [PATCH] Update related content. Now related content is displayed as a slider. --- app/static/src/js/index.js | 4 ++ .../src/js/modules/lightsliderpersons-init.js | 41 ++++++++++++ .../src/js/modules/lightsliderrelated-init.js | 41 ++++++++++++ app/static/src/sass/modules/_all.scss | 1 + .../src/sass/modules/boxes/_article-box.scss | 2 + .../sass/modules/sliders/_slider-persons.scss | 29 +++++++++ app/static/src/sass/vendors/_lightslider.scss | 16 +++++ .../agenda/event/includes/event_card.html | 4 +- app/templates/agenda/event_detail.html | 16 ++--- .../agenda/includes/event_date_card.html | 12 ++++ .../agenda/includes/event_date_line.html | 62 ++++++++++++++++--- .../agenda/includes/event_linecard.html | 7 ++- app/templates/core/inc/related_content.html | 33 ++++++---- .../article/includes/article_card.html | 2 +- .../inc/person/person_card_square.html | 2 +- app/templates/pages/page.html | 2 +- .../pages/page/includes/page_card.html | 2 +- 17 files changed, 241 insertions(+), 35 deletions(-) create mode 100644 app/static/src/js/modules/lightsliderpersons-init.js create mode 100644 app/static/src/js/modules/lightsliderrelated-init.js create mode 100644 app/static/src/sass/modules/sliders/_slider-persons.scss create mode 100644 app/templates/agenda/includes/event_date_card.html diff --git a/app/static/src/js/index.js b/app/static/src/js/index.js index c9be516d..da8115fa 100644 --- a/app/static/src/js/index.js +++ b/app/static/src/js/index.js @@ -14,6 +14,8 @@ var StickyKitInit = require('./modules/sticky-kit-init'); var LightSliderPageInit = require('./modules/lightsliderpage-init'); var LightSliderHomeInit = require('./modules/lightsliderhome-init'); var LightSliderNetworkInit = require('./modules/lightslidernetwork-init'); +var LightSliderPersonsInit = require('./modules/lightsliderpersons-init'); +var LightSliderRelatedInit = require('./modules/lightsliderrelated-init'); var LazyLoadInit = require('./modules/lazyload-init'); var HomeMenu = require('./modules/home-menu'); var Audio = require('./modules/audio'); @@ -37,6 +39,8 @@ window[StickyKitInit] = new StickyKitInit(); window[LightSliderPageInit] = new LightSliderPageInit(); window[LightSliderHomeInit] = new LightSliderHomeInit(); window[LightSliderNetworkInit] = new LightSliderNetworkInit(); +window[LightSliderPersonsInit] = new LightSliderPersonsInit(); +window[LightSliderRelatedInit] = new LightSliderRelatedInit(); window[LazyLoadInit] = new LazyLoadInit(); window[HomeMenu] = new HomeMenu(); window[Audio] = new Audio(); diff --git a/app/static/src/js/modules/lightsliderpersons-init.js b/app/static/src/js/modules/lightsliderpersons-init.js new file mode 100644 index 00000000..aaea7a0f --- /dev/null +++ b/app/static/src/js/modules/lightsliderpersons-init.js @@ -0,0 +1,41 @@ +var LightSliderPersonsInit = function() { + + this.feed = null; + + // + // Init + // + this.init(); + +}; + +LightSliderPersonsInit.prototype.init = function() { + + var that = this; + + $('[data-slider-persons]').lightSlider({ + item: 2, + slideMargin: 0, + pager: false, + loop: true, + auto: true, + pauseOnHover: true, + responsive: [ + { + breakpoint: 752, + settings: { + item: 2 + } + }, + { + breakpoint: 480, + settings: { + item: 1 + } + } + ] + }); + +}; + +module.exports = LightSliderPersonsInit; diff --git a/app/static/src/js/modules/lightsliderrelated-init.js b/app/static/src/js/modules/lightsliderrelated-init.js new file mode 100644 index 00000000..d24734ba --- /dev/null +++ b/app/static/src/js/modules/lightsliderrelated-init.js @@ -0,0 +1,41 @@ +var LightSliderRelatedInit = function() { + + this.slider = null; + + // + // Init + // + this.init(); + +}; + +LightSliderRelatedInit.prototype.init = function() { + + var that = this; + + that.slider = $('[data-slider-related]').lightSlider({ + item: 1, + slideMargin: 0, + pager: false, + loop: true, + auto: false, + pauseOnHover: true, + responsive: [ + { + breakpoint: 752, + settings: { + item: 1 + } + }, + { + breakpoint: 480, + settings: { + item: 1 + } + } + ] + }); + +}; + +module.exports = LightSliderRelatedInit; diff --git a/app/static/src/sass/modules/_all.scss b/app/static/src/sass/modules/_all.scss index 6a970b26..be0adf8b 100755 --- a/app/static/src/sass/modules/_all.scss +++ b/app/static/src/sass/modules/_all.scss @@ -44,6 +44,7 @@ @import 'sliders/slider-page'; @import 'sliders/slider-home'; @import 'sliders/slider-network'; +@import 'sliders/slider-persons'; // Page modules @import 'breadcrumb'; diff --git a/app/static/src/sass/modules/boxes/_article-box.scss b/app/static/src/sass/modules/boxes/_article-box.scss index da34dc69..2a8276c3 100644 --- a/app/static/src/sass/modules/boxes/_article-box.scss +++ b/app/static/src/sass/modules/boxes/_article-box.scss @@ -254,6 +254,8 @@ $module: ".article-box"; border: 0; @include padding(0); + height: auto; + &:after { content: ""; diff --git a/app/static/src/sass/modules/sliders/_slider-persons.scss b/app/static/src/sass/modules/sliders/_slider-persons.scss new file mode 100644 index 00000000..397eb30d --- /dev/null +++ b/app/static/src/sass/modules/sliders/_slider-persons.scss @@ -0,0 +1,29 @@ +// -*- coding: utf-8 -*- + +// Copyright (c) 2016-2017 Ircam +// Copyright (c) 2016-2017 Jérémy Fabre + +// This file is part of mezzanine-organization. + +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. + +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. + +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . + +$module: ".slider-persons"; + +#{$module} { + + // + // Overrides lightSlider + // + +} diff --git a/app/static/src/sass/vendors/_lightslider.scss b/app/static/src/sass/vendors/_lightslider.scss index 4a16af9c..05165293 100644 --- a/app/static/src/sass/vendors/_lightslider.scss +++ b/app/static/src/sass/vendors/_lightslider.scss @@ -29,3 +29,19 @@ } } + +.lSAction { + > a { + background: transparent; + &:before { + color: #F2EDDC; + font-size: 40px; + } + } + > a.lSPrev { + + } + > a.lSNext { + + } +} diff --git a/app/templates/agenda/event/includes/event_card.html b/app/templates/agenda/event/includes/event_card.html index c3ab60a5..a948df61 100644 --- a/app/templates/agenda/event/includes/event_card.html +++ b/app/templates/agenda/event/includes/event_card.html @@ -18,7 +18,7 @@ {% with object.images.all|get_type:'card' as images %} {% if images %}
- +
{% else %}
@@ -54,7 +54,7 @@ {% block subtitle %} - {% include 'agenda/includes/event_date_line.html' %} + {% include 'agenda/includes/event_date_card.html' %} {% if object.location %}
{{ object.location }} diff --git a/app/templates/agenda/event_detail.html b/app/templates/agenda/event_detail.html index 60920d64..42a7b93d 100644 --- a/app/templates/agenda/event_detail.html +++ b/app/templates/agenda/event_detail.html @@ -114,13 +114,15 @@
- {% for person in event.persons.all %} - {% with person.person as person %} -
- {% include "network/inc/person/person_card_square.html" %} -
- {% endwith %} - {% endfor %} +
+ {% for person in event.persons.all %} + {% with person.person as person %} +
+ {% include "network/inc/person/person_card_square.html" %} +
+ {% endwith %} + {% endfor %} +
diff --git a/app/templates/agenda/includes/event_date_card.html b/app/templates/agenda/includes/event_date_card.html new file mode 100644 index 00000000..4aaa9a36 --- /dev/null +++ b/app/templates/agenda/includes/event_date_card.html @@ -0,0 +1,12 @@ +{% load i18n %} +{% load event_tags %} + +{% if object.start and not object.end %} + {{ object.start|date:"l j F" }}
+{% else %} + {% if object.start|date:"d.m.y" == object.end|date:"d.m.y" %} + {{ object.start|date:"l j F" }}
+ {% else %} + {{ object.start|date:"j F" }} {% trans "to" %} {{ object.end|date:"j F" }} + {% endif %} +{% endif %} diff --git a/app/templates/agenda/includes/event_date_line.html b/app/templates/agenda/includes/event_date_line.html index 82f5fe6e..6a41de20 100644 --- a/app/templates/agenda/includes/event_date_line.html +++ b/app/templates/agenda/includes/event_date_line.html @@ -1,12 +1,54 @@ -{% load i18n %} -{% load event_tags %} - -{% if object.start and not object.end %} - {{ object.start|date:"l j F" }} -{% else %} - {% if object.start|date:"d.m.y" == object.end|date:"d.m.y" %} - {{ object.start|date:"l j F" }} +{% load event_tags pages_tags mezzanine_tags organization_tags i18n %} +{% with event.periods.all as periods %} + + {% if event.start and not event.end %} + {{ event.start|date:"DATE_EVENT_FORMAT" }},
+ + {% if event.start and event.start|date:"H:i" != "23:59" %} + {{ event.start|time:"TIME_FORMAT" }} + {% endif %} + {% else %} - {{ object.start|date:"j F" }} {% trans "to" %} {{ object.end|date:"j F" }} + + {% if event.start|date:"d.m.y" == event.end|date:"d.m.y" %} + {% if not periods %} + {{ event.start|date:"DATE_EVENT_FORMAT" }},
+ + {% if event.end and event.end|date:"H:i" != "23:59" %} + {{ event.start|time:"TIME_FORMAT" }} - {{ event.end|time:"TIME_FORMAT" }} + {% else %} + {{ event.start|time:"TIME_FORMAT" }} + {% endif %} + {% else %} + {{ event.start|date:"DATE_EVENT_FORMAT" }},
+ {% for period in periods %} + {% if period.date_to and period.date_to|date:"H:i" != "23:59" %} + {{ period.date_from|time:"TIME_FORMAT" }} - {{ period.date_to|time:"TIME_FORMAT" }} + {% else %} + {% if forloop.last or periods|length == 2 %} {% trans "and"%} {% elif not forloop.first %}, {% endif %} + {{ period.date_from|time:"TIME_FORMAT" }} + {% endif %} + {% endfor %} + {% endif %} + + {% elif event.start|date:"m.y" == event.end|date:"m.y" %} + {{ event.start|date:"WEEK_DAY_FORMAT" }} + {% if event.end|subtract:event.start|get_attr:"days" > 1 %} + {% trans "through" %} + {% else %} + {% trans "and" %} + {% endif %} + {{ event.end|date:"DATE_EVENT_FORMAT" }} + + {% else %} + {{ event.start|date:"DATE_EVENT_FORMAT" }} {% trans "through" %} {{ event.end|date:"DATE_EVENT_FORMAT" }},
+ + {% if event.end and event.end|date:"H:i" != "23:59" %} + {{ event.start|time:"TIME_FORMAT" }} - {{ event.end|time:"TIME_FORMAT" }} + {% else %} + {{ event.start|time:"TIME_FORMAT" }} + {% endif %} + {% endif %} + {% endif %} -{% endif %} +{% endwith %} diff --git a/app/templates/agenda/includes/event_linecard.html b/app/templates/agenda/includes/event_linecard.html index 803218b4..648b5d12 100644 --- a/app/templates/agenda/includes/event_linecard.html +++ b/app/templates/agenda/includes/event_linecard.html @@ -56,7 +56,12 @@
{% if event.location %} -
{{ event.location }}
+
+ {{ event.location }} + {% if event.location.room %} + / {{ event.location.room }} + {% endif %} +
{% endif %}

{{ event.title }} diff --git a/app/templates/core/inc/related_content.html b/app/templates/core/inc/related_content.html index 9e81611c..10956763 100644 --- a/app/templates/core/inc/related_content.html +++ b/app/templates/core/inc/related_content.html @@ -8,21 +8,32 @@

-
-
+
+
+ {% 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 %} -
+ {% if forloop.counter0 == 0 or forloop.counter|divisibleby:3 %} +
+
+ {% endif %} +
+ {% 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 %} +
+ {% if forloop.last or forloop.counter|divisibleby:2 %} +
+
+ {% endif %} {% endfor %} +
+
diff --git a/app/templates/magazine/article/includes/article_card.html b/app/templates/magazine/article/includes/article_card.html index 9d2906d8..aed1e92b 100644 --- a/app/templates/magazine/article/includes/article_card.html +++ b/app/templates/magazine/article/includes/article_card.html @@ -27,7 +27,7 @@ {% if images %}
- +
{% else %}
diff --git a/app/templates/network/inc/person/person_card_square.html b/app/templates/network/inc/person/person_card_square.html index c1254821..ec146f8d 100644 --- a/app/templates/network/inc/person/person_card_square.html +++ b/app/templates/network/inc/person/person_card_square.html @@ -6,7 +6,7 @@
- person + person
diff --git a/app/templates/pages/page.html b/app/templates/pages/page.html index f940ffc7..babe9714 100644 --- a/app/templates/pages/page.html +++ b/app/templates/pages/page.html @@ -25,7 +25,7 @@
-
+
{% block page_title %} {{ page.title }} {% endblock %} diff --git a/app/templates/pages/page/includes/page_card.html b/app/templates/pages/page/includes/page_card.html index 92f46ee5..210db39b 100644 --- a/app/templates/pages/page/includes/page_card.html +++ b/app/templates/pages/page/includes/page_card.html @@ -16,7 +16,7 @@ {% with object.images.all|get_type:'card' as images %} {% if images %}
- +
{% else %}
-- 2.39.5