Custompage and event list first implementation

diff --git a/app/static/src/sass/global/_buttons.scss b/app/static/src/sass/global/_buttons.scss
index 56c1c88c0ca3e0286667d35b9bba260ebd2fe035..896a45d423ea33919ea866cfecaba20986f5af12 100755 (executable)
--- a/app/static/src/sass/global/_buttons.scss
+++ b/app/static/src/sass/global/_buttons.scss
@@ -80,6 +80,20 @@ $module: ".button";
 
     }
 
+    &--accent {
+
+        background-color: $color-accent;
+        color: white;
+        border: 1px solid $color-accent;
+
+        &:hover {
+            background-color: white;
+            color: $color-accent;
+            border: 1px solid white;
+        }
+
+    }
+
     &--small {
         @include font-size(m);
         @include padding(.18 1);

diff --git a/app/static/src/sass/modules/_page.scss b/app/static/src/sass/modules/_page.scss
index 37289e2d95891b633feba41f010b63e0ff8f9ee2..b99f1da0c00d5dca6a335a90a90332d8b95b5b31 100644 (file)
--- a/app/static/src/sass/modules/_page.scss
+++ b/app/static/src/sass/modules/_page.scss
@@ -23,6 +23,7 @@ $module: ".page";
 #{$module} {
 
     min-height: 500px;
+    @include margin-top(5);
 
     @include mq($until: sm) {
         min-height: 0;
@@ -134,7 +135,6 @@ $module: ".page";
     &__block {
 
         @include padding-bottom(1);
-        background-color: white;
 
         &--yellow {
 

diff --git a/app/static/src/sass/modules/_section-title.scss b/app/static/src/sass/modules/_section-title.scss
index 1dcd1c85ceb63a9c9e439fd96c073fdece89e82a..4c59094d40e96cd8625df96791d4e55d2ab7e5b9 100644 (file)
--- a/app/static/src/sass/modules/_section-title.scss
+++ b/app/static/src/sass/modules/_section-title.scss
@@ -9,6 +9,7 @@ $module: ".section-title";
     text-align: center;
     color: white;
     display: inline-block;
+    line-height: 1.5em;
 
     @include margin-bottom(4);
     @include margin-top(0);
@@ -31,7 +32,7 @@ $module: ".section-title";
             color: $color-accent;
         }
     }
-    
+
     &--main {
         border-color: $color-main;
         &:before {

diff --git a/app/static/src/sass/modules/boxes/_article-box.scss b/app/static/src/sass/modules/boxes/_article-box.scss
index 277a414374d2401b8c119e2e0031bd5653ca3734..057d3c2089ff639e94818a800640d66f711fa184 100644 (file)
--- a/app/static/src/sass/modules/boxes/_article-box.scss
+++ b/app/static/src/sass/modules/boxes/_article-box.scss
@@ -25,9 +25,9 @@ $module: ".article-box";
     position: relative;
     display: block;
     @include margin-bottom(1);
-    @include transition(all 0.25s ease-in-out);
+    @include transition(all 0.5s ease-in-out);
 
-    border: 1px solid $color-main;
+    border: 1px solid rgba($color-main, 0.35);
     @include padding(1);
 
     .slider-home & {
@@ -37,6 +37,7 @@ $module: ".article-box";
 
     &:hover {
 
+        border: 1px solid rgba($color-main, 1);
         background: $color-main;
 
         .article-box__image-container {

diff --git a/app/static/src/sass/modules/boxes/_event-line-box.scss b/app/static/src/sass/modules/boxes/_event-line-box.scss
index f8cea2a77340ba76c7a2ba4e1cf254d166edcc31..a2f993e27ed186044673454bc826606d5cb5d989 100644 (file)
--- a/app/static/src/sass/modules/boxes/_event-line-box.scss
+++ b/app/static/src/sass/modules/boxes/_event-line-box.scss
@@ -22,26 +22,51 @@ $module: ".event-line-box";
 
 #{$module} {
 
-    &__content {
+    position: relative;
+    display: block;
 
-        &:after {
+    border: 1px solid rgba($color-main, 0.35);
 
-            content: "";
-            display: block;
-            width: 100%;
-            height: 1px;
-            background: rgba(0, 0, 0, 0.25);
+    background: $color-background;
+    @include transition(all 0.5s ease-in-out);
+    @include margin-bottom(5);
 
-            @include margin(1 0 1 0);
+    &:hover {
 
-            @include mq($until: sm) {
-                @include margin(1 0 1 0);
-            }
+        border: 1px solid rgba($color-main, 1);
+        background: black;
+
+        .event-line-box__image {
+
+            -webkit-filter: grayscale(0);
+            filter: grayscale(0);
+
+        }
+
+        .event-line-box__category {
+
+            background: $color-main;
+
+        }
+
+        .event-line-box__date {
+
+            color: $color-main;
 
         }
 
     }
 
+    &__content {
+
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 390px;
+        width: 100%;
+
+    }
+
     &__month {
 
         @include font-size(l);
@@ -56,7 +81,22 @@ $module: ".event-line-box";
 
     &__image {
 
-        @include fluid-aspect(200 140);
+        @include fluid-aspect(1030 400);
+
+        @include transition(all 0.5s ease-in-out);
+
+        -webkit-filter: grayscale(1);
+        filter: grayscale(1);
+        mix-blend-mode: screen;
+
+    }
+
+    &__button {
+
+        position: absolute;
+        top: 50%;
+        right: 1rem;
+        @include transform(translateY(-50%));
 
     }
 
@@ -66,18 +106,50 @@ $module: ".event-line-box";
 
     }
 
+    &__category {
+
+        position: absolute;
+        top: 50%;
+        left: 0;
+        background: white;
+        color: $color-background;
+        text-align: right;
+        text-transform: uppercase;
+        @include font-size(s);
+        @include line-height(1.25);
+        @include typeface(sans-serif);
+        font-weight: weight(regular);
+
+        @include padding(0.1 .5 0.1 .5);
+        @include transform(translateY(-50%));
+        @include transition(all 0.5s ease-in-out);
+        width: 10rem;
+
+    }
+
+    &__body {
+
+        position: absolute;
+        top: 50%;
+        left: 12rem;
+        @include transform(translateY(-50%));
+
+    }
+
     &__title {
 
-        @include font-size(xxl);
+        font-size: 36px;
         @include line-height(1.25);
         @include typeface(sans-serif);
-        font-weight: weight(bold);
+        font-weight: weight(regular);
+
+        color: $color-main;
 
-        margin-top: 0;
-        @include margin-bottom(1);
+        margin: 0;
 
         a:not(.button) {
 
+            color: $color-main;
             border: 0;
 
             &:hover {
@@ -88,6 +160,29 @@ $module: ".event-line-box";
 
     }
 
+    &__location {
+
+        @include font-size(s);
+        @include line-height(1.25);
+        @include typeface(sans-serif);
+        font-weight: weight(regular);
+        color: $color-main;
+
+    }
+
+    &__date {
+
+        @include font-size(l);
+        @include line-height(1.25);
+        @include typeface(sans-serif);
+        font-weight: weight(regular);
+        color: white;
+        @include transition(all 0.5s ease-in-out);
+
+        @include margin-top(1);
+
+    }
+
     &__desc {
 
         @include font-size(m);
@@ -95,6 +190,8 @@ $module: ".event-line-box";
         @include typeface(serif);
         font-weight: weight(light);
 
+        color: $color-main;
+
     }
 
 }

diff --git a/app/templates/agenda/event_list.html b/app/templates/agenda/event_list.html
index f64ee271f14a2ba9d7169ccec2acbfcc5edcbf99..e0386e28bcfb3cbd65d04c80cbe4043a58d6689c 100644 (file)
--- a/app/templates/agenda/event_list.html
+++ b/app/templates/agenda/event_list.html
@@ -5,7 +5,7 @@
     {% if page %}
         {{ page.title }}
     {% else %}
-        {% trans "Rendez-vous in Paris" %}
+        {% trans "Events" %}
     {% endif %}
 {% endblock %}
 
@@ -33,125 +33,23 @@
     <div class="page page--{% spaceless %}{% block page_class %}{% endblock %}{% endspaceless %}">
         <div class="container">
             <div class="row">
-                <div class="col-sm-9 col-sm-push-3 col-lg-8 col-lg-push-2">
-                    <h1 class="dotted">
-                        {% if tag and tag|tag_is_excluded %}
-                            {% trans "On tour" %}
-                        {% elif is_archive %}
-                            {% trans 'Archives' %}
-                        {% else %}
-                            {{ page.title }}
-                        {% endif %}
-                    </h1>
+                <div class="col-sm-16 col-md-10 col-md-push-3 tac">
+                    <h1 class="section-title section-title--uppercase section-title--main">{% trans "Events" %}</h1>
                 </div>
             </div>
 
             <div class="row">
-                <div class="col-sm-3 col-lg-2 page__sidebar">
-                    <div style="position: relative;" >
-                        {% if tag and not tag|tag_is_excluded or not tag and not is_archive %}
-                        <a class="banner banner--light banner--sidebar hide-until-sm" href="{% url 'event_list_tag' 'tournees' %}" style="background-image:url({% static 'img/services/tours.jpg' %});">
-                            <div class="banner__content">
-                                <div class="banner__title fsxxxl">{% trans "On tour" %} {{ current_season_styled }}
-                                </div>
-                            </div>
-                        </a>
-                        {% endif %}
 
-                        <div class="nav-tree-wrapper" data-sticky data-sticky-parent="row" data-sticky-offset="100" data-sticky-detach-at="971">
-                            {% if not tag and not is_archive %}
-                                {% page_menu "pages/menus/current_tree_event.html" %}
-                            {% else %}
-                                <ul class="nav-tree nav-tree--level-{{ branch_level }}">
-                                    <li class="nav-tree__item">
-                                        <a class="nav-tree__link active" href="{% url 'event_list' %}">
-                                            {% if tag and tag|tag_is_excluded %}
-                                                {% trans "On tour" %}
-                                            {% elif is_archive %}
-                                                {% trans 'Archives' %}
-                                            {% else %}
-                                                {% trans "Rendez-vous in Paris" %}
-                                            {% endif %}
-                                        </a>
-
-                                        <ul class="nav-tree" data-summary>
-                                            <li class="nav-tree__item nav-tree__item--sub hide">
-                                                <a class="nav-tree__link nav-tree__link--sub" href="#"></a>
-                                            </li>
-                                        </ul>
-                                    </li>
-
-                                    {% if is_archive %}
-                                        <li class="nav-tree__item">
-                                            <a class="nav-tree__link" href="{% url 'event_list' %}">
-                                                {% trans "Rendez-vous in Paris" %}
-                                            </a>
-                                        </li>
-                                    {% endif %}
-
-                                    {% if tag and tag|tag_is_excluded %}
-                                        <li class="nav-tree__item">
-                                            <a class="nav-tree__link" href="{% url 'event_list' %}">
-                                                {% trans "Rendez-vous in Paris" %}
-                                            </a>
-                                        </li>
-                                    {% else %}
-                                        <li class="nav-tree__item">
-                                            <a class="nav-tree__link" href="{% url 'event_list_tag' 'tournees' %}">
-                                                {% trans "On tour" %}
-                                            </a>
-                                        </li>
-                                    {% endif %}
-
-                                    {% if not is_archive %}
-                                        <li class="nav-tree__item">
-                                            <a class="nav-tree__link" href="{% url "event_list_year" current_season %}" title="{% trans 'archive' %}">{% trans 'Archives' %}</a>
-                                        </li>
-                                    {% endif %}
-                                </ul>
-                            {% endif %}
-
-                            {% if tag and not tag|tag_is_excluded or not tag and not is_archive %}
-                                <ul class="nav-tree nav-tree--level-{{ branch_level }}">
-                                {% keywords_for mezzanine_agenda.event as tags %}
-                                    {# {% all_events as all_events %}#}
-                                    {% if tags %}
-                                        {% comment %}
-                                            <a href="{% url 'event_list' %}" class="button{% if not tag %} button--black{% else %} button--white{% endif %}">{% trans "All events" %}</a>
-                                        {% endcomment %}
-                                        {% for t in tags %}
-                                            {% if not t|tag_is_excluded %}
-                                                <li class="nav-tree__item">
-                                                    <a class="nav-tree__link--filter nav-tree__link{% if tag == t %} active{% endif %}" href="{% if tag == t %}{% url 'event_list' %}{% else %}{% url "event_list_tag" t.slug %}{% endif %}">
-                                                        {{ t }} {% if tag == t %}<i class="fa fa-times"></i>{% endif %}
-                                                    </a>
-                                                </li>
-                                            {% endif %}
-                                        {% endfor %}
-                                    {% endif %}
-                                </ul>
-                            {% endif %}
-                        </div>
-                    </div>
-                </div>
-
-                <div class="mb2 col-sm-9 col-lg-10 page__content" data-summary-content>
+                <div class="mb2 col-md-12 col-md-push-2 page__content" data-summary-content>
                     <div class="page__content">
                         <div class="container">
                             {% for event in events.object_list %}
                                 {% include 'agenda/includes/event_linecard.html' %}
                             {% endfor %}
-                            {% if tag and not tag|tag_is_excluded or not tag and not is_archive %}
-                            <a class="banner banner--light banner--sidebar hide-from-sm" href="{% url 'event_list_tag' 'tournees' %}" style="background-image:url({% static 'img/services/tours.jpg' %});">
-                                <div class="banner__content">
-                                    <div class="banner__title fsxxxl">{% trans "On tour" %} {{ current_season_styled }}
-                                    </div>
-                                </div>
-                            </a>
-                            {% endif %}
                         </div>
                     </div>
                 </div>
+
             </div>
         </div>
     </div>

diff --git a/app/templates/agenda/includes/event_linecard.html b/app/templates/agenda/includes/event_linecard.html
index 2d729f22ca18507d6dbce6eafa365326bfbd8389..803218b43b2af0acbdf79876389a1a25c81ad8db 100644 (file)
--- a/app/templates/agenda/includes/event_linecard.html
+++ b/app/templates/agenda/includes/event_linecard.html
@@ -1,56 +1,75 @@
 {% load i18n future mezzanine_tags event_tags keyword_tags disqus_tags organization_tags %}
 
-<div class="row event-line-box">
-    {% ifchanged event.start.month %}
-        <div class="col-sm-12 col-md-12 col-lg-12 event-line-box__month">
-            <h2>{{ event.start|date:'F' }}</h2>
-        </div>
-    {% endifchanged %}
-    <div class="col-sm-12 col-md-12 col-lg-12 event-line-box__content">
-        <div class="row">
-            <div class="col-xs-3">
-                {% with True as unit_booking %}
-                    {% include 'agenda/includes/event_metainfo_line.html' %}
-                {% endwith %}
-            </div>
-            <div class="col-xs-3">
-                {% with event.images.all|get_type:'card' as images %}
-                    {% if images %}
-                        <a href="{{ event.get_absolute_url }}">
+<div class="row">
+
+    <div class="col-sm-16">
+
+        <a class="event-line-box" href="{{ event.get_absolute_url }}">
+
+            {% with event.images.all|get_type:'card' as images %}
+                {% if images %}
+                    <figure class="event-line-box__image">
+                        <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-original="{{ MEDIA_URL }}{% thumbnail images.0.file 1030 400 %}">
+                    </figure>
+                {% else %}
+                    {% with event.parent.images.all|get_type:'card' as images %}
+                        {% if images %}
                             <figure class="event-line-box__image">
-                                <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-original="{{ MEDIA_URL }}{% thumbnail images.0.file 400 280 %}">
+                                <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-original="{{ MEDIA_URL }}{% thumbnail images.0.file 1030 400 %}">
                             </figure>
-                        </a>
-                    {% else %}
-                        {% with event.parent.images.all|get_type:'card' as images %}
-                            {% if images %}
-                                <a href="{{ event.get_absolute_url }}">
-                                    <figure class="event-line-box__image">
-                                        <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-original="{{ MEDIA_URL }}{% thumbnail images.0.file 400 280 %}">
-                                    </figure>
-                                </a>
+                        {% else %}
+                            <figure class="event-line-box__image">
+                                <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
+                            </figure>
+                        {% endif %}
+                    {% endwith %}
+                {% endif %}
+            {% endwith %}
+
+            <div class="event-line-box__content">
+
+                {% if event.prices.all and not is_archive %}
+                    {% if event.trainings.all|length %}
+                        {% with event.links.all as links %}
+                            {% if links %}
+                                <object class="event-line-box__button">
+                                    <a href="{{ links|get_type_link:'link'|first }}" class="button button--accent">
+                                        {% trans "Reserve" %}
+                                    </a>
+                                </object>
                             {% endif %}
                         {% endwith %}
+                    {% else %}
+                        <object class="event-line-box__button">
+                            <a href="{% url 'event_booking' event.slug %}" class="button button--accent">
+                                {% trans "Reserve" %}
+                            </a>
+                        </object>
                     {% endif %}
-                {% endwith %}
-            </div>
-            <div class="col-xs-6">
+                {% endif %}
+
                 {% keywords_for event as tags %}
-                <div class="event-line-box__tags">
-                    <div class="tag tag--small dashed">
-                        {% if event.departments.all %}{{ event.departments.all.0.department.name }}{% else %}{{ event.parent.departments.all.0.department.name }}{% endif %}
-                    </div>
-                    <div class="tag tag--small tag--category">
-                        {% if event.category %}{{ event.category }}{% else %}{{ event.parent.category }}{% endif %}
-                    </div>
+
+                <div class="event-line-box__category">
+                    {% if event.category %}{{ event.category }}{% else %}{{ event.parent.category }}{% endif %}
                 </div>
-                <h3 class="event-line-box__title">
-                    <a href="{{ event.get_absolute_url }}">{{ event.title }}</a>
-                </h3>
-                <div class="event-line-box__desc">
-                    {% if event.description %}{{ event.description|slice:":100" }}{% else %}{{ event.parent.description|slice:":100" }}{% endif %}
+
+                <div class="event-line-box__body">
+                    {% if event.location %}
+                        <div class="event-line-box__location">{{ event.location }}</div>
+                    {% endif %}
+                    <h3 class="event-line-box__title">
+                        {{ event.title }}
+                    </h3>
+                    <div class="event-line-box__date">
+                        {% include 'agenda/includes/event_date_line.html' with object=event %}
+                    </div>
                 </div>
+
             </div>
-        </div>
+
+        </a>
+
     </div>
+
 </div>

diff --git a/app/templates/core/inc/block.html b/app/templates/core/inc/block.html
index bdc2f697effdd287c9c83889ba436e03647cf42d..0cda60247943cbd7d51d5a831d42d4b92ebd6a8a 100644 (file)
--- a/app/templates/core/inc/block.html
+++ b/app/templates/core/inc/block.html
@@ -1,6 +1,6 @@
 {% load i18n mezzanine_tags keyword_tags pages_tags organization_tags %}
 {% if blocks %}
-    <div class="white-bg pb2">
+    <div class="pb2">
         {% if blocks.first %}
         <hr class="mt0" />
         {% endif %}
@@ -12,7 +12,7 @@
                 <div class="page__block{% if block.background_color %} page__block--{{ block.background_color }}{% endif %}">
                     <div class="container">
                         <div class="row" data-summary-content>
-                            <div class="col-sm-9 col-sm-push-3 col-lg-8 col-lg-push-2">
+                            <div class="col-sm-16 col-md-10 col-md-push-3">
                                 {% editable block.title %}
                                     <h2 class="dotted">{{ block.title }}</h2>
                                 {% endeditable %}

diff --git a/app/templates/core/inc/related_content.html b/app/templates/core/inc/related_content.html
index ff4b14e28bc691205addbb711a013be77db1b28c..e8f61a9a38f412b6b728755c58cbafad156af1c0 100644 (file)
--- a/app/templates/core/inc/related_content.html
+++ b/app/templates/core/inc/related_content.html
@@ -1,10 +1,10 @@
 {% load i18n mezzanine_tags keyword_tags organization_tags pages_tags %}
 {% if dynamic_content.first.content_object %}
     <hr class="mt0 mb0" />
-    <div class="white-bg pb2">
+    <div class="pb2">
         <div class="container">
             <div class="row tac">
-                <div class="col-xs-12">
+                <div class="col-xs-16">
                     <h2 class="dashed dashed--center mt2">{% if object.related_title.title %}{{ object.related_title.title }}{% else %}{% trans "Also discover" %}{% endif %}</h2>
                 </div>
             </div>

diff --git a/app/templates/pages/custompage.html b/app/templates/pages/custompage.html
index b9cf1ab7f87fd43beeab4ddd0bd72a023e466a37..6e324e11742d601fb86f29e5894cc37b0a02ea4c 100644 (file)
--- a/app/templates/pages/custompage.html
+++ b/app/templates/pages/custompage.html
@@ -16,7 +16,7 @@
 
     {% block page_title %}
         {% editable page.custompage.title %}
-            <h1 class="dotted">{{ page.custompage.title }}</h1>
+            <h1 class="section-title section-title--uppercase section-title--main">{{ page.custompage.title }}</h1>
         {% endeditable %}
     {% endblock %}
 

diff --git a/app/templates/pages/page.html b/app/templates/pages/page.html
index 5ef745fb957704ba55eb5d6f4707ccd227da27f2..bd585525ee40b5591c9946c53d4f36846c1da825 100644 (file)
--- a/app/templates/pages/page.html
+++ b/app/templates/pages/page.html
@@ -22,16 +22,7 @@
 
             <div class="row">
 
-                <div class="col-sm-9 col-sm-push-3 col-lg-8 col-lg-push-2">
-                    {% block page_tags %}
-                    {% endblock %}
-                </div>
-
-            </div>
-
-            <div class="row">
-
-                <div class="col-sm-9 col-sm-push-3 col-lg-9 col-lg-push-2 white-bg">
+                <div class="col-sm-16 col-md-10 col-md-push-3 tac">
                     {% block page_title %}
                         {{ page.title }}
                     {% endblock %}
@@ -41,19 +32,7 @@
 
             <div class="row">
 
-                <div class="col-sm-3 col-lg-2 page__sidebar">
-                    <div style="position: relative;">
-                        {% block page_sidebar %}
-                            {% if page.get_ascendants|length < 2 %}
-                                {% page_menu "pages/menus/current_tree_primary.html" %}
-                            {% endif %}
-                            {% if page.get_ascendants|length == 2 %}
-                                {% page_menu "pages/menus/current_tree_secondary.html" %}
-                            {% endif %}
-                        {% endblock %}
-                    </div>
-                </div>
-                <div class="mb2 col-sm-9 col-lg-9 white-bg page__content" data-summary-content>
+                <div class="mb2 col-sm-16 col-md-10 col-md-push-3 page__content" data-summary-content>
                     {% block page_content %}
                         {{ page.content }}
                     {% endblock %}
@@ -104,7 +83,7 @@
             {% endfor %}
         {% endblock %}
 
-        <div class="white-bg">
+        <div class="">
 
             {% block page_person_list %}
             {% endblock %}
@@ -152,7 +131,7 @@
                             <div class="white-bg pb2">
                                 <div class="container">
                                     <div class="row" data-summary-content>
-                                        <div class="col-sm-9 col-sm-push-3 col-lg-8 col-lg-push-2">
+                                        <div class="col-sm-16">
                                             <ul class="partners-list">
                                                 {% include 'core/inc/logo.html' %}
                                             </ul>
@@ -169,7 +148,7 @@
 
     </div>
 
-    <div class="white-bg">
+    <div>
 
         {% block page_related_content %}
             {% with dynamic_content=page.dynamic_content_pages.all object=page %}