adjust mobile/tablet switching sizes

diff --git a/panikweb_templates/static/css/_specifics.scss b/panikweb_templates/static/css/_specifics.scss
index 60f38d496ebb55ca4e9a7bc60ec4cc651f326b2a..6d19782ecff0b1b2bd8fdc9a2cffe967b19fa908 100644 (file)
--- a/panikweb_templates/static/css/_specifics.scss
+++ b/panikweb_templates/static/css/_specifics.scss
@@ -92,7 +92,7 @@ h5.focus-title {
 .wrapper.text {max-width: 780px; margin:auto;}
 .wrapper .rightPart{margin-top:1em;}
 
-@media screen and (min-width: 760px) {
+@media screen and (min-width: $size_m) {
        #player-container.fixed {
                position: fixed;
                top: 50px;
@@ -278,7 +278,7 @@ body{
        color: orange;
 }
 
-@media screen and (max-width:760px){
+@media screen and (max-width:$size_m){
        #bg-title { display: none; }
        #metaNav .iconLabel {display:none;}
        #metaNav ul li a span.nav-icon { display: inline-block; }
@@ -295,14 +295,6 @@ body{
                padding: 0.2em 0 0 1em;
        }
 }
-@media screen and (max-width:400px){
-       #metaNav ul li#nav-language {
-               padding: 0.2em 0 0 1ex;
-       }
-       #metaNav ul li a {
-               padding: 0 1ex;
-       }
-}
 
 /****************************************************/
 /**** Commons ****/
@@ -346,7 +338,7 @@ body{
        opacity: 1.0;
 }
 
-@media screen and (max-width: 760px) {
+@media screen and (max-width: $size_m) {
        #mainHeader {
                display: block;
        }
@@ -361,7 +353,7 @@ body{
        margin-bottom: 22px;
 }
 
-@media screen and (min-width: 760px) {
+@media screen and (min-width: $size_m) {
        #Commons {
                box-sizing: border-box;
                padding: 0 20px;
@@ -566,7 +558,7 @@ h1.top#frequence {
 }
 #DirectStreamPanikControler div.label {
        margin-top: -10px;
-       @media screen and (max-width: 760px) {
+       @media screen and (max-width: $size_m) {
                margin-top: 0;
        }
 }
@@ -582,7 +574,7 @@ h1.top#frequence {
 }
 #CurrentlyPlaying{
        padding:0 0 0 0;
-       @media screen and (max-width: 760px) {
+       @media screen and (max-width: $size_m) {
                margin-top: -5px;
        }
 }
@@ -636,7 +628,7 @@ h1.top#frequence {
        float:left;
        position: relative;
        top: -8px;
-       @media screen and (max-width: 760px) {
+       @media screen and (max-width: $size_m) {
                top: -2px;
        }
 }
@@ -674,7 +666,7 @@ h1.top#frequence {
        overflow: hidden;
 }
 
-@media screen and (max-width: 760px) {
+@media screen and (max-width: $size_m) {
         #backgroundBox {
                 background-position: center 30px;
         }
@@ -782,7 +774,7 @@ h1.top#frequence {
                text-align: center;
        }
 
-       @media screen and (max-width: 760px) {
+       @media screen and (max-width: $size_m) {
                padding-bottom: 30px;
        }
 }
@@ -831,14 +823,6 @@ h1.top#frequence {
        width: 50%;
        margin-bottom: 1ex;
 }
-@media screen and (max-width: 300px) {
-       .emission-detail .metas {
-               float: none;
-               width: auto;
-               margin: 0;
-       }
-       .emission-detail .logo{max-width:100%;}
-}
 .emission .mainHeader {
     overflow: hidden;
     margin-bottom:1.5em;
@@ -985,17 +969,6 @@ div.extra-soundfiles ul strong {
        padding-right: 3em;
 }
 
-@media screen and (max-width: 400px) { 
-       .episode .dateBloc{
-               width:4em;
-               font-size:80%
-       }
-
-       .episode.resume .content {
-               padding-left: 4em;
-       }
-}
-
 /****************************************************/
 /**** News ****/
 
@@ -1061,10 +1034,6 @@ div.extra-soundfiles ul strong {
 ul.newsSpecial{
        border-bottom:3px solid #ccc;
 }
-@media only screen and (max-width: 970px) {
-       .columns {column-count: 1;      -webkit-column-count: 1;        -moz-column-count: 1;}
-}
-
 
 /****************************************************/
 /**** Home & ****/
@@ -1075,19 +1044,6 @@ ul.newsSpecial{
        width:auto !important;
 }
 
-/*
-@media screen and (max-width:800px){
-       #Home .newsRoll .logo{
-               max-width:100px;
-       }
-}
-@media screen and (max-width:600px){
-       #Home .newsRoll .logo{
-               max-width:50px;
-       }
-}
-*/
-
 /****************************************************/
 /**** PROGRAM ****/
 /****************************************************/
@@ -1307,11 +1263,11 @@ body { font-size: 18px;}
     body #All{ font-size: 85%; }
 }
 
-@media (min-width: 700px) and (max-width:1000px){
+@media (min-width: 800px) and (max-width:$size_m){
     body #All{ font-size: 90%; }
 }
 
-@media (min-width: 1000px) {
+@media (min-width: $size_m) {
     body #All{ font-size: 100%; }
 }
 
@@ -1447,7 +1403,7 @@ div.userContent a { text-decoration: underline; }
 
 div.userContent a.tag { text-decoration: none; }
 
-@media screen and (max-width: 760px) {
+@media screen and (max-width: $size_m) {
        #streamSymbol{
                top: 0;
        }
@@ -1678,7 +1634,7 @@ div.portrait div.gallery span.gallery-legend {
        margin-top: 330px;
 }
 
-@media screen and (max-width: 640px) {
+@media screen and (max-width: $size_m) {
        div.portrait div.gallery div.first img,
        div.gallery div.first img {
                max-width: 80vw;
@@ -1742,15 +1698,6 @@ div.topikcellcontent h2 {
        font-size: 3.5em;
 }
 
-@media only screen and (min-width: 1250px) {
-       div.topikcellcontent a {
-               display: inline-block;
-               text-align: left;
-               width: 50%;
-               float: left;
-       }
-}
-
 .program-week img.smooth {
        padding-bottom: 0;
 }
@@ -1868,7 +1815,7 @@ div.commands {
        width: 90vw;
 }
 
-@media screen and (min-width:760px){
+@media screen and (min-width:$size_m){
        div.commands {
                width: calc(90vw - 240px);
        }
@@ -1920,7 +1867,7 @@ div.chat-area {
        color: #666;
 }
 
-@media screen and (max-width: 760px) {
+@media screen and (max-width: $size_m) {
     #chat span.from {
         display: block;
         position: static;
@@ -1948,7 +1895,7 @@ div.top-logo img {
        border: 2px solid black;
 }
 
-@media screen and (max-width:760px){
+@media screen and (max-width:$size_m){
        div.top-logo {
                display: none;
        }
@@ -2020,7 +1967,7 @@ div.emission-tile {
        box-sizing: border-box;
        width: 25%;
        height: 25vw;
-       @media screen and (max-width: 760px) {
+       @media screen and (max-width: $size_m) {
                width: 50%;
                height: 50vw;
        }
@@ -2132,7 +2079,7 @@ div#actu {
                font-size: 22px;
                max-width: 50ex;
        }
-       @media screen and (max-width: 760px) {
+       @media screen and (max-width: $size_m) {
                display: block;
                > h2 {
                        text-align: center;
@@ -2148,14 +2095,24 @@ div.emission-detail {
        padding-bottom: 14px;
        display: flex;
        flex-direction: row;
-       @media screen and (max-width: 760px) {
+       @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: 760px) {
+               @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%;
                }
@@ -2163,9 +2120,13 @@ div.emission-detail {
        div.episode-info,
        div.emission-info {
                width: 25%;
-               @media screen and (max-width: 760px) {
+               @media screen and (max-width: $size_m) {
                        width: 50%;
                }
+               @media screen and (max-width: $size_s) {
+                       width: 100%;
+                       height: auto;
+               }
                box-sizing: border-box;
                padding: 1ex;
                div.emission-text {
@@ -2173,27 +2134,27 @@ div.emission-detail {
                }
        }
        &.emission-episode div.emission-info {
-               @media screen and (max-width: 760px) {
+               @media screen and (max-width: $size_m) {
                        width: 100%;
                }
        }
        div.episode-info {
                position: relative;
                width: 50%;
-               @media screen and (max-width: 760px) {
+               @media screen and (max-width: $size_m) {
                        width: 100%;
                }
                div.emission-text {
                        max-width: 50ex;
                }
-               @media screen and (max-width: 760px) {
+               @media screen and (max-width: $size_m) {
                        padding-bottom: 150px;
                }
                div.sound {
                        position: absolute;
                        bottom: 1ex;
                        width: 48vw;
-                       @media screen and (max-width: 760px) {
+                       @media screen and (max-width: $size_m) {
                                width: 95vw;
                        }
                        button.action-play {
@@ -2209,7 +2170,7 @@ div.emission-detail {
 div.emission-episodes {
        width: 50%;
        background: $yellow;
-       @media screen and (max-width: 760px) {
+       @media screen and (max-width: $size_m) {
                width: 100%;
        }
        ul, li {
@@ -2221,7 +2182,7 @@ div.emission-episodes {
                position: relative;
                height: 12.5vw;
                width: 25%;
-               @media screen and (max-width: 760px) {
+               @media screen and (max-width: $size_m) {
                        height: 50vw;
                        width: 50%;
                }
@@ -2272,7 +2233,7 @@ div#Playlist {
                position: absolute;
                left: 66px;
                top: -10px;
-               @media screen and (max-width: 760px) {
+               @media screen and (max-width: $size_m) {
                        top: 0;
                }
        }
@@ -2280,7 +2241,7 @@ div#Playlist {
                padding-top: 25px;
                margin-left: 32px;
                list-style: none;
-               @media screen and (max-width: 760px) {
+               @media screen and (max-width: $size_m) {
                        margin-left: 36px;
                }
        }

diff --git a/panikweb_templates/static/css/style.scss b/panikweb_templates/static/css/style.scss
index 2b9c8170ded5efe5e37ba5af330544abff8edd2e..39501ca79fc01ab62a992eb7634a7b33727d89a3 100644 (file)
--- a/panikweb_templates/static/css/style.scss
+++ b/panikweb_templates/static/css/style.scss
@@ -1,3 +1,6 @@
+$size_m: 1000px;
+$size_s: 450px;
+
 @import 'data_uris';
 @import 'reset';
 @import 'type';