From: Frédéric Péters <fpeters@0d.be>
Date: Mon, 11 Nov 2019 16:16:24 +0000 (+0100)
Subject: templates: add navigation to program
X-Git-Url: https://git.0d.be/?p=panikweb.git;a=commitdiff_plain;h=b83241ecea96698a999a748f26a905260aa40f50

templates: add navigation to program
---

diff --git a/panikweb_templates/static/css/_specifics.scss b/panikweb_templates/static/css/_specifics.scss
index c95839d..e9d3686 100644
--- 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 4e247c3..2fa9ae6 100644
--- 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 a3e3ba7..4bddf1a 100644
--- 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}}">