From 5ab846745be30cfe178307925fb6c60f22acb1f7 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Je=CC=81re=CC=81my=20Fabre?= <Jeremy@iMac-de-Jeremy.local>
Date: Thu, 27 Oct 2016 15:17:54 +0200
Subject: [PATCH] Update home on mobile and tablet devices

---
 app/static/src/sass/global/_helpers.scss      | 14 +++++
 .../src/sass/modules/navs/_nav-header.scss    | 63 +++++++++++++++++++
 .../sass/modules/sliders/_slider-home.scss    |  4 ++
 app/static/src/sass/pages/_home.scss          | 28 +++++++++
 app/templates/home/inc/body.html              | 26 +++++++-
 app/templates/index.html                      |  8 +++
 6 files changed, 142 insertions(+), 1 deletion(-)

diff --git a/app/static/src/sass/global/_helpers.scss b/app/static/src/sass/global/_helpers.scss
index 0f0a2064..5c1bdd21 100755
--- a/app/static/src/sass/global/_helpers.scss
+++ b/app/static/src/sass/global/_helpers.scss
@@ -202,3 +202,17 @@
 .white-bg {
     background: white;
 }
+
+//
+// lol helpers
+//
+.hide-from-xs {
+    @include mq($from: xs) {
+        display: none !important;
+    }
+}
+.hide-until-xs {
+    @include mq($until: xs) {
+        display: none !important;
+    }
+}
diff --git a/app/static/src/sass/modules/navs/_nav-header.scss b/app/static/src/sass/modules/navs/_nav-header.scss
index 126b8580..2ce1b6d2 100644
--- a/app/static/src/sass/modules/navs/_nav-header.scss
+++ b/app/static/src/sass/modules/navs/_nav-header.scss
@@ -289,6 +289,69 @@ $module: ".nav-header";
 
     }
 
+    //
+    // Home mobile nav overrides
+    //
+    .home-mobile-nav & {
+
+        &__item {
+
+            display: none;
+
+            &:nth-child(3),
+            &:nth-child(4),
+            &:nth-child(5),
+            &:nth-child(6) {
+                display: inline-block;
+            }
+
+        }
+
+        &__item-link {
+
+            padding: 0 5px;
+
+            @include mq($until: sm) {
+                font-size: 18px;
+            }
+
+            @include mq($until: xs) {
+                font-size: 14px;
+            }
+
+        }
+
+    }
+
+    //
+    // Home mobile subnav overrides
+    //
+    .home-mobile-subnav & {
+
+        &__item {
+
+            display: none;
+            margin: 0;
+            padding: 0;
+
+            &:nth-child(7),
+            &:nth-child(8) {
+                display: inline-block;
+            }
+
+            &--image {
+                width: 45%;
+                img {
+                    display: inline-block;
+                    height: auto;
+                    width: 80%;
+                }
+            }
+
+        }
+
+    }
+
     //
     // Sidenav overrides
     //
diff --git a/app/static/src/sass/modules/sliders/_slider-home.scss b/app/static/src/sass/modules/sliders/_slider-home.scss
index 0f9f89f8..0ab0010b 100644
--- a/app/static/src/sass/modules/sliders/_slider-home.scss
+++ b/app/static/src/sass/modules/sliders/_slider-home.scss
@@ -8,6 +8,10 @@ $module: ".slider-home";
         @include margin-bottom(1);
     }
 
+    @include mq($until: xs) {
+        display: none;
+    }
+
     ul {
         list-style-type: none;
         margin: 0;
diff --git a/app/static/src/sass/pages/_home.scss b/app/static/src/sass/pages/_home.scss
index 376599e5..dd3fafbb 100644
--- a/app/static/src/sass/pages/_home.scss
+++ b/app/static/src/sass/pages/_home.scss
@@ -8,6 +8,10 @@ $module: ".home";
         margin-top: -($header-height + $header-pre-height);
         padding-top: 0;
 
+        @include mq($until: sm) {
+            margin-top: 0;
+        }
+
     }
 
     &__menu {
@@ -197,3 +201,27 @@ $module: ".home";
     }
 
 }
+
+.home-mobile-nav {
+    display: none;
+
+    background: $color-main;
+    border-top: 1px solid $color-black;
+
+    @include mq($until: sm) {
+        display: block;
+    }
+
+    @include mq($until: xs) {
+        @include margin-bottom(1);
+    }
+}
+
+.home-mobile-subnav {
+    display: none;
+
+    @include mq($until: xs) {
+        display: block;
+        @include margin(0 0 1 0);
+    }
+}
diff --git a/app/templates/home/inc/body.html b/app/templates/home/inc/body.html
index f8b73838..bf5be256 100644
--- a/app/templates/home/inc/body.html
+++ b/app/templates/home/inc/body.html
@@ -1,7 +1,31 @@
+{% load i18n pages_tags mezzanine_tags media_tags organization_tags %}
 <div class="container">
     <div class="row">
+        {% for slider in home.dynamiccontenthomeslider_set.all %}
+            {% with slider.content_object.images.all|get_type:'slider' as images %}
+                {% if images %}
+                    <div class="col-xs-4 hide-from-xs">
+                        {% if slider.content_type.model == "brief" %}
+                            {% include "magazine/brief/inc/brief_card.html" %}
+                        {% elif slider.content_type.model == "article" %}
+                            {% with slider.content_object as article %}
+                                {% include "magazine/article/includes/article_card.html" %}
+                            {% endwith %}
+                        {% elif slider.content_type.model == "event" %}
+                            {% with slider.content_object as event %}
+                                {% include "agenda/includes/event_card.html" %}
+                            {% endwith %}
+                        {% elif slider.content_type.model == "custompage" %}
+                            {% with slider.content_object as page %}
+                                {% include "pages/includes/page_card.html" %}
+                            {% endwith %}
+                        {% endif %}
+                    </div>
+                {% endif %}
+            {% endwith %}
+        {% endfor %}
         {% for content in home.dynamiccontenthomebody_set.all %}
-            <div class="col-xs-4">
+            <div class="col-xs-4{% if forloop.counter > 3 %} hide-until-xs{% endif %}">
                 {% if content.content_type.model == "brief" %}
                     {% include "magazine/brief/inc/brief_card.html" %}
                 {% elif content.content_type.model == "article" %}
diff --git a/app/templates/index.html b/app/templates/index.html
index c46666a4..79255a6d 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -19,6 +19,10 @@
 
 {% block main %}
 
+    <div class="home-mobile-nav">
+        {% page_menu "pages/menus/header.html" %}
+    </div>
+
     {% include "home/inc/slider.html" %}
 
     <ul class="home__menu">
@@ -59,6 +63,10 @@
 
     {% include "home/inc/body.html" %}
 
+    <div class="home-mobile-subnav">
+        {% page_menu "pages/menus/header.html" %}
+    </div>
+
     {% include "home/inc/bio.html" %}
 
     {% include "home/inc/services.html" %}
-- 
2.39.5