Styling nav as emissions and set softer blue

panikweb/paniktags/templatetags/paniktags.py

@@ -23,6 +23,13 @@ def audio(context, sound=None):
         'sound': sound
     }
 
+@register.inclusion_tag('news/nav.html', takes_context=True)
+def news_nav(context, date=None):
+    return {
+        'newsitem': context.get('newsitem'),
+        'news': context.get('news'),
+    }
+
 @register.inclusion_tag('emissions/nav.html', takes_context=True)
 def emission_nav(context, date=None):
     return {
@@ -40,6 +47,14 @@ def episode_resume(context, date=None, model=None, klass=None):
         'date': date,
     }
 
+@register.inclusion_tag('episodes/detail.html', takes_context=True)
+def episode_detail(context, date=None):
+    return {
+        'episode': context.get('episode'),
+        'emission': context.get('emission'),
+        'diffusions': context.get('diffusions'),
+    }
+
 @register.inclusion_tag('emissions/detail.html', takes_context=True)
 def emission_detail(context, date=None):
     return {

panikweb_templates/static/css/general.css

@@ -10,8 +10,9 @@ body {
 	clear: both;
 }
 audio { 
+	display:block;
 	width: 90%; 
-	margin:0.5em auto 0.5em auto;
+	margin:0.5em auto 1em auto;
 }
 a {
 	color:inherit;
@@ -34,9 +35,13 @@ button, .button{
 	background:none;
 }
 img {max-width:100%;}
-
+img.logo{border:2px solid black;}
+header{
+	font-family: 'RegloBold';
+}
 h1, h2, h3, h4, h5{
 	font-family: 'RegloBold';
+	line-height:1em;
 }
 h1, h2, h3{
 	text-transform: uppercase;
@@ -240,6 +245,7 @@ nav a.active, nav button.active{
 .inBlock{display:inline-block;}
 .right{float:right;margin-left:1em;margin-bottom:1em;}
 .left{float:left;margin-right:1em;margin-bottom:1em;}
+img.right, img.left{max-width:50%;}
 .smooth{opacity:0.5;}
 .hidden{display:none;}
 .padded{padding:1.5em;}

panikweb_templates/static/css/specifics.css

@@ -196,7 +196,7 @@ body{
 }
 #Nav h2{
 	margin:0;
-	padding:0.5em 0 0em 0;
+	padding:0;
 }
 #Nav nav ul{
 	margin:1em 0 1em 0;
@@ -396,6 +396,9 @@ body{
  .episode.resume .controls{
 	float: right;
 }
+.episode.detail .logo.right{
+	max-width:50%;
+}
 
 @media screen and (max-width: 300px) {
 	.episode.resume .logo{display:none;}
@@ -556,7 +559,7 @@ body{
 
   .news,
    .news *
-{background-color:#1663d5; border-color:#fff !important;color:#fff !important;}
+{background-color:#4682B4; border-color:#fff !important;color:#fff !important;}
 /*
 #News, #news,.news, .news *,.mainLegend.news {
 	background-color:#fff; 

panikweb_templates/templates/emissions/detail.html

@@ -2,15 +2,16 @@
 <div class="emission emission-detail cf">
 	<div class="metas">
 		{% if schedules %}
-			<div class="schedule">
+			<ul class="schedule custom">
 
-			{% for schedule in schedules %}
-				<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>
-			</li>
-			{% endfor %}
-			</div>
+				{% for schedule in schedules %}
+				<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>
+				</li>
+				{% endfor %}
+			</ul>
 		{% endif %}
 		<!--
 		<button class="control todo">

panikweb_templates/templates/emissions/emission_detail.html

@@ -9,7 +9,7 @@
 	<div id="Emission-container" class="emission padded">
 		{% if episode %}
 		<div data-tabbed="true" id="Emission-tabs-current" class="episodes">
-			{% episode_resume date="daytime" %} 
+			{% episode_detail %} 
 		</div>
 		{% endif %}
 		<div data-tabbed="true" id="Emission-tabs-detail">

panikweb_templates/templates/emissions/nav.html

 <!--
+-->
 <nav>
 	<ul class="inline">
 		<li>
 			<a href="{% url 'emissions' %}">
 				<span class="icon-bullhorn" ></span>
-				<span class="iconLabel">Emissions</span>
+				<span class="iconLabel">Emission</span>
 			</a>
 		</li>
 	</ul>
 </nav>
--->
 <header class="mainHeader">
 	<h2 class="squashed title">
 		<a href="{% url 'emission-view' slug=emission.slug %}">{{ emission.title }}</a>
 	</h2>
 </header>
-
 {% if episodes %}
 <div class="wrapper half">
 	<nav class="tabs" data-tab-about="#Emission-container">
@@ -39,7 +38,7 @@
 		</ul>
 		{% if episode %}
 		<hr />
-			<strong class="active button padded " data-tab="#Emission-tabs-current">{{ episode.title }}</strong>
+			<h5 class="active button padded " data-tab="#Emission-tabs-current">{{ episode.title }}</h5>
 		{% endif %}
 	</nav>
 </div>

panikweb_templates/templates/emissions/newsitem_detail.html

-
 {% extends "news.html" %}
 {% load thumbnails %}
+{% load paniktags %}
 {% block bodyID %}News{% endblock %}
+{% block nav %}
+	{% news_nav %}
+{% endblock %}
 {% block main %}
-<div class="news detail padded">
-	<div class="wrapper half">
-		
+<div class="detail padded news cf">
+	<div class="wrapper text">
 		<header>
 			{% if newsitem.datetime %}
 				<div class="date cf center">{{ newsitem.datetime|date:"D m/M" }}</div>
 			{% endif %}
-			<h2 class="squashed title">{{ newsitem.title }}</h2>
+		</header>
 		{% if newsitem.image %}
-			<img src="{{ newsitem.image|thumbnail:'800x300' }}"/>
+			<img class="logo right" src="{{ newsitem.image|thumbnail:'640x480' }}"/>
 		{% endif %}
-		</header>
 		<div class="userContent description">	
 			{{ newsitem.text|safe}}
 		</div>

panikweb_templates/templates/episodes/detail.html

 {% load thumbnails %}
 {% load paniktags %}
 <div class="episode detail episode-detail cf">
-	<h3 class="title squashed">{{ episode.title }}</h3>
+	{% if diffusions %}
+	<header class="center padded">
+		<div class="label">Diffusions</div>
+		<ul class="diffusions custom">
+			{% for schedule in diffusions %}
+				<li><span class="date">{{ schedule.datetime|date:"l d M Y à H:i" }}</span></li>
+			{% endfor %}
+		</ul>
+	</header>
+	{% endif %}
+	{% if episode.main_sound %}
+		{% audio sound=episode.main_sound %}
+	{% endif %}
 	{% if episode.image %}
-	<div class="logo">
+	<div class="logo right">
 		<img src="{{ episode.image|thumbnail:'640x480' }}"/>
 	</div>
 	{% endif %}
-	{% if episode.main_sound %}
-		<div class="sound">
-			{% audio sound=episode.main_sound %}
-		</div>
-	{% endif %}
-	<div class="content">
+	<div class="content userContent">
 		{% if episode.description %}
 		<div class="description">
 			{{ episode.description|safe }}

panikweb_templates/templates/news.html

@@ -2,21 +2,6 @@
 {% load paniktags %}
 {% block bodyID %}News{% endblock %}
 {% block title %}News{% endblock %}
-{% block nav %}
-<!--
-	{% if categories %}
-		<nav class="center cf">
-			<ul class="custom columns">
-			{% for category in categories %}
-				<li class="item num-{{forloop.counter}}">
-					<a href="#">{{ category.title }}</a>
-				</li>
-			{% endfor %}
-			</ul>
-		</nav>
-	{% endif %}
--->
-{% endblock %}
 {% block main %}
 <div class="news">
 	<div class="wrapper">
@@ -34,7 +19,7 @@
 		{% endfor %}
 		</ul>
 	</div>
-		<hr />
+	<hr />
 	<div class="wrapper">
 		<ul class="news columns padded">
 		{% for NewsItem in news %}

panikweb_templates/templates/news/nav.html

+
+<nav>
+	<ul class="inline">
+		<li>
+			<a href="{% url 'news' %}">
+				<span class="icon-bullhorn" ></span>
+				<span class="iconLabel">News</span>
+			</a>
+		</li>
+	</ul>
+</nav>
+{% if newsitem %}
+<div class="wrapper text">
+<header class="mainHeader">
+	<h3 class="squashed title">
+		<a href="{% url 'news-view' slug=newsitem.slug %}">{{ newsitem.title }}</a>
+	</h3>
+</header>
+</div>
+{% endif %}
+