From 14afa8ff4d710e951212ff5a55720ba3ac80ac27 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Je=CC=81re=CC=81my=20Fabre?= Date: Thu, 1 Sep 2016 17:44:14 +0200 Subject: [PATCH] Add the home menu styling --- app/static/src/js/index.js | 2 + app/static/src/js/modules/home-menu.js | 25 ++++++++++ app/static/src/sass/pages/_home.scss | 69 ++++++++++++++++++++++++++ app/templates/index.html | 27 +++++++--- 4 files changed, 115 insertions(+), 8 deletions(-) create mode 100644 app/static/src/js/modules/home-menu.js diff --git a/app/static/src/js/index.js b/app/static/src/js/index.js index afeb2784..f33b70e6 100644 --- a/app/static/src/js/index.js +++ b/app/static/src/js/index.js @@ -12,6 +12,7 @@ var OverflowInit = require('./modules/overflow-init'); var StickyKitInit = require('./modules/sticky-kit-init'); var LightSliderPageInit = require('./modules/lightsliderpage-init'); var LightSliderHomeInit = require('./modules/lightsliderhome-init'); +var HomeMenu = require('./modules/home-menu'); // // Init all the modules @@ -27,3 +28,4 @@ window[OverflowInit] = new OverflowInit(); window[StickyKitInit] = new StickyKitInit(); window[LightSliderPageInit] = new LightSliderPageInit(); window[LightSliderHomeInit] = new LightSliderHomeInit(); +window[HomeMenu] = new HomeMenu(); diff --git a/app/static/src/js/modules/home-menu.js b/app/static/src/js/modules/home-menu.js new file mode 100644 index 00000000..be7e1ac2 --- /dev/null +++ b/app/static/src/js/modules/home-menu.js @@ -0,0 +1,25 @@ +var HomeMenu = function() { + + // + // Init + // + this.init(); + +}; + +HomeMenu.prototype.init = function() { + + var that = this, + $elements = $('.home__menu a'); + + $elements.hover(function() { + $elements.removeClass('active'); + $(this).addClass('active'); + }, function() { + $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 d5cd08cb..d21b7608 100644 --- a/app/static/src/sass/pages/_home.scss +++ b/app/static/src/sass/pages/_home.scss @@ -2,6 +2,7 @@ $module: ".home"; #{$module} { + // Overrides .main style .main { margin-top: -($header-height + $header-pre-height); @@ -9,4 +10,72 @@ $module: ".home"; } + &__menu { + + list-style-type: none; + padding: 0; + margin: 0; + text-align: center; + + width: 700px; + + @include padding-left(3); + @include padding-right(3); + @include margin(2 auto); + + border-top: 1px solid #DCDCDC; + + @include mq($until: sm) { + display: none; + } + + } + + &__menu-item { + + position: relative; + display: inline-block; + + @include margin-top(1); + + @include font-size(xl); + @include line-height(1); + @include typeface(sans-serif); + font-weight: weight(regular); + + >a { + + @include padding-left(1); + @include padding-right(1); + display: block; + + &:after { + content: ''; + display: block; + position: absolute; + top: -34px; + left: 50%; + margin-left: -9px; + width: 18px; + height: 18px; + background: #FFFFFF; + border-left:1px solid #DCDCDC; + border-top:1px solid #DCDCDC; + + @include transform(scaleY(0) rotate(45deg)); + @include transition(all 0.25s ease-in-out); + } + + &.active { + &:after { + + @include transform(scaleY(1) rotate(45deg)); + + } + } + + } + + } + } diff --git a/app/templates/index.html b/app/templates/index.html index 03e48caf..aa8e66f7 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -20,14 +20,25 @@ {% block main %} {% include "home/inc/slider.html" %} - {% page_menu "pages/menus/magazine.html" %} - {% include "magazine/brief/brief_list.html" %} - -