Footer integration

diff --git a/app/static/src/sass/global/_helpers.scss b/app/static/src/sass/global/_helpers.scss
index 6f5d3f53dbb1c8b36b6088e526aae28e5faaae23..6cb1f95177a9328e15bedf29d6c8ec9791fb24c4 100755 (executable)
--- a/app/static/src/sass/global/_helpers.scss
+++ b/app/static/src/sass/global/_helpers.scss
@@ -216,7 +216,7 @@
     color: white;
 }
 .fcb {
-    color: $color-black;
+    color: $color-background;
 }
 .unstyled-list {
     list-style-type: none;

diff --git a/app/static/src/sass/layout/_footer.scss b/app/static/src/sass/layout/_footer.scss
index a6432d10f30dfd5250f47bc889ded9bc4a2adcf6..41597241502f15d2ce0766fddadf7d8fc5ebc47b 100755 (executable)
--- a/app/static/src/sass/layout/_footer.scss
+++ b/app/static/src/sass/layout/_footer.scss
@@ -47,7 +47,7 @@ $module: ".footer";
 
     &__content {
 
-        @include padding(1 0);
+        @include padding(1 0 .5 0);
 
         @include font-size(s);
         @include typeface(sans-serif);
@@ -57,7 +57,6 @@ $module: ".footer";
 
         @include mq($until: xs) {
             @include padding(0);
-            background: $color-black;
         }
 
     }
@@ -118,10 +117,38 @@ $module: ".footer";
     }
 
     &__partner {
+        @include mq($until: lg) {
+            width: 80px;
+        }
+        @include mq($until: md) {
+            width: 80px;
+        }
+        @include mq($until: sm) {
+            width: 120px;
+        }
         @include mq($until: xs) {
-            width: 48%;
+            width: 80px;
             height: auto;
         }
     }
 
+    &__partner-separator {
+        @include typeface(sans-serif);
+        @include font-size(m);
+        font-weight: weight(regular);
+        display: inline-block;
+        @include margin(0 1);
+        position: relative;
+        top: -30px;
+        @include mq($until: xs) {
+            color: white;
+        }
+    }
+
+    .section-title {
+        @include mq($until: xs) {
+            color: white;
+        }
+    }
+
 }

diff --git a/app/static/src/sass/modules/_all.scss b/app/static/src/sass/modules/_all.scss
index 86322f361827979259487b5cc5809b9df32b59c9..7459a7b253ae354df30626c4f0338cda6bb7edd4 100755 (executable)
--- a/app/static/src/sass/modules/_all.scss
+++ b/app/static/src/sass/modules/_all.scss
@@ -64,9 +64,12 @@
 @import 'map-infowindow';
 @import 'map-legend';
 @import 'linked-organizations';
+@import 'newsletter';
+
 // Typography modules
 @import 'dashed';
 @import 'dotted';
 @import 'blockquote';
 @import 'well';
 @import 'flash';
+@import 'section-title';

diff --git a/app/static/src/sass/modules/_newsletter.scss b/app/static/src/sass/modules/_newsletter.scss
new file mode 100644 (file)
index 0000000..7060c65
--- /dev/null
+++ b/app/static/src/sass/modules/_newsletter.scss
@@ -0,0 +1,49 @@
+$module: ".newsletter";
+
+#{$module} {
+
+    @include margin-bottom(2);
+
+    @include mq($until: sm) {
+
+        @include margin-top(2);
+
+    }
+
+    &__text {
+
+        @include font-size(m);
+        @include typeface(sans-serif);
+        font-weight: weight(regular);
+
+    }
+
+    &__input {
+
+        @include font-size(m);
+        @include typeface(sans-serif);
+        font-weight: weight(regular);
+
+        width: 100%;
+        outline: 0;
+        background: transparent;
+        border: 0;
+        color: white;
+        border-bottom: 1px solid white;
+
+    }
+
+    &__button {
+
+        color: white;
+        outline: 0;
+        background: transparent;
+        border: 0;
+        position: absolute;
+        top: 0px;
+        right: 7px;
+        @include font-size(l);
+
+    }
+
+}

diff --git a/app/static/src/sass/modules/_section-title.scss b/app/static/src/sass/modules/_section-title.scss
new file mode 100644 (file)
index 0000000..96e7bab
--- /dev/null
+++ b/app/static/src/sass/modules/_section-title.scss
@@ -0,0 +1,34 @@
+$module: ".section-title";
+
+#{$module} {
+
+    @include typeface(sans-serif);
+    @include font-size(m);
+    font-weight: weight(regular);
+
+    text-align: center;
+    color: white;
+
+    @include margin-bottom(2);
+
+    &--uppercase {
+        text-transform: uppercase;
+    }
+
+    &--underline {
+        text-decoration: underline;
+    }
+
+    &--dark {
+        color: $color-background;
+    }
+
+    &:before {
+        content: '_';
+        display: block;
+        text-decoration: none;
+        @include font-size(m);
+        @include margin-bottom(.5);
+    }
+
+}

diff --git a/app/templates/includes/footer.html b/app/templates/includes/footer.html
index 4ca6e837c8a9a52b18806eb895237c121aff0228..e8a1084d9b76248a7182f03d4163794d7b28292e 100644 (file)
--- a/app/templates/includes/footer.html
+++ b/app/templates/includes/footer.html
@@ -5,19 +5,22 @@
 
         <div class="row">
 
-            <div class="col-xxs-16 col-sm-push-1 col-sm-4">
+            <div class="col-xxs-16 col-sm-push-1 col-sm-4 tac">
 
                 <a href="{% url "home" %}" title="{% trans 'Home' %}">
                     {% with host_organization.images|get_type:"logo_footer" as images %}
                       {% if images %}
                        {% with images|first as img %}
-                        <img src="{{ MEDIA_URL }}{{ img }}" title="{{ img.title }}" width="151" />
+                        <img src="{{ MEDIA_URL }}{{ img }}" title="{{ img.title }}" width="243" />
                        {% endwith %}
                       {% endif %}
                     {% endwith %}
                 </a>
 
                 {% if linked_organization_footer %}
+                    <div class="section-title section-title--dark">
+                        Porté par
+                    </div>
                     {% include 'pages/page/includes/linked_organization_footer.html' %}
                 {% endif %}
 
@@ -29,7 +32,29 @@
 
                     <div class="col-xxs-16">
 
-                        NEWSLETTER HERE
+                        <div class="newsletter">
+
+                            <div class="row">
+
+                                <div class="col-xxs-16 col-xs-7 col-xs-push-1 col-lg-8 col-lg-push-0">
+
+                                    <div class="newsletter__text">
+                                        Inscrivez-vous à notre newsletter afin de recevoir les dernières actualités,  informations sur les expositions.
+                                    </div>
+                                </div>
+
+                                <div class="col-xxs-16 col-xs-7 col-xs-push-1">
+
+                                    <form method="GET" action="https://www.ircam.fr/etre-informe" target="_blank">
+                                        <input placeholder="Votre email" class="newsletter__input" type="text" name="email" />
+                                        <button class="newsletter__button" type="submit"><i class="fa fa-envelope-o"></i></button>
+                                    </form>
+
+                                </div>
+
+                            </div>
+
+                        </div>
 
                     </div>
 
@@ -37,17 +62,21 @@
 
                 <div class="row">
 
-                    <div class="col-xxs-16 col-sm-8">
+                    <div class="col-xxs-8 col-xs-7 col-xs-push-1">
 
                         {% page_menu "pages/menus/footer_vertical.html" %}
 
                     </div>
 
-                    <div class="col-xxs-16 col-sm-8">
+                    <div class="col-xxs-8 col-xs-7 col-xs-push-1 col-lg-6 col-lg-push-2">
 
-                        {% for link in host_organization.links.all %}
-                            <a class="footer__follow-link {{ link.link_type.slug }}" href="{{ link.url }}" target="_blank" title="{% trans 'Follow us on' %} {{ link.title }}"><i class="fa fa-{{ link.link_type.slug }}{% if link.link_type.fa_option %}-{{ link.link_type.fa_option }}{% endif %}"></i></a>
-                        {% endfor %}
+                        <ul class="nav-footer" role="navigation">
+                            {% for link in host_organization.links.all %}
+                                <li class="nav-footer__item">
+                                    <a class="nav-footer__item-link" href="{{ link.url }}" target="_blank" title="{% trans 'Follow us on' %} {{ link.title }}">{{ link.title }}</a>
+                                </li>
+                            {% endfor %}
+                        </ul>
 
                     </div>
 
@@ -70,7 +99,7 @@
             Copyright
         {% endcomment %}
         <div class="row">
-            <div class="col-xxs-16 col-sm-12 col-sm-push-1 tac">
+            <div class="col-xxs-16 col-sm-12 col-sm-push-1 tac fcb mt2">
                 Copyright &copy; {% current_year %} {{ host_organization.name }}. {% trans "All rights reserved" %}.
             </div>
         </div>

diff --git a/app/templates/pages/page/includes/linked_organization_footer.html b/app/templates/pages/page/includes/linked_organization_footer.html
index 700ba3176d92e8b7a9cfa6eaddc116d8d0127c22..60871a40396f4f6b54c30abc32f01c21e70f68a1 100644 (file)
--- a/app/templates/pages/page/includes/linked_organization_footer.html
+++ b/app/templates/pages/page/includes/linked_organization_footer.html
@@ -7,6 +7,9 @@
                 {% with img|first as img %}
                     <img class="footer__partner" src="{{ MEDIA_URL }}{{ img }}" title="{{ img.title }}" width="120" height="66" />
                 {% endwith %}
+                {% if not forloop.last %}
+                    <span class="footer__partner-separator">&</span>
+                {% endif %}
             {% endif %}
         {% endwith %}
     </a>