Emission/episode column view

panikweb/views.py

@@ -80,7 +80,7 @@ class EpisodeDetailView(DetailView):
         # get all related soundfiles in a single query
         soundfiles = {}
         for soundfile in SoundFile.objects.filter(podcastable=True,
-                fragment=False, episode__emission=self.object):
+                fragment=False, episode__emission=Emission.objects.get(slug=self.kwargs.get('emission_slug'))):
             soundfiles[soundfile.episode_id] = soundfile
 
         # replace dynamic property by a static attribute, to avoid database

panikweb_templates/static/css/general.css

@@ -55,7 +55,7 @@ h1, h2, h3, h4, h5{
 	line-height:1em;
 	padding:0.2em 0 0.2em 0;
 }
-h1, h2, h3{
+h1, h2, h3, h4{
 	text-transform: uppercase;
 }
 h1 {	font-size: 6em;}

panikweb_templates/static/css/specifics.css

@@ -39,6 +39,13 @@
 	padding: 0.2em 0 0.2em 0;
 	margin: 0.2em 0 0.2em 0;
 }
+#Main .label{
+	color:#003446;
+	border-left:1.5em solid #003446;
+	border-bottom:2px solid #003446;
+	padding-left:1em;
+	margin-bottom:1em;
+}
 .iconLabel{margin-left:0.1em;}
 
 /****************************************************/
@@ -393,20 +400,31 @@ body{
 /**** Liste   ****/
 /**** EMISSIONS ****/
 #Emission .emission-detail .title{}
-/*
-@media screen and (min-width: 1000px) {
-	#Emissions #Changing .wrapper{
-		max-width:1024px;
+@media screen and (min-width: 800px) {
+	#Emissions #Changing .wrapper.sided{
+		max-width:1000px;
+	}
+	#Emissions #Changing .wrapper.sided #Emission-tabs-detail,
+	 #Emissions #Changing .wrapper.sided #Emission-tabs-last,
+	  #Emissions #Changing .wrapper.sided .monthGroup{
+		width:45%;
 	}
 	#Emissions #Changing .wrapper.sided #Emission-tabs-detail{
 		float:left;
-		width:450px;
 	}
-	#Emissions #Changing .wrapper.sided #Emission-tabs-episodes{
+	#Emissions #Changing .wrapper.sided #Emission-tabs-last{
+		float:right;
+	}
+	#Emissions #Changing .wrapper.sided .monthGroup.even{
 		float:right;
-		width:450px;
+		clear:left;
+	}
+	#Emissions #Changing .wrapper.sided .monthGroup.odd{
+		float:left;
+		clear:right;
 	}
 }
+/*
 */
 /**** Detail	****/
 .emission-detail .metas {
@@ -701,11 +719,11 @@ body{
     html #main{ font-size: 70%; }
 body { font-size: 16px;}
 @media (max-width: 300px){
-    body #All{ font-size: 70%; }
+    body #All{ font-size: 80%; }
 }
 
-@media (min-width: 300px) and (max-width:700px){
-    body #All{ font-size: 80%; }
+@media (min-width: 300px) and (max-width:800px){
+    body #All{ font-size: 85%; }
 }
 
 @media (min-width: 700px) and (max-width:1000px){

panikweb_templates/templates/emissions/detail.html

-
+{% load i18n %}
 <div class="emission emission-detail cf">
 	<div class="metas">
 		{% if schedules %}
@@ -8,18 +8,12 @@
 				<li>
 					<div>{{ schedule.datetime|date:"l G:i" }}
 					<!--<div class="time">{{ schedule.datetime|date:"G:i" }}</div>-->
-					{% if schedule.rerun %} <span class="smooth">(rediff)</span> {% endif %}</div>
+					{% if schedule.rerun %} <span class="smooth">(rediff)</span> {% endif %}
+					</div>
 				</li>
 				{% endfor %}
 			</ul>
 		{% endif %}
-		<!--
-		<button class="control todo">
-			<span class="symbol huge">G</span>
-			<span class="listen">Écouter</span>
-		</button>
-		-->
-		<div class="cf"></div>
 		{% if emission.description %}
 		<div class="description">
 			{{ emission.description|safe|striptags }}
@@ -34,7 +28,7 @@
 	</div>
 
 	{% if emission.image %}
-		<img class="logo" src="{{ emission.image.url }}"/>
+		<img class="logo right" src="{{ emission.image.url }}"/>
 	{% endif %}
 
 	{% if emission.text %}

panikweb_templates/templates/emissions/emission_detail.html

@@ -5,34 +5,46 @@
 	{% emission_nav %}
 {% endblock %}
 {% block main %}
-<div class="wrapper half">
+<div class="wrapper {% if episodes %}sided{% endif %}">
 	<div id="Emission-container" class="emission padded">
 		{% if episode %}
-		<div data-tabbed="true" id="Emission-tabs-current" class="episodes">
+		<div data-tabbed="true" id="Emission-tabs-current" class="episodes wrapper half">
 			{% episode_detail %} 
 		</div>
 		{% endif %}
-		<div data-tabbed="true" id="Emission-tabs-detail">
-			{% emission_detail %}
+		<div data-tabbed="true" id="Emission-tabs-default">
+			<div id="Emission-tabs-detail">
+				<h5 class="label">A propos</h5>
+				{% emission_detail %}
+			</div>
+			{% if episodes %}
+			<div id="Emission-tabs-last" class="episodes">
+					<h5 class="label">Derniers épisodes</h5>
+				{% with episodes|slice:"0:3" as episodes %}
+					{% for episode in episodes %}
+						<div class="legend">{{ episode.first_diffusion|date:"F Y" }}</div>
+						{% episode_resume date="daytime" %}
+					{% endfor %}
+				{% endwith %}
+			</div>
+			{% endif %}
 		</div>
 		{% if 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 %}
+				<div>
 				{% for month in month_list %}
-				<div class="legend">{{ month.grouper }}</div>
-					<ul class="custom list">
-					{% for episode in month.list %}
-						<li>{% episode_resume model="inline" date="daytime" %}</li>
-					{% endfor %}
-					</ul>
+					<div class="monthGroup {% if forloop.counter|divisibleby:2 %}even{% else %}odd{% endif %}">
+						<div class="legend">{{ month.grouper }}</div>
+						<ul class="custom list">
+						{% for episode in month.list %}
+							<li>{% episode_resume model="inline" date="daytime" %}</li>
+						{% endfor %}
+						</ul>
+					</div>
 				{% endfor %}
+				</div>
 			{% endwith %}
 		</div>
 		{% endif %}

panikweb_templates/templates/emissions/nav.html

@@ -46,8 +46,8 @@
 		<nav class="tabs" data-tab-about="#Emission-container">
 			<ul class="distributed">
 				<li>
-					<button data-tab="#Emission-tabs-last" >
-						<span class="iconLabel">Dernier épisode</span>
+					<button data-tab="#Emission-tabs-default" class="active" >
+						<span class="iconLabel">A propos</span>
 					</button>
 				</li>
 				<li>
@@ -55,15 +55,10 @@
 						<span class="iconLabel">Archives</span>
 					</button >
 				</li>
-				<li>
-					<button data-tab="#Emission-tabs-detail" >
-						<span class="iconLabel">A propos</span>
-					</button>
-				</li>
 			</ul>
 			{% if episode %}
 			<hr />
-				<h5 class="active button padded " data-tab="#Emission-tabs-current">{{ episode.title }}</h5>
+				<h4 class="active button padded " data-tab="#Emission-tabs-current">{{ episode.title }}</h4>
 			{% endif %}
 		</nav>
 	</div>