From: Jérémy Fabre <blackmagik88@gmail.com>
Date: Mon, 5 Sep 2016 14:55:55 +0000 (+0200)
Subject: Add the topic and brief list on the homepage shutters
X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=e42481314e093c38a39db589a50db938b8bfeab2;p=mezzo.git

Add the topic and brief list on the homepage shutters
---

diff --git a/app/static/src/js/modules/home-menu.js b/app/static/src/js/modules/home-menu.js
index be7e1ac2..95e6007b 100644
--- a/app/static/src/js/modules/home-menu.js
+++ b/app/static/src/js/modules/home-menu.js
@@ -5,21 +5,38 @@ var HomeMenu = function() {
     //
     this.init();
 
+    this.$menu = $('.home__menu-item');
+
 };
 
 HomeMenu.prototype.init = function() {
 
     var that = this,
-        $elements = $('.home__menu a');
+        $elements = $('.home__menu-item a');
+
+    $('.home__menu-item').hover(function() {
 
-    $elements.hover(function() {
         $elements.removeClass('active');
-        $(this).addClass('active');
+        $(this).find('>a').addClass('active');
+        $('.home__shutter').removeClass('active');
+        $(this).find('.home__shutter').addClass('active');
+
     }, function() {
+
+        $('.home__shutter').removeClass('active');
         $elements.removeClass('active');
         $($elements.get(0)).addClass('active');
+
     });
 
+    /*$('.home__menu').bind('mouseleave', function() {
+
+        $('.home__shutter').removeClass('active');
+        $elements.removeClass('active');
+        $($elements.get(0)).addClass('active');
+
+    });*/
+
 };
 
 module.exports = HomeMenu;
diff --git a/app/static/src/sass/pages/_home.scss b/app/static/src/sass/pages/_home.scss
index d21b7608..5f72812a 100644
--- a/app/static/src/sass/pages/_home.scss
+++ b/app/static/src/sass/pages/_home.scss
@@ -16,28 +16,98 @@ $module: ".home";
         padding: 0;
         margin: 0;
         text-align: center;
+        position: relative;
+        background: white;
 
-        width: 700px;
+        width: 100%;
 
         @include padding-left(3);
         @include padding-right(3);
-        @include margin(2 auto);
-
-        border-top: 1px solid #DCDCDC;
+        @include padding-top(2);
+        @include padding-bottom(2);
+        @include transition(width 0.5s ease-in-out);
 
         @include mq($until: sm) {
             display: none;
         }
 
+        &--with-shutter {
+            width: 100%;
+        }
+
     }
 
-    &__menu-item {
+    &__shutter {
 
-        position: relative;
-        display: inline-block;
+        position: absolute;
+        bottom: 150px;
+        left: 0;
+        right: 0;
+        background: white;
+        z-index: 100;
+
+        @include padding(1 0);
+        @include transform(scaleY(0));
+        @include transition(transform 0.5s ease-in-out);
+        transform-origin: 0 100%;
+        -webkit-transform-origin: 0 100%;
+
+        &.active {
+            @include transform(scaleY(1));
+        }
+
+    }
+
+    &__shutter-content {
+
+        @include padding(0 9);
+
+        @include mq($until: lg) {
+            @include padding(0 3);
+        }
+
+    }
+
+    &__shutter-item {
+
+        text-decoration: none;
+        display: block;
 
         @include margin-top(1);
 
+        >h2 {
+            @include font-size(l);
+            @include line-height(1);
+            @include typeface(sans-serif);
+            font-weight: weight(regular);
+
+            @include margin(0 0 1 0);
+        }
+        >p {
+            @include font-size(s);
+            @include line-height(1);
+            @include typeface(serif);
+            font-weight: weight(light);
+
+            @include margin(0);
+        }
+        >a {
+            @include font-size(s);
+            @include line-height(1);
+            @include typeface(serif);
+            font-weight: weight(bold);
+
+            @include margin(0);
+            text-decoration: underline;
+        }
+
+    }
+
+    &__menu-item {
+
+        display: inline-block;
+        border-top: 1px solid #DCDCDC;
+
         @include font-size(xl);
         @include line-height(1);
         @include typeface(sans-serif);
@@ -47,13 +117,16 @@ $module: ".home";
 
             @include padding-left(1);
             @include padding-right(1);
+            @include padding-top(1);
+
             display: block;
+            position: relative;
 
             &:after {
                 content: '';
                 display: block;
                 position: absolute;
-                top: -34px;
+                top: -10px;
                 left: 50%;
                 margin-left: -9px;
                 width: 18px;
diff --git a/app/templates/home/inc/shutter_card.html b/app/templates/home/inc/shutter_card.html
index 58a25ba8..fe09e65c 100644
--- a/app/templates/home/inc/shutter_card.html
+++ b/app/templates/home/inc/shutter_card.html
@@ -1,4 +1,6 @@
-<a href="{% url url_pattern slug %}" title="">
-  <h2>{{ title }}</h2>
-  <p>{{ description|truncatechars:100 }}</p>
-</a>
+<div class="col-xs-3">
+    <a href="{% url url_pattern slug %}" title="{{ title }}" class="home__shutter-item">
+      <h2>{{ title }}</h2>
+      <p>{{ description|truncatechars:100 }}</p>
+    </a>
+</div>
diff --git a/app/templates/index.html b/app/templates/index.html
index aa8e66f7..4a90bb5a 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -21,20 +21,29 @@
 
     {% include "home/inc/slider.html" %}
 
-    <div style="display: none;">
-        {% page_menu "pages/menus/magazine.html" %}
-        {% include "magazine/brief/brief_list.html" %}
-    </div>
-
     <ul class="home__menu">
       <li class="home__menu-item">
-          <a href="#" title="{% trans "News Headlines" %}">{% trans "News Headlines" %}</a>
+          <a class="active" href="#" title="{% trans "News Headlines" %}">{% trans "News Headlines" %}</a>
       </li>
       <li class="home__menu-item">
           <a href="#" title="{% trans "Magazine" %}">{% trans "Magazine" %}</a>
+          <div class="home__shutter">
+              <div class="home__shutter-content">
+                  <div class="container-fluid tal">
+                      {% page_menu "pages/menus/magazine.html" %}
+                  </div>
+              </div>
+          </div>
       </li>
       <li class="home__menu-item">
           <a href="#" title="{% trans "Brief" %}">{% trans "Brief" %}</a>
+          <div class="home__shutter">
+              <div class="home__shutter-content">
+                  <div class="container-fluid tal">
+                      {% include "magazine/brief/brief_list.html" %}
+                  </div>
+              </div>
+          </div>
       </li>
       <li class="home__menu-item">
           <a href="#" title="{% trans "Media" %}">{% trans "Media" %}</a>
diff --git a/app/templates/magazine/brief/brief_list.html b/app/templates/magazine/brief/brief_list.html
index e1221e20..0f9f50c6 100644
--- a/app/templates/magazine/brief/brief_list.html
+++ b/app/templates/magazine/brief/brief_list.html
@@ -1,5 +1,9 @@
 {% for brief in briefs %}
-  <h2>{{ brief.title }}</h2>
-  <p>{{ brief.description|truncatechars:100 }}</p>
-  <a href="{{ brief.external_content }}" title="brief.title">{{ brief.text_button }}</a>
+    <div class="col-xs-3">
+        <div class="home__shutter-item">
+            <h2>{{ brief.title }}</h2>
+            <p>{{ brief.description|truncatechars:100 }}</p>
+            <a href="{{ brief.external_content }}" title="brief.title">{{ brief.text_button }}</a>
+        </div>
+    </div>
 {% endfor %}
diff --git a/app/templates/pages/menus/magazine.html b/app/templates/pages/menus/magazine.html
index f94df310..8aade77a 100644
--- a/app/templates/pages/menus/magazine.html
+++ b/app/templates/pages/menus/magazine.html
@@ -5,7 +5,7 @@
 {% if page_branch_in_menu %}
     {% for page in page_branch %}
         {% if page.in_menu %}
-        {% include "home/inc/shutter_card.html" with title=page.title description=page.description url_pattern=page.content_model|add:"-detail" slug=page.slug %}
+            {% include "home/inc/shutter_card.html" with title=page.title description=page.description url_pattern=page.content_model|add:"-detail" slug=page.slug %}
         {% endif %}
     {% endfor %}
 {% endif %}