From: Philippe Barbosa <contact@philippebarbosa.com>
Date: Fri, 8 Apr 2016 16:21:28 +0000 (+0200)
Subject: Various fixes from tasks, audio player designed
X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=75e4f77e92603fa8101b8c029b2c6cd8073c1758;p=mezzo.git

Various fixes from tasks, audio player designed
---

diff --git a/app/festival/static/css/index.css b/app/festival/static/css/index.css
index f4640bc8..19c2b12a 100755
--- a/app/festival/static/css/index.css
+++ b/app/festival/static/css/index.css
@@ -3247,6 +3247,11 @@ th {
   content: "";
 }
 
+/* line 115, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/icons.scss */
+.icon__play:before {
+  content: "";
+}
+
 /* line 154, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/icons.scss */
 .icon__calendar:before {
   content: "";
@@ -3582,92 +3587,63 @@ th {
   margin-bottom: 0;
 }
 
-/**
- * Tabs navigation
- */
-/* line 8, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */
-.c-tabs-nav {
-  display: block;
-  float: left;
-  text-align: left;
-  width: 40%;
+/* line 1, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/audio-player.scss */
+.audio__player,
+.audio__playlist {
+  padding: 1rem;
+  background: #e0cfad;
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.4);
 }
 
-/* line 18, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */
-.c-tabs-nav__link {
-  color: #d2ba88;
+/* line 16, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/audio-player.scss */
+.audio__player audio,
+.audio__playlist audio {
+  width: 100%;
+  background: white;
+  margin: 0 auto;
   display: block;
-  transition: color 0.3s;
-  font-size: .6em;
-  padding: 0.25rem;
 }
 
-/* line 32, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */
-.c-tabs-nav__link:last-child {
-  margin-right: 0;
-}
-
-/* line 40, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */
-.c-tabs-nav__link.is-active {
-  color: #b18d43;
+/* line 25, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/audio-player.scss */
+.audio__player {
+  border-bottom: 1px solid #fff;
+  background: #fff;
 }
 
-/* line 45, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */
-.c-tabs-nav__link i,
-.c-tabs-nav__link span {
-  margin: 0;
-  padding: 0;
+/* line 30, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/audio-player.scss */
+.audio__playlist__item {
+  font-size: .75rem;
+  color: #555;
   line-height: 1;
+  transition: .3s;
 }
 
-/* line 52, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */
-.c-tabs-nav__link i {
-  font-size: 18px;
-}
-
-/* line 56, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */
-.c-tabs-nav__link span {
-  display: none;
-  font-size: 18px;
-}
-
-/**
- * Tab
- */
-/* line 74, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */
-.c-tab {
-  display: none;
-  float: left;
-  width: 60%;
-}
-
-/* line 84, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */
-.c-tab.is-active {
-  display: block;
+/* line 35, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/audio-player.scss */
+.audio__playlist__item:before {
+  content: normal;
+  font-family: "Font-Awesome";
+  content: "";
+  font-size: 0;
+  transition: .3s;
 }
 
-/* line 88, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */
-.c-tab__content {
-  padding-left: .5rem;
+/* line 43, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/audio-player.scss */
+.active .audio__playlist__item {
+  color: #000;
 }
 
-/**
- * Tabs no-js fallback
- */
-/* line 95, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */
-.c-tabs.no-js .c-tabs-nav {
-  display: none;
+/* line 45, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/audio-player.scss */
+.active .audio__playlist__item:before {
+  font-size: 0.5rem;
+  margin-right: .3rem;
+  color: #000;
 }
 
-/* line 99, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */
-.c-tabs.no-js .c-tab {
+/* line 52, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/audio-player.scss */
+.audio__title {
   display: block;
-  margin-bottom: 1.5rem;
-}
-
-/* line 104, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */
-.c-tabs.no-js .c-tab:last-child {
-  margin-bottom: 0;
+  color: #000;
+  font-size: .75rem;
 }
 
 /* line 1, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/location.scss */
@@ -3693,15 +3669,6 @@ th {
   .c-tabs-nav__link span{
     display: block;
   }
-  /* line 62, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */
-  .c-tabs-nav__link i{
-    margin-bottom: 12px;
-    font-size: 22px;
-  }
-  /* line 66, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */
-  .c-tabs-nav__link span{
-    display: block;
-  }
 }
 @media (min-width: 769px){
   /* line 72, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_layout.scss */
@@ -3774,6 +3741,12 @@ th {
   .hero__slider__name{
     font-size: 3rem;
   }
+  /* line 1, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/audio-player.scss */
+  .audio__player,
+  .audio__playlist{
+    width: 50%;
+    margin: 0 auto;
+  }
 }
 @media (min-width: 961px){
   /* line 59, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_typography.scss */
@@ -4000,19 +3973,11 @@ th {
   .c-tab{
     width: 70%;
   }
-  /* line 8, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */
-  .c-tabs-nav{
-    width: 30%;
-  }
-  /* line 18, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */
-  .c-tabs-nav__link{
-    padding: 0;
-    font-size: .75rem;
-    line-height: 1.6;
-  }
-  /* line 74, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */
-  .c-tab{
-    width: 70%;
+  /* line 1, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/audio-player.scss */
+  .audio__player,
+  .audio__playlist{
+    width: 33%;
+    margin: 0;
   }
   /* line 1, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/location.scss */
   .location__title{
diff --git a/app/festival/static/js/index.js b/app/festival/static/js/index.js
index ee42447f..55d86a9a 100644
--- a/app/festival/static/js/index.js
+++ b/app/festival/static/js/index.js
@@ -130,7 +130,9 @@ $(function() {
      * Tabs
      */
 
+   var zeTab = $('#tabs');
 
+   if (zeTab.length) {
     var myTabs = tabs({
         el: '#tabs',
         tabNavigationLinks: '.c-tabs-nav__link',
@@ -138,52 +140,60 @@ $(function() {
     });
 
     myTabs.init();
+   }
+
 
     /**
      * Audio player
      */
 
-    function init_player() {
-        var audio;
-        var playlist;
-        var tracks;
-        var current;
-
-        current = 0;
-        audio = $('#audio');
-        playlist = $('#playlist');
-        tracks = playlist.find('li a');
-        len = tracks.length - 1;
-        audio[0].volume = .90;
-        //    audio[0].play();
-        playlist.find('a').click(function(e) {
-            e.preventDefault();
-            link = $(this);
-            current = link.parent().index();
-            run_player(link, audio[0]);
-        });
-        audio[0].addEventListener('ended', function(e) {
-            current++;
-            if (current == len) {
-                current = 0;
-                link = playlist.find('a')[0];
-            } else {
-                link = playlist.find('a')[current];
-            }
-            run_player($(link), audio[0]);
-        });
-    }
-
-    function run_player(link, player) {
-        $(player).find('#primarysrc').attr('src', link.attr('href'));
-        $(player).find('#secondarysrc').attr('src', link.attr('data-altsrc'));
-        par = link.parent();
-        par.addClass('active').siblings().removeClass('active');
-        player.load();
-        player.play();
-    }
-
-    init_player();
+     if ($('#audio').length) {
+        function init_player() {
+            var audio;
+            var playlist;
+            var tracks;
+            var current;
+
+            current = 0;
+            audio = $('#audio');
+            playlist = $('#playlist');
+            tracks = playlist.find('li a');
+            len = tracks.length - 1;
+            audio[0].volume = .90;
+            //    audio[0].play();
+            playlist.find('a').click(function(e) {
+                e.preventDefault();
+                link = $(this);
+                current = link.parent().index();
+                run_player(link, audio[0]);
+                linkTitle = link.text();
+                $('.audio__title').html(linkTitle);
+            });
+            audio[0].addEventListener('ended', function(e) {
+                current++;
+                if (current == len) {
+                    current = 0;
+                    link = playlist.find('a')[0];
+                } else {
+                    link = playlist.find('a')[current];
+                }
+                run_player($(link), audio[0]);
+            });
+        }
+
+        function run_player(link, player) {
+            $(player).find('#primarysrc').attr('src', link.attr('href'));
+            $(player).find('#secondarysrc').attr('src', link.attr('data-altsrc'));
+            par = link.parent();
+            par.addClass('active').siblings().removeClass('active');
+            player.load();
+            player.play();
+        }
+
+        init_player();
+     }
+
+
 
 
 });
diff --git a/app/festival/static/scss/base/_typography.scss b/app/festival/static/scss/base/_typography.scss
index d65eb4b9..ad9c8373 100755
--- a/app/festival/static/scss/base/_typography.scss
+++ b/app/festival/static/scss/base/_typography.scss
@@ -234,17 +234,6 @@ pre > p {
   font-weight: $bold;
 }
 
-.location__title {
-  text-transform: uppercase;
-  margin: 0;
-  padding: 0;
-  font: $bold 1.1em/1.2 $base_font_family;
-  color: $main_color_darker;
-  @media (min-width : $desktop ) {
-    font: $bold 1.7em/1.2 $base_font_family;
-  }
-}
-
 .section__title {
   line-height: $base_line_height;
   font-family: $base_font_family;
diff --git a/app/festival/static/scss/index.scss b/app/festival/static/scss/index.scss
index 0f5af632..d1ae5215 100755
--- a/app/festival/static/scss/index.scss
+++ b/app/festival/static/scss/index.scss
@@ -84,5 +84,5 @@
         'modules/push-calendar',
         'modules/calendar',
         'modules/tabs',
-        'modules/tabs',
+        'modules/audio-player',
         'modules/location';
\ No newline at end of file
diff --git a/app/festival/static/scss/modules/audio-player.scss b/app/festival/static/scss/modules/audio-player.scss
new file mode 100644
index 00000000..09b95afc
--- /dev/null
+++ b/app/festival/static/scss/modules/audio-player.scss
@@ -0,0 +1,56 @@
+.audio__player,
+.audio__playlist {
+
+  @media (min-width : $tablet ) {
+    width: 50%;
+    margin: 0 auto;
+  }
+  @media (min-width : $desktop ) {
+    width: 33%;
+    margin: 0;
+  }
+
+  padding: 1rem;
+  background: lighten($main_color, 10);
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.4);
+  audio {
+    width: 100%;
+    // max-width: 100%;
+    background: white;
+    margin: 0 auto;
+    display: block;
+  }
+}
+
+.audio__player {
+  border-bottom: 1px solid $white;
+  background: $white;
+}
+
+.audio__playlist__item {
+  font-size: .75rem;
+  color: $base_font_color;
+  line-height: 1;
+  transition: .3s;
+  &:before {
+    content: normal;
+    font-family: $icon-font;
+    content: $fa-var-play;
+    font-size: 0;
+    transition: .3s;
+  }
+}
+.active .audio__playlist__item {
+  color: $black;
+  &:before {
+    font-size: 0.5rem;
+    margin-right: .3rem;
+    color: $black;
+  }
+}
+
+.audio__title {
+  display: block;
+  color: $black;
+  font-size: .75rem;
+}
\ No newline at end of file
diff --git a/app/festival/static/scss/modules/icons.scss b/app/festival/static/scss/modules/icons.scss
index 57eff328..2509f0ee 100755
--- a/app/festival/static/scss/modules/icons.scss
+++ b/app/festival/static/scss/modules/icons.scss
@@ -112,7 +112,7 @@
 // .icon__step-backward:before { content: $fa-var-step-backward; }
 // .icon__fast-backward:before { content: $fa-var-fast-backward; }
 // .icon__backward:before { content: $fa-var-backward; }
-// .icon__play:before { content: $fa-var-play; }
+.icon__play:before { content: $fa-var-play; }
 // .icon__pause:before { content: $fa-var-pause; }
 // .icon__stop:before { content: $fa-var-stop; }
 // .icon__forward:before { content: $fa-var-forward; }
diff --git a/app/festival/templates/festival/artist_detail.html b/app/festival/templates/festival/artist_detail.html
index ace9bd85..22ccc9f1 100644
--- a/app/festival/templates/festival/artist_detail.html
+++ b/app/festival/templates/festival/artist_detail.html
@@ -22,6 +22,7 @@
     </p>
 </div>
 
+<hr style="margin-top: 3rem;">
 <h2 class="section__title">{% trans "Related events" %}</h2> <br>
 {% for event in artist.events.all %}
  {% include 'agenda/includes/event_card.html' %}
diff --git a/app/festival/templates/festival/inc/audio_playlist.html b/app/festival/templates/festival/inc/audio_playlist.html
index 4a27ae9b..83478730 100644
--- a/app/festival/templates/festival/inc/audio_playlist.html
+++ b/app/festival/templates/festival/inc/audio_playlist.html
@@ -1,23 +1,26 @@
 {% load staticfiles %}
 
-{% for audio in playlist.audios.all %}
-{% if forloop.first %}
-<audio id="audio" preload="auto" tabindex="0" controls="">
-    <source id="primarysrc" src="{{ audio.closed_source_url }}">
-    <source id="secondarysrc" src="{{ audio.open_source_url }}">
-    {{ audio.title }}
-</audio>
-<ul id="playlist">
-{% endif %}
-    <li class="active">
-        <a href="{{ audio.closed_source_url }}" data-altsrc="{{ audio.open_source_url }}">
+<div class="audio__block">
+    {% for audio in playlist.audios.all %}
+    {% if forloop.first %}
+    <div class="audio__player">
+        <audio id="audio" preload="auto" tabindex="0" controls="">
+            <source id="primarysrc" src="{{ audio.closed_source_url }}">
+            <source id="secondarysrc" src="{{ audio.open_source_url }}">
+        </audio>
+        <span class="audio__title">
             {{ audio.title }}
-        </a>
-    </li>
-{% endfor %}
-{% if forloop.first %}
-</ul>
-{% endif %}
-
-<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
-<script src="{% static "js/player.js" %}"></script>
+        </span>
+    </div>
+    <ul id="playlist" class="audio__playlist">
+    {% endif %}
+        <li>
+            <a href="{{ audio.closed_source_url }}" class="audio__playlist__item" data-altsrc="{{ audio.open_source_url }}">
+                {{ audio.title }}
+            </a>
+        </li>
+    {% endfor %}
+    {% if forloop.first %}
+    </ul>
+    {% endif %}
+</div>
diff --git a/app/festival/templates/festival/video_detail.html b/app/festival/templates/festival/video_detail.html
index e4a7de5e..94a3b082 100644
--- a/app/festival/templates/festival/video_detail.html
+++ b/app/festival/templates/festival/video_detail.html
@@ -28,7 +28,7 @@
 {% endwith %}
 
 <div class="video-event">
-    <h2>{% trans 'Related event' %}</h2>
+    <h2 class="section__title">{% trans 'Related event' %}</h2>
     {% with video.event as event %}
     {% include 'agenda/includes/event_card.html' %}
     {% endwith %}
diff --git a/app/templates/agenda/event_location_list.html b/app/templates/agenda/event_location_list.html
index 18d0e29c..414cd5ea 100644
--- a/app/templates/agenda/event_location_list.html
+++ b/app/templates/agenda/event_location_list.html
@@ -44,8 +44,8 @@
                       {{ location.address }}<br />
                       <a href="{{ location|google_nav_url }}" target="_blank" class="">{% trans "Click to get the interactive map" %}</a>
                   </p>
-                  <a href="{{ location|google_nav_url }}" target="_blank" class="">
-                  {% google_static_map location 900 300 15 %}
+                  <a href="{{ location|google_nav_url }}" target="_blank" class="location__map">
+                    {% google_static_map location 900 300 15 %}
                   </a/>
                   {% endeditable %}
                   {% endblock %}
diff --git a/app/templates/index.html b/app/templates/index.html
index 355ad563..03660133 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -23,7 +23,7 @@
 
     {% for post in featured.blogposts.all %}
     <div class="last__media__entry">
-         <span>{% trans "Article" %}</span>
+         <span>{% trans "Article" %} :</span>
          {% include 'blog/includes/post_card.html' %}
          <a href="{% url 'blog_post_list' %}" class="btn btn-full">{% trans "All" %} {% trans "articles" %}</a>
     </div>
@@ -31,7 +31,7 @@
 
     {% for artist in featured.artists.all %}
     <div class="last__media__entry">
-         <span>{% trans "Artist" %}</span>
+         <span>{% trans "Artist" %} :</span>
          {% include "festival/inc/artist_card.html" %}
          <a href="{% url 'festival-artist-list' %}" class="btn btn-full">{% trans "All" %} {% trans "artists" %}</a>
     </div>
@@ -39,7 +39,7 @@
 
     {% for video in featured.videos.all %}
     <div class="last__media__entry">
-        <span>{% trans "Video" %}</span>
+        <span>{% trans "Video" %} :</span>
         {% include 'festival/inc/video_card.html' %}
         <a href="{% url 'festival-video-list' %}" class="btn btn-full">{% trans "All" %} {% trans "videos" %}</a>
     </div>