Add the slider on the homepage

diff --git a/app/static/src/js/index.js b/app/static/src/js/index.js
index ae240de57068e776df6bef95b4d959bc720b8c54..afeb27841a57e35d3b67d124d1dbc520549b73e1 100644 (file)
--- 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 (file)
index 0000000..b32ae0f
--- /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 (file)
index 0000000..6346c5a
--- /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 a744d3e71aae4d7db4c9a3a8018f464dc7f9aa76..7a9f2a8f37717e3aba04637fd67de4e8a0477768 100755 (executable)
--- 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 4eecb0a93f290c377abc9f7f9e2a4793e718cc89..8c0e6d8d59b3535d4f768b14bfd9fbbb1025d364 100755 (executable)
--- 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 18b56cc046990e090ee4bba0a40c52b157f7707b..a10beeff65076004681d91ef62123fd8d3b95235 100755 (executable)
--- 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 ac344b8d994d381d91afd1d9d1d2dd50e4a919a4..3a90e37508eedb79a97793e332d3122d56e0e719 100755 (executable)
--- 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 e2c5c691ea6e862be934b72f53d41e3f5e2c2b6d..9208b02a3b2ae88cba1cc3c3161203b203574615 100644 (file)
--- 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 (file)
index 0000000..f4dc80b
--- /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 8b137891791fe96927ad78e64b0aad7bded08bdc..cddcdfbb57797c129c53919f1e650f5fe868e7e8 100755 (executable)
--- 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 (file)
index 0000000..d5cd08c
--- /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 4a91e90bd2b62b195266fa3e7b4af90bc2cefaea..c5d055f252e55cb8010474894931e25cf0af2998 100644 (file)
--- a/app/templates/home/inc/slider.html
+++ b/app/templates/home/inc/slider.html
@@ -1,18 +1,66 @@
-{% load organization_tags i18n %}
-<hr/>
-<h1>Slider</h1>
-<br/>
-{% for slider in home.dynamiccontenthomeslider_set.all %}
-{{ slider.content_object }}
-  {% with slider.content_object.images.all|get_type:'slider' as images %}
-    {% if images %}
-          <h2>{{ slider.content_object.title }}<h2><br/>
-          <img src="{{ MEDIA_URL }}{{ images.0.file }}" title="{{ images.0.credits }}" /><br/>
-          {{ image.credits }}<br/>
-          <a href="{{ slider.content_object.get_absolute_url }}" title="{{ slider.content_object.title }}">{{ slider.content_object.title }}</a><br/>
-          ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<br/>
-    {% endif %}
-  {% endwith %}
-{% endfor %}
-<br/>
-<hr/>
+{% load i18n pages_tags mezzanine_tags media_tags organization_tags %}
+
+<div class="slider-home">
+    <ul data-slider-home>
+        {% for slider in home.dynamiccontenthomeslider_set.all %}
+                {% with slider.content_object.images.all|get_type:'slider' as images %}
+                    {% if images %}
+                        <li class="slider-home__slide" style="background-image: url({{ MEDIA_URL }}{% thumbnail images.0.file 1440 760 %});">
+                            <!--<img src="{{ MEDIA_URL }}{{ images.0.file }}" title="{{ images.0.credits }}" />-->
+                            <div class="slider-home__wrapper">
+                                <div class="container">
+                                    <div class="row">
+                                        <div class="col-xs-12 col-sm-11 col-sm-push-1">
+                                            <a class="article-box article-box--inline" href="{{ slider.content_object.get_absolute_url }}" title="{{ slider.content_object.title }}">
+                                                {% if slider.content_object.department %}
+                                                    <div class="tag dashed">
+                                                      {{ slider.content_object.department.name }}
+                                                    </div>
+                                                {% endif %}
+                                                <div class="tag tag--category">
+                                                    {% trans 'News' %}
+                                                </div>
+
+                                                <div class="article-box__content tal">
+                                                    <h3 class="article-box__title">{{ slider.content_object.title }}</h3>
+                                                    <div class="article-box__subtitle">
+                                                        <strong>Subtitle</strong>
+                                                        {{ slider.content_object.subtitle|richtext_filters|safe|truncatechars_html:200 }}
+                                                    </div>
+                                                    <div class="article-box__desc">
+                                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum deserunt voluptas laboriosam, saepe pariatur at deleniti. Est, natus totam voluptate corporis, veritatis explicabo laudantium hic voluptatibus numquam, qui ratione laboriosam.
+                                                         {{ slider.content_object.content|richtext_filters|safe|truncatechars_html:200 }}
+                                                    </div>
+                                                </div>
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            {% if image.credits %}
+                                <div class="slider-home__credits">
+                                    {{ image.credits }}
+                                </div>
+                            {% endif %}
+                        </li>
+                    {% endif %}
+                {% endwith %}
+
+        {% endfor %}
+    </ul>
+    <div class="slider-home__pager">
+        <div class="container">
+            <div class="row">
+                <div class="col-xs-12 col-sm-11 col-sm-push-1">
+                    <ul class="">
+                        {% for slider in home.dynamiccontenthomeslider_set.all %}
+                            <li class="{% if forloop.first %}active{% endif %}">
+                                <a href="#"></a>
+                            </li>
+                        {% endfor %}
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

diff --git a/app/templates/index.html b/app/templates/index.html
index 9ce2582899fdcfb771d39b13b18de528e553d4f4..03e48caf863987f034b6c333c6d390c827d5952a 100644 (file)
--- 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 %}
-<li class="active">{% trans "Home" %}</li>
+    <li class="active">{% trans "Home" %}</li>
 {% endblock %}
 
 {% block content_header %}{% endblock %}
 
 {% block main %}
-{% include "home/inc/slider.html" %}
-{% page_menu "pages/menus/magazine.html" %}
-{% include "magazine/brief/brief_list.html" %}
 
-<ul>
-  <li><a href="#" title="{% trans "News Headlines" %}">{% trans "News Headlines" %}</a></li>
-  <li><a href="#" title="{% trans "Magazine" %}">{% trans "Magazine" %}</a></li>
-  <li><a href="#" title="{% trans "Brief" %}">{% trans "Brief" %}</a></li>
-  <li><a href="#" title="{% trans "Media" %}">{% trans "Media" %}</a></li>
-</ul>
+    {% include "home/inc/slider.html" %}
+    {% page_menu "pages/menus/magazine.html" %}
+    {% include "magazine/brief/brief_list.html" %}
 
-{% include "home/inc/body.html" %}
+    <ul>
+      <li><a href="#" title="{% trans "News Headlines" %}">{% trans "News Headlines" %}</a></li>
+      <li><a href="#" title="{% trans "Magazine" %}">{% trans "Magazine" %}</a></li>
+      <li><a href="#" title="{% trans "Brief" %}">{% trans "Brief" %}</a></li>
+      <li><a href="#" title="{% trans "Media" %}">{% trans "Media" %}</a></li>
+    </ul>
 
+    {% include "home/inc/body.html" %}
 
 {% endblock %}