move image next to title/metadata in episode pages

diff --git a/panikweb/static/css/_general.scss b/panikweb/static/css/_general.scss
index 81a6b90f4836a57d77b2fe4ad7d43642f576d6de..2a7d697499c602dd579845075fd96b05197353fb 100644 (file)
--- a/panikweb/static/css/_general.scss
+++ b/panikweb/static/css/_general.scss
@@ -44,7 +44,10 @@ img {max-width:100%;}
 img.logo{border:2px solid black;}
 
 header{
-       padding:0 0 2em 0;
+       padding: 0 0 2em 0;
+       @media screen and (max-width:760px){
+               padding: 0;
+       }
        font-family: 'RegloBold';
 }
 h1, h2, h3, h4, h5{

diff --git a/panikweb/static/css/_specifics.scss b/panikweb/static/css/_specifics.scss
index 1fdbb9d55ca52a367c5c7061c3cc971e7d3673b7..e06b27e05fee8db4881ab1b7e42d7f1e9c2efaf9 100644 (file)
--- a/panikweb/static/css/_specifics.scss
+++ b/panikweb/static/css/_specifics.scss
@@ -2220,3 +2220,17 @@ div#loading-page {
                display: none;
        }
 }
+
+.sound {
+       clear: both;
+}
+
+.episode.detail .episode-header {
+       @media screen and (max-width:760px){
+               img.logo {
+                       float: none;
+                       margin: 0;
+                       max-width: 100%;
+               }
+       }
+}

diff --git a/panikweb/templates/episodes/detail.html b/panikweb/templates/episodes/detail.html
index ebfd83ba4110cf371f15c948e7d9588abb29ddd3..59fe2540651eadb4aaa1f8fe707126affd4e51db 100644 (file)
--- a/panikweb/templates/episodes/detail.html
+++ b/panikweb/templates/episodes/detail.html
@@ -20,12 +20,19 @@
                </div>
        </div>
        {% endif %}
-       <header class="">
-               <h3 class="">{{ episode.title }}</h3>
+
+       <header class="episode-header">
+               {% if episode.image %}
+               {% thumbnail episode.image "640x480" crop="50% 25%" as im %}
+               <img class="logo right button" data-toggle-img="/media/{{episode.image}}" src="{{im.url}}"/>
+               {% endthumbnail %}
+               {% endif %}
+               <h3 class="episode-title">{{ episode.title }}</h3>
                {% if episode.subtitle %}
                <h3 class="episode-subtitle">{{ episode.subtitle }}</h3>
                {% endif %}
                {% if diffusions %}
+               <div class="episode-diffusions">
                {% if diffusions|length > 1 %}
                <div class="label">Diffusions</div>
                {% else %}
@@ -36,6 +43,7 @@
                                <li><span class="date">{{ schedule.datetime|date:"l d M Y à H:i" }}</span></li>
                        {% endfor %}
                </ul>
+               </div>
                {% endif %}
        </header>
        {% if episode.main_sound %}
@@ -44,11 +52,6 @@
                </div>
        {% endif %}
        <div class="content userContent marged">
-               {% if episode.image %}
-               {% thumbnail episode.image "640x480" crop="50% 25%" as im %}
-               <img class="logo right button" data-toggle-img="/media/{{episode.image}}" src="{{im.url}}"/>
-               {% endthumbnail %}
-               {% endif %}
                {% if episode.text %}
                <article class="text">
                        {{ episode.text|safe}}