Adding Episodes in Emission Views & rewriting CSS

diff --git a/panikweb_templates/static/css/style.less b/panikweb_templates/static/css/style.less
index f59f3ea4928ac49015525c7fac7f3f9269d7d27c..7df609ce5f303b5c119958ebf558a103fa863b1c 100644 (file)
--- a/panikweb_templates/static/css/style.less
+++ b/panikweb_templates/static/css/style.less
@@ -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

diff --git a/panikweb_templates/templates/emissions/detail.html b/panikweb_templates/templates/emissions/detail.html
index e391fef93ab54cfd91d56597488b7f09eb89aaae..1f19687985bb690cb95e4ac1706e31dcfc31e1fe 100644 (file)
--- a/panikweb_templates/templates/emissions/detail.html
+++ b/panikweb_templates/templates/emissions/detail.html
@@ -1,5 +1,5 @@
 
-<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>
 

diff --git a/panikweb_templates/templates/emissions/inline.html b/panikweb_templates/templates/emissions/inline.html
index 06051936d194758acc119986c2114934d4400f4c..1d0c70955b1bcb7c8b615ab63f18ee8528affb6c 100644 (file)
--- a/panikweb_templates/templates/emissions/inline.html
+++ b/panikweb_templates/templates/emissions/inline.html
@@ -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 %}

diff --git a/panikweb_templates/templates/episodes/detail.html b/panikweb_templates/templates/episodes/detail.html
index 8b0b615228a850ba453a7071934c9836022357fe..a7a3ffef369a967a4a02c9f5be3d2398a8d24e4f 100644 (file)
--- a/panikweb_templates/templates/episodes/detail.html
+++ b/panikweb_templates/templates/episodes/detail.html
@@ -1,42 +1,51 @@
-<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>
+-->
+<div class="episode episode-detail cf">
+    <div class="date">
         <div class="day">
-            ME
+            {{ episode.first_diffusion|date:"D"}}
         </div>
         <div class="day-number">
-            04
+            {{ episode.first_diffusion|date:"d/m" }}
         </div>
         <div class="time">
-            07:00
+            {{ episode.first_diffusion|date:"H:i" }}
         </div>
     </div>
-    <div class="header-outline">
-        <h4><a href="emission.html">Comédie sur un quai de gare et Apéros verts</a></h4>
-        <dl class="credits cf">
-            <dt>Serie</dt>
-            <dd>La musique</dd>
-            <dt>Auteur</dt>
-            <dd>Jean Dupont</dd>
-            <dt>Rediffusion</dt>
-            <dd>Émission de JetFM</dd>
-        </dl>
-        <ul class="tags">
-            <li>1955</li>
-            <li>RCA</li>
-            <li>Synthetiseur</li>
-            <li>Electronique</li>
-            <li>Harry Olson</li>
-            <li>1955</li>
-            <li>RCA</li>
-            <li>Synthetiseur</li>
-        </ul>
+    <div class="controls">
+        <div class="symbol" style="float:left;">A</div><div class=symbol>B</div>
+        <div class="symbol">I</div>
+        <div class="symbol">C</div>
     </div>
-    <div class="header-image">
+    <div class="logo">
         <img src="http://placehold.it/100X100" />
     </div>
-    <div class="header-controls">
-        <div class="symbols" style="float:left;">A</div><div class=symbols>B</div>
-        <div class="symbols">I</div>
-        <div class="symbols">C</div>
+    <div class="content">
+       <h4 class="title"><a href="{{ episode.slug }}">{{ episode.title }}</a></h4>
+       <div class="metas">
+               <dl class="credits cf">
+                   <dt>Serie</dt>
+                   <dd>La musique</dd>
+                   <dt>Auteur</dt>
+                   <dd>Jean Dupont</dd>
+                   <dt>Rediffusion</dt>
+                   <dd>Émission de JetFM</dd>
+               </dl>
+               <ul class="tags">
+                   <li>1955</li>
+                   <li>RCA</li>
+                   <li>Synthetiseur</li>
+                   <li>Electronique</li>
+                   <li>Harry Olson</li>
+                   <li>1955</li>
+                   <li>RCA</li>
+                   <li>Synthetiseur</li>
+               </ul>
+       </div>
     </div>
 </div>