Player Direct & CSS

panikweb_templates/static/css/general.css

@@ -10,7 +10,10 @@ a:hover {
 	opacity:0.8;
     text-decoration: underline;
 }
-
+button{
+	cursor:pointer;
+	background:none;
+}
 img {
 	border: 2px solid black;
 	margin-right: 10px;
@@ -119,7 +122,7 @@ ul.inline li{
 /*USEFULL CLASSES */
 /******************/
 
-.ui-tabs, .ui-tabs * { 
+.ui-tabs, .ui-tabs-nav * { 
     background: transparent !important; 
     border: none !important; 
 } 
@@ -149,7 +152,7 @@ ul.inline li{
 
 	padding:0 0 0 0 !important;
 	margin:0 0 0 0 !important;
-	border:none;
+    border: none !important; 
 }
 
 .todo:hover, .todo *:hover{
@@ -176,6 +179,7 @@ ul.inline li{
 .right{float:right;margin-left:1em;}
 .left{float:left;margin-left:1em;}
 .smooth{opacity:0.5;}
+.hidden(display:none;)
 /**
  * For modern browsers
  * 1. The space content is one way to avoid an Opera bug when the

panikweb_templates/static/css/reset.css

@@ -48,3 +48,4 @@ table {
 h1, h2, h3, h5, h6 {
     font-weight: normal;
 }
+button{background:none;border:none;}

panikweb_templates/static/css/specifics.css

@@ -104,7 +104,7 @@ body {
 	font-size: 4em !important;
 }   
 .symbol.huge{
-	font-size: 6em !important;
+	font-size: 10em !important;
 }
 
 .label {
@@ -159,6 +159,7 @@ button.tag {
 	color:white;
 	background-color: black;
 	position:fixed;
+	z-index:1000;
 	top:0px;
 	width:100%;
 	font-family: "Reglo";
@@ -179,6 +180,7 @@ button.tag {
 	text-overflow: ellipsis;
 	overflow:hidden;
 }
+#metaNav button.toggler{color:white;display:none;}
 #metaNav ul li a{
 	color:white;
 	margin-right:1em;
@@ -230,8 +232,7 @@ button.tag {
 
 /****************************************************/
 /**** PLAYER ****/
-#Home #player{   float: left; }
-
+/*#Home #player{   float: left; } */
 #player{
 	max-width:300px;
 }
@@ -287,6 +288,11 @@ button.tag {
 
 
 /****************************************************/
+.inline{padding:0.5em;}
+/**** Liste   ****/
+.list > li{
+    border-bottom: 2px solid #ccc !important;
+}
 /**** EMISSIONS ****/
 #Emission{max-width:600px;}
 #Emission .emission-detail .title{}
@@ -371,10 +377,6 @@ button.tag {
 
 
 /**** EPISODE ****/
-/**** Liste   ****/
-.episodes .list > li{
-    border-bottom: 0px solid #000000;
-}
 /**** Detail  ****/
 .episode.resume {
 	min-height: 100px;

panikweb_templates/templates/base.html

@@ -27,12 +27,14 @@
 	<!--<input id="search-form" type="text" />-->
         <nav class="contextual-menu">
 		<ul>
+			<li><a href="{% url 'get' %}">☰</a></li>
 			<li><a href="{% url 'home' %}">Home</a></li>
-			<li><a href="#">About</a></li>
+			<li><a href="{% url 'player' %}">Listen</a></li>
 			<li><a href="{% url 'program' %}">Grid</a></li>
-			<!--<li><a href="#">Media</a></li>-->
+			<!--<li><a href="#">Media</a></li>
 			<li><a href="#">News</a></li>
-			<li><a href="#">Search</a></li>
+			<li><a href="#">Search</a></li>-->
+			<li><a href="#">About</a></li>
 		</ul>
 	</nav>
 </div>

panikweb_templates/templates/emissions/inline.html

-<div class="emission-inline">
+<div class="emission emission-inline inline cf">
 	<div class=" {% if emission.archived %}archived{% endif %}">
 		{% if emission.date %}
 			<div class="date cf">

panikweb_templates/templates/home.html

@@ -2,10 +2,9 @@
 {% block bodyID %}Home{% endblock %}
 {% block content %}
 
-<p>Plop</p>
-
+<ul class="custom list">
 {% for emission in emissions %}
-	{% include "emissions/inline.html" %} 
+	<li class="item">{% include "emissions/inline.html" %} </li>
 {% endfor %}
-
+</ul>
 {% endblock %}

panikweb_templates/templates/player/detail.html

 <div id="player">
         <div class="direct">
-		<button class="control play symbol">G</button>
+		<button class="control play symbol huge" onclick="$('#DirectStreamPanik').play();">G</button>
 		<div class="label">en direct</div>
 		<div class="playlist img">
-			<img src="http://placehold.it/210X130"/>
+			<img src="http://www.radiopanik.org/spip/squelettes/top-panik.gif"/>
 		</div>
+<audio id="DirectStreamPanik" tabindex="0" src="http://streaming.domainepublic.net:8000/radiopanik.ogg" controls="controls" autoplay="true">
+</audio>
         </div>
+<!--
         <div class="current">
 		<h5>Elles en parlent encore</h5>
 		<div class="date">
@@ -37,4 +40,5 @@
 			<p>The sound of the RCA electronic music synthesizer</p>
 		</div>
         </div>
+-->
 </div>