2019: ajust for mobiles

diff --git a/panikweb_templates/static/css/_general.scss b/panikweb_templates/static/css/_general.scss
index 4158e3140273014774251276f2f018982e737fdf..7b1068a37e7ed8778a31fb6019e81452b9a09a41 100644 (file)
--- a/panikweb_templates/static/css/_general.scss
+++ b/panikweb_templates/static/css/_general.scss
@@ -40,7 +40,7 @@ button, .button{
        cursor:pointer ;
        background:none;
 }
-img {max-width:100%; max-height: 100%;}
+img {max-height: 100%;}
 
 header{
        padding:0 0 2em 0;

diff --git a/panikweb_templates/static/css/_specifics.scss b/panikweb_templates/static/css/_specifics.scss
index d747a790f7069f9d821025ace24d913c66e84ec3..1f6e762dd29f19962796ec06042c26ed52c40cca 100644 (file)
--- a/panikweb_templates/static/css/_specifics.scss
+++ b/panikweb_templates/static/css/_specifics.scss
@@ -21,17 +21,21 @@ $pink: #f9025a;
 %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;
+       .img {
+               display: inline-block;
                height: 100%;
-       }
-       &:hover::before {
-               background: url(../img/bloc_black_on.jpg);
+               width: 100%;
+               &::before {
+                       content: "";
+                       display: block;
+                       position: absolute;
+                       background: url(../img/bloc_black_off.jpg) top left no-repeat;
+                       width: 15px;
+                       height: 100%;
+               }
+               &:hover::before {
+                       background: url(../img/bloc_black_on.jpg);
+               }
        }
 }
 
@@ -328,6 +332,9 @@ body{
        position: relative;
        z-index: 5;
        height: 290px;
+       @media screen and (max-width: $size_m) {
+               height: 200px;
+       }
 }
 #Commons .wrapper{
 }
@@ -336,6 +343,11 @@ body{
        background: url(../img/logo_radio_espe.png) bottom left no-repeat;
        height: 192px;
        width: 342px;
+       @media screen and (max-width: $size_m) {
+               max-width: 90%;
+               max-width: 90vw;
+               background-size: contain;
+       }
 }
 #Player {
        display: inline-block;
@@ -356,16 +368,6 @@ body{
        opacity: 1.0;
 }
 
-@media screen and (max-width: $size_m) {
-       #mainHeader {
-               display: block;
-       }
-       #All h1.top {
-               font-size: 60px;
-               text-align: center;
-       }
-}
-
 #Changing {
        background: white;
        margin-bottom: 22px;
@@ -738,6 +740,8 @@ h1.top#frequence {
        z-index: 10;
        @media screen and (max-width: $size_m) {
                z-index: 1;
+               width: auto;
+               margin: 0 1rem;
        }
 }
 #Main >.wrapper{
@@ -1965,16 +1969,23 @@ div.emission-tile {
        box-sizing: border-box;
        width: 25%;
        padding-bottom: 20px;
-       @media screen and (max-width: $size_m) {
-               width: 50%;
-               height: 50vw;
-       }
        float: left;
+       @media screen and (max-width: $size_s) {
+               width: calc(50% - 1rem);
+               &:nth-child(2n+1) {
+                       margin-right: 1rem;
+               }
+               height: 320px;
+       }
+       overflow: hidden;
        div.image {
                border: none;
                height: 300px;
                width: 230px;
                @extend %image-bordure;
+               @media screen and (max-width: $size_s) {
+                       height: 260px;
+               }
        }
        div.name {
                margin-top: 10px;
@@ -2013,6 +2024,13 @@ div.emission-detail {
                background-color: $mauve;
                color: white;
        }
+       @media screen and (max-width: $size_s) {
+               top: 0;
+               left: 0;
+               br {
+                       display: none;
+               }
+       }
 }
 
 #instagram,
@@ -2030,6 +2048,9 @@ div.emission-detail {
        &:hover {
                background-color: $red;
        }
+       @media screen and (max-width:$size_m) {
+               display: none;
+       }
 }
 
 #twitter {
@@ -2124,6 +2145,12 @@ div.emission-detail {
                        height: 300px;
                        width: 450px;
                        @extend %image-bordure;
+                       @media screen and (max-width: $size_s) {
+                               float: none;
+                               max-width: 100%;
+                               overflow: hidden;
+                               height: 260px;
+                       }
                }
                padding-top: 2rem;
                box-sizing: border-box;
@@ -2138,6 +2165,10 @@ div.emission-detail {
                        bottom: -3px;
                        right: 0;
                        width: 540px;
+                       @media screen and (max-width: $size_m) {
+                               position: static;
+                               width: 100%;
+                       }
                        button.action-play {
                                font-weight: bold;
                        }
@@ -2273,6 +2304,9 @@ div#header_date {
         color: $red;
         top: 63px;
         left: 135px;
+       @media screen and (max-width:$size_m){
+               display: none;
+       }
 }
 
 h2.top {

diff --git a/panikweb_templates/static/css/style.scss b/panikweb_templates/static/css/style.scss
index f2b88f46ac46525fa93f8a25b5b2f4f71b9beeff..292da8c2813c5ae1b5c118a743ce0f69fc8a533e 100644 (file)
--- a/panikweb_templates/static/css/style.scss
+++ b/panikweb_templates/static/css/style.scss
@@ -1,5 +1,5 @@
 $size_m: 1000px;
-$size_s: 450px;
+$size_s: 600px;
 
 $very-small-limit: 400px;
 $mobile-limit: 760px;

diff --git a/panikweb_templates/templates/archives.html b/panikweb_templates/templates/archives.html
index 1f840b28d91d87d3e94daffe57eeb0dbe2db3577..697e667c2e56e4cce598fff76c066dbb6a7273b3 100644 (file)
--- a/panikweb_templates/templates/archives.html
+++ b/panikweb_templates/templates/archives.html
@@ -26,9 +26,13 @@
 {% for diffusion in diffusion_group.list %}
        <a href="{% url 'episode-view' emission_slug=diffusion.episode.emission.slug slug=diffusion.episode.slug %}">
                <div class="image">
+                        <div class="img">
                        {% thumbnail diffusion.episode.image "400x400" crop="50% 50%" as im %}
                        <img src="{{im.url}}">
+                        {% empty %}
+                        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" height="400" width="400">
                        {% endthumbnail %}
+                        </div>
                </div>
                <div class="name"><span>{{ diffusion.episode.title }}</span></div>
        </a>

diff --git a/panikweb_templates/templates/emissions/emission_detail.html b/panikweb_templates/templates/emissions/emission_detail.html
index 6ec52e98cdc8d10a8d6daacfe7ed07abbab63bf8..200ba12f2f1464ff98e16624093270cef0cc69e0 100644 (file)
--- a/panikweb_templates/templates/emissions/emission_detail.html
+++ b/panikweb_templates/templates/emissions/emission_detail.html
@@ -51,9 +51,13 @@
                {% endif %}
        <div class="emission-info">
                 <div class="image">
+                        <div class="img">
                        {% thumbnail emission.image "450x300" crop="50% 50%" as im %}
-                       <img src="{{im.url}}">
+                        <img src="{{im.url}}">
+                        {% empty %}
+                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8nez3HwAGugKtHMIYIwAAAABJRU5ErkJggg==" height="300" width="450">
                        {% endthumbnail %}
+                        </div>
                </div>
 
                <div class="emission-text">
@@ -64,9 +68,13 @@
                {% for episode in all_episodes %}
                <a href="{% url 'episode-view' emission_slug=episode.emission.slug slug=episode.slug %}">
                        <div class="image">
+                                <div class="img">
                                {% thumbnail episode.image "240x200" crop="50% 50%" as im %}
                                <img src="{{im.url}}">
+                                {% empty %}
+                                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8nez3HwAGugKtHMIYIwAAAABJRU5ErkJggg==" height="300" width="240">
                                {% endthumbnail %}
+                                </div>
                        </div>
                        <div class="name"><span>{{ episode.title }}</span></div>
                        <div class="time"><span>

diff --git a/panikweb_templates/templates/emissions/episode_detail.html b/panikweb_templates/templates/emissions/episode_detail.html
index 6a6f870c9d1ca711549ccd2989c911458b712f0e..823062c3f8350ee6bfad40496657c887873c3125 100644 (file)
--- a/panikweb_templates/templates/emissions/episode_detail.html
+++ b/panikweb_templates/templates/emissions/episode_detail.html
@@ -46,9 +46,13 @@
 
        <div class="episode-info">
                <div class="image">
+                        <div class="img">
                        {% thumbnail episode.image "450x300" crop="50% 50%" as im %}
-                       <img src="{{im.url}}">
+                        <img src="{{im.url}}">
+                        {% empty %}
+                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8nez3HwAGugKtHMIYIwAAAABJRU5ErkJggg==" height="300" width="450">
                        {% endthumbnail %}
+                        </div>
                </div>
                 <div class="emission-text">
                {% if episode.subtitle %}

diff --git a/panikweb_templates/templates/home.html b/panikweb_templates/templates/home.html
index a111a14f8308eeb17515d6c5bd03374bc80ed80c..631f08ec1bdbbb2a315ceb78cb332f12ba9462f7 100644 (file)
--- a/panikweb_templates/templates/home.html
+++ b/panikweb_templates/templates/home.html
@@ -28,14 +28,19 @@
            {% endif %}
 
 
+            <div>
            {% spaceless %}
            {% for emission in emissions %}
            <div class="emission-tile {% if emission.has_focus %}emission-focus{% endif %}">
              <a href="{% url 'emission-view' slug=emission.slug %}">
                    <div class="image">
+                            <div class="img">
                        {% thumbnail emission.image "230x300" crop="50% 50%" as im %}
-                       <img src="{{im.url}}">
+                        <img src="{{im.url}}">
+                        {% empty %}
+                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8nez3HwAGugKtHMIYIwAAAABJRU5ErkJggg==" height="300" width="230">
                        {% endthumbnail %}
+                            </div>
                    </div>
              </a>
              <div class="name"><span>{{emission.title}}</span></div>
@@ -50,9 +55,13 @@
            <div class="emission-tile">
            <a href="{{page.get_online_url}}">
                    <div class="image">
+                            <div class="img">
                        {% thumbnail page.picture "230x300" crop="50% 50%" as im %}
-                       <img src="{{im.url}}">
+                        <img src="{{im.url}}">
+                        {% empty %}
+                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8nez3HwAGugKtHMIYIwAAAABJRU5ErkJggg==" height="300" width="230">
                        {% endthumbnail %}
+                            </div>
                    </div>
            </a>
                    <div class="name"><span>{{page.title}}</span></div>
@@ -62,6 +71,7 @@
            </div>
            {% endfor %}
            {% endspaceless %}
+            </div>
 
     </div>
 </div>

diff --git a/panikweb_templates/templates/panikombo/episode_auto_selection.html b/panikweb_templates/templates/panikombo/episode_auto_selection.html
index 2de649c16f4ef798f29b165d3781d58371775812..a9eedfc34b3240e3c6de830be0d3a82a76dc499d 100644 (file)
--- a/panikweb_templates/templates/panikombo/episode_auto_selection.html
+++ b/panikweb_templates/templates/panikombo/episode_auto_selection.html
@@ -5,9 +5,13 @@
        <div class="emission-tile">
                 <a href="{% url 'episode-view' emission_slug=episode.emission.slug slug=episode.slug %}">
                <div class="image">
+                        <div class="img">
                        {% thumbnail episode.image "230x300" crop="50% 50%" as im %}
-                       <img src="{{im.url}}">
+                        <img src="{{im.url}}">
+                        {% empty %}
+                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8nez3HwAGugKtHMIYIwAAAABJRU5ErkJggg==" height="300" width="230">
                        {% endthumbnail %}
+                        </div>
                </div>
                 </a>
                <div class="name"><span>{{episode.title}}</span></div>