From: Jérémy Fabre Date: Wed, 31 Aug 2016 14:45:04 +0000 (+0200) Subject: Add the slider on the homepage X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=0890bacf49fcd245dc67dd09b0299742bca5724c;p=mezzo.git Add the slider on the homepage --- diff --git a/app/static/src/js/index.js b/app/static/src/js/index.js index ae240de5..afeb2784 100644 --- a/app/static/src/js/index.js +++ b/app/static/src/js/index.js @@ -11,6 +11,7 @@ var Summary = require('./modules/summary'); 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'); // // Init all the modules @@ -25,3 +26,4 @@ window[Summary] = new Summary(); window[OverflowInit] = new OverflowInit(); window[StickyKitInit] = new StickyKitInit(); window[LightSliderPageInit] = new LightSliderPageInit(); +window[LightSliderHomeInit] = new LightSliderHomeInit(); diff --git a/app/static/src/js/modules/lightsliderhome-init.js b/app/static/src/js/modules/lightsliderhome-init.js new file mode 100644 index 00000000..b32ae0f6 --- /dev/null +++ b/app/static/src/js/modules/lightsliderhome-init.js @@ -0,0 +1,42 @@ +var LightSliderHomeInit = function() { + + // + // Init + // + this.init(); + +}; + +LightSliderHomeInit.prototype.init = function() { + + var that = this; + + $('[data-slider-home]').lightSlider({ + item: 1, + slideMargin: 0, + pager: false, + onAfterSlide: function(slider) { + var $pages = slider.parents('.slider-home').find('.slider-home__pager li'); + $pages.removeClass('active'); + console.log(slider.getCurrentSlideCount()); + $($pages[slider.getCurrentSlideCount()-1]).addClass('active'); + }, + onSliderLoad: function(slider) { + var $pages = slider.parents('.slider-home').find('.slider-home__pager li'); + $pages.each(function(idx) { + var that = $(this); + that.click(function(e) { + e.preventDefault(); + $pages.removeClass('active'); + that.addClass('active'); + slider.goToSlide(idx); + return false; + }); + + }); + } + }); + +}; + +module.exports = LightSliderHomeInit; diff --git a/app/static/src/sass/config/_config.scss b/app/static/src/sass/config/_config.scss new file mode 100644 index 00000000..6346c5af --- /dev/null +++ b/app/static/src/sass/config/_config.scss @@ -0,0 +1,8 @@ +// Layout + +$header-pre-height: 34px; +$header-height: 78px; + +// Home + +$home-slider-height: 760px; diff --git a/app/static/src/sass/config/_variables.scss b/app/static/src/sass/config/_variables.scss index a744d3e7..7a9f2a8f 100755 --- a/app/static/src/sass/config/_variables.scss +++ b/app/static/src/sass/config/_variables.scss @@ -32,11 +32,6 @@ $links-color: $main-text-color; $primary-font-family: Helvetica, Arial, sans-serif; $headings-font-family: $primary-font-family; -// Layout - -$header-pre-height: 34px; -$header-height: 78px; - // Typey $sans-serif: 'Oswald', sans-serif; diff --git a/app/static/src/sass/index.scss b/app/static/src/sass/index.scss index 4eecb0a9..8c0e6d8d 100755 --- a/app/static/src/sass/index.scss +++ b/app/static/src/sass/index.scss @@ -5,6 +5,7 @@ @import 'config/colors'; @import 'config/fonts'; @import 'config/variables'; +@import 'config/config'; @import 'libs/all'; diff --git a/app/static/src/sass/layout/_global.scss b/app/static/src/sass/layout/_global.scss index 18b56cc0..a10beeff 100755 --- a/app/static/src/sass/layout/_global.scss +++ b/app/static/src/sass/layout/_global.scss @@ -1,3 +1,8 @@ +.banner { + position: relative; + z-index: 2; +} + .main { @include margin(3 0 0 0); @include padding(1 0 0 0); diff --git a/app/static/src/sass/modules/_all.scss b/app/static/src/sass/modules/_all.scss index ac344b8d..3a90e375 100755 --- a/app/static/src/sass/modules/_all.scss +++ b/app/static/src/sass/modules/_all.scss @@ -10,6 +10,7 @@ // Sliders @import 'sliders/slider-page'; +@import 'sliders/slider-home'; // Page modules @import 'breadcrumb'; diff --git a/app/static/src/sass/modules/boxes/_article-box.scss b/app/static/src/sass/modules/boxes/_article-box.scss index e2c5c691..9208b02a 100644 --- a/app/static/src/sass/modules/boxes/_article-box.scss +++ b/app/static/src/sass/modules/boxes/_article-box.scss @@ -133,4 +133,15 @@ $module: ".article-box"; } + .slider-home & { + display: inline-block; + max-width: 450px; + background: transparent; + + &__content { + background: white; + margin-top: 1px; + } + } + } diff --git a/app/static/src/sass/modules/sliders/_slider-home.scss b/app/static/src/sass/modules/sliders/_slider-home.scss new file mode 100644 index 00000000..f4dc80b4 --- /dev/null +++ b/app/static/src/sass/modules/sliders/_slider-home.scss @@ -0,0 +1,94 @@ +$module: ".slider-home"; + +#{$module} { + + position: relative; + + ul { + list-style-type: none; + margin: 0; + padding: 0; + } + + + &__slide { + + width: 100%; + height: $home-slider-height; + background-repeat: no-repeat; + background-position: center center; + background-size: cover; + position: relative; + + } + + &__wrapper { + + position: absolute; + bottom: 75px; + left: 0; + right: 0; + + } + + &__content { + + background: white; + display: inline-block; + @include padding(1); + + } + + &__credits { + + position: absolute; + bottom: 0; + right: 0; + + @include font-size(xs); + @include line-height(1); + @include typeface(sans-serif); + @include padding(.25 .5); + font-weight: weight(light); + + background: rgba(0,0,0,0.5); + color: white; + + } + + // + // Overrides lightSlider + // + + &__pager { + + position: absolute; + bottom: 33px; + left: 0; + right: 0; + + ul { + list-style-type: none; + margin: 0; + padding: 0; + li { + display: inline-block; + margin-right: 10px; + a { + display: block; + width: 14px; + height: 14px; + background: white; + &:hover { + background: $color-main; + } + } + &.active a { + background: $color-main; + } + } + } + + } + +} diff --git a/app/static/src/sass/pages/_all.scss b/app/static/src/sass/pages/_all.scss index 8b137891..cddcdfbb 100755 --- a/app/static/src/sass/pages/_all.scss +++ b/app/static/src/sass/pages/_all.scss @@ -1 +1 @@ - +@import "home"; diff --git a/app/static/src/sass/pages/_home.scss b/app/static/src/sass/pages/_home.scss new file mode 100644 index 00000000..d5cd08cb --- /dev/null +++ b/app/static/src/sass/pages/_home.scss @@ -0,0 +1,12 @@ +$module: ".home"; + +#{$module} { + + .main { + + margin-top: -($header-height + $header-pre-height); + padding-top: 0; + + } + +} diff --git a/app/templates/home/inc/slider.html b/app/templates/home/inc/slider.html index 4a91e90b..c5d055f2 100644 --- a/app/templates/home/inc/slider.html +++ b/app/templates/home/inc/slider.html @@ -1,18 +1,66 @@ -{% load organization_tags i18n %} -
-

Slider

-
-{% for slider in home.dynamiccontenthomeslider_set.all %} -{{ slider.content_object }} - {% with slider.content_object.images.all|get_type:'slider' as images %} - {% if images %} -

{{ slider.content_object.title }}


-
- {{ image.credits }}
- {{ slider.content_object.title }}
- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
- {% endif %} - {% endwith %} -{% endfor %} -
-
+{% load i18n pages_tags mezzanine_tags media_tags organization_tags %} + +
+ +
+
+
+
+
    + {% for slider in home.dynamiccontenthomeslider_set.all %} +
  • + +
    • + {% endfor %} +
+
+
+
+
+
diff --git a/app/templates/index.html b/app/templates/index.html index 9ce25828..03e48caf 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -1,27 +1,35 @@ {% extends "base.html" %} {% load i18n pages_tags mezzanine_tags %} -{% block meta_title %}{% trans "Home" %}{% endblock %} +{% block meta_title %} + {% trans "Home" %} +{% endblock %} + +{% spaceless %} +{% block body_class %} + home +{% endblock %} +{% endspaceless %} {% block breadcrumb_menu %} -
  • {% trans "Home" %}
    • +
  • {% trans "Home" %}
    • {% endblock %} {% block content_header %}{% endblock %} {% block main %} -{% include "home/inc/slider.html" %} -{% page_menu "pages/menus/magazine.html" %} -{% include "magazine/brief/brief_list.html" %} - + {% include "home/inc/slider.html" %} + {% page_menu "pages/menus/magazine.html" %} + {% include "magazine/brief/brief_list.html" %} -{% include "home/inc/body.html" %} + + {% include "home/inc/body.html" %} {% endblock %}