templates: adjust "around" block

diff --git a/panikweb/paniktags/templatetags/paniktags.py b/panikweb/paniktags/templatetags/paniktags.py
index c69632c7d8525cdf69acefaf81daeae7a900dd68..e803285d004ad453c5884d334102d7c23c6766b5 100644 (file)
--- a/panikweb/paniktags/templatetags/paniktags.py
+++ b/panikweb/paniktags/templatetags/paniktags.py
@@ -172,7 +172,10 @@ def aroundview(year=None, week=None):
             slot.currently_playing = True
             break
     else:
-        program[0].currently_playing = True  # first slot, nonstop
+        for slot in program:
+            if slot.get_duration() and slot.datetime > now:
+                slot.next_playing = True
+                break
 
     return {
             'program': program,

diff --git a/panikweb/settings.py b/panikweb/settings.py
index c453ae454e220a90a5c59f1f3a620c0fad6c6ced..1886d327f21a16067066764a9ee1bc7118530c28 100644 (file)
--- a/panikweb/settings.py
+++ b/panikweb/settings.py
@@ -243,6 +243,7 @@ COMBO_INITIAL_LOGIN_PAGE_PATH = '/'
 COMBO_WELCOME_PAGE_PATH = None
 
 AUTH_USER_MODEL = 'aa.User'
+THUMBNAIL_PRESERVE_FORMAT = True
 
 try:
     from .local_settings import *

diff --git a/panikweb_templates/static/css/_specifics.scss b/panikweb_templates/static/css/_specifics.scss
index 6196b3e99a64f343de19e40bf582b1093cc2aafa..a5aaa37ece78ae4fb9b2e776e8a4b267c5c3d74d 100644 (file)
--- a/panikweb_templates/static/css/_specifics.scss
+++ b/panikweb_templates/static/css/_specifics.scss
@@ -2102,34 +2102,39 @@ div.around-nav {
        max-width: 100%;
        position: relative;
        display: flex;
+       height: 350px;
        div.around-nav-previous, div.around-nav-next {
                flex: 1;
                min-width: 20px;
                text-align: center;
                background: $primary;
                height: 50px;
+                       border: 1px solid #666;
                button {
                        line-height: 45px;
                        color: white;
                }
        }
        div.around-nav-inner {
+               background: white;
                overflow: hidden;
                max-width: 100%;
                margin-bottom: 250px;
+               border-top: 1px solid black;
        }
        div.around-nav-inner-2 {
                position: relative;
                width: 4000px;
                transition: transform linear 0.2s;
                div.around-block {
-                       border: 1px solid #666;
-                       border-right: none;
+                       border-right: 1px solid #666;
+                       box-sizing: border-box;
+                       padding: 0 1rem;
                        background: white;
                        display: block;
                        width: 244px;
                        float: left;
-                       &.currently-playing {
+                       &.highlight {
                                background: $primary;
                                color: white;
                        }
@@ -2137,15 +2142,21 @@ div.around-nav {
        }
        div.around-slot-details {
                div.around-details {
+                       box-sizing: border-box;
                        display: none;
                        position: absolute;
                        left: 0;
-                       top: 60px;
+                       top: 50px;
                        border: 1px solid #666;
                        background: white;
                        width: 100%;
+                       p {
+                               margin: 1rem;
+                       }
                        img {
-                               float: left;
+                               float: right;
+                               margin-left: 1rem;
+                               border: none;
                        }
                }
        }

diff --git a/panikweb_templates/static/js/specifics.js b/panikweb_templates/static/js/specifics.js
index be54189ea193ea834ded48bd94935ad732ae1d6b..f4bff4aca972f4bec63915aaf46e10106f48add7 100644 (file)
--- a/panikweb_templates/static/js/specifics.js
+++ b/panikweb_templates/static/js/specifics.js
@@ -390,9 +390,15 @@ $(function() {
                }
 
                $('.around-block').on('click', function () {
+                       $('.around-block.highlight').removeClass('highlight');
+                       $(this).addClass('highlight');
                        $('.around-details').hide();
                        var block_id = $(this).data('block');
                        $('.around-details[data-block="' + block_id + '"]').show();
+                       var $inner = $('.around-nav-inner-2');
+                       var translation = block_id - 1;
+                       $inner.data('idx', translation);
+                       $inner.css('transform', 'translateX(-' + (translation*245) + 'px)');
                });
 
                $('.around-nav-inner-2').data('idx', 0);
@@ -408,6 +414,7 @@ $(function() {
                        $inner.data('idx', translation);
                        $inner.css('transform', 'translateX(-' + (translation*245) + 'px)');
                });
+               $('.around-block.highlight').click();
 
                 $('#ticker li:not(:first)');
                if (ticker_interval) clearInterval(ticker_interval);

diff --git a/panikweb_templates/templates/includes/around.html b/panikweb_templates/templates/includes/around.html
index 4bddf1aba1c1292f935da51a18c0478205060c96..66aa62d73d6c7af591bf5a09c8a8852b68069b83 100644 (file)
--- a/panikweb_templates/templates/includes/around.html
+++ b/panikweb_templates/templates/includes/around.html
@@ -1,9 +1,10 @@
+{% load thumbnail %}
 <div class="around-nav">
 <div class="around-nav-previous"><button>«</button></div>
 <div class="around-nav-inner">
 <div class="around-nav-inner-2">
 {% for slot in program %}
-<div class="around-block {% if slot.currently_playing %}currently-playing{% endif %}" data-block="{{forloop.counter}}">
+<div class="around-block {% if slot.currently_playing or slot.next_playing %}highlight{% endif %}" data-block="{{forloop.counter}}">
         <h5>{% firstof slot.episode.title slot.emission.title slot.label %}</h5>
         <span>{{slot.datetime|date:"l G:i"}}</span>
 </div>
@@ -16,7 +17,9 @@
   <div class="around-details" data-block="{{forloop.counter}}">
     {% if slot.emission %}
     {% if slot.emission.image %}
-    <div class="emission-logo"><img class="logo" src="{{ slot.emission.image.url }}"/></div>
+        {% thumbnail slot.emission.image "600x300" crop="50% 25%" as im %}
+        <div class="emission-logo"><img class="logo" src="{{ im.url }}"/></div>
+        {% endthumbnail %}
     {% endif %}
     <p>{{slot.emission.text|safe}}</p>
     <p><a class="button" href="{% url 'emission-view' slug=slot.emission.slug %}">Page de l'émission</a></p>