img.logo{border:2px solid black;}
header{
- text-align:center;
- padding:1em;
+ padding:0 0 2em 0;
font-family: 'RegloBold';
}
h1, h2, h3, h4, h5{
/*Specific rules for text writen by final users */
.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;}
+.userContent h2 { font-size: 1.9em;}
h1, h2, h3, h4, .squashed{
font-family: 'RegloScale';
}
/****************************************************/
/* WRAPPER */
/****************************************************/
-.wrapper {max-width: 1260px; margin:auto;padding:0 7%;}
+.wrapper {max-width: 1260px; margin:auto;padding:0 10%;}
.wrapper.text {max-width: 780px; margin:auto;}
.wrapper.half {max-width: 510px; margin:auto;}
.wrapper.sided{ max-width:1260px; }
@media screen and (max-width: 400px) {
- .wrapper {padding:0 1%;}
+ .wrapper {padding:0 3%;}
}
@media screen and (min-width: 400px) and (max-width: 1024px){
- .wrapper {padding:0 3%;}
+ .wrapper {padding:0 5%;}
+}
+@media screen and (min-width: 1024px) and (max-width: 1260px){
+ .wrapper {padding:0 7%;}
}
@media screen and (min-width: 600px) {
font-family: "RegloBold";
text-transform: uppercase;
}
-#Nav .icon-check{background:#222;}
button.check:before, a.check:before {
display:inline-block;
width:1.5em;
color: #222;
border-color: #222;
}
-/**** TABS ****/
-
+/****************************************************/
+/**** BODY ****/
/****************************************************/
body{
background: #333;
color: white;
}
-#Changing{
- padding-bottom:100px;
-}
-#Main{
- color:#333;
- background-color: white;
-}
-#Main >.wrapper{
- padding-bottom:2em;
-}
-#Home #Main{
- min-height:0;
-}
-#Changing a:hover,#Changing button:hover {
- opacity:0.6;
- text-decoration:none;
-}
-#Nav a:hover,#Nav button:hover {
- opacity:1;
- color:white !important;
-}
-/* GLOBAL SITE NAV */
-#userLog{
- z-index:2000;
- position: fixed;
- bottom: 0px;
- right: 0px;
-}
-#userLog .log{
- margin:0.3em;
- -moz-box-shadow: 0px 0px 3px #000;
- -webkit-box-shadow: 0px 0px 3px #000;
- box-shadow: 0px 0px 3px #000;
- border-radius:0.5em;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;
- text-align:center;
- padding: 0.3em;
- font-size:0.9em;
- color:black;
- background-color:orange;
- border: 2px solid black;
- background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.04) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0.04) 75%, transparent 75%, transparent);
-}
-#userLog .log.info{
- background-color:grey;
- color:white;
-}
-#userLog .log.ok{
- background-color:green;
- border-color:black;
- color:white;
-}
-#userLog .log.error{
- background-color:orange;
- border-color:yellow;
-}
-#main {}
-#mainLegend{
- width:30%;
- text-align:right;
- float:right;
- padding:1em;
-}
+/****************************************************/
+/**** metaNAV ****/
+/****************************************************/
+
#metaNav {
height: 2em;
color:white;
top:0px;
width:100%;
}
+#metaNav ul{
+}
#metaNav ul li{
white-space: nowrap;
text-overflow: ellipsis;
}
#metaNav ul li a span{
- padding:0.5em 0;
+ padding:0.5em;
display:inline-block;
}
#metaNav .iconLabel {display:none;}
#metaNav ul li a span.nav-icon { display: inline-block; }
}
-
-#Footer{
- border-top:2px solid #333;
- background:#333;
- color:white;
- padding-top: 2em;
-}
-
-#Footer ul {
-}
-
-#Footer ul li {
- padding-right: 2em;
-}
-
-#Footer a:hover {
- opacity:0.6;
-}
+/****************************************************/
+/**** HEADER ****/
+/****************************************************/
/* PANIK LOGO */
+
+#Commons{padding:3em 0 3em 0;}
#mainHeader {
padding-top:1em;
- background:white 50% 50% no-repeat url('../img/logoPanik.png');
+ background:white 0% 50% no-repeat url('../img/logoPanik.png');
+}
+#mainHeader {
+ font-size:70%;
}
#mainHeader *{color:black !important;line-height:1em;}
#mainHeader #radioPanik{}
background-color:#eee;
color:#000;
}
-/****************************************************/
-/**** SCREEN NAV ****/
-#Nav{
- text-align:center;
- background:#3333FF;
-}
-#Nav nav{padding:0.1em;}
-#Nav *{ color:white; border-color:#white;}
-/*#Nav form{background:#800000;}*/
-#Nav input{color:#333;}
-#Nav ul li button,
-#Nav ul li a {
- border-width:0 0 2px 0;
- border-style: solid;
- border-color: transparent;
-}
-#Nav .active,#Nav .active *{
- font-weight:bold;
- background: white;
- color:#3333FF;
- padding:0.3em;
-}
-#Nav nav ul.columns {column-rule:2px solid #342E2E;-moz-column-rule:2px solid #342E2E;-webkit-column-rule:2px solid #342E2E;}
-
-#Nav nav{
- margin:0;
-}
-#Nav h2{
- margin:0;
- padding:0;
-}
-#Nav nav ul{
- margin:1em 0 1em 0;
-}
-
-#Nav li a{
- display: inline-block;
- padding: 0 0.5em 0 0.5em;
-}
-#Nav nav ul.distributed li {padding: 0;}
-#Nav nav.right{
- color:#EED1B1 !important;
- background:#342E2E;
- border-color:#342E2E;
- border-width:2px;border-style:solid;
-}
-#Nav nav.right li, #Nav nav.right li a{
- display:block;
- color:#EED1B1 !important;
+/****************************************************/
+/**** Commons ****/
+/****************************************************/
+#mainHeader {
+ width:30%;
+ float:left;
}
-@media screen and (max-width: 400px) {
- #Nav nav.right{float:none !important;margin:none;border-top:2px solid white;}
+#Player {
+ margin-top:1em;
+ width:65%;
+ float:right;
+ padding:0 0 0 0;
}
-#Nav nav.sub{
+#player-container.fixed { width:100%;left:0;border-width: 2px 0 0 0;border-style:solid;}
+#player-container #player{
+ padding:0 0 0 0;
}
-#Nav nav.sub li a{
- min-width:7em;
- padding:0.5em;
+#Player #player-container #audioPlayer, #Player.withPlaylist #player-container #audioPlayer, .style-ffffff #Player.withPlaylist #player-container #Playlist{µ
+ margin:1em 0;
}
+ #player-container,
+ #player-container *{background-color:#ffffff !important; border-color:#ff6600 !important;color:#ff6600 !important;}
-
+.audio button {color:#ff6600 !important;}
/****************************************************/
/**** PLAYER ****/
+/****************************************************/
/*#Home #player{ float: left; } */
#player-container{
color:#fff;
#player-container.fixed{
z-index:500;
position:fixed;
- width:100%;
+ width:100% !important;
/*top:2em;*/
font-size:80%;
bottom:0em;
border-bottom:none;
}
+#Player.withoutPlaylist #player-container #audioPlayer{
+ font-size:150%;
+ margin:auto;
+ width:100%;
+}
#Player.withPlaylist #player-container #audioPlayer{
float:left;
width:50%;
text-align:left;
}
#player-container.normal #player{
- padding:3em;
}
#player-container.minimized{
width:auto;
padding-top:0.2em;
}
-@media screen and (max-width: 500px) {
+@media screen and (max-width: 800px) {
#Player.withPlaylist #player-container #audioPlayer,
#Player.withPlaylist #player-container #audioPlayer,
@media screen and (min-width: 500px) {
#Player #player-container #audioPlayer{
max-width:50%;
- margin:auto;
}
}
+/****************************************************/
+/**** #Changing #Footer ... ****/
+/****************************************************/
+#Changing{
+ padding-bottom:100px;
+}
+#Main{
+ color:#333;
+ background-color: white;
+}
+#Main >.wrapper{
+ padding-bottom:2em;
+}
+#Home #Main{
+ min-height:0;
+}
+#Changing a:hover,#Changing button:hover {
+ opacity:0.6;
+ text-decoration:none;
+}
+/* GLOBAL SITE NAV */
+#userLog{
+ z-index:2000;
+ position: fixed;
+ bottom: 0px;
+ right: 0px;
+}
+#userLog .log{
+ margin:0.3em;
+ -moz-box-shadow: 0px 0px 3px #000;
+ -webkit-box-shadow: 0px 0px 3px #000;
+ box-shadow: 0px 0px 3px #000;
+ border-radius:0.5em;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;
+ text-align:center;
+ padding: 0.3em;
+ font-size:0.9em;
+ color:black;
+ background-color:orange;
+ border: 2px solid black;
+ background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.04) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0.04) 75%, transparent 75%, transparent);
+}
+#userLog .log.info{
+ background-color:grey;
+ color:white;
+}
+#userLog .log.ok{
+ background-color:green;
+ border-color:black;
+ color:white;
+}
+#userLog .log.error{
+ background-color:orange;
+ border-color:yellow;
+}
+#main {}
+#mainLegend{
+ width:30%;
+ text-align:right;
+ float:right;
+ padding:1em;
+}
+
+#Footer{
+ border-top:2px solid #333;
+ background:#333;
+ color:white;
+ padding-top: 2em;
+}
+
+#Footer ul {
+}
+
+#Footer ul li {
+ padding-right: 2em;
+}
+
+#Footer a:hover {
+ opacity:0.6;
+}
+
+/****************************************************/
+/**** SCREEN NAV ****/
+#Nav{
+ background:#3333FF;
+}
+#Nav a:hover,#Nav button:hover {
+}
+#Nav nav{padding:0.1em;}
+/*#Nav form{background:#800000;}*/
+#Nav input{color:#333;}
+#Nav ul li button,
+#Nav ul li a {
+ border-width:0 0 2px 0;
+ border-style: solid;
+ border-color: transparent;
+}
+
+#Nav .active,#Nav .icon-check,#Nav .active *{
+ font-weight:bold;
+ background: white;
+ color:#3333FF;
+ padding:0.3em;
+}
+#Nav nav ul.columns {column-rule:2px solid #342E2E;-moz-column-rule:2px solid #342E2E;-webkit-column-rule:2px solid #342E2E;}
+
+#Nav nav{
+ margin:0;
+}
+#Nav h2{
+ margin:0;
+ padding:0;
+}
+#Nav nav ul{
+ margin:1em 0 1em 0;
+}
+
+#Nav li a{
+ display: inline-block;
+ padding: 0 0.5em 0 0.5em;
+}
+#Nav nav ul.distributed li {padding: 0;}
+
+#fiber-nav{
+ font-size:150%;
+ border-width:2px 0 2px 0;border-style:solid;
+}
+#fiber-nav li, #fiber-nav li a{
+ display:block;
+}
+#fiber-nav ul{
+ padding:0.5em;
+}
+#fiber-nav li a{
+ padding:0.5em;
+}
+
+
/****************************************************/
padding-bottom: 5px;
}
-#Nav .newsRoll li {
- background:black;
- color:white;
- border: none;
-}
.newsRoll li.first {
width: 30%;
}
+.newsRoll li {
+ color:white;
+ border: none;
+}
.newsRoll li {
width: 15%;
display: table-cell;
#grid #Main {}
#grid th{
- color:#4682B4;
+ color:#000;
}
#grid .heure {
height:50px !important;
}
-/**** COLOR VARIANTS ****/
-
-/*
-#News #Nav,
- #News #Nav *,
- .news,
- .news *
-{color:white;background-color:#4682B4; border-color:#fff !important;color:#fff !important;}
-#News, #news,.news, .news *,.mainLegend.news {
- background-color:#fff;
- border-color:#1663d5 !important;
- color:#1663d5 !important;
-}*/
-
-#player-container{}
-#Nav{}
.sectionLabel
{background: white;color:#111111;}
-.style-3333ff #Nav,
-.style-3333ff #metaNav ul li.active,
-.style-3333ff #metaNav ul li.active a
- {background:#3333ff !important;color:#ffffff;}
-.style-3333ff #Nav .active,
-.style-3333ff #Nav .active *,
-.style-3333ff .sectionLabel
- {background: white;color:#3333ff !important;}
+.style-333333 #Nav,
+.style-333333 #metaNav ul li.active,
+.style-333333 #metaNav ul li.active a
+ {background:#333333 !important;color:#ffffff;}
+.style-333333 #Nav .active,
+.style-333333 #Nav .active *,
+.style-333333 .sectionLabel a
+ {background: white;color:#333333 !important;}
.style-0000ff #Nav,
.style-0000ff #metaNav ul li.active,
{background:#0000ff !important;color:#ffffff;}
.style-0000ff #Nav .active,
.style-0000ff #Nav .active *,
-.style-0000ff .sectionLabel
+.style-0000ff .sectionLabel a
{background: white;color:#0000ff !important;}
.style-ff6633 #Nav,
{background:#ff6633 !important;color:#ffffff;}
.style-ff6633 #Nav .active,
.style-ff6633 #Nav .active *,
-.style-ff6633 .sectionLabel
+.style-ff6633 .sectionLabel a
{background: white;color:#ff6633 !important;}
-.style-ff6633 #mainHeader {background:#ff6633 50% 50% no-repeat url('../img/logo-panik.png');}
-.style-ff6633 #mainHeader *{background:transparent !important;}
.style-ffffff,
.style-ffffff #Related
.style-ffffff #Nav *,
.style-ffffff #Nav .active,
.style-ffffff #Nav .active *,
-.style-ffffff .sectionLabel
- {background: white !important;color:#0000ff !important;}
-.style-ffffff #Nav .mainSub
- {border-color:#0000ff !important;border-width:0 0 2px 0; border-style:solid;}
+.style-ffffff .sectionLabel a
+ {background: white !important;color:#0000ff !important;text-align:left;}
+
+.style-ffffff #Nav .secondSub{
+ margin-bottom:3em;
+ border-bottom:2px solid #0000ff;
+}
+.style-ffffff #Nav header{
+ margin:1em 0;
+ padding:0 0 0 0 !important;}
+.style-ffffff #Nav h2{
+ margin:0;
+ padding:0 0 0 0;
+ font-size:5em;}
+
+.style-ffffff #Nav .mainSub .wrapper,
+ .style-ffffff #Nav .mainSub *
+ {background:#0000ff !important;color:white !important;}
+.style-ffffff #Footer{
+ background:transparent !important;
+ }
+/*
.style-ffffff #player-container,
-.style-ffffff #player-container *{background-color:#ffffff !important; border-color:#ff6633 !important;color:#ff6633 !important;}
-.style-ffffff #player-container {border-width: 2px 0 2px 0;border-style:solid;}
-.style-ffffff #player-container.fixed {border-width: 2px 0 0 0;border-style:solid;}
+.style-ffffff #player-container *{background-color:#ff6633 !important; border-color:#ffffff !important;color:#ffffff !important;}
+*/
+
/*
#Commons,
this.registerControl('stop',{class:"icon-stop",click: function(){
thePlaylist.stopSounds();
}});
- this.registerControl('playpause',{class:"icon-play playPause",click: function(){
+ this.registerControl('playpause',{class:"icon-play-sign playPause",click: function(){
thePlaylist.playPauseList();
}});
this.registerControl('next',{class:"icon-step-forward",click: function(){
//doLog(JSON.stringify(self.playlist, null, '\t'));
if(self.playlist.length >= 1){
self.element.show();
- $('#Player').addClass('withPlaylist');
+ $('#Player').addClass('withPlaylist').removeClass('withoutPlaylist');
}else{
self.element.hide();
- $('#Player').removeClass('withPlaylist');
+ $('#Player').removeClass('withPlaylist').addClass('withoutPlaylist');
}
}
});
</head>
<body id="{{sectionName}}" class="section-{{sectionName}}">
+
+ <div id="StyleSwitcher" class="small" style="position:fixed;right:0; top:0em;z-index:3000;width:2.5em;">
+ <button class="small icon-sign-blank" data-class="style-ff6633" style="color:#ff6633;padding:0;margin:0;"></button>
+ <button class="small icon-sign-blank" data-class="style-0000ff" style="color:#0000ff;padding:0;margin:0;"></button>
+ <button class="small icon-sign-blank" data-class="style-333333" style="color:#333333;padding:0;margin:0;"></button>
+ <button class="small icon-sign-blank" data-class="style-111111" style="color:#ffffff;padding:0;margin:0;"></button>
+ </div>
+ <script type="text/javascript">
+ $(function() {
+ $('#StyleSwitcher button').on('click',function(e){
+ e.preventDefault();
+ $('body').attr('class','').addClass($(this).attr('data-class'));
+ localStorage['class'] = $(this).attr('data-class');
+ });
+ $('#StyleSwitcher button[data-class="'+localStorage['class']+'"]').trigger('click');
+ });
+ </script>
<div id="All">
{% block meta %}<div id="metaNav">{% metanav active=sectionName %}</div>{% endblock %}
- <div id="Commons">
- <div id="mainHeader" class="block center">
- <h1><span id="radioPanik" class="inBlock">Radio Panik</span> <span id="frequence" class="inBlock">105.4 FM</span></h1>
- <!--{% block logo %}<img class="logo" src="{{ STATIC_URL }}/img/LogoPanik.jpg"/>{% endblock %}-->
- </div>
- <div id="Player" class="{% block player-class %}{% endblock %}">
- {% block listen %}{% player %}{% endblock %}
- </div>
+ <div id="Commons" class="cf" >
+ <div class="wrapper" class="cf" >
+ <div id="mainHeader" class="block center">
+ <h1><span id="radioPanik" class="inBlock">Radio Panik</span> <span id="frequence" class="inBlock">105.4 FM</span></h1>
+ <!--{% block logo %}<img class="logo" src="{{ STATIC_URL }}/img/LogoPanik.jpg"/>{% endblock %}-->
+ </div>
+ <div id="Player" class="withoutPlaylist">
+ {% block listen %}{% player %}{% endblock %}
+ </div>
+ </div>
</div>
<div id="Changing" class="cf" data-section="{{ sectionName }}">
- <div id="Nav">
+ <div id="Nav" class="cf" >
{% block nav %}{% endblock %}
</div>
<div id="Main" class="cf">
{% endblock %}
{% block main %}
<div class="wrapper {% if episodes.exists %}navigation{% endif %} cf">
- <div id="Emission-container" class="emission padded">
+ <div id="Emission-container" class="emission marged">
<div data-tabbed="true" id="Emission-tabs-default">
<div id="Emission-tabs-detail" class="leftPart">
{% if episode %}
{% endfor %}
</div>
{% endif %}
+
{% if episodes.exists %}
<div class="sub">
+ <h5 class="sectionLabel right"><a class="" href="{% url 'emissionEpisodes' slug=emission.slug %}">Tous ({{ episodes.count }})</a></h5>
<h5 class="sectionLabel">Derniers épisodes</h5>
+
{% with episodes|slice:"0:5" as episodes %}
{% for episode in episodes %}
{% episode_inline %}
-<div class="wrapper">
- <nav class="mainSub">
- <ul class="inline padded">
- <li><a href="{% url 'grid' %}" class="{% if class = "grid" %}active{% endif %}">
- <span class="icon-th-large" ></span>
- <span class="iconLabel">La grille</span>
- </a></li>
- <li><a href="{% url 'program' %}" class="{% if class = "program" %}active{% endif %}">
- <span class="icon-calendar" ></span>
- <span class="iconLabel">Par semaine</span>
- </a></li>
- <li><a href="{% url 'emissions' %}" class="{% if class != "program" and class != "grid" and class != "archives" %}active{% endif %}">
- <span class="icon-microphone" ></span>
- <span class="iconLabel">Émissions</span>
- </a></li>
- <li><a href="{% url 'emissionsArchives' %}" class="{% if class = "archives" %}active{% endif %}">
- <span class="icon-archive" ></span>
- <span class="iconLabel">Archives</span>
- </a></li>
- </ul>
- </nav>
+<div class="mainSub">
+ <div class="wrapper">
+ <nav>
+ <ul class="inline padded">
+ <li><a href="{% url 'grid' %}" class="{% if class = "grid" %}active{% endif %}">
+ <span class="icon-th-large" ></span>
+ <span class="iconLabel">La grille</span>
+ </a></li>
+ <li><a href="{% url 'program' %}" class="{% if class = "program" %}active{% endif %}">
+ <span class="icon-calendar" ></span>
+ <span class="iconLabel">Par semaine</span>
+ </a></li>
+ <li><a href="{% url 'emissions' %}" class="{% if class != "program" and class != "grid" and class != "archives" %}active{% endif %}">
+ <span class="icon-microphone" ></span>
+ <span class="iconLabel">Émissions</span>
+ </a></li>
+ <li><a href="{% url 'emissionsArchives' %}" class="{% if class = "archives" %}active{% endif %}">
+ <span class="icon-archive" ></span>
+ <span class="iconLabel">Archives</span>
+ </a></li>
+ </ul>
+ </nav>
+ </div>
</div>
{% if categories %}
<div class="wrapper">
</div>
{% endif %}
{% if emission %}
-<div class="wrapper">
- <header class="mainHeader">
- <h2 class="squashed title">
- <a href="{% url 'emission-view' slug=emission.slug %}">{{ emission.title }}</a>
- </h2>
- {% if emission.categories %}
- <div class="categories">
- {% for category in emission.categories.all %}
- <a href="{% url 'emissions' %}?q={{category.slug}}"><!--<span class="icon-{{category|slugify}}"></span> --><span class="category">{{category}}</span></a>
- {% endfor%}
- </div>
- {% endif %}
- </header>
-</div>
- {% if episodes.exists %}
-<div class="wrapper">
- <div class="wrapper half">
- <nav>
- <ul class="distributed by2">
- <li>
- <a class="{% if class != "episodes" %}active{% endif %}" href="{% url 'emission-view' slug=emission.slug %}">En bref</a>
- </li>
- <li>
- <a class="{% if class = "episodes" %}active{% endif %}" href="{% url 'emissionEpisodes' slug=emission.slug %}">Archives ({{ episodes.count }})</a>
-
- </li>
- </ul>
- </nav>
- </div>
- <!--
- {% if episode %}
- <h4 class="active title">{{ episode.title }}</h4>
- {% endif %}
- -->
+<div class="wrapper navigation">
+ <header class="mainHeader marged cf">
+ <div class="leftPart">
+ <h2 class="squashed title">
+ <a href="{% url 'emission-view' slug=emission.slug %}">{{ emission.title }}</a>
+ </h2>
+ {% if emission.subtitle %}<h4 class="squashed title">{{ emission.subtitle }}</h4>{% endif %}
+ {% if emission.categories %}
+ <div class="categories">
+ {% for category in emission.categories.all %}
+ <a href="{% url 'emissions' %}?q={{category.slug}}"><!--<span class="icon-{{category|slugify}}"></span> --><span class="category">{{category}}</span></a>
+ {% endfor%}
+ </div>
+ {% endif %}
+ </div>
+ <div class="rightPart">
+ <form method="get" action="." class="" id="search-form">
+ <label for="id_q">Rechercher:</label><input id="id_q" name="q" type="text"><button class="icon-search"></button>
+ </form>
+ </div>
+ </header>
</div>
- {% endif %}
{% endif %}
<div class="">{% emission_resume %}</div>
{% endwith %}
{% endif %}
- <h5 class="sectionLabel">Dernières news</h5>
+ <h5 class="sectionLabel right">
+ <a href="{% url 'newsArchives' %}">
+ <span class="iconLabel">Toutes</span>
+ </a>
+ </h5>
+ <h5 class="sectionLabel">
+ <span class="iconLabel">Dernières actus</span>
+ </h5>
<ul class="custom list">
{% for content in news %}
{% if content != newsitem %}<li>{% news_inline %}</li>{% endif %}
</div>
</div>
{% if diffusions %}
- <header class="center padded">
+ <header class="">
<h3 class="">{{ episode.title }}</h3>
<div class="label">Diffusions</div>
<ul class="diffusions custom">
</header>
{% endif %}
{% if episode.main_sound %}
- <div class="sound center">
+ <div class="sound">
{% audio sound=episode.main_sound %}
</div>
{% endif %}
<a href="{% url 'episode-view' emission_slug=result.emission_slug slug=result.slug %}">
- <span class="icon-volume-off " ></span>
+ <span class="icon-comment " ></span>
<strong>{{ result.title }}</strong>
<br />
<span class="smooth">{{ result.emission_title }}</span>
{% emission_nav with klass="grid" %}
{% endblock %}
{% block main %}
-<div id="grid" class="">
+<div id="grid" class="wrapper">
<table>
<tbody>
<tr>
</a>
</strong>
{% if schedule.emission.categories %}<br />{% endif %}
- {% for category in schedule.emission.categories.all %}<span class="icon-{{category|slugify}}"></span>{% endfor%}
+ <!--{% for category in schedule.emission.categories.all %}<span class="icon-{{category|slugify}}"></span>{% endfor%}-->
<br />
{% if schedule.weeks_string or schedule.time_label %}
{% spaceless %}
{% block bodyID %}Home{% endblock %}
{% block title %}Home{% endblock %}
{% block nav %}
+<div class="mainSub">
+ <div class="wrapper">
+ <nav>
+ <form method="get" action="." class="big marged" id="search-form">
+ <label for="id_q">Rechercher:</label><input id="id_q" name="q" type="text"><button class="icon-search"></button>
+ </form>
+ </nav>
+ </div>
+</div>
+{% endblock %}
+{% block main %}
+<div class="marged">
{% with focus as news %}
{% newsroll %}
{% endwith %}
-{% endblock %}
-{% block main %}
+</div>
<div class="sided wrapper">
{% if soundfiles %}
<div id="recent-sounds">
- <h3 class="sectionLabel"><a href="{% url 'listen' %}">Derniers sons</a></h3>
+ <h3 class="sectionLabel right"><a href="{% url 'listen' %}">Tous</a></h3>
+ <h3 class="sectionLabel">Derniers sons</h3>
<ul class="custom columns list">
{% for soundfile in soundfiles %}
<li class="item {% if soundfile.episode.emission.categories.all.count = 0 %}nocat{% endif %} {% for category in soundfile.episode.emission.categories.all %} {{ category|slugify }}{% endfor %}">
{% load soundfiles %}
{% load paniktags %}
{% if sound|is_format_available:'mp3' or sound|is_format_available:'ogg' %}
- <div class="">
+ <div class="audio">
<button class="resymbol icon-plus-sign big"
title="Add to playlist"
data-player-audio="Audio-{{ sound.file.url|slugify }}"
data-player-action="registerAudio"
id="addToPlaylist-{{ sound.file.url|slugify }}"
></button>
- <button class="resymbol icon-play big"
+ <button class="resymbol icon-play-sign big"
title="Play"
data-player-audio="Audio-{{ sound.file.url|slugify }}"
data-player-action="playAudio"
<span class="nav-icon icon-search" ></span>
<span class="iconLabel">{% trans 'Search' %}</span>
</a></li>
- <li id="StyleSwitcher" class="small">
- <button class="small icon-sign-blank" data-class="style-ff6633" style="color:#ff6633;"></button>
- <button class="small icon-sign-blank" data-class="style-0000ff" style="color:#0000ff;"></button>
- <button class="small icon-sign-blank" data-class="style-3333ff" style="color:#3333ff;"></button>
- <button class="small icon-sign-blank" data-class="style-111111" style="color:#ffffff;"></button>
- <button class="small icon-sign-blank" data-class="style-ffffff" style="color:#000000;background:white;"></button>
- </li>
- <script type="text/javascript">
- $(function() {
- var currentStyle = localStorage['class'];
- $('#StyleSwitcher button').on('click',function(e){
- e.preventDefault();
- $('#All').attr('class','').addClass($(this).attr('data-class'));
- localStorage['class'] = $(this).attr('data-class');
- });
- $('#StyleSwitcher button[data-class="'+currentStyle+'"]').trigger('click');
- });
- </script>
</ul>
</nav>
{% load paniktags %}
-<div class="wrapper">
- <nav class="mainSub">
- <ul class="inline padded">
- <li><a href="{% url 'listen' %}" class="{% if class != "archives" %}active{% endif %}">
- <span class="icon-bolt" ></span>
- <span class="iconLabel">Derniers</span>
- </a></li>
- <li><a href="{% url 'listenArchives' %}" class="{% if class = "archives" %}active{% endif %}">
- <span class="icon-archive" ></span>
- <span class="iconLabel">Archives</span>
- </a></li>
- </ul>
- </nav>
+<div class="mainSub">
+ <div class="wrapper">
+ <nav>
+ <ul class="inline padded">
+ <li><a href="{% url 'listen' %}" class="{% if class != "archives" %}active{% endif %}">
+ <span class="icon-bolt" ></span>
+ <span class="iconLabel">Derniers</span>
+ </a></li>
+ <li><a href="{% url 'listenArchives' %}" class="{% if class = "archives" %}active{% endif %}">
+ <span class="icon-archive" ></span>
+ <span class="iconLabel">Archives</span>
+ </a></li>
+ </ul>
+ </nav>
+ </div>
</div>
<div class="wrapper">
{% if categories and class != "archives" %}
{% load paniktags %}
-<div class="wrapper">
- <nav class="mainSub">
- <ul class="inline padded">
- <li><a href="{% url 'news' %}" class="{% if class != "archives" %}active{% endif %}">
- <span class="icon-bolt" ></span>
- <span class="iconLabel">Dernières</span>
- </a></li>
- <li><a href="{% url 'newsArchives' %}" class="{% if class = "archives" %}active{% endif %}">
- <span class="icon-archive" ></span>
- <span class="iconLabel">Archives</span>
- </a></li>
- </ul>
- </nav>
+<div class="mainSub">
+ <div class="wrapper">
+ <nav>
+ <form method="get" action="." class="big marged" id="search-form">
+ <label for="id_q">Rechercher:</label><input id="id_q" name="q" type="text"><button class="icon-search"></button>
+ </form>
+ </nav>
+ </div>
</div>
<!--
+<div class="mainSub">
+ <div class="wrapper">
+ <nav >
+ <ul class="inline padded">
+ <li><a href="{% url 'news' %}" class="{% if class != "archives" %}active{% endif %}">
+ <span class="icon-bolt" ></span>
+ <span class="iconLabel">Dernières</span>
+ </a></li>
+ <li><a href="{% url 'newsArchives' %}" class="{% if class = "archives" %}active{% endif %}">
+ <span class="icon-archive" ></span>
+ <span class="iconLabel">Archives</span>
+ </a></li>
+ </ul>
+ </nav>
+ </div>
+</div>
TODO make requests to load specific news roll & compagnie from groups
<div class="wrapper">
{% if categories %}
{% block bodyID %}Search{% endblock %}
{% block title %}Recherche{% endblock %}
{% block nav %}
-<div class="search">
- <form method="get" action="." class="big center" id="search-form">
- {{ form.as_table }}<button class="icon-search"></button>
- </form>
+<div class="mainSub">
+ <div class="wrapper">
+ <nav>
+ <form method="get" action="." class="big marged" id="search-form">
+ {{ form.as_table }}<button class="icon-search"></button>
+ </form>
+ </nav>
+ </div>
+</div>
+<div class="wrapper">
{% if query or selected_tags %}
- <nav class="mainSub">
+ <nav class="">
{% if facets.fields.categories %}
<ul class="custom padded">
+ <li><span class="mainLabel">Genre:</span></li>
{# Provide only the top 5 categories #}
{% for category in facets.fields.categories|slice:":5" %}
<li>
<nav>
{% if facets.fields.tags %}
<ul class="tag-facets custom padded">
+ <li><span class="mainLabel">Mots clés:</span></li>
{# Provide only the top 5 tags #}
{% for tag in facets.fields.tags|slice:":20" %}
<li>
</nav>
{% endif %}
+ </div>
</div>
{% endblock %}
{% block title %}{{ fiber_page.title }}{% endblock %}
{% block nav %}
-<div id="fiber-nav">
- <nav class="distributed">
- {% show_menu "main-menu" 1 1 "all" %}
- </nav>
- <div class="wrapper text">
- <nav class="sub right">
- {% show_menu "main-menu" 2 3 "all_descendants" %}
- </nav>
- </div>
+<div class="wrapper">
+ <nav class="distributed">
+ {% show_menu "main-menu" 1 1 "all" %}
+ </nav>
</div>
{% endblock %}
{% block main %}
-<div class="wrapper text">
- <div id="fiber-content" class="padded">
+<div class="wrapper navigation">
+ <div id="fiber-content" class="leftPart marged">
<h2>{{ fiber_page.title }}</h2>
<div class="text userContent">{% show_page_content "main" %}</div>
</div>
+ <div id="fiber-nav" class="sub rightPart custom marged">
+ {% show_menu "main-menu" 2 3 "all_descendants" %}
+ </div>
</div>
{% endblock %}
projects / panikweb.git / commitdiff