Commit 22810023 authored by Simon Daron's avatar Simon Daron

New template structure

parent 1cb58f08
......@@ -16,6 +16,7 @@ urlpatterns = patterns('',
url(r'^ckeditor/', include('ckeditor.urls')),
url(r'^get$', 'panikweb.views.get', name='get'),
url(r'^player$', 'panikweb.views.player', name='player'),
url(r'^news/', 'panikweb.views.news', name='news'),
(r'^api/v2/', include('fiber.rest_api.urls')),
(r'^admin/fiber/', include('fiber.admin_urls')),
......
......@@ -166,6 +166,18 @@ class Home(TemplateView):
home = Home.as_view()
class News(TemplateView):
template_name = 'news.html'
def get_context_data(self, **kwargs):
context = super(News, self).get_context_data(**kwargs)
context['news'] = NewsItem.objects.all().exclude(image__isnull=True).exclude(image__exact='').order_by('-datetime')[:5]
context['emissions'] = Emission.objects.filter(archived=False).order_by('?')
context['player'] = audioPlayer()
return context
news = News.as_view()
class Get(TemplateView):
template_name = 'get.html'
......
......@@ -28,7 +28,7 @@ h1, h2, h3, h4, h5{
}
h4, h5{
}
h1 { font-size: 5em;}
h1 { font-size: 6em;}
h2 { font-size: 4em;}
h3 { font-size: 3em;}
h4 { font-size: 1.8em;}
......@@ -41,7 +41,7 @@ article h3, .content h3 { font-size: 1.5em;}
article h4, .content h4 { font-size: 1.4em;}
article h5, .content h5 { font-size: 1.3em;}
.squashed{
h1, h2, .squashed{
transform: scale(0.5, 1);
-webkit-transform: scale(0.5, 1);
-moz-transform: scale(0.5, 1);
......@@ -149,21 +149,27 @@ ul.inline li{
/******************/
.ui-tabs, .ui-tabs-nav * {
background: transparent !important;
border: none !important;
background: transparent !important;
border: none !important;
}
.ui-tabs-nav * {
padding:0 0 0 0 !important;
margin:0 0 0 0 !important;
}
.ui-tabs .ui-widget-header {
background: transparent;
border: none;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
background: transparent;
border: none;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
.ui-tabs .ui-tabs-nav li {
display:inline-block;
white-space:normal !important;
}
.ui-tabs .ui-tabs-nav a {
display:inline-block;
float:none !important;
padding:0.2em !important;
font-family:'RegloNormal';
font-size:1em !important;
......@@ -171,14 +177,13 @@ ul.inline li{
border-bottom:2px solid transparent !important;
}
.ui-tabs .ui-tabs-nav .ui-state-active a {
border-bottom:2px solid black !important;
color: #000;
border-bottom:2px solid black !important;
color: #000;
}
.ui-tabs .ui-tabs-panel, .tabs .ui-tabs .ui-tabs-panel{
padding:0 0 0 0 !important;
margin:0 0 0 0 !important;
border: none !important;
border: none !important;
}
.todo:hover, .todo *:hover{
......
......@@ -463,6 +463,35 @@ button.tag {
padding-top:1em;
margin-right:2em;
}
/**** GRILLE ****/
#Grid #Main {margin:1em;min-width:400px;}
#Grid .heure {
padding:1.5em 0;
}
#Grid .day {
padding:1em 0 1em 0;
}
#Grid td:hover {
cursor: pointer;
background-color: #D0D0D0;
}
#Grid .item {
margin-bottom:1em;
}
/**** PROGRAMME ****/
#Program .days{
display:table;
width:100%;
text-align:center;
}
#Program .days li{
display:table-cell;
width:14%;
text-align:center;
}
/**** SCREEN SIZE ADAPTATIONS ****/
html #main{ font-size: 70%; }
body { font-size: 1em;}
......
......@@ -23,71 +23,20 @@
</head>
<body id="{% block bodyID %}{% endblock %}">
{% block meta %}<div id="metaNav-container">{% include "includes/metaNav.html" %}</div>{% endblock %}
<div id="metaNav">
<!--<input id="search-form" type="text" />-->
<nav class="contextual-menu">
<ul>
<!--<li><a href="{% url 'get' %}">☰</a></li>-->
<li><a href="{% url 'home' %}">
<span class="icon-home" ></span>
<span class="iconLabel">Home</span>
</a></li>
<li><a href="{% url 'player' %}">
<span class="icon-bullhorn" ></span>
<span class="iconLabel">Listen</span>
</a></li>
<li><a href="{% url 'program' %}">
<span class="icon-calendar" ></span>
<span class="iconLabel">Program</span>
</a></li>
<li><a href="{% url 'grid' %}">
<span class="icon-th-large" ></span>
<span class="iconLabel">Grid</span>
</a></li>
<!--<li><a href="#">Media</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Search</a></li>-->
<li><a href="#">
<span class="icon-info-sign" ></span>
<span class="iconLabel">About</span>
</a></li>
</ul>
</nav>
</div>
<div id="main">
<div id="Panik"><img class="logo" src="{{ STATIC_URL }}/img/LogoPanik.jpg"/></div>
{% block main %}
<!--
<div class="wrapper" id="siteNav">
<div class="menuMedia">
<h2>Media</h2>
<div id="All">
<div id="Panik">
{% block logo %}<img class="logo" src="{{ STATIC_URL }}/img/LogoPanik.jpg"/>{% endblock %}
</div>
<div class="menuEmissions">
<h2>Emissions</h2>
<div id="Listen">
{% block listen %}{% include "includes/player.html" %}{% endblock %}
</div>
<div class="menuNews">
<h2>News</h2>
<div id="Main">
{% block main %}{% endblock %}
</div>
</div>
-->
<div>
{% include "player/detail.html" %}
<div id="content">
{% block content %}
{% endblock %}
</div>
<!--
<div id="news">
{% block news %}
{% endblock %}
</div>
-->
</div>
{% endblock %}
</div>
{% block pageend %}
{% endblock %}
......
{% extends "base.html" %}
{% load paniktags %}
{% block bodyID %}Grid{% endblock %}
{% block listen %}{% endblock %}
{% block main %}
<style>
#grille .heure {
padding:1.5em 0;
}
#grille .day {
padding:1em 0 1em 0;
}
#grille td:hover {
cursor: pointer;
background-color: #D0D0D0;
}
#grille .item {
margin-bottom:1em;
}
#grille {min-width:400px;}
</style>
<div id="grille">
<table>
<tbody>
......@@ -61,8 +44,6 @@
</tbody>
</table>
</div>
{% endblock %}
{% block news %}
......
{% extends "base.html" %}
{% block bodyID %}Home{% endblock %}
{% block content %}
{% block main %}
<div class="news mainLegend">
<div class="wrapper">
<h1 class="squashed">News</h1>
......
<div class="program tabs">
<ul class="custom">
{% for day in days %}
<li><a href="#Program-tabs-{{ day.datetime|date:"w" }}">{{ day.datetime|date:"D d" }}</a></li>
{% endfor %}
</ul>
{% for day in days %}
<div id="Program-tabs-{{ day.datetime|date:"w" }}">
<ul class="custom emission-list list">
{% if day.schedules %}
{% for schedule in day.schedules %}
<li >
<div class="date dateBloc">
<div class="time">{{ schedule.datetime|date:"H:i" }}</div>
</div>
{% include "emissions/inline.html" with emission=schedule.emission %}
</li>
{% endfor %}
{% else %}
<li>Non stop</li>
{% endif %}
</ul>
</div>
{% endfor %}
</div>
......@@ -12,7 +12,7 @@
{% if logo == "large" %}
<img class="logo right" src="{{ content.image|thumbnail:'800x600' }}"/>
{% elif logo == "medium" %}
<img class="logo right" src="{{ content.image|thumbnail:'480x320' }}"/>
<img class="logo right" src="{{ content.image|thumbnail:'320x240' }}"/>
{% else %}
<img class="logo right" src="{{ content.image|thumbnail:'60x60' }}"/>
{% endif %}
......
{% extends "base.html" %}
{% block bodyID %}Player{% endblock %}
{% block main %}
{% include "player/detail.html" %}
{% endblock %}
<div id="player" class="simple">
<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={{ player.unique }}"
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="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 self = $(this);
self.fadeOut();
$.getJSON('onair.json', function(data) {
if(data.episode || data.emission){
self.html('<strong>'+data.emission.title+'<strong>'+'&nbsp;<span>'+data.emission.title+'<span>');
}
else{self.html('<strong>Unknown (Probably Non-Stop)<strong>');}
self.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');
}
$(this).children('.icon-volume-up,.icon-pause').toggleClass('icon-volume-up').toggleClass('icon-pause');
});
});
</script>
</div>
<!--
<div class="direct">
<button class="control play symbol huge" onclick="$('#DirectStreamPanik').play();">G</button>
<div class="label relative">en direct</div>
<div class="playlist img">
<img src="http://placehold.it/210X130"/>
</div>
<audio id="DirectStreamPanik" tabindex="0" src="http://streaming.domainepublic.net:8000/radiopanik.ogg" controls="controls">
</audio>
</div>
<div class="current">
<h5>Elles en parlent encore</h5>
<div class="date">
<div class="day">Mardi 2 février 2013</div>
<div class="time">07:00 - 09:00</div>
</div>
</div>
<div class="playlist">
<div class="controls">
<a class="icon-link" href="http://streaming.domainepublic.net:8000/radiopanik.ogg"></a>
<a class="resymbol icon-download" href="http://streaming.domainepublic.net:8000/radiopanik.ogg.m3u"></a>
<button class="symbol">H</button>
<button class="resymbol icon-step-forward">E</button>
<button class="resymbol icon-play"></button>
<button class="resymbol icon-step-backward"></button>
<button class="resymbol icon-volume-up"></button>
<span class="resymbol icon-volume-off"></span>
</div>
<div class="item">
<img src="http://placehold.it/50X50" />
<h5>The croissant fertile</h5>
<p>The sound of the RCA electronic music synthesizer</p>
</div>
<div class="item">
<img src="http://placehold.it/50X50" />
<h5>The croissant fertile</h5>
<p>The sound of the RCA electronic music synthesizer</p>
</div>
<div class="item">
<img src="http://placehold.it/50X50" />
<h5>The croissant fertile</h5>
<p>The sound of the RCA electronic music synthesizer</p>
</div>
</div>
-->
</div>
</div>
{% extends "base.html" %}
{% block bodyID %}Program{% endblock %}
{% block listen %}{% endblock %}
{% block main %}
<div id="Program">
<h1>Programme</h1>
{% include "includes/program.html" %}
<div class="program tabs">
<ul class="days custom">
{% for day in days %}
<li class=""><a href="#Program-tabs-{{ day.datetime|date:"w" }}">{{ day.datetime|date:"D d" }}</a></li>
{% endfor %}
</ul>
{% for day in days %}
<div class="padded" id="Program-tabs-{{ day.datetime|date:"w" }}">
<ul class="custom emission-list list">
{% if day.schedules %}
{% for schedule in day.schedules %}
<li >
<div class="date dateBloc">
<div class="time">{{ schedule.datetime|date:"H:i" }}</div>
</div>
{% include "emissions/inline.html" with emission=schedule.emission %}
</li>
{% endfor %}
{% else %}
<li>Non stop</li>
{% endif %}
</ul>
</div>
{% endfor %}
</div>
{% endblock %}
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