Commit f2958412 authored by Simon Daron's avatar Simon Daron
Browse files

Fixing some margins in play & add rules in lists

parent e1335b81
......@@ -169,6 +169,9 @@ nav ul li, ul.inline li{
ul.list{
list-style-type:square; /*Not working but why?*/
list-style-position:inside;
column-rule:1px solid #ccc;
-moz-column-rule:1px solid #ccc;
-webkit-column-rule:1px solid #ccc;
}
ul.list > li{
padding:0.5em 0 0.5em 0;
......@@ -238,6 +241,7 @@ nav a.active, nav button.active{
.smooth{opacity:0.5;}
.hidden{display:none;}
.padded{padding:1.5em;}
.marged{margin:1.5em;}
.small{ font-size: 80%;}
.big{ font-size: 150%;}
......
......@@ -231,13 +231,14 @@ body{
/*#Home #player{ float: left; } */
#player .metas, #player img{border-color:#fff;}
#player .metas{border-left:1px solid white;}
#player{background-color:#ff6633; border-color:#fff;color:white !important;}
#player *{border-color:#fff; color:white !important;background-color:#ff6633;}
#player{
border-top:2px solid black;
border-bottom:2px solid black;
}
#player .content{
#player .wrapper{
padding:3%;
max-width:350px;
margin:auto;
......@@ -367,7 +368,7 @@ body{
.episode .tag{
}
.episode.resume, .episode.inline{
padding:1em 0 1em 0;
padding:0.5em 0 0.5em 0;
}
.episode.resume img {
border: 2px solid black;
......@@ -418,7 +419,7 @@ body{
}
.episode.inline .content {
padding-left: 5em;
padding: 0 1em 0 5em;
}
/****************************************************/
......
<div id="player" class="simple cf">
<div class="content">
<div class="direct">
<button data-audio-id="DirectStreamPanik" >
<span class="control icon-volume-up resymbol huge"></span>
<span class="label">&nbsp;en direct</span>
</button>
<div id="WhatsOnAir"></div>
<audio
id="DirectStreamPanik"
preload="none"
class="hidden"
tabindex="0"
src="http://streaming.domainepublic.net:8000/radiopanik.ogg?&unique={{ uuid }}"
controls="controls"
></audio>
<ul class="inline metas small">
<li class="right">
<button id="BufferStateTODO"></button>
<button class="icon-refresh" id="RefreshWhatsOnAir"></button>
</li>
<li><a title="Get the stream on your player!" class="button resymbol icon-download" href="http://streaming.domainepublic.net:8000/radiopanik.ogg.m3u"></a></li>
<li><button title="Show/Hidden HTML5 audio player" onclick="$('#DirectStreamPanik').toggleClass('hidden');$(this).toggleClass('icon-eye-open icon-eye-close');return false;" class="icon-eye-open"></button></li>
<li><button title="Need some help?" onclick="$('#PlayerHelp').toggle();" class="icon-question-sign"></button></li>
</ul>
<article id="PlayerHelp" class="small hidden help">
<p>Le contenu des émissions n&#8217;étant pas limité à un niveau local, le stream permet de les écouter aux quatre coins du monde. Mais aussi et surtout, à Bruxelles, dans les zones où la radio n&#8217;est pas captée facilement.</p>
<p>Le serveur de streaming a été mis en place par l&#8217;asbl A.C.T.I.C et est hébergé par <a href="http://www.domainepublic.net/" class='spip_out' rel='external'>Domainepublic.net</a> . Il fonctionne exclusivement grâce à des logiciels libres.</p>
<p>Si votre logiciel ne parvient pas à lire le stream de Radio Panik, nous vous conseillons de télécharger <a href="http://framakey.org/Portables/PortableVLC" class='spip_out' rel='external'>VLC Media Player</a>, un lecteur multimedia impressionnant de par ses nombreuses fonctionnalités (supporte de nombreux formats de stream, d&#8217;audio, de vidéo, peut servir de relais streamcast), qui fonctionne aussi bien sous Linux que sous Windows ou Mac OS.</p>
<p><dt>URL du stream</dt><dd class="ellipsis"><a href="http://streaming.domainepublic.net:8000/radiopanik.ogg">http://streaming.domainepublic.net:8000/radiopanik.ogg</a></dd></p>
</article>
<style>#RefreshWhatsOnAir {display:block !important;float:right;position:relative;}</style>
<script type="text/javascript">
$(function() {
var timer = null,
interval = 5000;
$('#WhatsOnAir').on('load',function(){
var WhatsOnAir = $(this);
$.getJSON('/onair.json', function(onair) {
WhatsOnAir.fadeOut();
if(onair.data.episode || onair.data.emission){
var result = '';
result = result + ($.type(onair.data.emission) == 'object'?'<strong>'+onair.data.emission.title+'</strong>&nbsp;':'');
result = result + ($.type(onair.data.episode) == 'object'?'<span>'+onair.data.episode.title+'</span>':'');
WhatsOnAir.html(result);
} else if (onair.data.nonstop) {
result = onair.data.nonstop.title;
WhatsOnAir.html('<strong>' + result + '</strong>');
}
else{WhatsOnAir.html('<strong>Unknown (Probably Non-Stop)</strong>');}
WhatsOnAir.fadeIn();
});
}).trigger('load');
$('#RefreshWhatsOnAir').on('activate',function(e){
$(this).addClass('spinning');
$('#WhatsOnAir').trigger('load');
timer = setInterval( "$('#WhatsOnAir').trigger('load');", interval);
}).on('deactivate',function(e){
$(this).removeClass('spinning');
clearInterval(timer);
}).on('click',function(e){
$(this).toggleClass('spinning');
if($(this).is('.spinning')){
$(this).trigger('activate');
}else{$(this).trigger('deactivate');}
return false;
});
$("[data-audio-id]").click(function(e) {
e.preventDefault();
var song = $('#'+$(this).attr('data-audio-id')).get(0);
if (song.paused){
song.play();$('#RefreshWhatsOnAir').trigger('activate');
}else{
song.pause();$('#RefreshWhatsOnAir').trigger('deactivate');
<div class="wrapper">
<ul class="custom right">
<li><a class="button resymbol icon-download inBlock" title="Get the stream on your player!" href="http://streaming.domainepublic.net:8000/radiopanik.ogg.m3u"></a></li>
<li><button class="icon-eye-open " title="Show/Hidden HTML5 audio player" onclick="$('#DirectStreamPanik').toggleClass('hidden');$(this).toggleClass('icon-eye-open icon-eye-close');return false;"></button></li>
<li><button title="Need some help?" onclick="$('#PlayerHelp').toggle();" class="icon-question-sign"></button></li>
</ul>
<button data-audio-id="DirectStreamPanik" >
<span class="control icon-volume-up resymbol huge"></span>
<span class="label">&nbsp;en direct</span>
</button>
<div id="CurrentlyPlaying">
<div class="inBlock">
<span id="BufferStateTODO"></span>
<button class="icon-refresh" id="RefreshWhatsOnAir"></button>
</div>
<div class="inBlock" id="WhatsOnAir"></div>
</div>
<audio
id="DirectStreamPanik"
preload="none"
class="hidden"
tabindex="0"
src="http://streaming.domainepublic.net:8000/radiopanik.ogg?&unique={{ uuid }}"
controls="controls"
></audio>
<article id="PlayerHelp" class="hidden help">
<hr class="marged"/>
<p>Le contenu des émissions n&#8217;étant pas limité à un niveau local, le stream permet de les écouter aux quatre coins du monde. Mais aussi et surtout, à Bruxelles, dans les zones où la radio n&#8217;est pas captée facilement.</p>
<p>Le serveur de streaming a été mis en place par l&#8217;asbl A.C.T.I.C et est hébergé par <a href="http://www.domainepublic.net/" class='spip_out' rel='external'>Domainepublic.net</a> . Il fonctionne exclusivement grâce à des logiciels libres.</p>
<p>Si votre logiciel ne parvient pas à lire le stream de Radio Panik, nous vous conseillons de télécharger <a href="http://framakey.org/Portables/PortableVLC" class='spip_out' rel='external'>VLC Media Player</a>, un lecteur multimedia impressionnant de par ses nombreuses fonctionnalités (supporte de nombreux formats de stream, d&#8217;audio, de vidéo, peut servir de relais streamcast), qui fonctionne aussi bien sous Linux que sous Windows ou Mac OS.</p>
<p><dt>URL du stream</dt><dd class="ellipsis"><a href="http://streaming.domainepublic.net:8000/radiopanik.ogg">http://streaming.domainepublic.net:8000/radiopanik.ogg</a></dd></p>
</article>
<style>#RefreshWhatsOnAir {display:block !important;float:right;position:relative;}</style>
<script type="text/javascript">
$(function() {
var timer = null,
interval = 5000;
$('#WhatsOnAir').on('load',function(){
var WhatsOnAir = $(this);
$.getJSON('/onair.json', function(onair) {
WhatsOnAir.fadeOut();
if(onair.data.episode || onair.data.emission){
var result = '';
result = result + ($.type(onair.data.emission) == 'object'?'<strong>'+onair.data.emission.title+'</strong>&nbsp;':'');
result = result + ($.type(onair.data.episode) == 'object'?'<span>'+onair.data.episode.title+'</span>':'');
WhatsOnAir.html(result);
} else if (onair.data.nonstop) {
result = onair.data.nonstop.title;
WhatsOnAir.html('<strong>' + result + '</strong>');
}
$(this).children('.icon-volume-up,.icon-pause').toggleClass('icon-volume-up').toggleClass('icon-pause');
else{WhatsOnAir.html('<strong>Unknown (Probably Non-Stop)</strong>');}
WhatsOnAir.fadeIn();
});
}).trigger('load');
$('#RefreshWhatsOnAir').on('activate',function(e){
$(this).addClass('spinning');
$('#WhatsOnAir').trigger('load');
timer = setInterval( "$('#WhatsOnAir').trigger('load');", interval);
}).on('deactivate',function(e){
$(this).removeClass('spinning');
clearInterval(timer);
}).on('click',function(e){
$(this).toggleClass('spinning');
if($(this).is('.spinning')){
$(this).trigger('activate');
}else{$(this).trigger('deactivate');}
return false;
});
</script>
</div>
$("[data-audio-id]").click(function(e) {
e.preventDefault();
var song = $('#'+$(this).attr('data-audio-id')).get(0);
if (song.paused){
song.play();$('#RefreshWhatsOnAir').trigger('activate');
}else{
song.pause();$('#RefreshWhatsOnAir').trigger('deactivate');
}
$(this).children('.icon-volume-up,.icon-pause').toggleClass('icon-volume-up').toggleClass('icon-pause');
});
});
</script>
</div>
</div>
......@@ -3,7 +3,7 @@
{% block bodyID %}Player{% endblock %}
{% block main %}
<div class="wrapper">
<ul class="custom columns">
<ul class="custom columns list">
{% for episode in episodes %}
<li class="item">
{% episode_inline klass="standalone"%}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment