Skip to content
GitLab
Commit b02b226f authored by Simon Daron's avatar Simon Daron
Browse files

Adding Episodes in Emission Views & rewriting CSS

parent 5dcab553
Hide whitespace changes
Inline Side-by-side
panikweb_templates/static/css/style.less
View file @ b02b226f
......@@ -49,14 +49,18 @@
.extra-margin {
margin-bottom: 16px;
}
.ellipsis{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.wrapper {
width: @wrapper-width;
.clearfix
}
.symbol, .control {
font-family: RE06;
font-size: @xl;
.symbol, .control, .controls {
font-family: RE06;line-height: 1em;
}
.symbol:hover,.control:hover{
......@@ -205,8 +209,8 @@ body {
}
/**** Player ****/
/****************************************************/
/**** PLAYER ****/
#player{
color: @orange;
}
......@@ -303,36 +307,10 @@ body {
}
/**** Emission / Content ****/
#content {
width: @content-width;
float: left;
margin-left: 60px;
}
#content.wide {
width: 498px + 50px + 370px;
}
/* The h1 needs to be two times bigger, than it’s containing box, because with the matrix transform we’re going to squash it in 2 */
#content h1 {
width: 996px;
}
#content h3 {
margin-bottom:30px;
}
a, .menuEmissions a, a:visited, .menuEmissions a:visited, a:active, .menuEmissions a:active {
color: lighten(@black, 20%);
}
#content hr {
display: block;
height: 1px;
border-top: 3px solid @black;
}
/****************************************************/
/**** EMISSIONS ****/
/**** Detail ****/
.emission{max-width:600px;margin:auto;}
.emission nav{
margin-bottom:2em;
......@@ -343,7 +321,7 @@ a, .menuEmissions a, a:visited, .menuEmissions a:visited, a:active, .menuEmissio
.emission nav a.active, .emission nav a:hover{
border-bottom: 3px solid @black;text-decoration:none;
}
.emission-metas {
.emission .metas {
float: left;
width: 40%;
margin: 0 1em 1em 0 ;
......@@ -418,13 +396,14 @@ a, .menuEmissions a, a:visited, .menuEmissions a:visited, a:active, .menuEmissio
letter-spacing:1px;
}
.mainHeader nav ul li {
.emission .mainHeader nav ul li {
float: left;
display: inline;
width:50%;
}
.emission .mainHeader nav a:link, .mainHeader nav a:visited {
.emission .mainHeader nav a:link,
.emission .mainHeader nav a:visited {
color: @black;
display: inline-block;
width: 249px;
......@@ -432,179 +411,14 @@ a, .menuEmissions a, a:visited, .menuEmissions a:visited, a:active, .menuEmissio
text-align: center;
}
.mainHeader nav a:hover, mainHeader nav a:active, .mainHeader nav .active a:link, .mainHeader nav .active a:visited {
.emission .mainHeader nav a:hover,
.emission .mainHeader nav a:active, .mainHeader nav .active a:link,
.emission .mainHeader nav .active a:visited {
color: white;
background-color: @black;
}
.subHeader {
height: 25px;
margin: 0;
}
div.header-details {
border-top: 3px solid @black;
min-height: 100px;
}
div.header-details img {
margin-top: 17px;
border: 2px solid @black;
}
div.header-details > div {
float: left;
}
div.header-date {
width: 50px;
text-align: center;
margin-right: 5px;
}
.header-date .day, .emission-details .day {
margin-top: 20px;
font-family: Reglo;
text-transform: uppercase;
font-size: @l*1.6;
line-height: 100%;
}
.header-date .day-number {
font-family: Reglo;
text-transform: uppercase;
font-size: @l*1.6;
line-height: 100%;
}
.header-date .time, .emission-details .time {
margin: 5px 0 10px 0;
font-family: Reglo;
text-transform: uppercase;
font-size: @s*1.2;
line-height: 100%;
}
div.header-outline {
width: 221px;
padding-right: 15px;
padding-left: 10px;
}
.header-outline h4 {
margin: 16px 0 10px 0;
}
.header-outline .credits dt {
letter-spacing:1px;
font-size: @s*1.1;
font-family: RE03;
line-height: 133%;
}
.header-outline .credits dd {
letter-spacing:1px;
font-size: @s;
font-family: RE01;
line-height: 150%;
float: left;
margin-left: 4px;
}
div.header-image {
width: 104px;
margin-right:10px;
}
div.header-controls {
margin-top:15px;
width: 77px;
text-align: center;
}
.accordion {
margin-bottom:50px;
}
.accordion .slide-out {
display: none;
}
.accordion .strip {
margin:2px 0;
height:20px;
background-color: @black;
color: white;
font-family:RE02;
text-transform: uppercase;
letter-spacing:1px;
font-size:@xs;
padding-top:4px;
.focusFade();
cursor: pointer;
}
.accordion .strip:hover {
background-color: @black;
}
.accordion .symbol {
color: white;
font-size:@l;
margin: 0px 5px;
}
.a-propos {
margin: 30px 10px;
}
.a-propos p {
margin-bottom:15px;
}
.a-propos h4 {
margin:15px 0;
height: 12px;
background-color:@black;
color:white;
font-family:RE02;
padding:4px;
letter-spacing:1px;
font-size:@xs;
display:inline-block;
}
.associated-sounds {
margin: 30px 0;
.symbols {
font-size:@xl*1.3;
float: right;
line-height:50%;
}
.soundGrey {
background-color:#D0D0D0;
}
div.item {
margin-top: 20px;
padding: 10px;
}
h3 {
margin-bottom:30px;
}
}
/**** EMISSIONS ****/
/**** Inline ****/
.emission-inline {
padding:0.5em;
min-height: 2.5em;
......@@ -612,7 +426,7 @@ margin-top:15px;
overflow:hidden;
}
div.date {
.emission-inline div.date {
min-height: 3em;
text-align: center;
display:inline-block;
......@@ -620,7 +434,7 @@ div.date {
margin-right:1em;
}
.date span {
.emission-inline .date span {
display:inline-block;
font-family: RE03;
text-transform: uppercase;
......@@ -648,70 +462,119 @@ div.date {
color:#aaa;
}
.emission-inline .link .title {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.emission-inline .link .description {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: @s;
margin: 0px 0 5px 0;
font-family: RE03;
line-height: 115%;
font-size: @s;
margin: 0px 0 5px 0;
font-family: RE02;
line-height: 115%;
}
.emission-inline .link .description {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: @s;
margin: 0px 0 5px 0;
font-family: RE02;
line-height: 115%;
ul.tagsArchives {
margin-top:5px;
overflow:hidden;
margin-bottom:15px;
}
ul.tagsArchives li {
font-size: @xxs;
font-family: RE03;
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;
}
.link .credits dt {
letter-spacing:1px;
font-size: @s*1.1;
font-family: RE03;
line-height: 133%;
/**** EPISODE ****/
/**** Detail ****/
.episode-detail {
border-top: 3px solid @black;
min-height: 100px;
}
.link .credits dd {
letter-spacing:1px;
font-size: @s;
font-family: RE01;
line-height: 150%;
float: left;
margin-left: 4px;
.episode-detail img {
margin-top: 17px;
border: 2px solid @black;
}
ul.tagsArchives {
margin-top:5px;
overflow:hidden;
margin-bottom:15px;
.episode-detail .date{
float: left;
}
.episode-detail .logo,.episode-detail .controls{
float: right;
}
ul.tagsArchives li {
font-size: @xxs;
font-family: RE03;
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 .date {
width: 50px;
text-align: center;
margin-right: 5px;
}
.episode-detail .date .day, .emission-detail .date .day {
margin-top: 20px;
font-family: Reglo;
text-transform: uppercase;
font-size: @l*1.4;
line-height: 100%;
}
.episode-detail .date .day-number {
font-family: Reglo;
text-transform: uppercase;
font-size: @m;
line-height: 100%;
}
.episode-detail .date .time, .emission-details .time {
margin: 5px 0 10px 0;
font-family: Reglo;
text-transform: uppercase;
font-size: @s*1.2;
line-height: 100%;
}
.episode-detail .content {
padding-right: 100px;
padding-left: 60px;
}
.episode-detail .content .title {
margin: 16px 0 10px 0;
}
.episode-detail .episode-detail .credits dt {
letter-spacing:1px;
font-size: @s*1.1;
font-family: RE03;
line-height: 133%;
}
.episode-detail .episode-detail .credits dd {
letter-spacing:1px;
font-size: @s;
font-family: RE01;
line-height: 150%;
margin-left: 4px;
}
.episode-detail div.header-image {
width: 104px;
margin-right:10px;
}
.episode-detail div.controls {
width: 77px;
text-align: center;
font-size: @xxl;
}
/****************************************************/
/**** Breves ****/
.breves, #content.breve {
......@@ -814,6 +677,115 @@ ul.tagsArchives li {
color:white;
padding:5px 7px 0px 7px;
}
/**** TO REWRITE ****/
#content {
width: @content-width;
float: left;
margin-left: 60px;
}
#content.wide {
width: 498px + 50px + 370px;
}
/* The h1 needs to be two times bigger, than it’s containing box, because with the matrix transform we’re going to squash it in 2 */
#content h1 {
width: 996px;
}
#content h3 {
margin-bottom:30px;
}
a, .menuEmissions a, a:visited, .menuEmissions a:visited, a:active, .menuEmissions a:active {
color: lighten(@black, 20%);
}
#content hr {
display: block;
height: 1px;
border-top: 3px solid @black;
}
.accordion {
margin-bottom:50px;
}
.accordion .slide-out {
display: none;
}
.accordion .strip {
margin:2px 0;
height:20px;
background-color: @black;
color: white;
font-family:RE02;
text-transform: uppercase;
letter-spacing:1px;
font-size:@xs;
padding-top:4px;
.focusFade();
cursor: pointer;
}
.accordion .strip:hover {
background-color: @black;
}
.accordion .symbol {
color: white;
font-size:@l;
margin: 0px 5px;
}
.a-propos {
margin: 30px 10px;
}
.a-propos p {
margin-bottom:15px;
}
.a-propos h4 {
margin:15px 0;
height: 12px;
background-color:@black;
color:white;
font-family:RE02;
padding:4px;
letter-spacing:1px;
font-size:@xs;
display:inline-block;
}
.associated-sounds {
margin: 30px 0;
.symbols {
font-size:@xl*1.3;
float: right;
line-height:50%;
}
.soundGrey {
background-color:#D0D0D0;
}
div.item {
margin-top: 20px;
padding: 10px;
}
h3 {
margin-bottom:30px;
}
}
/**
* For modern browsers
......
panikweb_templates/templates/emissions/detail.html
View file @ b02b226f
<div class="content emission">
<div class="content emission emission-detail">
<nav class="menu">
<ul>
<!--<li><a>&lt; précédent</a></li>
......@@ -11,7 +11,7 @@
<header class="mainHeader">
<h1 class="title">{{ emission.title }}</h1>
</header>
<div class="emission-metas">
<div class="metas">
<div class="schedule">
<div>mercredi &amp; jeudi</div>
<div class="time">7:30-8:00</div>
......@@ -41,16 +41,14 @@
</article>
{% endif %}
<h3>Épisodes</h3>
<ul class="episode-list">
{% for episode in episodes %}
<li>{{ episode.first_diffusion|date:"d E o H:i"|lower }}
<br/>   <a href="{{ episode.slug }}/">{{ episode.title }}</a>
{% if episode.has_sound %}<span class="icon-music"/>{%endif%}
</li>
{% endfor %}
</ul>
{% if episodes %}
<div class="episode-list">
{% for episode in episodes %}
{% include "episodes/detail.html" %}
{% endfor %}
</div>
{% endif %}
</div>
panikweb_templates/templates/emissions/inline.html
View file @ b02b226f
......@@ -13,13 +13,13 @@
</div>
<a class="link" href="{% url 'emission-view' slug=emission.slug %}">
<h5 class="title">{{ emission.title }}</h5>
<h5 class="title ellipsis">{{ emission.title }}</h5>
{% if emission.description %}
<div class="description">
<div class="description ellipsis">
{{ emission.description|safe|striptags }}
</div>
{% elif emission.text %}
<div class="description">
<div class="description ellipsis">
{{ emission.text|safe|striptags|truncatewords:20}}
</div>
{% endif %}
......
panikweb_templates/templates/episodes/detail.html
View file @ b02b226f
<div class="header-details cf">
<div class="header-date">
<!--
<li>{{ episode.first_diffusion|date:"d E o H:i"|lower }}
<br/>   <a href="{{ episode.slug }}/">{{ episode.title }}</a>
{% if episode.has_sound %}<span class="icon-music"/>{%endif%}
</li>
-->