Commit 320bedbd authored by Simon Daron's avatar Simon Daron
Browse files

Rewriting style for left/right common header + add Image for fixed player

parent 965b8359
......@@ -94,18 +94,18 @@
float:right;
}
#Home .leftPart,
#Home .rightPart {
#specialHome .leftPart,
#specialHome .rightPart {
width: 100%;
}
}
@media screen and (min-width: 1280px) {
#Home .leftPart {
#specialHome .leftPart {
width: 60%;
}
#Home .rightPart {
#specialHome .rightPart {
width: 30%;
}
#recent-emissions ul.columns,
......@@ -232,16 +232,27 @@ body{
#metaNav .iconLabel {display:none;}
#metaNav ul li a span.nav-icon { display: inline-block; }
}
/****************************************************/
/**** Commons ****/
/****************************************************/
#Related{
background-color:#eee;
color:#000;
}
.audio button {color:#ff6600 !important;}
/****************************************************/
/**** HEADER ****/
/****************************************************/
/* PANIK LOGO */
#Commons{padding:3em 0 3em 0;}
#Commons .wrapper{
padding-bottom:50px;
}
#mainHeader {
padding-top:1em;
background:white 0% 50% no-repeat url('../img/logoPanik.png');
}
#mainHeader {
font-size:70%;
......@@ -252,11 +263,19 @@ body{
font-size:60%;}
#Panik img{display:block;margin:auto;max-height:200px;}
#mainHeader h1{
background:white 0% 50% no-repeat url('../img/logoPanik.png');
padding:50px 0 0 75px;
}
#player-container.fixed { width:100%;left:0;border-width: 2px 0 0 0;border-style:solid;}
#player-container #player{
padding:0 0 0 0;
}
#Related{
background-color:#eee;
color:#000;
#Player #player-container #audioPlayer, #Player.withPlaylist #player-container #audioPlayer, .style-ffffff #Player.withPlaylist #player-container #Playlist{µ
margin:1em 0;
}
/****************************************************/
/**** SCREEN NAV ****/
#Nav{
......@@ -312,52 +331,24 @@ body{
}
/****************************************************/
/**** Commons ****/
/****************************************************/
#mainHeader {
width:30%;
float:left;
}
#Player {
margin-top:1em;
width:65%;
float:right;
padding:0 0 0 0;
}
#player-container.fixed { width:100%;left:0;border-width: 2px 0 0 0;border-style:solid;}
#player-container #player{
padding:0 0 0 0;
}
#Player #player-container #audioPlayer, #Player.withPlaylist #player-container #audioPlayer, .style-ffffff #Player.withPlaylist #player-container #Playlist{µ
margin:1em 0;
}
#player-container,
#player-container *{background-color:#ffffff !important; border-color:#ff6600 !important;color:#ff6600 !important;}
.audio button {color:#ff6600 !important;}
/****************************************************/
/**** PLAYER ****/
/****************************************************/
/*#Home #player{ float: left; } */
#player-container{
color:#fff;
font-size:1em;
background-color:#ff6633; border-color:#fff;
}
#player-container button,#player-container a,#player-container .label{
border-color:#fff;
color:#fff;
#player-container,
#player-container *{border-color:#ff6600 !important;color:#ff6600 !important;}
#player-container.fixed{
background:white 0% 50% no-repeat url('../img/logoPanikBW.png');}
}
#player-container .metas, #player-container img{border-color:#fff;}
#player-container .padded{padding:0.5em;}
#player-container .padded{padding:0.3em;}
#player-container button,#player-container a{
}
#player-container .metas{
text-align:center;
float:right;
}
#DirectStreamPanikControler {
display:inline !important;
......@@ -381,22 +372,26 @@ body{
bottom:0em;
border-bottom:none;
}
#Player.withoutPlaylist #player-container #audioPlayer{
font-size:150%;
margin:auto;
width:100%;
}
#Player.withPlaylist #player-container #audioPlayer{
#Player.withPlaylist #player-container.fixed #audioPlayer{
float:left;
width:50%;
border-right:2px solid black;
}
#Player.withPlaylist #player-container #Playlist{
#Player.withPlaylist #player-container.fixed #Playlist{
float:right;
width:49%;
text-align:left;
}
#player-container.normal #player{
#Player.withoutPlaylist #player-container.fixed #Playlist{
}
#Player.withPlaylist #player-container #Playlist{
border-top:2px solid black;
}
#player-container.minimized{
width:auto;
......@@ -485,24 +480,32 @@ body{
padding-top:0.2em;
}
@media screen and (max-width: 800px) {
@media screen and (max-width: 600px) {
#Player{
margin-top:0px;
}
#Player.withPlaylist #player-container #audioPlayer,
#Player.withPlaylist #player-container #audioPlayer,
#Player.withPlaylist #player-container #Playlist{
float:none !important;
width:auto !important;
border:none;
border-right:none !important;
max-width:auto !important;
}
#Player.withPlaylist #player-container #Playlist{
border-top:2px solid black;
}
}
@media screen and (min-width: 500px) {
#Player #player-container #audioPlayer{
@media screen and (min-width: 600px) {
#Player{
margin-top:50px;
}
#Player #player-container.fixed #audioPlayer{
max-width:50%;
}
#Player.withPlaylist #player-container.fixed #Playlist{
border-top:none;
}
}
/****************************************************/
......
......@@ -45,12 +45,12 @@
<div id="All">
{% block meta %}<div id="metaNav">{% metanav active=sectionName %}</div>{% endblock %}
<div id="Commons" class="cf" >
<div class="wrapper" class="cf" >
<div id="mainHeader" class="block center">
<div class="wrapper cf sided" >
<div id="mainHeader" class="leftPart">
<h1><span id="radioPanik" class="inBlock">Radio Panik</span> <span id="frequence" class="inBlock">105.4 FM</span></h1>
<!--{% block logo %}<img class="logo" src="{{ STATIC_URL }}/img/LogoPanik.jpg"/>{% endblock %}-->
</div>
<div id="Player" class="withoutPlaylist">
<div id="Player" class="rightPart withoutPlaylist">
{% block listen %}{% player %}{% endblock %}
</div>
</div>
......
......@@ -23,7 +23,7 @@
</div>
<div class="sided wrapper">
<div class="sided wrapper" id="specialHome">
<div class="marged">
<div class="leftPart">
<h2><a href="{% url 'program' %}">Cette semaine sur Panik</a></h2>
......
{% load i18n %}
<div id="player-container" class="normal cf">
<button id="togglePlayer" class="hidden left huge icon-double-angle-left "></button>
<div id="player" class="wrapper cf">
<div id="player" class="cf">
<div id="audioPlayer" class="cf">
<div class="padded cf">
<ul class="metas custom right big">
<li><a class="button resymbol icon-download inBlock" title="{% trans 'Get the stream on your player!' %}" href="http://streaming.domainepublic.net:8000/radiopanik.ogg.m3u"></a></li>
<div class="metas custom">
<a class="button resymbol icon-download inBlock" title="{% trans 'Get the stream on your player!' %}" href="http://streaming.domainepublic.net:8000/radiopanik.ogg.m3u"></a>
<!--<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="{% trans 'Need some help?' %}" onclick="$('#PlayerHelp').toggle();" class="icon-question-sign"></button></li>
<button title="{% trans 'Need some help?' %}" onclick="$('#PlayerHelp').toggle();" class="icon-question-sign"></button>
<!--<li><a title="{% trans 'Need some help?' %}" href="/support/player" class="icon-question-sign"></a></li>-->
</ul>
</div>
<span class="button" id="DirectStreamPanikControler">
<div id="streamSymbol" class="icon-volume-up resymbol"></div>
<div class="label">{% trans 'live' %}</div>
......@@ -26,7 +26,7 @@
src="http://streaming.domainepublic.net:8000/radiopanik.ogg?&unique={{ uuid }}"
controls="controls"
></audio>
<div id="PlayerHelp" class="sub padded hidden help">
<div id="PlayerHelp" class="sub 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>
......
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