style: a little bit of responsiveness

diff --git a/panikweb_templates/static/css/_general.scss b/panikweb_templates/static/css/_general.scss
index b018f9443e74394a14fb65c0554df18411f7c387..83589a62d25f56095b749dd3919f5babf14781f1 100644 (file)
--- a/panikweb_templates/static/css/_general.scss
+++ b/panikweb_templates/static/css/_general.scss
@@ -426,6 +426,12 @@ input[type=submit] {
     border: none;
 }
 
+@media screen and (min-width: $mobile-limit) {
+       .mobile-only {
+               display: none;
+       }
+}
+
 /**
  * For modern browsers
  * 1. The space content is one way to avoid an Opera bug when the

diff --git a/panikweb_templates/static/css/_specifics.scss b/panikweb_templates/static/css/_specifics.scss
index ab5e67d70426438b2cc68884d878fb3f0a795a31..279a91a143785669aba5ab07553cbd676e7e5bff 100644 (file)
--- a/panikweb_templates/static/css/_specifics.scss
+++ b/panikweb_templates/static/css/_specifics.scss
@@ -173,17 +173,19 @@ body{
        width:100%;
        font-size: 90%;
 }
-#metaNav ul{
+#metaNav ul {
+       margin-left: 300px;
+       @media screen and (max-width: $mobile-limit) {
+               margin-left: 0;
+       }
 }
+
 #metaNav ul li{
        float: left;
        padding: 0 1em;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow:hidden;
-       &:first-child {
-               margin-left: 300px;
-       }
 }
 
 #metaNav ul li#nav-search {
@@ -267,7 +269,7 @@ body{
                padding: 0.2em 0 0 1em;
        }
        div#Changing {
-               margin: 0 5px;
+               margin: 0;
        }
 }
 @media screen and (max-width:400px){
@@ -321,7 +323,6 @@ body{
                font-size: 60px;
                padding: 0;
                padding-top: 10px;
-               text-align: center;
        }
        #specialHome .leftPart h1.top {
                display: none;
@@ -340,6 +341,9 @@ body{
        width: 100%;
        max-width: 1400px;
        margin: 0 auto;
+       @media screen and (max-width: $mobile-limit) {
+               padding: 0 5px;
+       }
 }
 
 #mainHeader {
@@ -676,7 +680,7 @@ h1.top#frequence {
 
 @media screen and (max-width: $mobile-limit) {
         #backgroundBox {
-                background-position: center 30px;
+                background-position: center 0px;
                 background-size: 130px;
         }
         #All h1.top#radio {
@@ -853,6 +857,9 @@ h1.top#frequence {
        margin-top: 0;
        margin-bottom:1.5em;
        margin-left: 280px;
+       @media screen and (max-width: $mobile-limit) {
+               margin-left: 0;
+       }
 }
 
 .emission .contacts {
@@ -939,6 +946,10 @@ h1.top#frequence {
 
 .episode.detail .logo.right{
        max-width:50%;
+       @media screen and (max-width: $mobile-limit) {
+               max-width: 100%;
+               clear: none;
+       }
 }
 
 .episode.resume .date .day, .emission-detail .date .day {
@@ -2260,6 +2271,9 @@ a.listen-home {
         &:hover {
                 background-position: -286px 0px;
         }
+       @media screen and (max-width: $mobile-limit) {
+               display: none;
+       }
 }
 
 

diff --git a/panikweb_templates/templates/includes/metaNav.html b/panikweb_templates/templates/includes/metaNav.html
index 79355769e245eb5d44aea3fdaed6bec846452539..2e19c1c8db7100862a84cac4ff1cfc1d273ee48a 100644 (file)
--- a/panikweb_templates/templates/includes/metaNav.html
+++ b/panikweb_templates/templates/includes/metaNav.html
@@ -1,6 +1,10 @@
 {% load i18n %}
 <nav class="contextual-menu">
                <ul>
+                       <li class="mobile-only {% if sectionName == "Home" %}active{% endif %}"><a href="{% url 'home' %}">
+                               <span class="nav-icon icon-home resymbol"></span>
+                               <span class="iconLabel">{% trans 'Home' %}</span>
+                       </a></li>
                        <li class="{% if sectionName == "Emissions" %}active{% endif %}"><a title="Les émissions, le programme de la semaine" href="{% url 'program' %}">
                                <span class="nav-icon icon-calendar resymbol" ></span>
                                <span class="iconLabel">{% trans 'Program' %}</span>