Update home on mobile and tablet devices

diff --git a/app/static/src/sass/global/_helpers.scss b/app/static/src/sass/global/_helpers.scss
index 0f0a2064169135cf7591361532e258aad2c526c2..5c1bdd218b63548798eff0c2bbce45ec71fa8a04 100755 (executable)
--- 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 126b85800e581b5ba36e193e486a5f7690da811c..2ce1b6d2b1577e25cbf018aef096343cf09735fa 100644 (file)
--- 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 0f9f89f81c35381b56eb8816a299bf64094193b8..0ab0010ba39c824d3f92634db9c81a707420256f 100644 (file)
--- 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 376599e5e2474b672d33a7102a74b953f0e2f3d0..dd3fafbbd65e8ba9b556fdf3a8015cd8a4a4b5da 100644 (file)
--- 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 f8b738388356984f1fa8bbe1d3ada3561676cbe2..bf5be2564855dba8e08cf8cf474798e6a9908e22 100644 (file)
--- 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 c46666a4dc9a1455a29d7a448fe05a3bba7843e2..79255a6dd4917656f1294a701d7ebd65939f3b85 100644 (file)
--- 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" %}