2019: style emission/episode pages

diff --git a/panikweb_templates/static/css/_general.scss b/panikweb_templates/static/css/_general.scss
index 3a0ba9848b4618d62586a13af163c7633ec38167..4158e3140273014774251276f2f018982e737fdf 100644 (file)
--- a/panikweb_templates/static/css/_general.scss
+++ b/panikweb_templates/static/css/_general.scss
@@ -53,7 +53,7 @@ h1, h2, h3, h4{
        text-transform: uppercase;
 }
 h1 {   font-size: 6em;}
-h2 {   font-size: 4em;}
+h2 {   font-size: 40px;}
 h3 {   font-size: 3em;}
 h4 {   font-size: 1.8em;}
 h5 {   font-size: 1.1em;}

diff --git a/panikweb_templates/static/css/_specifics.scss b/panikweb_templates/static/css/_specifics.scss
index ae5d02c71c6d62197b76eb16139fca23de9dccba..b9181194c9d01234eada0c4dcaf1f425d74807c5 100644 (file)
--- a/panikweb_templates/static/css/_specifics.scss
+++ b/panikweb_templates/static/css/_specifics.scss
@@ -10,6 +10,28 @@ $red: #fb634e;
 $orange: #ff8b57;
 $pink: #f9025a;
 
+
+%text {
+       font-family: Roboto, sans-serif;
+       font-size: 16px;
+       color: #5d5d5d;
+       text-align: justify;
+}
+
+%image-bordure {
+       position: relative;
+       padding-bottom: 0;
+       background: $red;
+       &::before {
+               content: "";
+               display: block;
+               position: absolute;
+               background: url(../img/bloc_black_off.jpg) top left no-repeat;
+               width: 15px;
+               height: 100%;
+       }
+}
+
 /****************************************************/
 /* FONTS */
 
@@ -52,17 +74,6 @@ $pink: #f9025a;
        margin-bottom:1em;
 }
 
-.sectionLabel, .label {
-    text-transform: uppercase;
-    font-size:1.3em;
-}
-
-.rightPart .right.sectionLabel {
-       text-transform: none;
-       border-bottom: 1px solid black;
-       padding-bottom: 3px;
-}
-
 h5.focus-title {
        color: $secondary;
 }
@@ -313,7 +324,7 @@ body{
 #Commons{
        position: relative;
        z-index: 5;
-       height: 200px;
+       height: 250px;
 }
 #Commons .wrapper{
 }
@@ -719,7 +730,7 @@ h1.top#frequence {
 
 #Main{
        margin: 0 auto;
-       max-width: 1010px;
+       width: 1010px;
        flex-grow: 1;
        position: relative;
        z-index: 10;
@@ -805,73 +816,6 @@ h1.top#frequence {
 .inline .link{display:block;padding:1em;}
 /**** Liste   ****/
 /**** EMISSIONS ****/
-#Emission .emission-detail .title{}
-/*
-*/
-#Emission-tabs-menu .sub{
-       margin-bottom:1em;
-}
-/**** Detail   ****/
-.emission-detail .metas{
-       line-height:1.5em;
-       float: left;
-       width: 49%;
-       margin-top: 0;
-}
-
-.emission-detail h4.subtitle {
-       margin-top: 1em;
-       font-weight: normal;
-       text-transform: none;
-       float: left;
-}
-
-.emission-detail ul.schedule {
-       margin-top: 0;
-       margin-bottom: 1em;
- }
-
-.emission-detail ul.schedule .weekdiff {
-       font-size: 80%;
-}
-
-.emission-detail article {
-       clear: both;
-}
-
-.emission-detail .logo{
-       float:right;
-       width: 50%;
-       margin-bottom: 1ex;
-}
-.emission .mainHeader {
-    overflow: hidden;
-    margin-bottom:1.5em;
-}
-
-.emission .contacts {
-       clear: both;
-}
-
-/**** Inline   ****/
-.emission.inline, .emission.resume {
-       padding:1em 0 1em 0;
-}
-
-.emission.inline div.date {
-       min-height: 3em;
-       text-align: center;
-       display:inline-block;
-       float:left;
-       margin-right:1em;
-}
-.emission .archived {
-       opacity:0.6;
-}
-
-.emission .link .description {
-       margin: 0px 0 5px 0;
-}
 
 
 /**** EPISODE ****/
@@ -1474,27 +1418,26 @@ h3.episode-subtitle {
 }
 
 .waveform span {
-       background: $primary;
-       background: linear-gradient(to top, darken($primary, 20%) 0%, $primary 40%);
+       background: $orange;
+       background: linear-gradient(to top, darken($orange, 20%) 0%, $orange 40%);
        display: inline-block;
        width: 0.50%;
 }
 
 .waveform span.done {
-       background: linear-gradient(to top, #3A3A3A 0%, #858585 80%);
-       background: linear-gradient(to top, darken($primary, 5%) 0%, darken($secondary, 10%) 100%);
+       background: linear-gradient(to top, darken($red, 5%) 0%, darken($red, 10%) 100%);
 }
 
 .waveform span.done.current + span {
-       background: $yellow;
+       background: $red;
 }
 
 .waveform i.duration {
        position: absolute;
        right: 4px;
        bottom: 4px;
-       color: $yellow;
-       text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
+       color: black;
+       opacity: 0.5;
        font-style: normal;
        font-weight: bold;
 }
@@ -2047,9 +1990,8 @@ div.emission-tile {
                }
        }
        div.tags {
-               font-family: Roboto, sans-serif;
+               @extend %text;
                font-size: 12px;
-               color: #5d5d5d;
                text-transform: lowercase;
        }
 }
@@ -2157,9 +2099,7 @@ div#actu {
                padding-bottom: 10px;
        }
        div {
-               font-family: Roboto, sans-serif;
-               font-size: 16px;
-               color: #5d5d5d;
+               @extend %text;
        }
        @media screen and (max-width: $size_m) {
                display: block;
@@ -2173,80 +2113,35 @@ div#actu {
 }
 
 div.emission-detail {
-       &::before {
-               content: "";
-               height: 12px;
-               display: block;
-               width: 100%;
-               position: absolute;
-               top: 0;
+       h2 {
+               font-weight: bold;
        }
-       padding-top: 12px;
-       padding-bottom: 14px;
-       display: flex;
-       flex-direction: row;
-       @media screen and (max-width: $size_m) {
-               flex-wrap: wrap;
-       }
-       div.emission-tile {
-               @media screen and (max-width: $size_s) {
-                       width: 100%;
-                       height: 100vw;
-               }
-       }
-       > a {
-               width: 25%;
-               @media screen and (max-width: $size_m) {
-                       width: 50%;
-               }
-               @media screen and (max-width: $size_s) {
-                       width: 100%;
-                       height: 100vw;
-               }
-               div.emission-tile {
-                       width: 100%;
-               }
+       .schedule {
+               color: $orange;
+               text-transform: none;
        }
        div.episode-info,
        div.emission-info {
-               width: 25%;
-               @media screen and (max-width: $size_m) {
-                       width: 50%;
-               }
-               @media screen and (max-width: $size_s) {
-                       width: 100%;
-                       height: auto;
+               div.image {
+                       float: left;
+                       margin-right: 1rem;
+                       height: 300px;
+                       width: 450px;
+                       @extend %image-bordure;
                }
+               padding-top: 2rem;
                box-sizing: border-box;
-               padding: 1ex;
                div.emission-text {
-                       font-size: 110%;
-               }
-       }
-       &.emission-episode div.emission-info {
-               @media screen and (max-width: $size_m) {
-                       width: 100%;
+                       @extend %text;
                }
        }
        div.episode-info {
                position: relative;
-               width: 50%;
-               @media screen and (max-width: $size_m) {
-                       width: 100%;
-               }
-               div.emission-text {
-                       max-width: 50ex;
-               }
-               @media screen and (max-width: $size_m) {
-                       padding-bottom: 150px;
-               }
                div.sound {
                        position: absolute;
-                       bottom: 1ex;
-                       width: 48vw;
-                       @media screen and (max-width: $size_m) {
-                               width: 95vw;
-                       }
+                       bottom: -3px;
+                       right: 0;
+                       width: 540px;
                        button.action-play {
                                font-weight: bold;
                        }
@@ -2258,10 +2153,8 @@ div.emission-detail {
 }
 
 div.emission-episodes {
-       width: 50%;
-       @media screen and (max-width: $size_m) {
-               width: 100%;
-       }
+       clear: both;
+       padding-top: 2rem;
        ul, li {
                margin: 0;
                padding: 0;
@@ -2270,51 +2163,19 @@ div.emission-episodes {
        a {
                box-sizing: border-box;
                position: relative;
-               height: 12.5vw;
-               width: 25%;
-               @media screen and (max-width: $size_m) {
-                       height: 50vw;
-                       width: 50%;
-               }
+               width: 240px;
+               margin-right: 10px;
                display: inline-block;
+               margin-bottom: 1rem;
                float: left;
                div.image {
-                       //filter: grayscale(100%);
-                       box-sizing: border-box;
-                       padding: 1rem;
-                       background: url(../img/big-flower.png);
-                       background-clip: content-box;
-                       border: none;
-                       height: 100%;
-                       width: 100%;
-                       img {
-                               width: 100%;
-                               height: 100%;
-                       }
+                       height: 200px;
+                       @extend %image-bordure;
                }
                div.time {
-                       position: absolute;
-                       top: 0;
-                       left: 10px;
-                       font-size: 14px;
-                       display: inline-block;
-                       background: $yellow;
-                       color: $secondary;
-                       padding: 0 0.5ex;
+                       @extend %text;
                }
                div.name {
-                       position: absolute;
-                       text-transform: uppercase;
-                       top: 50%;
-                       margin-top: -10px;
-                       font-size: 20px;
-                       text-align: center;
-                       width: 100%;
-                       span {
-                               background: $primary;
-                               color: white;
-                               padding: 5px 5px;
-                       }
                }
        }
        a:hover img {
@@ -2371,10 +2232,12 @@ div#Playlist {
 }
 
 #back-home {
-       text-transform: uppercase;
+       text-transform: lowercase;
        display: block;
-       text-align: right;
-       padding: 1ex;
+       text-align: left;
+       color: $pink;
+       padding-bottom: 2rem;
+       font-size: 16px;
 }
 
 .playing button.no-icon-remove::after {

diff --git a/panikweb_templates/templates/emissions/emission_detail.html b/panikweb_templates/templates/emissions/emission_detail.html
index 4a4a977ab1fc5a770a04009c3f7aeaa5fb5094b4..9eaaab05c6e51ed1a3acf263f5cc525d7bbae698 100644 (file)
--- a/panikweb_templates/templates/emissions/emission_detail.html
+++ b/panikweb_templates/templates/emissions/emission_detail.html
@@ -33,15 +33,8 @@
 
 {% block main %}
 <div class="emission emission-detail">
-       <div class="emission-tile">
-               <div class="image">
-                       {% thumbnail emission.image "400x400" crop="50% 50%" as im %}
-                       <img src="{{im.url}}">
-                       {% endthumbnail %}
-               </div>
-               <div class="name"><span>{{emission.title}}</span></div>
-       </div>
-       <div class="emission-info">
+        <a id="back-home" href="/">&lt; Revenir sur la page d'accueil</a>
+        <div class="name"><h2>{{emission.title}}</h2></div>
                {% if schedules %}
                        <ul class="schedule custom">
                                {% for schedule in schedules %}
@@ -56,6 +49,13 @@
                                {% endfor %}
                        </ul>
                {% endif %}
+       <div class="emission-info">
+                <div class="image">
+                       {% thumbnail emission.image "450x300" crop="50% 50%" as im %}
+                       <img src="{{im.url}}">
+                       {% endthumbnail %}
+               </div>
+
                <div class="emission-text">
                {{ emission.text|safe}}
                </div>
@@ -64,19 +64,18 @@
                {% for episode in all_episodes %}
                <a href="{% url 'episode-view' emission_slug=episode.emission.slug slug=episode.slug %}">
                        <div class="image">
-                               {% thumbnail episode.image "400x400" crop="50% 50%" as im %}
+                               {% thumbnail episode.image "240x200" crop="50% 50%" as im %}
                                <img src="{{im.url}}">
                                {% endthumbnail %}
                        </div>
+                       <div class="name"><span>{{ episode.title }}</span></div>
                        <div class="time"><span>
                                        {% if schedules|length > 1 %}
                                        {{ episode.first_diffusion|date:"l" }}
                                        {% endif %}
                                        {{ episode.first_diffusion|date:"H:i" }}</span></div>
-                       <div class="name"><span>{{ episode.title }}</span></div>
                </a>
                {% endfor %}
        </div>
 </div>
-<a id="back-home" href="/">Revenir sur la page d'accueil</a>
 {% endblock %}

diff --git a/panikweb_templates/templates/emissions/episode_detail.html b/panikweb_templates/templates/emissions/episode_detail.html
index 2faa68f813c25dc6bc0190e44395ba70dca0fba8..4b0f646b6ffe61da5f9e2b4c0722b67940489e35 100644 (file)
--- a/panikweb_templates/templates/emissions/episode_detail.html
+++ b/panikweb_templates/templates/emissions/episode_detail.html
@@ -33,59 +33,37 @@
 
 {% block main %}
 <div class="emission emission-detail emission-episode">
-       <a href="{% url 'emission-view' slug=emission.slug %}">
-       <div class="emission-tile">
-               <div class="image">
-                       {% thumbnail emission.image "400x400" crop="50% 50%" as im %}
-                       <img src="{{im.url}}">
-                       {% endthumbnail %}
-               </div>
-               <div class="name"><span>{{emission.title}}</span></div>
-       </div>
-       </a>
+        <a id="back-home" href="{% url 'emission-view' slug=episode.emission.slug %}">&lt; {{episode.emission.title}}</a>
+        <div class="name"><h2>{{episode.title}}</h2></div>
+        {% if diffusions %}
+               <ul class="schedule custom">
+                       {% for schedule in diffusions %}
+                               <li><span>{{ schedule.datetime|date:"l d F Y à H:i" }}</span></li>
+                       {% endfor %}
+               </ul>
+        {% endif %}
 
-       <div class="emission-tile">
+
+       <div class="episode-info">
                <div class="image">
-                       {% thumbnail episode.image "400x400" crop="50% 50%" as im %}
+                       {% thumbnail episode.image "450x300" crop="50% 50%" as im %}
                        <img src="{{im.url}}">
                        {% endthumbnail %}
                </div>
-               <div class="name"><span>{{episode.title}}</span></div>
-       </div>
-
-       <div class="episode-info">
-
+                <div class="emission-text">
                {% if episode.subtitle %}
                <h3 class="episode-subtitle">{{ episode.subtitle }}</h3>
                {% endif %}
-               <ul class="schedule custom">
-                       {% for schedule in diffusions %}
-                               <li><span class="date">{{ schedule.datetime|date:"l d F Y à H:i" }}</span></li>
-                       {% endfor %}
-               </ul>
-       <div class="emission-text">
                {{ episode.text|safe}}
-        </div>
-
-       {% if episode.main_sound %}
-               <div class="sound">
-                       {% audio sound=episode.main_sound %}
-               </div>
-       {% endif %}
+                </div>
 
-       {% if soundfiles.count %}
-       <div class="wrapper extra-soundfiles">
-               <h3>Fragments sonores</h3>
-               <ul class="padded custom list">
-       {% for soundfile in soundfiles %}
-       <li><strong>{{ soundfile.title }}</strong> {% audio sound=soundfile %}
-       </li>
-       {% endfor %}
-               </ul>
-       </div>
-       {% endif %}
+                {% if episode.main_sound %}
+                        <br style="clear: both">
+                        <div class="sound">
+                                {% audio sound=episode.main_sound %}
+                        </div>
+                {% endif %}
        </div>
 
 </div>
-<a id="back-home" href="/">Revenir sur la page d'accueil</a>
 {% endblock %}