General structure

panikweb/views.py

@@ -197,6 +197,7 @@ class Listen(TemplateView):
 
     def get_context_data(self, **kwargs):
         context = super(Listen, self).get_context_data(**kwargs)
+        context['sounds'] = SoundFile.objects.all()[:24]
         context['player'] = audioPlayer()
         return context
 

panikweb_templates/static/css/general.css

@@ -24,8 +24,8 @@ button, .button{
 	cursor:pointer;
 	background:none;
 }
-img {max-width:100%;
-}
+img {max-width:100%;}
+
 h1, h2, h3, h4, h5{
 	font-family: 'RegloBold';
 }
@@ -39,12 +39,12 @@ h4 {	font-size: 1.8em;}
 h5 {	font-size: 1.1em;}
 
 /*Specific rules for text writen by final users */
-article h1, .userContent h1 {	font-size: 2em;}
-article h2, .userContent h2  {	font-size: 1.7em;}
-article h3, .userContent h3  {	font-size: 1.5em;}
-article h4, .cuserContent h4  {	font-size: 1.4em;}
-article h5, .userContent h5  {	font-size: 1.3em;}
-
+.userContent h1 {	font-size: 2em;}
+.userContent h2  {	font-size: 1.7em;}
+.userContent h3  {	font-size: 1.5em;}
+.cuserContent h4  {	font-size: 1.4em;}
+.userContent h5  {	font-size: 1.3em;}
+.userContent h1, .userContent h2, .userContent h3, .cuserContent h4, .userContent h5{margin:2em 0 1em 0;}
 h1, h2, .squashed{
     transform: scale(0.5, 1);
     -webkit-transform: scale(0.5, 1);
@@ -59,6 +59,7 @@ h1, h2, .squashed{
     }
 
 nav{
+	padding:0.2em;
 	font-family: "RegloBold";
 	text-transform: uppercase;
 }
@@ -91,7 +92,8 @@ word-wrap: break-word;
 table {
 }
 th {
-   white-space: nowrap;
+	white-space: nowrap;
+	text-transform: uppercase;
 }
 tr{
 }
@@ -106,7 +108,8 @@ p  a {
 em {
     font-family:"RegloBold";
 }
-
+strong{
+	text-transform: uppercase;}
 blockquote {
 	font-family:"RegloBold";
 	color:#aaa;
@@ -170,11 +173,24 @@ ul.distributed{
 	text-align:center;
 	margin:0;
 	padding:0;
+	border-collapse:collapse;
 }
 ul.distributed li{
 	display:table-cell;
 	text-align:center;
 }
+ul.distributed.by4 li{
+	width:25%;
+}
+ul.distributed.by5 li{
+	width:20%;
+}
+ul.distributed.by6 li{
+	width:16.6666%;
+}
+ul.distributed.by7 li{
+	width:14.285%;
+}
 
 nav a.active, nav button.active{
 	opacity:1;
@@ -207,7 +223,7 @@ nav a.active, nav button.active{
 .left{float:left;margin-left:1em;}
 .smooth{opacity:0.5;}
 .hidden{display:none;}
-.padded{padding:2em;}
+.padded{padding:1.5em;}
 .spinning {
    position:relative;
    -webkit-animation: rotation 10s infinite linear;
@@ -215,6 +231,10 @@ nav a.active, nav button.active{
    -o-animation: rotation 10s infinite linear;
    animation: rotation 10s infinite linear;
 }
+.center{
+	text-align:center;
+	margin:auto;
+}
 
 @-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}

panikweb_templates/static/css/specifics.css

@@ -10,35 +10,38 @@
 #player, #player .symbol{    color: #FF6633;    }
 #player .label {	background-color:#FF6633;  }
 */
-.mainLegend{
+#mainLegend{
+	width:30%;
 	text-align:right;
+	float:right;
 	padding:1em;
 }
-#News, #news {
-	background-color:#1663d5; 
-	border-color:#fff !important;
-	color:white !important;
+#Nav{
+	border-width:0 0 2px 0;
+	border-style:solid;
 }
-.news, .news *{border-color:#1663d5 !important;color:white !important;border-color:#fff !important;}
-
-.mainLegend.news {
-	background-color:#1663d5; 
-	
+#Nav nav ul{
+	margin:2em 0 2em 0;
 }
-.mainLegend.news *{color:white !important;}
-.news {
-	border-style:solid;
+#News, #news,.news, .news *,.news .mainLegend,.news  a {
 	background-color:#1663d5; 
-	
+	border-color:#fff !important;
 	color:white !important;
 }
+/*
+#News, #news,.news, .news *,.mainLegend.news {
+	background-color:#fff; 
+	border-color:#1663d5 !important;
+	color:#1663d5 !important;
+}*/
+
 #player .metas, #player img{border-color:#fff;}
 #Player, #player{
 	background-color:#ff6633; 
 	border-color:#fff;
 	color:white !important;
 }
-#player.simple *{
+#player.simple *, #Player a{
 	color:white !important;
 }
 #player.simple .playlist{
@@ -59,8 +62,8 @@
 h1.title{
 }
 .date, .dateBloc {
-	font-family: "Reglo";
-	text-transform: uppercase;
+font-family: "Reglo";
+text-transform: uppercase;
 }
 .inline .date, .resume .date{
 	text-align: center;
@@ -70,7 +73,7 @@ h1.title{
 .dateBloc  .day {font-size: 2.2em;}
 .dateBloc .number {font-size: 2.2em;}
 .dateBloc  .month {font-size: 0.8em;}
-.dateBloc .time {font-size: 1.2em;}
+.dateBloc .time {font-size: 1.2em;margin: 0.2em 0;}
 
 .tabs .ui-tabs-nav {
     font-family: "Reglo";
@@ -97,7 +100,7 @@ body {
 }
 #main {}
 #Panik {background:white;}
-#Panik img{display:block;margin:auto;}
+#Panik img{display:block;margin:auto;max-height:200px;}
 .wrapper {max-width: 1024px; margin:auto;}
 .wrapper.half{max-width:600px;margin:auto;}
 
@@ -209,16 +212,20 @@ button.tag {
 /*#Home #player{   float: left; } */
 #player{}
 #player .content{
-	padding:5% 0em 5% 0em;
-	max-width:300px;
+	padding:5%;
+	max-width:350px;
 	margin:auto;
 }
-#player .metas{border-width:1px 0 0 0 ;border-style:solid;}
+#player .metas{
+	padding:1em;border-width:1px 0 0 0 ;border-style:solid;}
 #player .item{border-width:1px 0;border-style:solid;}
 #player img {border-width:2px;border-style:solid;} 
 
 
-#player .whatsOnAir{
+#player #WhatsOnAir{
+	padding:1em;
+	font-size:0.8em;
+	text-align:center;
 }
     
 #player .playlist .item {
@@ -280,6 +287,7 @@ button.tag {
 }
 /**** Inline	****/
 .emission-inline {
+	padding:1em 0 1em 0;
 }
 
 .emission-inline div.date {
@@ -314,19 +322,18 @@ button.tag {
 
 /**** EPISODE ****/
 /**** Detail  ****/
-.episode.resume {
-	min-height: 100px;
+.episode.resume, .episode.inline{
+	padding:1em 0 1em 0;
 }
-
 .episode.resume img {
-	margin-top: 17px;
 	border: 2px solid black;
 }
 
 .episode.resume .title{
-
+	margin-bottom:1em;
 }
 .episode.resume .date{
+	font-size: 1.2em;
 	float: left;
 }
 .episode.resume .logo,
@@ -337,27 +344,18 @@ button.tag {
 @media screen and (max-width: 300px) {
 	.episode.resume .logo{display:none;}
 }
-
 .episode.resume .date {
 	width: 3.5em;
 	text-align: center;
 	margin-right: 1em;
 }
 .episode.resume .date .day, .emission-detail .date .day {
-	margin-top: 20px;
-}
-
-.episode.resume .date .time, .emission-details .time {
-	margin: 5px 0 10px 0;
-	font-size: 1.2em;
 }
 
 .episode.resume .content {
 	padding-left: 5em;
 }
-
 .episode.resume .content .title {
-	margin: 16px 0 10px 0;	
 }
 
 .episode.resume .logo {
@@ -368,15 +366,16 @@ button.tag {
 .episode.resume .logo img{
 	width:100%;
 }
-
 .episode.resume .controls {
-	margin-top: 10px;
 	width: 90px;
 	text-align: center;
 }
 .episode.inline{
 }
-.episode.inline .date{ font-size:50%; margin-top:1em;}
+.episode.inline .date{
+	width: 3.5em;
+	font-size: 50%;
+}
 
 .episode.inline .content {
 	padding-left: 5em;
@@ -387,13 +386,10 @@ button.tag {
 	border-style:solid;
 	border-width:1px 0;
 }
-.list.news a{
-	max-height:350px;
-   text-overflow: ellipsis;
-   overflow: hidden;
-}
+.news a.block{padding:1em;}
+.news a.block:hover{text-decoration:none;}
 .news .date{padding:1em;}
-.news .title{
+.news .inline .title{
 	margin-bottom:1em;
 }
 .news .logo{
@@ -414,6 +410,11 @@ button.tag {
 }
 @media (min-width: 800px) {
 
+	.list.news a{
+		max-height:350px;
+		text-overflow: ellipsis;
+		overflow: hidden;
+	}
 	.list.news .logo{
 		max-width:50% !important;
 	}
@@ -442,7 +443,9 @@ button.tag {
 		clear:both;
 	}
 }
-
+.news.detail .description{
+	margin-top:1em;
+}
 /**** PROGRAM ****/
 
 .program .dateBloc {
@@ -452,7 +455,7 @@ button.tag {
 }
 
 /**** GRILLE ****/
-#Grid #Main {margin:1em;min-width:400px;}
+#Grid #Main {margin:1em;min-width:760px;}
 #Grid .heure {
 	padding:1.5em 0;
 }
@@ -466,6 +469,7 @@ button.tag {
 #Grid .item {
 	margin-bottom:1em;
 }
+
 /**** PROGRAMME ****/
 
 #Program .tabs nav ul li{

panikweb_templates/static/js/specifics.js

 $(function() {	
 	$(".tabs").each(function() {
 		var self = $(this);
-		$(this).find(".content:not(:first)").hide();
-		$(this).find("nav a:first, nav button:first").addClass("active");
-		$(this).find("nav a, nav button").each(function() {
+		var about= $($(this).attr("data-tab-about"));
+		about.find("[data-tabbed]:not(:first)").hide();
+		$(this).find("[data-tab]:first").addClass("active");
+		$(this).find("[data-tab]").each(function() {
 		    $(this).click(function (e) {  
 			e.preventDefault();
 			// switch all tabs off  
@@ -11,7 +12,7 @@ $(function() {
 			// switch this tab on  
 			$(this).addClass("active");  
 			// slide all elements with the class 'content' up  
-			self.find(".content").hide();  
+			about.find("[data-tabbed]").hide();  
 			//alert($(this).attr("href"));
 			// Now figure out what the 'title' attribute value is and find the element with that id.  Then slide that down.  
 			$($(this).attr("data-tab")).fadeIn();  

panikweb_templates/templates/base.html

@@ -32,11 +32,18 @@
 		<div id="Listen">
 			{% block listen %}{% include "includes/player.html" %}{% endblock %}
 		</div>
+		<div id="Nav">
+			<div class="wrapper">
+			{% block nav %}{% endblock %}
+			</div>
+		</div>
 		<div id="Main">
 			{% block main %}{% endblock %}
 		</div>
 		<div id="Links">
+			<div class="wrapper">
 			{% block links %}{% endblock %}
+			</div>
 		</div>
 
 	</div>

panikweb_templates/templates/emissions/emission_detail.html

@@ -2,7 +2,7 @@
 {% block bodyID %}Emissions{% endblock %}
 {% block listen %}{% endblock %}
 {% block main %}
-<div class="emission">
+<div class="emission padded">
 	<div class="wrapper half">
 		<div id="Emission-tabs-detail">
 			{% include "emissions/detail.html" %} 

panikweb_templates/templates/emissions/inline.html

@@ -13,7 +13,7 @@
 			<button class="control symbol add">B</button>
 		</div>
 		{% endif %}
-		<a class="link" href="{% url 'emission-view' slug=emission.slug %}">
+		<a class="block" href="{% url 'emission-view' slug=emission.slug %}">
 		
 			<h5 class="title ellipsis">{{ emission.title }}</h5>
 			{% if emission.description %}

panikweb_templates/templates/emissions/newsitem_detail.html

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

panikweb_templates/templates/episodes/inline.html

@@ -27,7 +27,7 @@
 		{% endif %}
 	</div>
 	<div class="content">
-		<a class="link" href="{{ episode.slug }}">
+		<a class="block" href="{{ episode.slug }}">
 			<h5 class="title ellipsis">{{ episode.title }}</h5>
 				{% if episode.description %}
 					<div class="description ellipsis">

panikweb_templates/templates/grid.html

@@ -3,10 +3,10 @@
 
 {% block bodyID %}Grid{% endblock %}
 {% block listen %}{% endblock %}
-{% block main %}
-<div id="grille" class="wrapper">
-	<nav>
-		<ul class="distributed">
+{% block title %}La grille{% endblock %}
+{% block nav %}
+	<nav class="">
+		<ul class="distributed by6">
 		        <li><button>Créations</button></li>
 		        <li><button>Agendas</button></li>
 		        <li><button>Info</button></li>
@@ -15,6 +15,9 @@
 		        <li><button>Continu</button></li>
 		</ul>
 	</nav>
+{% endblock %}
+{% block main %}
+<div id="grille" class="wrapper">
 	<table>
 		<tbody>
 		<tr>
@@ -26,9 +29,9 @@
 		</tr>
 		{% for time_header, time_cells in times|zip:grid %}
 		<tr>
-			  <th class="heure vertical">{{ time_header }}</th>
+			  <th class="heure">{{ time_header }}</th>
 			  {% for cell in time_cells %}
-			  <td class="" {% if cell.w > 1 %}colspan="{{cell.w}}"{% endif %}
+			  <td class="small" {% if cell.w > 1 %}colspan="{{cell.w}}"{% endif %}
 				      {% if cell.h > 1 %}rowspan="{{cell.h}}"{% endif %}>
 					{% if cell.time_label %}
 						<div class="cell-time-label">{{ cell.time_label }}</div>

panikweb_templates/templates/home.html

 {% extends "news.html" %}
-			{% block listen %}{% include "includes/player.html" %}{% endblock %}
+{% block listen %}{% include "includes/player.html" %}{% endblock %}
 {% block bodyID %}Home{% endblock %}
+{% block nav %}{% endblock %}
+{% block title %}{% endblock %}
 {% block links %}
-<div class="mainLegend">
-	<div class="wrapper">
-		<h1 class="squashed">Emissions</h1>
-	</div>
-</div>
 <div class="wrapper">
 	<ul class="custom list columns padded">
 	{% for emission in emissions %}

panikweb_templates/templates/listen.html

 {% extends "base.html" %}
 {% block bodyID %}Player{% endblock %}
+{% block main %}
+<div class="wrapper">
+	<ul class="small custom list columns padded">
+	{% for sound in sounds %}
+		<li class="item ellipsis">
+			<a href="{{ sound.url }}">
+				{{ sound.episode }}
+			</a>
+		</li>
+	{% endfor %}
+	</ul>
+</div>
+{% endblock %}
 

panikweb_templates/templates/news.html

-{% extends "base.html" %}
+{% extends "base.html"%}
 {% block listen %}{% endblock %}
 {% 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">
-		<nav>
-			<ul class="padded custom columns left">
-		{% for category in categories %}
-			<li class="item num-{{forloop.counter}}">
-			 <a href="#">{{ category.title }}</a>
-			</li>
-		{% endfor %}
-			</ul>
-		</nav>
-		<div class="mainLegend"><h1 class="squashed">News</h1></div>
-	</div>
-		<hr />
 	<div class="wrapper">
 		<ul class="custom list news cf">
 		{% for NewsItem in newsImaged %}

panikweb_templates/templates/news/inline.html

@@ -13,8 +13,7 @@
 				<img class="logo right" src="{{ content.image|thumbnail:'60x60' }}"/>	
 			{% endif %}			
 		{% endif %}
-		<a class="link bloc" href="{% url 'news-view' slug=content.slug %}">
-		
+		<a class="block" href="{% url 'news-view' slug=content.slug %}">
 			<h5 class="title {% if not class %}ellipsis{% endif %}">{{ content.title }}</h5>
 			<div class="description {% if not class %}ellipsis{% endif %}">				
 				{% if logo == "large" %}

panikweb_templates/templates/news/link.html

-<a href="#">
+<a href="{% url 'news-view' slug=content.slug %}">
 	<span class="title"><strong>{{ NewsItem.datetime|date:"D m/M" }}</strong>&nbsp;-&nbsp;{{ content.title }}</span>
 </a>

panikweb_templates/templates/program.html

 {% extends "base.html" %}
 {% block bodyID %}Program{% endblock %}
+{% block title %}Programme{% endblock %}
 {% block listen %}{% endblock %}
-{% block main %}
-<div class="program tabs wrapper">
-	<nav>
+{% block nav %}
+<div class="program tabs" data-tab-about="#ProgramContent">
+	<nav class="">
 		<ul class="days custom distributed">
 		{% for day in days %}
 			<li class=""><button data-tab="#Program-tabs-{{ day.datetime|date:"w" }}">{{ day.datetime|date:"D d" }}</button></li>
 		{% endfor %}
 		</ul>
 	</nav>
+</div>
+{% endblock %}
+{% block main %}
+<div id="ProgramContent" class="wrapper">
 	{% for day in days %}
-	<div class="content" id="Program-tabs-{{ day.datetime|date:"w" }}">
-		<ul class="custom emission-list list">
+	<div data-tabbed="true" class="content" id="Program-tabs-{{ day.datetime|date:"w" }}">
+		<ul class="custom emission-list list padded">
 		{% if day.schedules %}
 		    {% for schedule in day.schedules %}
-			<li >
-				<div class="date dateBloc left">
+			<li>
+				<div class="date dateBloc left padded">
 					<div class="time">{{ schedule.datetime|date:"H:i" }}</div>
 				</div>
-				{% include "emissions/inline.html" with emission=schedule.emission %}		
+				<div style="margin-left:100px;">{% include "emissions/inline.html" with emission=schedule.emission %}</div>
 			</li>
 		    {% endfor %}
 		{% else %}