From 2e2b9f14d6f44bc0e8ace770ee3c65979fe11c66 Mon Sep 17 00:00:00 2001 From: Philippe Barbosa Date: Wed, 23 Mar 2016 19:09:28 +0100 Subject: [PATCH] slider styles updates --- app/festival/static/css/index.css | 69 +++++++++++++++++-- app/festival/static/js/index.js | 2 +- .../static/scss/modules/event-card.scss | 31 +++++---- .../static/scss/modules/hero-slider.scss | 31 +++++++++ .../includes/event_metainfo_slider.html | 36 ++++++---- app/templates/base.html | 8 ++- 6 files changed, 141 insertions(+), 36 deletions(-) diff --git a/app/festival/static/css/index.css b/app/festival/static/css/index.css index c4dcd401..3ef969e2 100755 --- a/app/festival/static/css/index.css +++ b/app/festival/static/css/index.css @@ -2951,7 +2951,7 @@ th { } /* line 30, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/event-card.scss */ -.event__name { +.event__name, .hero__slider__name { margin: 0 0 0.3rem; font-size: 1rem; text-transform: uppercase; @@ -2975,7 +2975,7 @@ th { } /* line 51, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/event-card.scss */ -.event__meta { +.event__meta, .event__meta--alt { display: block; padding: .5rem 0; font-family: "Interstate", "Helvetica Neue", Helvetica, Arial, sans-serif; @@ -2994,7 +2994,26 @@ th { border-bottom: 1px solid #000; } -/* line 87, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/event-card.scss */ +/* line 71, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/event-card.scss */ +.event__meta--alt { + padding: 0; + margin: 0; + color: white; + font-size: 1rem; +} + +/* line 78, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/event-card.scss */ +.event__meta--alt .event__meta__inner { + border-top: none; + border-bottom: none; +} + +/* line 83, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/event-card.scss */ +.event__meta--alt .event__meta__location { + color: white; +} + +/* line 88, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/event-card.scss */ .event__meta__location { display: block; text-decoration: none; @@ -3002,7 +3021,7 @@ th { font-weight: 400; } -/* line 97, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/event-card.scss */ +/* line 98, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/event-card.scss */ .event__meta__cta { text-transform: uppercase; display: block; @@ -3010,7 +3029,7 @@ th { background: #fff; } -/* line 105, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/event-card.scss */ +/* line 106, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/event-card.scss */ .event__meta__btn { width: 50%; display: block; @@ -3018,7 +3037,7 @@ th { margin: 1rem auto; } -/* line 112, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/event-card.scss */ +/* line 113, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/event-card.scss */ .event__detail, .event__detail a { text-align: right; @@ -3083,6 +3102,44 @@ th { height: 500px; background: #d2ba88 no-repeat center; background-size: cover; + position: relative; +} + +/* line 12, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/hero-slider.scss */ +.hero__slider__item:before { + content: ""; + position: absolute; + width: 100%; + bottom: 0; + left: 0; + height: 60%; + background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, black 100%); +} + +/* line 23, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/hero-slider.scss */ +.hero__slider__infos { + position: absolute; + width: 100%; + bottom: 0; + left: 0; + padding: 1rem; + z-index: 10; +} + +/* line 32, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/hero-slider.scss */ +.hero__slider__name { + font-size: 3rem; + line-height: 1; +} + +/* line 36, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/hero-slider.scss */ +.hero__slider__name a { + text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4); +} + +/* line 39, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/hero-slider.scss */ +.hero__slider__name:hover { + color: white; } /* line 1, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/calendar.scss */ diff --git a/app/festival/static/js/index.js b/app/festival/static/js/index.js index 16b5799a..cedfae72 100644 --- a/app/festival/static/js/index.js +++ b/app/festival/static/js/index.js @@ -50,7 +50,7 @@ $(function() { auto: true, loop: true, slideEndAnimation: true, - pause: 6000, + pause: 8000, keyPress: true, controls: true, diff --git a/app/festival/static/scss/modules/event-card.scss b/app/festival/static/scss/modules/event-card.scss index 6d756a0b..1e9d9a55 100644 --- a/app/festival/static/scss/modules/event-card.scss +++ b/app/festival/static/scss/modules/event-card.scss @@ -66,22 +66,23 @@ border-top: 1px solid #000; border-bottom: 1px solid #000; } +} + +.event__meta--alt { + @extend .event__meta; + padding: 0; + margin: 0; + color: white; + font-size: 1rem; + + .event__meta__inner { + border-top: none; + border-bottom: none; + } - // padding: .3rem; - // background: $main_color; - // border: 1px solid $gray_light; - // color: black; - // &:before { - // content: '\f041'; - // font-family: $icon-font; - // display: inline-block; - // *display: inline; - // *zoom: 1; - // vertical-align: middle; - // margin-right: .6rem; - // font-size: 2rem; - // color: transparentize($main_color, .5); - // } + .event__meta__location { + color: white; + } } .event__meta__location { diff --git a/app/festival/static/scss/modules/hero-slider.scss b/app/festival/static/scss/modules/hero-slider.scss index 5b51b687..b4b7ca1a 100644 --- a/app/festival/static/scss/modules/hero-slider.scss +++ b/app/festival/static/scss/modules/hero-slider.scss @@ -8,4 +8,35 @@ height: 500px; background: $main_color no-repeat center; background-size: cover; + position: relative; + &:before { + content: ""; + position: absolute; + width: 100%; + bottom: 0; + left: 0; + height: 60%; + background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(0,0,0,1) 100%); + } +} + +.hero__slider__infos { + position: absolute; + width: 100%; + bottom: 0; + left: 0; + padding: 1rem; + z-index: 10; +} + +.hero__slider__name { + @extend .event__name; + font-size: 3rem; + line-height: 1; + a { + text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4); + } + &:hover { + color: white; + } } \ No newline at end of file diff --git a/app/templates/agenda/includes/event_metainfo_slider.html b/app/templates/agenda/includes/event_metainfo_slider.html index 5c99b219..a9061c66 100644 --- a/app/templates/agenda/includes/event_metainfo_slider.html +++ b/app/templates/agenda/includes/event_metainfo_slider.html @@ -1,13 +1,25 @@ {% load i18n mezzanine_tags event_tags %} -

- - {{ event.start }} - {% if event.end %} - {% trans "-" %} {% if event.end|date == event.start|date %}{{ event.end|time:"TIME_FORMAT" }}{% else %}{{ event.end }}{% endif %} - {% endif %} - {% if event.location %} - {{ event.location }} - {% endif %} - -

-{# {% trans "read more" %} #} +{% editable event.start event.end event.location %} +
+
+
+
+ {{ event.start }} + {% if event.end %} +
+ {% if event.end|date == event.start|date %}{{ event.end|time:"TIME_FORMAT" }}{% else %}{{ event.end }}{% endif %} + {% endif %} + {% if event.location %} + {{ event.location }} + {% endif %} +
+ +
+ + Réserver + +
+
+
+
+{% endeditable %} \ No newline at end of file diff --git a/app/templates/base.html b/app/templates/base.html index bf5e1603..01b28618 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -92,9 +92,13 @@ {% festival_event_featured as events %} {% for event in events %}
  • -
    -

    {{ event.title }}

    +
    +
    +

    + {{ event.title }} +

    {% include "agenda/includes/event_metainfo_slider.html" %} +
    • {% endfor %} -- 2.39.5