Create nav for emissions

panikweb/paniktags/templatetags/paniktags.py

@@ -23,6 +23,13 @@ def audio(context, sound=None):
         'sound': sound
     }
 
+@register.inclusion_tag('emissions/nav.html', takes_context=True)
+def emission_nav(context, date=None):
+    return {
+        'emission': context.get('emission'),
+        'episode': context.get('episode'),
+    }
+
 @register.inclusion_tag('episodes/resume.html', takes_context=True)
 def episode_resume(context, date=None, model=None, klass=None):
     return {

panikweb/views.py

@@ -6,6 +6,8 @@ from django.views.generic.detail import DetailView
 from django.views.decorators.csrf import csrf_exempt
 from django.views.generic.dates import _date_from_string
 
+from django.core.paginator import Paginator
+
 from jsonresponse import to_json
 
 from emissions.models import Category, Emission, Episode, Diffusion, SoundFile, \

panikweb_templates/static/css/specifics.css

@@ -189,6 +189,11 @@ body{
 /****  SCREEN NAV ****/
 #Nav{
 	text-align:center;
+	border-bottom:1px solid #342E2E;
+}
+#Nav nav{
+	margin:0;
+	padding:0.1em;
 }
 #Nav nav ul{
 	margin:1em 0 1em 0;
@@ -274,23 +279,25 @@ body{
 /**** Liste   ****/
 /**** EMISSIONS ****/
 #Emission .emission-detail .title{}
-#Emissions .wrapper{
+#Emissions #Changing .wrapper{
 	max-width:600px;
 	margin:auto;
 }
+/*
 @media screen and (min-width: 1000px) {
-	#Emissions .wrapper{
+	#Emissions #Changing .wrapper{
 		max-width:1024px;
 	}
-	#Emissions .wrapper.sided #Emission-tabs-detail{
+	#Emissions #Changing .wrapper.sided #Emission-tabs-detail{
 		float:left;
 		width:450px;
 	}
-	#Emissions .wrapper.sided #Emission-tabs-episodes{
+	#Emissions #Changing .wrapper.sided #Emission-tabs-episodes{
 		float:right;
 		width:450px;
 	}
 }
+*/
 /**** Detail	****/
 .emission-detail .metas {
     float: left;

panikweb_templates/static/js/specifics.js

@@ -75,7 +75,7 @@ $(function() {
 			var dftShowSelector = current?".active":":first";
 			var activeTab = $(this).find("[data-tab]"+dftShowSelector+"").addClass("active");
 			$(this).find("[data-tab]").each(function() {
-			    $(this).click(function (e) {  
+			    $(this).on('click load',function (e) {  
 				e.preventDefault();
 				self.find(".active").removeClass("active");  
 				$(this).addClass("active");  
@@ -84,7 +84,7 @@ $(function() {
 		
 			    });  
 			});  
-			activeTab.trigger('click');
+			activeTab.trigger('load');
 		});
 		$("[data-audio-control]").each(function() {
 			var audio = $('#'+$(this).attr('data-audio-control'));

panikweb_templates/templates/emissions/emission_detail.html

@@ -2,47 +2,33 @@
 {% load paniktags %}
 {% block bodyID %}Emissions{% endblock %}
 {% block nav %}
-<nav>
-	<ul class="inline">
-		<li>
-			<a href="{% url 'emissions' %}">
-				<span class="icon-group" ></span>
-				<span class="iconLabel">Emissions</span>
-			</a>
-		</li>
-		{% if episode %}
-		<li>
-			<a href="{% url 'emission-view' slug=emission.slug %}">{{ emission.title }}</a>
-		</li>
-		{% endif %}
-	</ul>
-</nav>
+	{% emission_nav %}
 {% endblock %}
 {% block main %}
 <div class="wrapper {% if episodes %}sided{% else %}classic{% endif %}">
 	<div id="Emission-container" class="emission padded">
-		<header class="mainHeader">
-			<h2 class="squashed title">{{ emission.title }}</h2>
-		</header>
-		<div id="Emission-tabs-detail">
+		<div data-tabbed="true" id="Emission-tabs-detail">
 			{% emission_detail %}
 		</div>
 		{% if episodes %}
-		<div id="Emission-tabs-episodes" class="episodes">
+		<div data-tabbed="true" id="Emission-tabs-last" class="episodes">
+			{% with episodes|first as episode %}
+				<div class="legend">{{ episode.first_diffusion|date:"F Y" }}</div>
+				{% episode_resume date="daytime" %}
+			{% endwith %}
+		</div>
+		<div data-tabbed="true" id="Emission-tabs-episodes" class="episodes">
+			{% with episodes|slice:"1:11" as episodes %}
 				{% regroup episodes by first_diffusion|date:"F Y"|capfirst as month_list %}
 				{% for month in month_list %}
 				<div class="legend">{{ month.grouper }}</div>
 					<ul class="custom list">
 					{% for episode in month.list %}
-					
-						{% if episode.title == episodes.0.title %}
-						<li>{% episode_resume date="daytime" %}</li>
-						{% else %}
 						<li>{% episode_resume model="inline" date="daytime" %}</li>
-						{% endif %}
 					{% endfor %}
 					</ul>
 				{% endfor %}
+			{% endwith %}
 		</div>
 		{% endif %}
 	</div>

panikweb_templates/templates/episodes/resume.html

@@ -56,7 +56,7 @@
 			</article>
 			{% elif episode.text %}
 			<article class="text">
-				{{ episode.text|safe|striptags|truncatewords:50}}
+				{{ episode.text|safe}}
 			</article>
 			{% endif %}
 		{% endif %}