Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
radiopanik
panikweb
Commits
b02b226f
Commit
b02b226f
authored
Aug 15, 2013
by
Simon Daron
Browse files
Adding Episodes in Emission Views & rewriting CSS
parent
5dcab553
Changes
4
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 {
}
/**** P
layer
****/
/****************************************************/
/**** P
LAYER
****/
#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
;
l
in
e
-height: 1
33%
;
/**** EPISODE ****/
/**** Detail ****/
.episode-detail {
border-top: 3px solid @black
;
m
in-height: 1
00px
;
}
.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>< 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
&
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>
-->