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

General structure

parent 43894e98
......@@ -197,6 +197,7 @@ class Listen(TemplateView):
def get_context_data(self, **kwargs):
context = super(Listen, self).get_context_data(**kwargs)
context['sounds'] = SoundFile.objects.all()[:24]
context['player'] = audioPlayer()
return context
......
......@@ -24,8 +24,8 @@ button, .button{
cursor:pointer;
background:none;
}
img {max-width:100%;
}
img {max-width:100%;}
h1, h2, h3, h4, h5{
font-family: 'RegloBold';
}
......@@ -39,12 +39,12 @@ h4 { font-size: 1.8em;}
h5 { font-size: 1.1em;}
/*Specific rules for text writen by final users */
article h1, .userContent h1 { font-size: 2em;}
article h2, .userContent h2 { font-size: 1.7em;}
article h3, .userContent h3 { font-size: 1.5em;}
article h4, .cuserContent h4 { font-size: 1.4em;}
article h5, .userContent h5 { font-size: 1.3em;}
.userContent h1 { font-size: 2em;}
.userContent h2 { font-size: 1.7em;}
.userContent h3 { font-size: 1.5em;}
.cuserContent h4 { font-size: 1.4em;}
.userContent h5 { font-size: 1.3em;}
.userContent h1, .userContent h2, .userContent h3, .cuserContent h4, .userContent h5{margin:2em 0 1em 0;}
h1, h2, .squashed{
transform: scale(0.5, 1);
-webkit-transform: scale(0.5, 1);
......@@ -59,6 +59,7 @@ h1, h2, .squashed{
}
nav{
padding:0.2em;
font-family: "RegloBold";
text-transform: uppercase;
}
......@@ -91,7 +92,8 @@ word-wrap: break-word;
table {
}
th {
white-space: nowrap;
white-space: nowrap;
text-transform: uppercase;
}
tr{
}
......@@ -106,7 +108,8 @@ p a {
em {
font-family:"RegloBold";
}
strong{
text-transform: uppercase;}
blockquote {
font-family:"RegloBold";
color:#aaa;
......@@ -170,11 +173,24 @@ ul.distributed{
text-align:center;
margin:0;
padding:0;
border-collapse:collapse;
}
ul.distributed li{
display:table-cell;
text-align:center;
}
ul.distributed.by4 li{
width:25%;
}
ul.distributed.by5 li{
width:20%;
}
ul.distributed.by6 li{
width:16.6666%;
}
ul.distributed.by7 li{
width:14.285%;
}
nav a.active, nav button.active{
opacity:1;
......@@ -207,7 +223,7 @@ nav a.active, nav button.active{
.left{float:left;margin-left:1em;}
.smooth{opacity:0.5;}
.hidden{display:none;}
.padded{padding:2em;}
.padded{padding:1.5em;}
.spinning {
position:relative;
-webkit-animation: rotation 10s infinite linear;
......@@ -215,6 +231,10 @@ nav a.active, nav button.active{
-o-animation: rotation 10s infinite linear;
animation: rotation 10s infinite linear;
}
.center{
text-align:center;
margin:auto;
}
@-webkit-keyframes rotation {
from {-webkit-transform: rotate(0deg);}
......
......@@ -10,35 +10,38 @@
#player, #player .symbol{ color: #FF6633; }
#player .label { background-color:#FF6633; }
*/
.mainLegend{
#mainLegend{
width:30%;
text-align:right;
float:right;
padding:1em;
}
#News, #news {
background-color:#1663d5;
border-color:#fff !important;
color:white !important;
#Nav{
border-width:0 0 2px 0;
border-style:solid;
}
.news, .news *{border-color:#1663d5 !important;color:white !important;border-color:#fff !important;}
.mainLegend.news {
background-color:#1663d5;
#Nav nav ul{
margin:2em 0 2em 0;
}
.mainLegend.news *{color:white !important;}
.news {
border-style:solid;
#News, #news,.news, .news *,.news .mainLegend,.news a {
background-color:#1663d5;
border-color:#fff !important;
color:white !important;
}
/*
#News, #news,.news, .news *,.mainLegend.news {
background-color:#fff;
border-color:#1663d5 !important;
color:#1663d5 !important;
}*/
#player .metas, #player img{border-color:#fff;}
#Player, #player{
background-color:#ff6633;
border-color:#fff;
color:white !important;
}
#player.simple *{
#player.simple *, #Player a{
color:white !important;
}
#player.simple .playlist{
......@@ -59,8 +62,8 @@
h1.title{
}
.date, .dateBloc {
font-family: "Reglo";
text-transform: uppercase;
font-family: "Reglo";
text-transform: uppercase;
}
.inline .date, .resume .date{
text-align: center;
......@@ -70,7 +73,7 @@ h1.title{
.dateBloc .day {font-size: 2.2em;}
.dateBloc .number {font-size: 2.2em;}
.dateBloc .month {font-size: 0.8em;}
.dateBloc .time {font-size: 1.2em;}
.dateBloc .time {font-size: 1.2em;margin: 0.2em 0;}
.tabs .ui-tabs-nav {
font-family: "Reglo";
......@@ -97,7 +100,7 @@ body {
}
#main {}
#Panik {background:white;}
#Panik img{display:block;margin:auto;}
#Panik img{display:block;margin:auto;max-height:200px;}
.wrapper {max-width: 1024px; margin:auto;}
.wrapper.half{max-width:600px;margin:auto;}
......@@ -209,16 +212,20 @@ button.tag {
/*#Home #player{ float: left; } */
#player{}
#player .content{
padding:5% 0em 5% 0em;
max-width:300px;
padding:5%;
max-width:350px;
margin:auto;
}
#player .metas{border-width:1px 0 0 0 ;border-style:solid;}
#player .metas{
padding:1em;border-width:1px 0 0 0 ;border-style:solid;}
#player .item{border-width:1px 0;border-style:solid;}
#player img {border-width:2px;border-style:solid;}
#player .whatsOnAir{
#player #WhatsOnAir{
padding:1em;
font-size:0.8em;
text-align:center;
}
#player .playlist .item {
......@@ -280,6 +287,7 @@ button.tag {
}
/**** Inline ****/
.emission-inline {
padding:1em 0 1em 0;
}
.emission-inline div.date {
......@@ -314,19 +322,18 @@ button.tag {
/**** EPISODE ****/
/**** Detail ****/
.episode.resume {
min-height: 100px;
.episode.resume, .episode.inline{
padding:1em 0 1em 0;
}
.episode.resume img {
margin-top: 17px;
border: 2px solid black;
}
.episode.resume .title{
margin-bottom:1em;
}
.episode.resume .date{
font-size: 1.2em;
float: left;
}
.episode.resume .logo,
......@@ -337,27 +344,18 @@ button.tag {
@media screen and (max-width: 300px) {
.episode.resume .logo{display:none;}
}
.episode.resume .date {
width: 3.5em;
text-align: center;
margin-right: 1em;
}
.episode.resume .date .day, .emission-detail .date .day {
margin-top: 20px;
}
.episode.resume .date .time, .emission-details .time {
margin: 5px 0 10px 0;
font-size: 1.2em;
}
.episode.resume .content {
padding-left: 5em;
}
.episode.resume .content .title {
margin: 16px 0 10px 0;
}
.episode.resume .logo {
......@@ -368,15 +366,16 @@ button.tag {
.episode.resume .logo img{
width:100%;
}
.episode.resume .controls {
margin-top: 10px;
width: 90px;
text-align: center;
}
.episode.inline{
}
.episode.inline .date{ font-size:50%; margin-top:1em;}
.episode.inline .date{
width: 3.5em;
font-size: 50%;
}
.episode.inline .content {
padding-left: 5em;
......@@ -387,13 +386,10 @@ button.tag {
border-style:solid;
border-width:1px 0;
}
.list.news a{
max-height:350px;
text-overflow: ellipsis;
overflow: hidden;
}
.news a.block{padding:1em;}
.news a.block:hover{text-decoration:none;}
.news .date{padding:1em;}
.news .title{
.news .inline .title{
margin-bottom:1em;
}
.news .logo{
......@@ -414,6 +410,11 @@ button.tag {
}
@media (min-width: 800px) {
.list.news a{
max-height:350px;
text-overflow: ellipsis;
overflow: hidden;
}
.list.news .logo{
max-width:50% !important;
}
......@@ -442,7 +443,9 @@ button.tag {
clear:both;
}
}
.news.detail .description{
margin-top:1em;
}
/**** PROGRAM ****/
.program .dateBloc {
......@@ -452,7 +455,7 @@ button.tag {
}
/**** GRILLE ****/
#Grid #Main {margin:1em;min-width:400px;}
#Grid #Main {margin:1em;min-width:760px;}
#Grid .heure {
padding:1.5em 0;
}
......@@ -466,6 +469,7 @@ button.tag {
#Grid .item {
margin-bottom:1em;
}
/**** PROGRAMME ****/
#Program .tabs nav ul li{
......
$(function() {
$(".tabs").each(function() {
var self = $(this);
$(this).find(".content:not(:first)").hide();
$(this).find("nav a:first, nav button:first").addClass("active");
$(this).find("nav a, nav button").each(function() {
var about= $($(this).attr("data-tab-about"));
about.find("[data-tabbed]:not(:first)").hide();
$(this).find("[data-tab]:first").addClass("active");
$(this).find("[data-tab]").each(function() {
$(this).click(function (e) {
e.preventDefault();
// switch all tabs off
......@@ -11,7 +12,7 @@ $(function() {
// switch this tab on
$(this).addClass("active");
// slide all elements with the class 'content' up
self.find(".content").hide();
about.find("[data-tabbed]").hide();
//alert($(this).attr("href"));
// Now figure out what the 'title' attribute value is and find the element with that id. Then slide that down.
$($(this).attr("data-tab")).fadeIn();
......
......@@ -32,11 +32,18 @@
<div id="Listen">
{% block listen %}{% include "includes/player.html" %}{% endblock %}
</div>
<div id="Nav">
<div class="wrapper">
{% block nav %}{% endblock %}
</div>
</div>
<div id="Main">
{% block main %}{% endblock %}
</div>
<div id="Links">
<div class="wrapper">
{% block links %}{% endblock %}
</div>
</div>
</div>
......
......@@ -2,7 +2,7 @@
{% block bodyID %}Emissions{% endblock %}
{% block listen %}{% endblock %}
{% block main %}
<div class="emission">
<div class="emission padded">
<div class="wrapper half">
<div id="Emission-tabs-detail">
{% include "emissions/detail.html" %}
......
......@@ -13,7 +13,7 @@
<button class="control symbol add">B</button>
</div>
{% endif %}
<a class="link" href="{% url 'emission-view' slug=emission.slug %}">
<a class="block" href="{% url 'emission-view' slug=emission.slug %}">
<h5 class="title ellipsis">{{ emission.title }}</h5>
{% if emission.description %}
......
{% extends "news.html" %}
{% load thumbnails %}
{% block bodyID %}News{% endblock %}
{% block listen %}{% endblock %}
{% block main %}
ITS A NEWS!
<div class="news detail padded">
<div class="wrapper half">
<header>
{% if newsitem.datetime %}
<div class="date cf center">{{ newsitem.datetime|date:"D m/M" }}</div>
{% endif %}
<h2 class="squashed title">{{ newsitem.title }}</h2>
{% if newsitem.image %}
<img src="{{ newsitem.image|thumbnail:'800x300' }}"/>
{% endif %}
</header>
<div class="userContent description">
{{ newsitem.text|safe}}
</div>
</div>
</div>
{% endblock %}
{% block pageend %}
......
......@@ -27,7 +27,7 @@
{% endif %}
</div>
<div class="content">
<a class="link" href="{{ episode.slug }}">
<a class="block" href="{{ episode.slug }}">
<h5 class="title ellipsis">{{ episode.title }}</h5>
{% if episode.description %}
<div class="description ellipsis">
......
......@@ -3,10 +3,10 @@
{% block bodyID %}Grid{% endblock %}
{% block listen %}{% endblock %}
{% block main %}
<div id="grille" class="wrapper">
<nav>
<ul class="distributed">
{% block title %}La grille{% endblock %}
{% block nav %}
<nav class="">
<ul class="distributed by6">
<li><button>Créations</button></li>
<li><button>Agendas</button></li>
<li><button>Info</button></li>
......@@ -15,6 +15,9 @@
<li><button>Continu</button></li>
</ul>
</nav>
{% endblock %}
{% block main %}
<div id="grille" class="wrapper">
<table>
<tbody>
<tr>
......@@ -26,9 +29,9 @@
</tr>
{% for time_header, time_cells in times|zip:grid %}
<tr>
<th class="heure vertical">{{ time_header }}</th>
<th class="heure">{{ time_header }}</th>
{% for cell in time_cells %}
<td class="" {% if cell.w > 1 %}colspan="{{cell.w}}"{% endif %}
<td class="small" {% if cell.w > 1 %}colspan="{{cell.w}}"{% endif %}
{% if cell.h > 1 %}rowspan="{{cell.h}}"{% endif %}>
{% if cell.time_label %}
<div class="cell-time-label">{{ cell.time_label }}</div>
......
{% extends "news.html" %}
{% block listen %}{% include "includes/player.html" %}{% endblock %}
{% block listen %}{% include "includes/player.html" %}{% endblock %}
{% block bodyID %}Home{% endblock %}
{% block nav %}{% endblock %}
{% block title %}{% endblock %}
{% block links %}
<div class="mainLegend">
<div class="wrapper">
<h1 class="squashed">Emissions</h1>
</div>
</div>
<div class="wrapper">
<ul class="custom list columns padded">
{% for emission in emissions %}
......
{% extends "base.html" %}
{% block bodyID %}Player{% endblock %}
{% block main %}
<div class="wrapper">
<ul class="small custom list columns padded">
{% for sound in sounds %}
<li class="item ellipsis">
<a href="{{ sound.url }}">
{{ sound.episode }}
</a>
</li>
{% endfor %}
</ul>
</div>
{% endblock %}
{% extends "base.html" %}
{% extends "base.html"%}
{% block listen %}{% endblock %}
{% block bodyID %}News{% endblock %}
{% block title %}News{% endblock %}
{% block nav %}
{% if categories %}
<nav class="center cf">
<ul class="custom columns">
{% for category in categories %}
<li class="item num-{{forloop.counter}}">
<a href="#">{{ category.title }}</a>
</li>
{% endfor %}
</ul>
</nav>
{% endif %}
{% endblock %}
{% block main %}
<div class="news">
<div class="wrapper">
<nav>
<ul class="padded custom columns left">
{% for category in categories %}
<li class="item num-{{forloop.counter}}">
<a href="#">{{ category.title }}</a>
</li>
{% endfor %}
</ul>
</nav>
<div class="mainLegend"><h1 class="squashed">News</h1></div>
</div>
<hr />
<div class="wrapper">
<ul class="custom list news cf">
{% for NewsItem in newsImaged %}
......
......@@ -13,8 +13,7 @@
<img class="logo right" src="{{ content.image|thumbnail:'60x60' }}"/>
{% endif %}
{% endif %}
<a class="link bloc" href="{% url 'news-view' slug=content.slug %}">
<a class="block" href="{% url 'news-view' slug=content.slug %}">
<h5 class="title {% if not class %}ellipsis{% endif %}">{{ content.title }}</h5>
<div class="description {% if not class %}ellipsis{% endif %}">
{% if logo == "large" %}
......
<a href="#">
<a href="{% url 'news-view' slug=content.slug %}">
<span class="title"><strong>{{ NewsItem.datetime|date:"D m/M" }}</strong>&nbsp;-&nbsp;{{ content.title }}</span>
</a>
{% extends "base.html" %}
{% block bodyID %}Program{% endblock %}
{% block title %}Programme{% endblock %}
{% block listen %}{% endblock %}
{% block main %}
<div class="program tabs wrapper">
<nav>
{% block nav %}
<div class="program tabs" data-tab-about="#ProgramContent">
<nav class="">
<ul class="days custom distributed">
{% for day in days %}
<li class=""><button data-tab="#Program-tabs-{{ day.datetime|date:"w" }}">{{ day.datetime|date:"D d" }}</button></li>
{% endfor %}
</ul>
</nav>
</div>
{% endblock %}
{% block main %}
<div id="ProgramContent" class="wrapper">
{% for day in days %}
<div class="content" id="Program-tabs-{{ day.datetime|date:"w" }}">
<ul class="custom emission-list list">
<div data-tabbed="true" class="content" id="Program-tabs-{{ day.datetime|date:"w" }}">
<ul class="custom emission-list list padded">
{% if day.schedules %}
{% for schedule in day.schedules %}
<li >
<div class="date dateBloc left">
<li>
<div class="date dateBloc left padded">
<div class="time">{{ schedule.datetime|date:"H:i" }}</div>
</div>
{% include "emissions/inline.html" with emission=schedule.emission %}
<div style="margin-left:100px;">{% include "emissions/inline.html" with emission=schedule.emission %}</div>
</li>
{% endfor %}
{% else %}
......
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