slider styles updates

diff --git a/app/festival/static/css/index.css b/app/festival/static/css/index.css
index c4dcd4014fb8c354b64d801b07e5da1357b2eb8f..3ef969e28c431aea5fda3f0aed05c9a640e0d0d4 100755 (executable)
--- 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 16b5799a6c28e38378a8486682f7e79072fe2753..cedfae723068771f397953e04cee9d57291954e5 100644 (file)
--- 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 6d756a0bbcb87deaa92c85b20a3caa0a64ba7f4e..1e9d9a55967bd45eb89b202514323c8d10814d7b 100644 (file)
--- 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 5b51b687bb87a5b097425ba2c0d16fec2261ff61..b4b7ca1a3222ebee4f1a362093d87abfea164734 100644 (file)
--- 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 5c99b219406eeb06ca1141f830740dfcf0f8fc58..a9061c6638213a45d9550077aa241a5632bf0f9a 100644 (file)
--- 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 %}
-<p class="event__meta__slider">
-    <span>
-        {{ 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 %}
-        <a href="{% url "event_list_location" event.location.slug %}" class="event__meta__location__slider">{{ event.location }}</a>
-        {% endif %}
-    </span>
-</p>
-{# <a href="{{ event.get_absolute_url }}" class="event__meta__cta">{% trans "read more" %}</a> #}
+{% editable event.start event.end event.location %}
+<div class="event__meta--alt">
+    <div class="event__meta__inner">
+        <div class="split-container">
+            <div class="split-left">
+                {{ event.start }}
+                {% if event.end %}
+                <br>
+                {% if event.end|date == event.start|date %}{{ event.end|time:"TIME_FORMAT" }}{% else %}{{ event.end }}{% endif %}
+                {% endif %}
+                {% if event.location %}
+                <a href="{% url "event_list_location" event.location.slug %}" class="event__meta__location">{{ event.location }}</a>
+                {% endif %}
+            </div>
+
+            <div class="split-right">
+                <a href="{{ event.get_absolute_url }}" class="btn">
+                    <i class="icon icon__bookmark"></i> Réserver
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
+{% endeditable %}
\ No newline at end of file

diff --git a/app/templates/base.html b/app/templates/base.html
index bf5e1603612a1263071370a1eb8a4b25f4ad770d..01b28618b086dc93948a47a2915aa6cd0a9b7dd0 100644 (file)
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -92,9 +92,13 @@
             {% festival_event_featured as events %}
             {% for event in events %}
               <li class="hero__slider__item" style="background-image: url({{ event.featured_image_header.url }});">
-                  <div class="container">
-                      <p>{{ event.title }}</p>
+                  <div class="hero__slider__infos">
+                    <div class="container">
+                      <h3 class="hero__slider__name">
+                          <a href="{{ event.get_absolute_url }}">{{ event.title }}</a>
+                      </h3>
                       {% include "agenda/includes/event_metainfo_slider.html" %}
+                    </div>
                   </div>
               </li>
             {% endfor %}