templates: add navigation to program

diff --git a/panikweb_templates/static/css/_specifics.scss b/panikweb_templates/static/css/_specifics.scss
index c95839df16c985a1bb89dbc8a81a804dc9356ce8..e9d3686f4f6bc085bd334792d17db6401fcbe6d6 100644 (file)
--- a/panikweb_templates/static/css/_specifics.scss
+++ b/panikweb_templates/static/css/_specifics.scss
@@ -2124,22 +2124,38 @@ div#loading-page {
 div.around-nav {
        max-width: 100%;
        position: relative;
+       display: flex;
+       div.around-nav-previous, div.around-nav-next {
+               flex: 1;
+               min-width: 20px;
+               text-align: center;
+               background: $primary;
+               height: 50px;
+               button {
+                       line-height: 45px;
+                       color: white;
+               }
+       }
        div.around-nav-inner {
                overflow: hidden;
                max-width: 100%;
                margin-bottom: 250px;
        }
        div.around-nav-inner-2 {
-               overflow: hidden;
                position: relative;
-               display: flex;
                width: 4000px;
+               transition: transform linear 0.2s;
                div.around-block {
                        border: 1px solid #666;
+                       border-right: none;
                        background: white;
                        display: block;
-                       width: 10em;
-                       margin-right: 10px;
+                       width: 244px;
+                       float: left;
+                       &.currently-playing {
+                               background: $primary;
+                               color: white;
+                       }
                }
        }
        div.around-slot-details {

diff --git a/panikweb_templates/static/js/specifics.js b/panikweb_templates/static/js/specifics.js
index 4e247c38c25128a32a5b42aa7e1d580f2b310257..2fa9ae6709c04deaf10d5d4f694f64d865af699e 100644 (file)
--- a/panikweb_templates/static/js/specifics.js
+++ b/panikweb_templates/static/js/specifics.js
@@ -408,6 +408,20 @@ $(function() {
                        $('.around-details[data-block="' + block_id + '"]').show();
                });
 
+               $('.around-nav-inner-2').data('idx', 0);
+               $('.around-nav-previous button').on('click', function() {
+                       var $inner = $('.around-nav-inner-2');
+                       var translation = ($inner.data('idx') - 1);
+                       $inner.data('idx', translation);
+                       $inner.css('transform', 'translateX(-' + (translation*245) + 'px)');
+               });
+               $('.around-nav-next button').on('click', function() {
+                       var $inner = $('.around-nav-inner-2');
+                       var translation = ($inner.data('idx') + 1);
+                       $inner.data('idx', translation);
+                       $inner.css('transform', 'translateX(-' + (translation*245) + 'px)');
+               });
+
                 $('#ticker li:not(:first)');
                if (ticker_interval) clearInterval(ticker_interval);
                function tick(){

diff --git a/panikweb_templates/templates/includes/around.html b/panikweb_templates/templates/includes/around.html
index a3e3ba7cb615fc08eb5dc6ead51043c939f83fb5..4bddf1aba1c1292f935da51a18c0478205060c96 100644 (file)
--- a/panikweb_templates/templates/includes/around.html
+++ b/panikweb_templates/templates/includes/around.html
@@ -1,14 +1,16 @@
 <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" data-block="{{forloop.counter}}">
+<div class="around-block {% if slot.currently_playing %}currently-playing{% endif %}" data-block="{{forloop.counter}}">
         <h5>{% firstof slot.episode.title slot.emission.title slot.label %}</h5>
-        <span>{{slot.datetime|date:"H:i"}}</span>
+        <span>{{slot.datetime|date:"l G:i"}}</span>
 </div>
 {% endfor %}
 </div>
 </div>
+<div class="around-nav-next"><button>»</button></div>
 <div class="around-slot-details">
   {% for slot in program %}
   <div class="around-details" data-block="{{forloop.counter}}">