Skip to content

GitLab

Commit b65094b3 authored by Simon Daron's avatar Simon Daron
Browse files
Options

CSS Styling emission/episode/player

parent edc37b4a
Hide whitespace changes
Inline Side-by-side
Showing with 67 additions and 29 deletions
panikweb_templates/static/css/specifics.css
View file @ b65094b3
......@@ -16,7 +16,7 @@
.inline .date, .resume .date{
text-align: center;
}
.dateBloc{width:5.5em;
.dateBloc{width:4em;
text-align: center;}
.dateBloc{display:inline-block;}
.dateBloc *{line-height: 100%;}
......@@ -28,6 +28,7 @@
.dateBloc.small{
font-size: 80%;
}
.tabs .ui-tabs-nav {
font-family: "Reglo";
text-transform: uppercase;
......@@ -299,13 +300,14 @@ background-color:#ff6633; border-color:#fff;}
background-color:transparent;
}
#player-container .metas, #player-container img{border-color:#fff;}
#player-container .padded{padding:1%;}
#player-container .padded{padding:0.5em;}
#player-container *.label{
padding:0.2em;
}
#player-container button,#player-container a{
}
#player-container .metas{
text-align:center;
color:white !important;
}
#player-container .label{
......@@ -337,7 +339,7 @@ background-color:#ff6633; border-color:#fff;}
font-size:0.9em;
}
#player-container.fixed .padded{
padding:0.5em;
}
#Player.withPlaylist #player-container #audioPlayer{
float:left;
......@@ -360,13 +362,15 @@ background-color:#ff6633; border-color:#fff;}
#Playlist button{
font-size:1em;
}
#Playlist .label{
#Playlist #playlistLabel{
float:right;
}
#Playlist .playlistControls{
font-size:120%;
text-align:left;
#Playlist .playListControls{
}
#Playlist .playListControls button{
margin-right:0.2em;
display:inline-block;
}
#Playlist .playing .icon-pause{
-webkit-animation: loading 1s infinite linear;
......@@ -461,8 +465,7 @@ background-color:#ff6633; border-color:#fff;}
max-width:1000px;
}
#Emissions #Changing .wrapper.sided #Emission-tabs-detail,
#Emissions #Changing .wrapper.sided #Emission-tabs-last,
#Emissions #Changing .wrapper.sided .monthGroup{
#Emissions #Changing .wrapper.sided #Emission-tabs-last{
width:45%;
}
#Emissions #Changing .wrapper.sided #Emission-tabs-detail{
......@@ -471,6 +474,10 @@ background-color:#ff6633; border-color:#fff;}
#Emissions #Changing .wrapper.sided #Emission-tabs-last{
float:right;
}
/*
#Emissions #Changing .wrapper.sided .monthGroup{
width:45%;
}
#Emissions #Changing .wrapper.sided .monthGroup.even{
float:right;
clear:left;
......@@ -479,6 +486,7 @@ background-color:#ff6633; border-color:#fff;}
float:left;
clear:right;
}
*/
}
/**** Detail ****/
.emission-detail .metas {
......@@ -550,6 +558,13 @@ background-color:#ff6633; border-color:#fff;}
.episode.resume .logo{
float: right;
}
.episode.resume .sound{
float:right;
margin:0 0 1em 1em;
}
.episode.inline .sound{
font-size:80%;
}
.episode.resume .sound.right .icon-download{
text-align:center;
}
......@@ -560,14 +575,11 @@ background-color:#ff6633; border-color:#fff;}
max-width:50%;
}
@media screen and (max-width: 300px) {
.episode.resume .logo{display:none;}
}
.episode.resume .date .day, .emission-detail .date .day {
}
.episode.resume .content {
padding-left: 6.5em;
padding-left: 5em;
}
.episode.resume .content .title {
}
......@@ -580,6 +592,19 @@ background-color:#ff6633; border-color:#fff;}
font-size:80%;
}
@media screen and (max-width: 400px) {
.episode .dateBloc{
width:4em;
font-size:80%
}
.episode.resume .content {
padding-left: 4em;
}
}
@media screen and (max-width: 300px) {
.episode.resume .logo{display:none;}
}
/****************************************************/
/**** News ****/
.list.news li {
......
panikweb_templates/static/js/specifics.js
View file @ b65094b3
......@@ -9,7 +9,7 @@ $(function() {
var $main = $("#Changing");
var $log = $("#userLog");
var $localList = $('#localList').playlist({
controlContainer: $('<div>',{class:""}).sortable(),
controlContainer: $('<div>',{class:"playListControls label"}).sortable(),
playlistContainer: $('<ol>',{id:"myPlaylist",class:"custom"}).sortable(),
onLoad:function(self){
$('#localList').children('.label').on('click',function(){
......
panikweb_templates/templates/emissions/emission_detail.html
View file @ b65094b3
......@@ -7,27 +7,31 @@
{% block main %}
<div class="wrapper {% if episodes %}sided{% endif %}">
<div id="Emission-container" class="emission padded">
{% if episode %}
<div data-tabbed="true" id="Emission-tabs-current" class="episodes wrapper half">
{% episode_detail %}
</div>
{% endif %}
<div data-tabbed="true" id="Emission-tabs-default">
<div id="Emission-tabs-detail">
<h5 class="sectionLabel">À propos</h5>
{% emission_detail %}
</div>
{% if episodes %}
<div id="Emission-tabs-last" class="episodes">
{% if episode %}
{% episode_detail %}
{% elif episodes %}
<h5 class="sectionLabel">Derniers épisodes</h5>
{% with episodes|slice:"0:3" as episodes %}
{% with episodes|slice:"0:1" as episodes %}
{% for episode in episodes %}
<div class="legend">{{ episode.first_diffusion|date:"F Y" }}</div>
{% episode_resume date="daytime" %}
{% endfor %}
{% endwith %}
</div>
{% with episodes|slice:"1:3" as episodes %}
{% for episode in episodes %}
<div class="legend">{{ episode.first_diffusion|date:"F Y" }}</div>
{% episode_resume model="inline" date="daytime" %}
{% endfor %}
{% endwith %}
{% endif %}
</div>
</div>
{% if episodes %}
<div data-tabbed="true" id="Emission-tabs-episodes" class="episodes">
......
panikweb_templates/templates/emissions/nav.html
View file @ b65094b3
......@@ -68,10 +68,12 @@
</button >
</li>
</ul>
<!--
{% if episode %}
<hr />
<h4 class="active button padded " data-tab="#Emission-tabs-current">{{ episode.title }}</h4>
{% endif %}
-->
</nav>
</div>
{% endif %}
......
panikweb_templates/templates/episodes/detail.html
View file @ b65094b3
......@@ -3,6 +3,7 @@
<div class="episode detail episode-detail cf">
{% if diffusions %}
<header class="center padded">
<h4 class="">{{ episode.title }}</h4>
<div class="label">Diffusions</div>
<ul class="diffusions custom">
{% for schedule in diffusions %}
......@@ -12,7 +13,9 @@
</header>
{% endif %}
{% if episode.main_sound %}
{% audio sound=episode.main_sound %}
<div class="sound center">
{% audio sound=episode.main_sound %}
</div>
{% endif %}
{% if episode.image %}
<div class="logo right">
......
panikweb_templates/templates/episodes/resume.html
View file @ b65094b3
{% load thumbnails %}
{% load paniktags %}
<div class="episode resume {% if model = "inline" %}inline{% endif %} cf">
<div class="episode {% if model = "inline" %}inline{% else %}resume{% endif %} cf">
<div class="dateBloc left">
<div class="date">
<div class="day">
......@@ -30,7 +30,7 @@
{% endif %}
<div class="content">
{% if episode.main_sound %}
{% if episode.main_sound and model != "inline"%}
<div class="sound right">{% audio sound=episode.main_sound %}</div>
{% endif %}
{% if class = "standalone" %}
......@@ -44,7 +44,7 @@
{% if model = "inline" %}
{% if episode.description %}
<div class="description ellipsis">
{{ episode.description|safe|striptags }}
{{ episode.description|safe|striptags|truncatewords:20}}
</div>
{% elif episode.text %}
<div class="description ellipsis">
......@@ -54,14 +54,18 @@
{% else %}
{% if episode.description %}
<article class="text userContent">
{{ episode.description|safe }}
{{ episode.description|safe|truncatewords:50 }}
</article>
{% elif episode.text %}
<article class="text userContent">
{{ episode.text|safe}}
{{ episode.text|safe|truncatewords:50}}
</article>
{% endif %}
{% endif %}
{% if episode.main_sound and model = "inline"%}
<div class="sound">{% audio sound=episode.main_sound %}</div>
{% endif %}
<div class="metas">
{% if episode.serie or episode.auteur or episode.redif %}
<dl class="credits cf">
......
panikweb_templates/templates/includes/player.html
View file @ b65094b3
......@@ -34,7 +34,7 @@
</div>
<div id="Playlist" class="sub cf">
<div id="localList" class="padded">
<div class="label button">Playlist&nbsp;<span class="icon-list"></span></div>
<div id="playlistLabel" class="label button">Playlist&nbsp;<span class="icon-list"></span></div>
</div>
</div>
<script type="text/javascript">
......
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