From: Jérémy Fabre <Jeremy@iMac-de-Jeremy.local>
Date: Thu, 20 Oct 2016 14:48:23 +0000 (+0200)
Subject: Playlist list
X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=052abe89875192ccb06bf7b9c5b57af0a4fbf51d;p=mezzo.git

Playlist list
---

diff --git a/app/static/src/assets/img/placeholder-media.png b/app/static/src/assets/img/placeholder-media.png
new file mode 100644
index 00000000..24a01f45
Binary files /dev/null and b/app/static/src/assets/img/placeholder-media.png differ
diff --git a/app/static/src/sass/modules/_all.scss b/app/static/src/sass/modules/_all.scss
index 19d493c3..e1387fa6 100755
--- a/app/static/src/sass/modules/_all.scss
+++ b/app/static/src/sass/modules/_all.scss
@@ -18,6 +18,7 @@
 @import 'boxes/job-line-box';
 @import 'boxes/product-box';
 @import 'boxes/search-box';
+@import 'boxes/media-box';
 
 // Sliders
 @import 'sliders/slider-page';
diff --git a/app/static/src/sass/modules/boxes/_media-box.scss b/app/static/src/sass/modules/boxes/_media-box.scss
new file mode 100644
index 00000000..b9879d46
--- /dev/null
+++ b/app/static/src/sass/modules/boxes/_media-box.scss
@@ -0,0 +1,73 @@
+$module: ".media-box";
+
+#{$module} {
+
+    position: relative;
+    display: block;
+    @include margin-bottom(2);
+
+    &__image {
+
+        @include fluid-aspect(320 190);
+
+        &:after {
+            font-family: FontAwesome;
+            display: block;
+            content: "\f04b";
+            background: white;
+            width: 50px;
+            height: 50px;
+            border-radius: 50px;
+
+            font-size: 25px;
+
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            margin-top: -25px;
+            margin-left: -25px;
+
+            line-height: 50px;
+            text-align: center;
+            text-indent: 3px;
+
+        }
+
+        &--audio {
+            &:after {
+                content: "\f028";
+                text-indent: 0px;
+            }
+        }
+
+    }
+
+    &__type {
+
+        @include font-size(m);
+        @include line-height(1.25);
+        @include typeface(sans-serif);
+        @include margin(.25 0 0 0);
+
+    }
+
+    &__title {
+
+        @include font-size(xl);
+        @include line-height(1.25);
+        @include typeface(sans-serif);
+        @include margin(0 0 .25 0);
+
+    }
+
+    &__desc {
+
+        @include font-size(s);
+        @include line-height(.75);
+        @include typeface(serif);
+        @include margin(1 0 .25 0);
+        font-weight: weight(light);
+
+    }
+
+}
diff --git a/app/templates/magazine/article/includes/article_card.html b/app/templates/magazine/article/includes/article_card.html
index f3e0aa97..256ebdaa 100644
--- a/app/templates/magazine/article/includes/article_card.html
+++ b/app/templates/magazine/article/includes/article_card.html
@@ -21,7 +21,7 @@
             </figure>
         {% else %}
             <figure class="article-box__image">
-
+                
             </figure>
         {% endif %}
     {% endwith %}
diff --git a/app/templates/media/inc/playlist_audio_card.html b/app/templates/media/inc/playlist_audio_card.html
index caf524bd..4accaa95 100644
--- a/app/templates/media/inc/playlist_audio_card.html
+++ b/app/templates/media/inc/playlist_audio_card.html
@@ -1,5 +1,20 @@
-{% load mezzanine_tags keyword_tags i18n organization_tags %}
+{% load mezzanine_tags keyword_tags i18n organization_tags staticfiles %}
 
-<div class="audio-card">
-    <a href="{% url 'organization-playlist-detail' playlist.slug %}">{{ playlist.title }}</a>
+<div class="col-lg-4">
+    <a class="media-box" href="{% url 'organization-playlist-detail' playlist.slug %}">
+        <figure class="media-box__image media-box__image--audio">
+            {% if playlist.medias.all.0.media.poster_url %}
+                <img src="{{ playlist.medias.all.0.media.poster_url }}">
+            {% else %}
+                <img src="{% static "img/placeholder-media.png" %}">
+            {% endif %}
+        </figure>
+        <div class="media-box__type">
+            {{playlist.type}}
+        </div>
+        <h2 class="media-box__title">{{ playlist.title }}</h2>
+        <div class="media-box__desc">
+            {{ playlist.description|richtext_filters|safe|truncatechars_html:200 }}
+        </div>
+    </a>
 </div>
diff --git a/app/templates/media/inc/playlist_video_card.html b/app/templates/media/inc/playlist_video_card.html
index cc58d397..e033e8ac 100644
--- a/app/templates/media/inc/playlist_video_card.html
+++ b/app/templates/media/inc/playlist_video_card.html
@@ -1,6 +1,20 @@
-{% load mezzanine_tags keyword_tags i18n organization_tags %}
+{% load mezzanine_tags keyword_tags i18n organization_tags staticfiles %}
 
-<div class="video-card">
-    <img src="{{ playlist.medias.all.0.poster_url }}"><br>
-    <a href="{% url 'organization-playlist-detail' playlist.slug %}">{{ playlist.title }}</a>
+<div class="col-lg-4">
+    <a class="media-box" href="{% url 'organization-playlist-detail' playlist.slug %}">
+        <figure class="media-box__image media-box__image--video">
+            {% if playlist.medias.all.0.media.poster_url %}
+                <img src="{{ playlist.medias.all.0.media.poster_url }}">
+            {% else %}
+                <img src="{% static "img/placeholder-media.png" %}">
+            {% endif %}
+        </figure>
+        <div class="media-box__type">
+            {{playlist.type}}
+        </div>
+        <h2 class="media-box__title">{{ playlist.title }}</h2>
+        <div class="media-box__desc">
+            {{ playlist.description|richtext_filters|safe|truncatechars_html:200 }}
+        </div>
+    </a>
 </div>
diff --git a/app/templates/media/inc/playlist_video_detail.html b/app/templates/media/inc/playlist_video_detail.html
index 0d8b4fc7..4806d6f7 100644
--- a/app/templates/media/inc/playlist_video_detail.html
+++ b/app/templates/media/inc/playlist_video_detail.html
@@ -2,10 +2,6 @@
 
 <div class="embed-responsive">
     <video controls id="video-js-playlist" class="video-js vjs-ircam-skin" data-title="{{ media.title }}" {% if media.poster_url %}poster="{{ media.poster_url }}"{% endif %}>
-        {% for transcoded in media.transcoded.all %}
-           <source src="{{ transcoded.url }}" type="{{ transcoded.mime_type }}" />
-        {% endfor %}
-        Your browser does not support the video tag.
     </video>
 </div>
 {% for media in playlist.medias.all %}
diff --git a/app/templates/media/playlist_list.html b/app/templates/media/playlist_list.html
index 15ced91c..289f26cf 100644
--- a/app/templates/media/playlist_list.html
+++ b/app/templates/media/playlist_list.html
@@ -12,13 +12,29 @@
     {% endeditable %}
 {% endblock %}
 
+{% block meta_title %}{% trans "Media" %}{% endblock %}
+
+{% block page_sidebar %}
+    Filters
+{% endblock %}
+
 {% block page_content %}
-    {% for playlist in playlists %}
-        {% with playlist.type as type %}
-            {% with "media/inc/playlist_"|add:type|add:"_card.html" as template %}
-                {% include template %}
+
+    <div class="row">
+        {% for playlist in playlists %}
+            {% with playlist.type as type %}
+                {% with "media/inc/playlist_"|add:type|add:"_card.html" as template %}
+                    {% include template %}
+                {% endwith %}
+            {% endwith %}
+        {% endfor %}
+        {% for playlist in playlists %}
+            {% with playlist.type as type %}
+                {% with "media/inc/playlist_"|add:type|add:"_card.html" as template %}
+                    {% include template %}
+                {% endwith %}
             {% endwith %}
-        {% endwith %}
-        <br>
-    {% endfor %}
+        {% endfor %}
+    </div>
+
 {% endblock %}
diff --git a/app/templates/pages/page.html b/app/templates/pages/page.html
index 6ce548b4..b5b04dee 100644
--- a/app/templates/pages/page.html
+++ b/app/templates/pages/page.html
@@ -31,7 +31,7 @@
 
             <div class="row">
 
-                <div class="col-sm-9 col-sm-push-3 col-lg-8 col-lg-push-2 white-bg">
+                <div class="col-sm-9 col-sm-push-3 col-lg-9 col-lg-push-2 white-bg">
                     {% block page_title %}
                         {{ page.title }}
                     {% endblock %}
@@ -55,7 +55,7 @@
                     {% endblock %}
                     </div>
                 </div>
-                <div class="mb2 col-sm-9 col-lg-8 white-bg page__content" data-summary-content>
+                <div class="mb2 col-sm-9 col-lg-9 white-bg page__content" data-summary-content>
                     {% block page_content %}
                         {{ page.content }}
                     {% endblock %}