Feature/dashboard

ircam_www_theme/locale/fr/LC_MESSAGES/django.po

@@ -1136,3 +1136,6 @@ msgstr "Tweets récents"
 
 #~ msgid "Persons"
 #~ msgstr "Personnes"
+
+#~ msgid "Dashboard"
+#~ msgstr "Tableau de bord"

ircam_www_theme/static/src/sass/modules/boxes/_dashboardservice-box.scss

@@ -0,0 +1,285 @@
+// -*- coding: utf-8 -*-
+
+// Copyright (c) 2016-2017 Ircam
+// Copyright (c) 2016-2017 Jérémy Fabre
+
+// This file is part of mezzanine-organization.
+
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <http://www.gnu.org/licenses/>.
+
+$module: ".dashboardservice-box";
+
+#{$module} {
+
+    position: relative;
+    background: white;
+    display: block;
+    @include margin-bottom(1);
+    @include transition(all 0.25s ease-in-out);
+
+    &:hover {
+        box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.17);
+        .dashboardservice-box__image {
+
+            img {
+                @include transform(scale(1.1));
+            }
+
+            &:after {
+                border-width: 12px;
+            }
+        }
+    }
+
+    &__header {
+        position: relative;
+    }
+
+    &__image {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        position: relative;
+        /*overflow: hidden;*/
+
+        @include fluid-aspect(427 286);
+
+        img {
+            display: block;
+            width: 100%;
+            max-width: 100%;
+            height: auto;
+            @include transition(all 0.3s ease-in-out);
+        }
+
+        &:after {
+            content: '';
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border-width: 0px;
+            border-color: white;
+            border-style: solid;
+            @include transition(all 0.25s ease-in-out);
+        }
+    }
+
+    &__placeholder {
+
+        background: $color-main;
+
+        &.recherche, &.research {
+            background-color: white;
+            background-image: url(../img/patterns/squares.png);
+            opacity: 0.4;
+        }
+        &.creation {
+            background-color: white;
+            background-image: url(../img/patterns/circles.png);
+            opacity: 0.2;
+        }
+        &.transmission {
+            background-color: white;
+            background-image: url(../img/patterns/stripes.png);
+            opacity: 0.4;
+        }
+        &.innovation, &.innovations {
+            background-color: white;
+            background-image: url(../img/patterns/triangles.png);
+            opacity: 0.2;
+        }
+
+    }
+
+    &__tags {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+
+        @include margin-bottom(.55);
+    }
+
+    &__btn {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+
+        @include margin-bottom(.5);
+        @include margin-right(.5);
+    }
+
+    &__content {
+        @include padding(.25 .25 1 .25);
+
+        position: relative;
+        overflow: hidden;
+
+        @include mq($until: xs) {
+            height: auto;
+        }
+
+        /*&:after {
+
+            @include mq($until: xs) {
+                display: none;
+            }
+
+            content: "";
+            display: block;
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 100px;
+            background-color: rgba(255,255,255,0);
+            @include filter-gradient(#ffffff, #ffffff, vertical);
+            @include background-image(linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%));
+        }*/
+    }
+
+    &__title {
+        @include font-size(xl);
+        @include line-height(1.25);
+        @include typeface(sans-serif);
+        @include margin(0 0 .25 0);
+    }
+
+    &__subtitle {
+        @include font-size(s);
+        @include line-height(.75);
+        @include typeface(serif);
+        @include margin-top(.25);
+        font-weight: weight(regular);
+
+        .slider-home & {
+
+            @include font-size(m);
+            @include line-height(1);
+            @include typeface(sans-serif);
+            @include margin-top(.25);
+            font-weight: weight(regular);
+
+        }
+
+    }
+
+    &__desc {
+        @include font-size(s);
+        @include line-height(.75);
+        @include typeface(serif);
+        @include margin(1 0 .25 0);
+        font-weight: weight(light);
+    }
+
+    &--small {
+
+        .dashboardservice-box__content {
+            height: auto;
+            &:after {
+                display: none;
+            }
+        }
+
+        .dashboardservice-box__btn {
+            display: none;
+        }
+
+    }
+
+    .slider-home & {
+        display: inline-block;
+        max-width: 450px;
+        background: transparent;
+
+        &__content {
+            background: white;
+            margin-top: 1px;
+        }
+    }
+
+    &--person {
+
+        @include margin-top(2);
+        position: relative;
+
+
+
+        &:after {
+
+            content: "";
+            display: block;
+            height: 1px;
+            width: 100%;
+            background: #979797;
+            position: absolute;
+            bottom: -24px;
+            left: 0;
+            right: 0;
+
+        }
+
+        #{$module}__title {
+
+            @include font-size(xl);
+            @include line-height(1.25);
+            @include typeface(sans-serif);
+            @include margin(.25 0 .25 0);
+            font-weight: weight(heavy);
+
+        }
+
+        #{$module}__image {
+
+            @include fluid-aspect(427 500);
+
+        }
+
+        #{$module}__desc {
+            @include line-height(1);
+        }
+
+        #{$module}__content {
+
+            height: 350px;
+
+            @include mq($until: xs) {
+                height: auto;
+            }
+
+            &:after {
+
+                @include mq($until: xs) {
+                    display: none;
+                }
+
+                content: "";
+                display: block;
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                height: 100px;
+                background-color: rgba(255,255,255,0);
+                @include filter-gradient(#ffffff, #ffffff, vertical);
+                @include background-image(linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%));
+            }
+
+        }
+
+    }
+
+}

ircam_www_theme/templates/includes/footer_scripts.html

@@ -1,21 +1,23 @@
 {% load mezzanine_tags i18n staticfiles %}
 
-    <script src="{% static "vendors/jquery/jquery.js" %}"></script>
-    <script src="{% static "vendors/overflow.js/js/overflow.js" %}"></script>
-    <script src="{% static "vendors/sticky-kit/jquery.sticky-kit.js" %}"></script>
-    <script src="{% static "vendors/jquery-throttle-debounce/jquery.ba-throttle-debounce.js" %}"></script>
-    <script src="{% static "vendors/lightslider/dist/js/lightslider.js" %}"></script>
-    <script src="{% static "vendors/lightgallery/dist/js/lightgallery.js" %}"></script>
-    <script src="{% static "vendors/imagesloaded/imagesloaded.pkgd.js" %}"></script>
-    <script src="{% static "vendors/pushy/js/pushy.js" %}"></script>
-    <script src="{% static "vendors/video.js/dist/video.js" %}"></script>
-    <script src="{% static "vendors/videojs-playlist/dist/videojs-playlist.js" %}"></script>
-    <script src="{% static "vendors/audiojs/audiojs/audio.js" %}"></script>
-    <script src="{% static "vendors/jquery_lazyload/jquery.lazyload.js" %}"></script>
-    <script src="{% static "vendors/waypoints/lib/jquery.waypoints.js" %}"></script>
-    <script src="{% static "js/index.min.js?v=1.1" %}"></script>
+{% compress js %}
+    <script src="{{ STATIC_URL }}/vendors/jquery/jquery.js"></script>
+    <script src="{{ STATIC_URL }}/vendors/overflow.js/js/overflow.js"></script>
+    <script src="{{ STATIC_URL }}/vendors/sticky-kit/jquery.sticky-kit.js"></script>
+    <script src="{{ STATIC_URL }}/vendors/jquery-throttle-debounce/jquery.ba-throttle-debounce.js"></script>
+    <script src="{{ STATIC_URL }}/vendors/lightslider/dist/js/lightslider.js"></script>
+    <script src="{{ STATIC_URL }}/vendors/lightgallery/dist/js/lightgallery.js"></script>
+    <script src="{{ STATIC_URL }}/vendors/imagesloaded/imagesloaded.pkgd.js"></script>
+    <script src="{{ STATIC_URL }}/vendors/pushy/js/pushy.js"></script>
+    <script src="{{ STATIC_URL }}/vendors/video.js/dist/video.js"></script>
+    <script src="{{ STATIC_URL }}/vendors/videojs-playlist/dist/videojs-playlist.js"></script>
+    <script src="{{ STATIC_URL }}/vendors/audiojs/audiojs/audio.js"></script>
+    <script src="{{ STATIC_URL }}/vendors/jquery_lazyload/jquery.lazyload.js"></script>
+    <script src="{{ STATIC_URL }}/vendors/waypoints/lib/jquery.waypoints.js"></script>
+    <script src="{{ STATIC_URL }}/js/index.min.js?v=1.1"></script>
 {% block extra_js %}{% endblock %}
 {% editable_loader %}
+{% endcompress %}
 
 {% if settings.GOOGLE_ANALYTICS_ID and not request.user.is_staff and not settings.DEBUG %}
 <script>

ircam_www_theme/templates/pages/dashboardservice/includes/dashboard_card.html

@@ -0,0 +1,56 @@
+{% load i18n pages_tags mezzanine_tags media_tags organization_tags %}
+
+<a class="dashboardservice-box" href="
+    {% block url %}
+        {{ object.url }}
+    {% endblock %}"
+    {% block target %}
+        {{ object.url }} target="_blank"
+    {% endblock %}
+    title="{% block metatitle %}{{ object.title }}{% endblock %}">
+    <div class="dashboardservice-box__header">
+        {% block image %}
+            <!-- img src="/media/{{object.image}}" / -->
+            {% with object.image as images %}
+                {% if images %}
+                    <figure class="dashboardservice-box__image">
+                        <img src="{{ MEDIA_URL }}{% thumbnail images 400 280 %}" data-original="" class="lazyload" title="{{ object.url }}"/>
+                    </figure>
+                {% else %}
+                    <figure class="dashboardservice-box__image">
+                        {% if object.department %}
+                            <div class="dashboardservice-box__placeholder {{object.department.name|slugify}}"></div>
+                        {% else %}
+                            <div class="dashboardservice-box__placeholder"></div>
+                        {% endif %}
+                    </figure>
+                {% endif %}
+            {% endwith %}
+        {% endblock %}
+
+        {% block tags %}
+        {% endblock %}
+
+        {% block btn %}
+        {% endblock %}
+
+    </div>
+
+    <div class="dashboardservice-box__content tal">
+        <h3 class="dashboardservice-box__title">
+            {% block title %}
+                {{ object.title }}
+            {% endblock %}
+        </h3>
+        <div class="dashboardservice-box__subtitle">
+            {% block subtitle %}
+                {{ object.sub_title }}
+            {% endblock %}
+        </div>
+        <div class="dashboardservice-box__desc">
+            {% block content %}
+                {{ object.description|richtext_filters|safe|truncatechars_html:200 }}
+            {% endblock %}
+        </div>
+    </div>
+</a>