From 32739616055dbf94d8905028069527af9445a70e Mon Sep 17 00:00:00 2001
From: =?utf8?q?Je=CC=81re=CC=81my=20Fabre?= <Jeremy@iMac-de-Jeremy.local>
Date: Fri, 14 Oct 2016 12:36:30 +0200
Subject: [PATCH] New events filters (sidebar)

---
 .../sass/modules/boxes/_event-line-box.scss   | 17 ++++++--
 .../src/sass/modules/navs/_nav-tree.scss      | 14 ++++++
 app/templates/agenda/event_list.html          | 43 ++++++++++++++-----
 .../agenda/includes/event_linecard.html       | 18 ++++----
 4 files changed, 70 insertions(+), 22 deletions(-)

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 e47dcc99..63eb8302 100644
--- a/app/static/src/sass/modules/boxes/_event-line-box.scss
+++ b/app/static/src/sass/modules/boxes/_event-line-box.scss
@@ -28,10 +28,9 @@ $module: ".event-line-box";
         @include line-height(1);
         @include typeface(serif);
         font-weight: weight(heavy);
-
-        @include mq($until: sm) {
-            display: none;
-        }
+        
+        visibility: hidden;
+        height: 0;
 
     }
 
@@ -58,6 +57,16 @@ $module: ".event-line-box";
         margin-top: 0;
         @include margin-bottom(1);
 
+        a:not(.button) {
+
+            border: 0;
+
+            &:hover {
+                box-shadow: none;
+            }
+
+        }
+
     }
 
     &__desc {
diff --git a/app/static/src/sass/modules/navs/_nav-tree.scss b/app/static/src/sass/modules/navs/_nav-tree.scss
index 0b2f4fe4..ee48e106 100644
--- a/app/static/src/sass/modules/navs/_nav-tree.scss
+++ b/app/static/src/sass/modules/navs/_nav-tree.scss
@@ -29,6 +29,12 @@ $module: ".nav-tree";
 
     }
 
+    &__separator {
+
+        @include margin(2 0);
+
+    }
+
     &__link {
 
         display: block;
@@ -50,6 +56,14 @@ $module: ".nav-tree";
             @include padding-left(2);
             background: lighten($color_main, 20%);
             color: $color-black-light;
+
+            &.active {
+                padding: 4px 20px;
+                @include padding-left(2);
+                color: $color-black-light;
+                background: lighten($color_main, 20%);
+                font-weight: weight(bold);
+            }
         }
 
     }
diff --git a/app/templates/agenda/event_list.html b/app/templates/agenda/event_list.html
index a512dd78..c9117768 100644
--- a/app/templates/agenda/event_list.html
+++ b/app/templates/agenda/event_list.html
@@ -62,6 +62,7 @@
             <div class="row">
 
                 <div class="col-sm-9 col-sm-push-3 col-lg-8 col-lg-push-2 white-bg">
+
                     <h1 class="dotted">
                         {% if page %}
                             {{ page.richtextpage.meta_title }}
@@ -70,7 +71,29 @@
                         {% endif %}
                     </h1>
 
-                    <div class="page__filters">
+                </div>
+
+            </div>
+
+            <div class="row">
+
+                <div class="col-sm-3 col-lg-2 page__sidebar">
+
+                    <ul class="nav-tree nav-tree--level-{{ branch_level }}" data-sticky data-sticky-parent="row" data-sticky-offset="100" data-sticky-detach-at="971">
+                        <li class="nav-tree__item">
+                            <a class="nav-tree__link active" href="{{ page.get_absolute_url }}">{% trans 'Agenda' %}</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>
+
+                        <li class="nav-tree__separator">
+
+                        </li>
+
                         {% keywords_for mezzanine_agenda.event as tags %}
                         {# {% all_events as all_events %}#}
                         {% if tags %}
@@ -78,20 +101,20 @@
                                 <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 %}
-                                <a href="{% if tag == t %}{% url 'event_list' %}{% else %}{% url "event_list_tag" t.slug %}{% endif %}" class="button{% if tag == t %} button--black{% else %} button--white{% endif %}{% if t|tag_is_excluded %} button--tournees{% endif %}">
-                                    {{ t }} {% if tag == t %}<i class="fa fa-times"></i>{% endif %}
-                                </a>
+                                {% if not t|tag_is_excluded %}
+                                    <li class="nav-tree__item">
+                                        <a class="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 %}
-                    </div>
+                    </ul>
 
                 </div>
 
-            </div>
-
-            <div class="row">
-
-                <div class="col-xs-12">
+                <div class="mb2 col-sm-9 col-lg-8 white-bg page__content" data-summary-content>
 
                     <div class="white-bg page__content">
                         <div class="container">
diff --git a/app/templates/agenda/includes/event_linecard.html b/app/templates/agenda/includes/event_linecard.html
index e8199f67..c6a5a5b6 100644
--- a/app/templates/agenda/includes/event_linecard.html
+++ b/app/templates/agenda/includes/event_linecard.html
@@ -2,15 +2,17 @@
 
 <div class="row event-line-box">
 
-    <div class="col-sm-2 col-md-3 col-lg-3 event-line-box__month">
+    {% ifchanged event.start.month %}
 
-        {% ifchanged event.start.month %}
-            {{ event.start|date:'F' }}
-        {% endifchanged %}
+        <div class="col-sm-12 col-md-12 col-lg-12 event-line-box__month">
 
-    </div>
+            <h2>{{ event.start|date:'F' }}</h2>
+
+        </div>
+
+    {% endifchanged %}
 
-    <div class="col-sm-10 col-md-9 col-lg-9 event-line-box__content">
+    <div class="col-sm-12 col-md-12 col-lg-12 event-line-box__content">
 
         <div class="row">
 
@@ -52,9 +54,9 @@
                         {% endif %}
                     </div>
                 {% endif %}
-                <h2 class="event-line-box__title">
+                <h3 class="event-line-box__title">
                     <a href="{{ event.get_absolute_url }}">{{ event.title }}</a>
-                </h2>
+                </h3>
                 <div class="event-line-box__desc">
                     {{ event.description|slice:":100" }}
                 </div>
-- 
2.39.5