Fix header. Responsive footer implementation

diff --git a/app/static/src/sass/global/_helpers.scss b/app/static/src/sass/global/_helpers.scss
index 00a4d2762d44b1c8b986b2b59dfae66276fc3024..7dba8d906a659d6580a883af40127b2cbf0c31b8 100755 (executable)
--- a/app/static/src/sass/global/_helpers.scss
+++ b/app/static/src/sass/global/_helpers.scss
@@ -31,14 +31,35 @@
 .bg {
     background-color: $color-main;
 }
+.tal {
+    text-align: left;
+}
+@each $size, $width in $breakpoints {
+    .tal-#{$size} {
+        @include mq($from: $size) {
+            text-align: left;
+        }
+    }
+}
 .tac {
     text-align: center;
 }
+@each $size, $width in $breakpoints {
+    .tac-#{$size} {
+        @include mq($from: $size) {
+            text-align: center;
+        }
+    }
+}
 .tar {
     text-align: right;
 }
-.tal {
-    text-align: left;
+@each $size, $width in $breakpoints {
+    .tar-#{$size} {
+        @include mq($from: $size) {
+            text-align: right;
+        }
+    }
 }
 .hide-xxs {
     @include mq($until: xs) {

diff --git a/app/static/src/sass/layout/_footer.scss b/app/static/src/sass/layout/_footer.scss
index fddf99ee26643b9168070817cdc33d8a20e9201e..b3453ee526a78547f0de314f8fa9962249930bd4 100755 (executable)
--- a/app/static/src/sass/layout/_footer.scss
+++ b/app/static/src/sass/layout/_footer.scss
@@ -2,6 +2,12 @@ $module: ".footer";
 
 #{$module} {
 
+    @include mq($until: xs) {
+        div[class^="col-"] {
+            @include margin(.5 0);
+        }
+    }
+
     &__pre {
 
         background: $color-black;
@@ -10,6 +16,11 @@ $module: ".footer";
 
         @include padding(1 0);
 
+        @include mq($until: xs) {
+            @include padding(0);
+            border: 0;
+        }
+
     }
 
     &__content {
@@ -24,6 +35,11 @@ $module: ".footer";
 
         color: white;
 
+        @include mq($until: xs) {
+            @include padding(0);
+            background: $color-black;
+        }
+
     }
 
     &__follow-link {
@@ -71,10 +87,21 @@ $module: ".footer";
 
         @include margin(1 0);
 
+        @include mq($until: xs) {
+            @include margin(0);
+        }
+
         &--small {
             height: 1px;
         }
 
     }
 
+    &__partner {
+        @include mq($until: xs) {
+            width: 48%;
+            height: auto;
+        }
+    }
+
 }

diff --git a/app/static/src/sass/layout/_global.scss b/app/static/src/sass/layout/_global.scss
index 89e3d1eeac679d1ff7f3a90c7936b09a25ab3fdc..5549ec01b2e09347d4c65d6dff354b58fee2f30b 100755 (executable)
--- a/app/static/src/sass/layout/_global.scss
+++ b/app/static/src/sass/layout/_global.scss
@@ -1,5 +1,5 @@
 .main {
-    @include margin(3 0 0 0);
+    @include margin(3 0 3 0);
     @include padding(1 0 0 0);
 
     background: white;

diff --git a/app/static/src/sass/layout/_grid.scss b/app/static/src/sass/layout/_grid.scss
index 4de6e3ed75ac32384b0ddd0107d4a1841132b609..d71ef04c6206d8003b070ad7504b8b33b53f4696 100755 (executable)
--- a/app/static/src/sass/layout/_grid.scss
+++ b/app/static/src/sass/layout/_grid.scss
@@ -25,7 +25,9 @@
        padding-left: $grid-gutter / 2;
        padding-right: $grid-gutter / 2;
     min-height: 1px;
-    float: left;
+    /*float: left;*/
+       display: inline-block;
+       vertical-align: top;
 
 }
 

diff --git a/app/static/src/sass/modules/navs/_nav-footer.scss b/app/static/src/sass/modules/navs/_nav-footer.scss
index 4a7c47132be09e4832819cac7316aa4945a9a667..ee1cb03ea6c654d011634fc7b28a1f5c8b2ea779 100644 (file)
--- a/app/static/src/sass/modules/navs/_nav-footer.scss
+++ b/app/static/src/sass/modules/navs/_nav-footer.scss
@@ -5,7 +5,6 @@ $module: ".nav-footer";
     list-style-type: none;
     margin: 0;
     padding: 0;
-    text-align: left;
 
     &__item-link {
         @include font-size(m);
@@ -13,5 +12,5 @@ $module: ".nav-footer";
         font-weight: weight(regular);
         color: white;
     }
-
+    
 }

diff --git a/app/templates/base.html b/app/templates/base.html
index f691a067d88d39e77e3c7b31a905d94c8de125aa..27c611811a05775c4f822f359be9b7aa0cd46586 100644 (file)
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -39,7 +39,7 @@
 </head>
 
 <body id="{% block body_id %}body{% endblock %}">
-
+    {% spaceless %}
     <div class="banner" role="banner">
         <div class="header">
             <div class="container">
@@ -116,13 +116,13 @@
 
                 <div class="row">
 
-                    <div class="col-lg-6 col-lg-push-1">
+                    <div class="col-sm-6 col-sm-push-1 tal-sm tac-sm tal-xs">
 
                         newsletter
 
                     </div>
 
-                    <div class="col-lg-3 col-lg-push-1 tac">
+                    <div class="col-sm-3 col-sm-push-1 tac-sm tal-xs">
 
                         <a class="footer__follow-link facebook" href="https://www.facebook.com/iIRCAM/" target="_blank" title="{% trans 'Follow us on Facebook' %}"><i class="fa fa-facebook-square"></i></a>
                         <a class="footer__follow-link twitter" href="https://twitter.com/ircam" target="_blank" title="{% trans 'Follow us on Twitter' %}"><i class="fa fa-twitter-square"></i></a>
@@ -144,13 +144,13 @@
 
                 <div class="row">
 
-                    <div class="col-lg-3 col-lg-push-1">
+                    <div class="col-xs-3 col-sm-3 col-sm-push-1 tal">
 
                         <a href="{% url "home" %}" title="{% trans 'Home' %}"><img src="{% static "img/logo-ircam-white.png" %}" width="151" /></a>
 
                     </div>
 
-                    <div class="col-lg-2 col-lg-push-1 tar">
+                    <div class="col-xs-3 col-sm-2 col-sm-push-1 tar-sm tal">
 
                         <strong>IRCAM</strong><br />
                         <br />
@@ -160,7 +160,7 @@
 
                     </div>
 
-                    <div class="col-lg-2 col-lg-push-1 tar">
+                    <div class="col-xs-3 col-sm-2 col-sm-push-1 tar-sm tal">
 
                         <strong>{% trans 'Opening times' %}</strong><br />
                         <br />
@@ -170,7 +170,7 @@
 
                     </div>
 
-                    <div class="col-lg-2 col-lg-push-1 tar">
+                    <div class="col-xs-3 col-sm-2 col-sm-push-1 tar-sm tal">
 
                         <strong>{% trans 'Subway access' %}</strong><br />
                         <br />
@@ -183,7 +183,7 @@
 
                 <div class="row">
 
-                    <div class="col-lg-10 col-lg-push-1">
+                    <div class="col-sm-10 col-sm-push-1">
 
                         <div class="footer__separator"></div>
 
@@ -193,24 +193,24 @@
 
                 <div class="row">
 
-                    <div class="col-lg-3 col-lg-push-1">
+                    <div class="col-xs-4 col-sm-3 col-sm-push-1 tal">
 
                         {% page_menu "pages/menus/footer.html" %}
 
                     </div>
 
-                    <div class="col-lg-5 col-lg-push-1">
+                    <div class="col-xs-4 col-sm-5 col-sm-push-1 tal">
 
                         <strong>Institut de Recherche et Coordination Acoustique/Musique</strong> {% trans 'under the tutelage of' %} :<br />
                         <br />
-                        <a href="http://www.culturecommunication.gouv.fr/" target="_blank" title="Ministère de la Culture et de la Communication"><img width="120" height="66" src="{% static "img/partners/logo-ministere-culture.png" %}" /></a>
-                        <a href="http://www.cnrs.fr/" target="_blank" title="Centre National de la Recherche Scientifique"><img width="120" height="66" src="{% static "img/partners/logo-cnrs.png" %}" /></a>
-                        <a href="http://www.upmc.fr/" target="_blank" title="Université Pierre et Marie Curie"><img width="120" height="66" src="{% static "img/partners/logo-upmc.png" %}" /></a>
-                        <a href="http://www.inria.fr/" target="_blank" title="Inria"><img width="120" height="66" src="{% static "img/partners/logo-inria.png" %}" /></a>
+                        <a href="http://www.culturecommunication.gouv.fr/" target="_blank" title="Ministère de la Culture et de la Communication"><img class="footer__partner" width="120" height="66" src="{% static "img/partners/logo-ministere-culture.png" %}" /></a>
+                        <a href="http://www.cnrs.fr/" target="_blank" title="Centre National de la Recherche Scientifique"><img class="footer__partner" width="120" height="66" src="{% static "img/partners/logo-cnrs.png" %}" /></a>
+                        <a href="http://www.upmc.fr/" target="_blank" title="Université Pierre et Marie Curie"><img class="footer__partner" width="120" height="66" src="{% static "img/partners/logo-upmc.png" %}" /></a>
+                        <a href="http://www.inria.fr/" target="_blank" title="Inria"><img class="footer__partner" width="120" height="66" src="{% static "img/partners/logo-inria.png" %}" /></a>
 
                     </div>
 
-                    <div class="col-lg-2 col-lg-push-1">
+                    <div class="col-xs-4 col-sm-2 col-sm-push-1 tal">
 
                         {% trans 'go to' %} :
                         <ul class="unstyled-list">
@@ -228,7 +228,7 @@
 
                 <div class="row">
 
-                    <div class="col-lg-10 col-lg-push-1">
+                    <div class="col-sm-10 col-sm-push-1">
 
                         <div class="footer__separator footer__seprator--small"></div>
 
@@ -243,8 +243,8 @@
     </footer>
 
     {% include "includes/search_form.html" %}
-
     {% include "includes/footer_scripts.html" %}
+    {% endspaceless %}
 
 </body>
 <script>

diff --git a/app/templates/pages/menus/header_tree_primary.html b/app/templates/pages/menus/header_tree_primary.html
index babbcdb9b3324383127bbf2829979bf866d64c83..20a49fe743884cc15fb245b0b5e4c7f8f05f8432 100644 (file)
--- a/app/templates/pages/menus/header_tree_primary.html
+++ b/app/templates/pages/menus/header_tree_primary.html
@@ -7,19 +7,19 @@
         <div class="row">
             <div class="col-md-12">
                 <p>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quis nulla, molestias temporibus dignissimos quisquam facilis, sint reiciendis maiores ut. Voluptate sequi asperiores laborum, harum similique iusto pariatur at totam?
+                    {{ page.subtitle }}
                 </p>
             </div>
         </div>
         <div class="row">
             {% for page in page_branch %}
                 {% if page.in_menu %}
-                    <ul class="unstyled-list col-sm-3">
+                    <ul class="unstyled-list col-sm-6 col-md-3">
                         <li class="nav-header__item-sub nav-header__item-sub--first{% if page.is_current_or_ascendant %} active{% endif %}">
                             <a class="" href="{{ page.get_absolute_url }}" title="{{ page.title }}">{{ page.title }}</a>
 
                 {% endif %}
-                {% if page.has_children_in_menu and not forloop.first %}
+                {% if page.has_children_in_menu %}
                     {% page_menu page "pages/menus/header_tree_secondary.html" %}
                 {% endif %}
                         </li>