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 (file)
index 0000000..24a01f4
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 19d493c3077e2f98c8160374c482b9ba44ca2b39..e1387fa6521101d986ee3ea9ad7d90b21dc9e65b 100755 (executable)
--- 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 (file)
index 0000000..b9879d4
--- /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 f3e0aa974742ae69109331e96a5da971c881be2b..256ebdaa277ee1815c28edb31d3609d13fd5c8ed 100644 (file)
--- 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 caf524bd0706fe00abde99293ddb436169970cec..4accaa958eae2407b00994c3729c84669a1ef08d 100644 (file)
--- 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 cc58d397b0c77d2b5c9b040b9a7e3df5d022999c..e033e8ac19ffd0fe35cf8c56a9484b5b2fc06a68 100644 (file)
--- 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 0d8b4fc772638da8c22b8179cd76d29af0daf52a..4806d6f78debdbfa0e184a26574f68d04b2a2c8b 100644 (file)
--- 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 15ced91c496d1958c73ebc1e020b50e5b3e27205..289f26cff4548a0c41540a6c880f61512ec3c31e 100644 (file)
--- 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 6ce548b49cebcd270da9dfc212f3a679bfe4a013..b5b04deef0f3b2ac41f9522fd3dd24d31514662c 100644 (file)
--- 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 %}