From caee9f75017e9bea0834fa4f6ca42eb48f866534 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Je=CC=81re=CC=81my=20Fabre?= <Jeremy@iMac-de-Jeremy.local>
Date: Mon, 12 Sep 2016 14:55:11 +0200
Subject: [PATCH] Audio playlists style implementation

---
 .../sass/modules/medias/_audio-playlist.scss  | 23 ++++++++++-
 app/static/src/sass/vendors/_audiojs.scss     | 38 ++++++++++++++++++-
 app/templates/core/inc/audio.html             |  5 ++-
 3 files changed, 61 insertions(+), 5 deletions(-)

diff --git a/app/static/src/sass/modules/medias/_audio-playlist.scss b/app/static/src/sass/modules/medias/_audio-playlist.scss
index edc878b0..8ecc9cca 100644
--- a/app/static/src/sass/modules/medias/_audio-playlist.scss
+++ b/app/static/src/sass/modules/medias/_audio-playlist.scss
@@ -2,15 +2,34 @@ $module: ".audio-playlist";
 
 #{$module} {
 
+    margin-top: 0;
+    padding: 0;
+    background: $color-black-light;
+    list-style-type: none;
+
     &__item {
 
+        @include padding(0.25 1);
+        @include font-size(xs);
+        @include typeface(sans-serif);
+        @include transition(all 0.25s ease-in-out);
+        color: white;
+
         &.playing {
-            color: red;
+
+            background: $color-main;
+            color: $color-black-light;
+
+            >a {
+                color: $color-black-light;
+            }
+
         }
 
         >a  {
 
-
+            @include transition(all 0.25s ease-in-out);
+            color: white;
 
         }
 
diff --git a/app/static/src/sass/vendors/_audiojs.scss b/app/static/src/sass/vendors/_audiojs.scss
index ac0e4138..32a381da 100644
--- a/app/static/src/sass/vendors/_audiojs.scss
+++ b/app/static/src/sass/vendors/_audiojs.scss
@@ -1,3 +1,37 @@
-.audiojs .play-pause {
-    width: 37px;
+.audiojs {
+    background: $color-black;
+    box-shadow: none;
+    width: 100%;
+
+    .play-pause {
+        width: 37px;
+    }
+
+    .scrubber {
+        width: calc(80% - 37px);
+    }
+
+    .time {
+        width: calc(20% - 37px);
+        @include font-size(xs);
+        @include typeface(sans-serif);
+    }
+
+    .progress {
+        background: $color-main;
+    }
+
+    .loaded {
+        background: $color-gray;
+    }
+
+    @include mq($until: xs) {
+        width: 100%;
+        .scrubber {
+            width: calc(60% - 37px);
+        }
+        .time {
+            width: calc(40% - 37px);
+        }
+    }
 }
diff --git a/app/templates/core/inc/audio.html b/app/templates/core/inc/audio.html
index 4b6b8036..816f8320 100644
--- a/app/templates/core/inc/audio.html
+++ b/app/templates/core/inc/audio.html
@@ -8,7 +8,10 @@
         <li class="audio-playlist__item">
             <a href="#" data-src="{{ audio.open_source_url }}">{{ audio.title }}</a>
         </li>
-        
+        <li class="audio-playlist__item">
+            <a href="#" data-src="{{ audio.open_source_url }}">{{ audio.title }}</a>
+        </li>
+
         {% comment %}
 
             {# audio.title #}<br>
-- 
2.39.5