CSS Styling emission/episode/player

panikweb_templates/static/css/specifics.css

@@ -16,7 +16,7 @@
 .inline .date, .resume .date{
 	text-align: center;
 }
-.dateBloc{width:5.5em;
+.dateBloc{width:4em;
 	text-align: center;}
 .dateBloc{display:inline-block;}
 .dateBloc *{line-height: 100%;}
@@ -28,6 +28,7 @@
 .dateBloc.small{
 	font-size: 80%;
 }
+
 .tabs .ui-tabs-nav {
     font-family: "Reglo";
     text-transform: uppercase;
@@ -299,13 +300,14 @@ background-color:#ff6633; border-color:#fff;}
 	background-color:transparent;
 }
 #player-container .metas, #player-container img{border-color:#fff;}
-#player-container .padded{padding:1%;}
+#player-container .padded{padding:0.5em;}
 #player-container *.label{
 	padding:0.2em;
 }
 #player-container button,#player-container a{
 }
 #player-container .metas{
+	text-align:center;
 	color:white !important;
 }
 #player-container .label{
@@ -337,7 +339,7 @@ background-color:#ff6633; border-color:#fff;}
 	font-size:0.9em;
 }
 #player-container.fixed .padded{
-	padding:0.5em;
+
 }
 #Player.withPlaylist #player-container #audioPlayer{
 	float:left;
@@ -360,13 +362,15 @@ background-color:#ff6633; border-color:#fff;}
 #Playlist button{
 	font-size:1em;
 }
-#Playlist .label{
+#Playlist #playlistLabel{
 	float:right;
 
 }
-#Playlist .playlistControls{	
-	font-size:120%;
-	text-align:left;
+#Playlist .playListControls{	
+}
+#Playlist .playListControls button{	
+	margin-right:0.2em;
+	display:inline-block;
 }
 #Playlist .playing .icon-pause{
    -webkit-animation: loading 1s infinite linear;
@@ -461,8 +465,7 @@ background-color:#ff6633; border-color:#fff;}
 		max-width:1000px;
 	}
 	#Emissions #Changing .wrapper.sided #Emission-tabs-detail,
-	 #Emissions #Changing .wrapper.sided #Emission-tabs-last,
-	  #Emissions #Changing .wrapper.sided .monthGroup{
+	 #Emissions #Changing .wrapper.sided #Emission-tabs-last{
 		width:45%;
 	}
 	#Emissions #Changing .wrapper.sided #Emission-tabs-detail{
@@ -471,6 +474,10 @@ background-color:#ff6633; border-color:#fff;}
 	#Emissions #Changing .wrapper.sided #Emission-tabs-last{
 		float:right;
 	}
+	/*
+	  #Emissions #Changing .wrapper.sided .monthGroup{
+		width:45%;
+	}
 	#Emissions #Changing .wrapper.sided .monthGroup.even{
 		float:right;
 		clear:left;
@@ -479,6 +486,7 @@ background-color:#ff6633; border-color:#fff;}
 		float:left;
 		clear:right;
 	}
+	*/
 }
 /**** Detail	****/
 .emission-detail .metas {
@@ -550,6 +558,13 @@ background-color:#ff6633; border-color:#fff;}
 .episode.resume .logo{
 	float: right;
 }
+.episode.resume .sound{
+	float:right;
+	margin:0 0 1em 1em;
+}
+.episode.inline .sound{
+	font-size:80%;	
+}
 .episode.resume .sound.right .icon-download{
 	text-align:center;
 }
@@ -560,14 +575,11 @@ background-color:#ff6633; border-color:#fff;}
 	max-width:50%;
 }
 
-@media screen and (max-width: 300px) {
-	.episode.resume .logo{display:none;}
-}
 .episode.resume .date .day, .emission-detail .date .day {
 }
 
 .episode.resume .content {
-	padding-left: 6.5em;
+	padding-left: 5em;
 }
 .episode.resume .content .title {
 }
@@ -580,6 +592,19 @@ background-color:#ff6633; border-color:#fff;}
 	font-size:80%;
 }
 
+@media screen and (max-width: 400px) {	
+	.episode .dateBloc{
+		width:4em;
+		font-size:80%
+	}
+
+	.episode.resume .content {
+		padding-left: 4em;
+	}
+}
+@media screen and (max-width: 300px) {
+	.episode.resume .logo{display:none;}
+}
 /****************************************************/
 /**** News ****/
 .list.news li {

panikweb_templates/static/js/specifics.js

@@ -9,7 +9,7 @@ $(function() {
 	var $main = $("#Changing");
 	var $log = $("#userLog");
 	var $localList = $('#localList').playlist({
-		controlContainer: $('<div>',{class:""}).sortable(),
+		controlContainer: $('<div>',{class:"playListControls label"}).sortable(),
 		playlistContainer: $('<ol>',{id:"myPlaylist",class:"custom"}).sortable(),
 		onLoad:function(self){
 			$('#localList').children('.label').on('click',function(){ 

panikweb_templates/templates/emissions/emission_detail.html

@@ -7,27 +7,31 @@
 {% block main %}
 <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 wrapper half">
-			{% episode_detail %} 
-		</div>
-		{% endif %}
 		<div data-tabbed="true" id="Emission-tabs-default">
 			<div id="Emission-tabs-detail">
 				<h5 class="sectionLabel">À propos</h5>
 				{% emission_detail %}
 			</div>
-			{% if episodes %}
+
 			<div id="Emission-tabs-last" class="episodes">
+			{% if episode %}
+				{% episode_detail %} 
+			{% elif episodes %}
 					<h5 class="sectionLabel">Derniers épisodes</h5>
-				{% with episodes|slice:"0:3" as episodes %}
+				{% with episodes|slice:"0:1" as episodes %}
 					{% for episode in episodes %}
 						<div class="legend">{{ episode.first_diffusion|date:"F Y" }}</div>
 						{% episode_resume date="daytime" %}
 					{% endfor %}
 				{% endwith %}
-			</div>
+				{% with episodes|slice:"1:3" as episodes %}
+					{% for episode in episodes %}
+						<div class="legend">{{ episode.first_diffusion|date:"F Y" }}</div>
+						{% episode_resume model="inline" date="daytime" %}
+					{% endfor %}
+				{% endwith %}
 			{% endif %}
+			</div>
 		</div>
 		{% if episodes %}
 		<div data-tabbed="true" id="Emission-tabs-episodes" class="episodes">

panikweb_templates/templates/emissions/nav.html

@@ -68,10 +68,12 @@
 						</button >
 					</li>
 				</ul>
+				<!--
 				{% if episode %}
 				<hr />
 					<h4 class="active button padded " data-tab="#Emission-tabs-current">{{ episode.title }}</h4>
 				{% endif %}
+				-->
 			</nav>
 		</div>
 		{% endif %}

panikweb_templates/templates/episodes/detail.html

@@ -3,6 +3,7 @@
 <div class="episode detail episode-detail cf">
 	{% if diffusions %}
 	<header class="center padded">
+		<h4 class="">{{ episode.title }}</h4>
 		<div class="label">Diffusions</div>
 		<ul class="diffusions custom">
 			{% for schedule in diffusions %}
@@ -12,7 +13,9 @@
 	</header>
 	{% endif %}
 	{% if episode.main_sound %}
-		{% audio sound=episode.main_sound %}
+		<div class="sound center">
+			{% audio sound=episode.main_sound %}
+		</div>
 	{% endif %}
 	{% if episode.image %}
 	<div class="logo right">

panikweb_templates/templates/episodes/resume.html

 {% load thumbnails %}
 {% load paniktags %}
-<div class="episode resume {% if model = "inline" %}inline{% endif %} cf">
+<div class="episode {% if model = "inline" %}inline{% else %}resume{% endif %} cf">
 	<div class="dateBloc left">
 		<div class="date">
 			<div class="day">
@@ -30,7 +30,7 @@
 	{% endif %}
 	<div class="content">
 
-		{% if episode.main_sound %}
+		{% if episode.main_sound and model != "inline"%}
 			<div class="sound right">{% audio sound=episode.main_sound %}</div>
 		{% endif %}
 		{% if class = "standalone" %}
@@ -44,7 +44,7 @@
 		{% if model = "inline" %}
 			{% if episode.description %}
 				<div class="description ellipsis">
-					{{ episode.description|safe|striptags }}
+					{{ episode.description|safe|striptags|truncatewords:20}}
 				</div>
 			{% elif episode.text %}
 				<div class="description ellipsis">
@@ -54,14 +54,18 @@
 		{% else %}
 			{% if episode.description %}
 			<article class="text userContent">
-				{{ episode.description|safe }}
+				{{ episode.description|safe|truncatewords:50 }}
 			</article>
 			{% elif episode.text %}
 			<article class="text userContent">
-				{{ episode.text|safe}}
+				{{ episode.text|safe|truncatewords:50}}
 			</article>
 			{% endif %}
 		{% endif %}
+
+		{% if episode.main_sound and model = "inline"%}
+			<div class="sound">{% audio sound=episode.main_sound %}</div>
+		{% endif %}
 		<div class="metas">
 			{% if episode.serie  or episode.auteur or episode.redif %}
 			<dl class="credits cf">

panikweb_templates/templates/includes/player.html

@@ -34,7 +34,7 @@
 		</div>
 		<div id="Playlist" class="sub cf">
 			<div id="localList" class="padded">
-				<div class="label button">Playlist&nbsp;<span class="icon-list"></span></div>
+				<div id="playlistLabel" class="label button">Playlist&nbsp;<span class="icon-list"></span></div>
 			</div>
 		</div>
 		<script type="text/javascript">