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

Episiodes list stuctured by month

parent 0d85e5ef
......@@ -77,17 +77,18 @@ blockquote {
ul, ol, dl {
margin: 0;
}
dl{}
dt, dd{
letter-spacing:1px;
font-size: 0.8em;
line-height: 150%;
}
dt {
float:left;
font-family: "RegloBold";
margin-right: 0.3em;
}
dd {
font-family: "RegloNormal";
margin-left: 4px;
}
dt:after {
......@@ -110,6 +111,9 @@ ul.custom, ul.custom li{
margin: none;
padding: none;
}
ul.inline li{
display:inline-block;
}
/******************/
/*USEFULL CLASSES */
......@@ -166,6 +170,8 @@ ul.custom, ul.custom li{
overflow: hidden;
}
.block {display:block;}
.right{float:right;margin-left:1em;}
.left{float:left;margin-left:1em;}
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
......
......@@ -12,11 +12,15 @@
#player .controls, #player hr,player .item,#player img{border-color:#FF6633;}
/* FONTS */
.dateBloc {
h1.title{
text-transform: uppercase;
}
.date, .dateBloc {
text-align: center;
font-family: "Reglo";
text-transform: uppercase;
}
.dateBloc span{display:block;}
.dateBloc *{line-height: 100%;}
.dateBloc .day {font-size: 2.2em;}
.dateBloc .number {font-size: 2.2em;}
......@@ -27,6 +31,13 @@
font-family: "Reglo";
text-transform: uppercase;
}
.legend{
font-size:1.2em;
font-weight:bold;
border-bottom:3px solid black;
padding: 0.2em 0 0.2em 0;
margin: 0.2em 0 0.2em 0;
}
/* SIZES
@xxs: 8px;
......@@ -102,51 +113,33 @@ body {
color:white;
padding:5px 7px 0px 7px;
}
ul.tags {
margin: 10px 0 0 0;
overflow:hidden;
margin-bottom:15px;
button.control, button.symbol{background:transparent;border:none;margin:0;padding:0;}
nav.menu{
width:100%;
text-align: justify;
text-justify: distribute-all-lines;
}
nav.menu li{
display: inline-block;
margin-right:2em;
}
ul.tags li {
button.tag {
font-size: 0.8em;
font-family: RegloBold;
font-family: "RegloBold";
letter-spacing: 1px;
text-transform: uppercase;
float: left;
display:inline-block;
border: 1px solid black;
margin: 2px 2px;
padding: 3px 3px 0px 3px;
border-radius: 7px;
-moz-border-radius: 7px;
}
/*
.symbol {
font-family: RegloSymbol;
font-size: @xxl*1.5;
line-height: 80%;
}
.symbol-absolute {
position:absolute;
font-family: RegloSymbol;
font-size: @xxl*2;
line-height: 80%;
float: left;
top:21px;
left:68px;
}
*/
button.control, button.symbol{background:transparent;border:none;margin:0;padding:0;}
nav.menu{
width:100%;
text-align: justify;
text-justify: distribute-all-lines;
}
nav.menu li{
display: inline-block;
margin-right:2em;
.list > li{
padding:0.5em;
min-height: 2.5em;
border-bottom: 1px solid #000000;
}
/**** TABS ****/
......@@ -290,11 +283,9 @@ nav.menu li{
/****************************************************/
/**** EMISSIONS ****/
#Emission{max-width:600px;}
#Emission .emission-detail .title{}
/**** Detail ****/
.emission{max-width:600px;margin:auto;}
.emission-detail .title{
text-transform: uppercase;
}
.emission-detail .metas {
float: left;
width: 40%;
......@@ -341,10 +332,6 @@ nav.menu li{
}
/**** Inline ****/
.emission-inline {
padding:0.5em;
min-height: 2.5em;
border-bottom: 1px solid #000000;
overflow:hidden;
}
.emission-inline div.date {
......@@ -377,29 +364,14 @@ nav.menu li{
font-family: "RegloMedium";
}
ul.tagsArchives {
margin-top:5px;
overflow:hidden;
margin-bottom:15px;
}
ul.tagsArchives li {
font-size: 0.8em;
font-family: "RegloBold";
letter-spacing: 1px;
text-transform: uppercase;
float: left;
border: 1px solid black;
margin: 2px 2px;
padding: 3px 3px 0px 3px;
border-radius: 7px;
-moz-border-radius: 7px;
}
/**** EPISODE ****/
/**** Detail ****/
/**** Liste ****/
.episodes .list > li{
border-bottom: 0px solid #000000;
}
/**** Detail ****/
.episode-detail {
border-top: 3px solid black;
min-height: 100px;
}
......@@ -423,34 +395,21 @@ ul.tagsArchives li {
.episode-detail .logo{display:none;}
}
.episode-detail .date {
font-family: "Reglo";
text-transform: uppercase;
width: 3.5em;
text-align: center;
margin-right: 1em;
}
.episode-detail .date *{
line-height: 100%;
}
.episode-detail .date .day, .emission-detail .date .day {
margin-top: 20px;
font-size: 2.2em;
}
.episode-detail .date .number {
font-size: 2.2em;
}
.episode-detail .date .month {
font-size: 0.8em;
}
.episode-detail .date .time, .emission-details .time {
margin: 5px 0 10px 0;
font-size: 1.2em;
}
.episode-detail .content {
padding-left: 4em;
padding-left: 5em;
}
.episode-detail .content .title {
......@@ -472,6 +431,11 @@ ul.tagsArchives li {
text-align: center;
}
.episode-inline .date{ font-size:50%; margin-top:1em;}
.episode-inline .content {
padding-left: 5em;
}
/**** PROGRAM ****/
.program .dateBloc {
......
<div class="emission">
<div class="emission emission-detail cf">
<!--
<nav class="menu">
<ul>
<li><a href="#">épisodes</a></li>
<li><a href="#" class="active">à propos</a></li>
</ul>
</nav>
-->
<header class="mainHeader">
<h1 class="title">{{ emission.title }}</h1>
</header>
<div class="metas">
<div class="schedule">
<div>mercredi &amp; jeudi</div>
<div class="time">7:30-8:00</div>
<div>vendredi</div>
<div class="time">9:00-9:30</div>
</div>
<button class="control todo">
<span class="symbol huge">G</span>
<span class="listen">Écouter <!--la dernière--></span>
</button>
<div class="cf"></div>
{% if emission.description %}
<div class="description">
{{ emission.description|safe|striptags }}
</div>
{% endif %}
{% if emission.email %}
<div class="email ellipsis">{{ emission.email}}</div>
{% endif %}
{% if emission.website %}
<div class="contact ellipsis"><a href="{{ emission.website}}">{{ emission.website}}</a></div>
{% endif %}
</div>
<img class="logo" src="http://placehold.it/280X180"/>
<div class="emission emission-detail cf">
<!--
<nav class="menu">
<ul>
<li><a href="#">épisodes</a></li>
<li><a href="#" class="active">à propos</a></li>
</ul>
</nav>
-->
<header class="mainHeader">
<h1 class="title">{{ emission.title }}</h1>
</header>
<div class="metas">
<div class="schedule">
<div>mercredi &amp; jeudi</div>
<div class="time">7:30-8:00</div>
{% if emission.text %}
<article class="text content">
{{ emission.text|safe }}
</article>
<div>vendredi</div>
<div class="time">9:00-9:30</div>
</div>
<button class="control todo">
<span class="symbol huge">G</span>
<span class="listen">Écouter <!--la dernière--></span>
</button>
<div class="cf"></div>
{% if emission.description %}
<div class="description">
{{ emission.description|safe|striptags }}
</div>
{% endif %}
{% if emission.email %}
<div class="email ellipsis">{{ emission.email}}</div>
{% endif %}
{% if emission.website %}
<div class="contact ellipsis"><a href="{{ emission.website}}">{{ emission.website}}</a></div>
{% endif %}
</div>
{% if episodes %}
<div class="episode-list">
{% for episode in episodes %}
{% include "episodes/resume.html" %}
{% endfor %}
</div>
<img class="logo" src="http://placehold.it/280X180"/>
{% if emission.text %}
<article class="text content">
{{ emission.text|safe }}
</article>
{% endif %}
</div>
{% extends "base.html" %}
{% block main %}
{% include "includes/path.html" %}
{% include "emissions/detail.html" %}
{% include "includes/path.html" %}
<div id="Emission" class="futurtabs">
<!--
<ul class="custom">
<li><a href="#Emission-tabs-episodes">Episodes</a></li>
<li><a href="#Emission-tabs-detail">A propos de l'émission</a></li>
</ul>
<header class="mainHeader">
<h1 class="title">{{ emission.title }}</h1>
</header>
-->
<div id="Emission-tabs-detail">
{% include "emissions/detail.html" %}
</div>
<div id="Emission-tabs-episodes" class="episodes">
{% if episodes %}
{% regroup episodes by first_diffusion|date:"F Y"|capfirst as month_list %}
{% for month in month_list %}
<div class="legend">{{ month.grouper }}</div>
<ul class="custom list">
{% for episode in month.list %}
{% if episode.title == episodes.0.title %}
<li>{% include "episodes/resume.html" with date="daytime" %}</li>
{% else %}
<li>{% include "episodes/inline.html" with date="daytime" %}</li>
{% endif %}
{% endfor %}
</ul>
{% endfor %}
{% endif %}
</div>
</div>
{% endblock %}
{% block pageend %}
......
{% extends "base.html" %}
{% block main %}
<ul class="custom list">
{% for emission in emissions %}
{% include "emissions/inline.html" %}
<li>{% include "emissions/inline.html" %}</li>
{% endfor %}
</ul>
{% 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