Nouvelles couleurs, Plus de templates, Calendrier (sommaire)

gestioncof/cms/models.py

@@ -96,6 +96,7 @@ class COFActuEventPage(Page):
     date_start = models.DateTimeField("Date et heure de début")
     date_end = models.DateTimeField("Date et heure de fin", blank=True, default=None, null=True)
     all_day = models.BooleanField("Toute la journée", default=False, blank=True)
+    is_event = True
     
     content_panels = Page.content_panels + [
         ImageChooserPanel('image'),
@@ -108,11 +109,11 @@ class COFActuEventPage(Page):
 
     subpage_types = []
     parent_page_types = ['COFActuIndexPage']
-
+    
     class Meta:
         verbose_name = "Actu liée à un évènement"
         verbose_name_plural = "Actus liées à des évènements"
-    
+        
 # Annuaires (Clubs, partenaires, bonnes adresses)
 class COFDirectoryPage(Page):
     introduction = RichTextField("Introduction")

gestioncof/cms/static/cofcms/css/screen.css

@@ -69,54 +69,143 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
 }
 
 /* line 12, ../sass/screen.scss */
+*, *:after, *:before {
+  box-sizing: content-box;
+}
+
+/* line 16, ../sass/screen.scss */
 body {
-  background: #ff7869;
+  background: #ffcc6f;
   font: 17px "Source Sans Pro", "sans-serif";
 }
 
-/* line 17, ../sass/screen.scss */
+/* line 21, ../sass/screen.scss */
 header {
-  background: #02c082;
+  background: #30355a;
 }
 
-/* line 21, ../sass/screen.scss */
+/* line 25, ../sass/screen.scss */
 h1, h2 {
   font-family: "Carter One";
 }
 
-/* line 25, ../sass/screen.scss */
+/* line 29, ../sass/screen.scss */
 h1 {
   font-size: 2.3em;
 }
 
-/* line 29, ../sass/screen.scss */
+/* line 33, ../sass/screen.scss */
+h2 {
+  font-size: 1.6em;
+}
+
+/* line 37, ../sass/screen.scss */
 a {
-  color: #fff;
+  color: #f9752b;
   text-decoration: none;
 }
 
-/* line 36, ../sass/screen.scss */
+/* line 43, ../sass/screen.scss */
-header nav ul {
-  display: flex;
-}
-/* line 38, ../sass/screen.scss */
-header nav ul li {
-  display: inline-block;
-}
-/* line 40, ../sass/screen.scss */
-header nav ul li > * {
-  display: block;
-  padding: 10px 15px;
-  font-weight: bold;
-}
-/* line 45, ../sass/screen.scss */
-header nav ul li > *:hover {
-  background: #018e60;
-}
-/* line 52, ../sass/screen.scss */
 header section {
   display: flex;
   width: 100%;
   justify-content: space-between;
   align-items: stretch;
 }
+/* line 49, ../sass/screen.scss */
+header section.bottom-menu {
+  justify-content: space-around;
+  text-align: center;
+  background: #47395e;
+}
+/* line 55, ../sass/screen.scss */
+header h1 {
+  padding: 0 15px;
+}
+/* line 59, ../sass/screen.scss */
+header nav ul {
+  display: flex;
+}
+/* line 61, ../sass/screen.scss */
+header nav ul li {
+  display: inline-block;
+}
+/* line 63, ../sass/screen.scss */
+header nav ul li > * {
+  display: block;
+  padding: 10px 15px;
+  font-weight: bold;
+}
+/* line 68, ../sass/screen.scss */
+header nav ul li > *:hover {
+  background: #1e2139;
+}
+
+/* line 77, ../sass/screen.scss */
+.container {
+  max-width: 1000px;
+  margin: 0 auto;
+  position: relative;
+}
+/* line 82, ../sass/screen.scss */
+.container .aside-wrap {
+  position: absolute;
+  top: 30px;
+  height: 100%;
+  width: 250px;
+}
+/* line 88, ../sass/screen.scss */
+.container .aside-wrap .aside {
+  position: fixed;
+  position: sticky;
+  top: 5px;
+  width: 100%;
+  background: #7a504c;
+  padding: 15px;
+  box-shadow: -4px 4px 1px rgba(0, 0, 0, 0.3);
+}
+/* line 97, ../sass/screen.scss */
+.container .aside-wrap .aside .calendar {
+  margin: 0 auto;
+  display: block;
+}
+/* line 104, ../sass/screen.scss */
+.container .content {
+  max-width: 700px;
+  margin-left: auto;
+  margin-right: 0;
+}
+/* line 111, ../sass/screen.scss */
+.container .content section article {
+  background: #fff;
+  padding: 30px;
+  box-shadow: -4px 4px 1px rgba(0, 0, 0, 0.3);
+}
+/* line 115, ../sass/screen.scss */
+.container .content section article a {
+  color: #30355a;
+}
+/* line 120, ../sass/screen.scss */
+.container .content section article + h2 {
+  margin-top: 15px;
+}
+
+/* line 128, ../sass/screen.scss */
+.calendar td, .calendar th {
+  text-align: center;
+  vertical-align: center;
+  border: 2px solid transparent;
+  padding: 1px;
+}
+/* line 135, ../sass/screen.scss */
+.calendar th {
+  font-weight: bold;
+}
+/* line 140, ../sass/screen.scss */
+.calendar td.out {
+  opacity: 0.3;
+}
+/* line 143, ../sass/screen.scss */
+.calendar td.today {
+  border-bottom-color: #000;
+}

gestioncof/cms/static/cofcms/sass/_colors.scss

@@ -1,4 +1,6 @@
-$fond: #ff7869;
+$fond: #ffcc6f;
-$bandeau: #02c082;
+$bandeau: #30355a;
-$aside: #ffe896;
+$sousbandeau: #47395e;
-$titre: #e23427;
+$aside: #7a504c;
+$titre: #31597e;
+$lien: #f9752b;

gestioncof/cms/static/cofcms/sass/screen.scss

@@ -9,6 +9,10 @@
 
 @import "_colors";
 
+*, *:after, *:before {
+    box-sizing: content-box;
+}
+
 body {
     background: $fond;
     font: 17px "Source Sans Pro", "sans-serif";
@@ -26,18 +30,37 @@ h1 {
     font-size: 2.3em;
 }
 
+h2 {
+    font-size: 1.6em;
+}
+
 a {
-    color: #fff;
+    color: $lien;
     text-decoration: none;
 }
 
 header {
+    section {
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+        align-items: stretch;
+
+        &.bottom-menu {
+            justify-content: space-around;
+            text-align: center;
+            background: $sousbandeau;
+        }
+    }
+    h1 {
+        padding: 0 15px;
+    }
     nav {
         ul {
             display: flex;
             li {
                 display: inline-block;
-                > * {
+                & > * {
                     display: block;
                     padding: 10px 15px;
                     font-weight: bold;
@@ -49,10 +72,76 @@ header {
             }
         }
     }
-    section {
+}
-        display: flex;
+
-        width: 100%;
+.container {
-        justify-content: space-between;
+    max-width: 1000px;
-        align-items: stretch;
+    margin: 0 auto;
+    position: relative;
+    
+    .aside-wrap {
+        position: absolute;
+        top: 30px;
+        height: 100%;
+        width: 250px;
+        
+        .aside {
+            position: fixed;
+            position: sticky;
+            top: 5px;
+            width: 100%;
+            background: $aside;
+            padding: 15px;
+            box-shadow: -4px 4px 1px rgba(#000, 0.3);
+
+            .calendar {
+                margin: 0 auto;
+                display: block;
+            }
+        }
+    }
+    
+    .content {
+        max-width: 700px;
+        margin-left: auto;
+        margin-right: 0;
+        
+        
+        section {
+            article {
+                background: #fff;
+                padding: 30px;
+                box-shadow: -4px 4px 1px rgba(#000, 0.3);
+                a {
+                    color: $bandeau;
+                }
+            }
+
+            article + h2 {
+                margin-top: 15px;
+            }
+        }
+    }
+}
+
+.calendar {
+    td, th {
+        text-align: center;
+        vertical-align: center;
+        border: 2px solid transparent;
+        padding: 1px;
+    }
+
+    th {
+        font-weight: bold;
+    }
+
+    td {
+        &.out {
+            opacity: 0.3;
+        }
+        &.today {
+            border-bottom-color: #000;
+        }
     }
 }

gestioncof/cms/templates/cofcms/base.html

@@ -24,7 +24,11 @@
         </header>
 
         <div class="container">
-            {% block content %}{% endblock %}
+            {% block superaside %}{% endblock %}
+            
+            <div class="content">
+                {% block content %}{% endblock %}
+            </div>
         </div>
         {% wagtailuserbar %}
     </body>

gestioncof/cms/templates/cofcms/base_aside.html

@@ -0,0 +1,9 @@
+{% extends "cofcms/base.html" %}
+
+{% block superaside %}
+    <div class="aside-wrap">
+        <div class="aside">
+            {% block aside %}{% endblock %}
+        </div>
+    </div>
+{% endblock %}

gestioncof/cms/templates/cofcms/calendar.html

@@ -0,0 +1,14 @@
+<table class="calendar">
+    <tbody>
+        <tr><th>L</th><th>M</th><th>M</th><th>J</th><th>V</th><th>S</th><th>D</th></tr>
+        {% for week in weeks %}
+            <tr>
+                {% for day in week %}
+                    <td class="{{ day.class }}">
+                        {% if day.events %}<a href="javascript:void(0)">{{ day.day }}</a>{% else %}{{ day.day }}{% endif %}
+                    </td>
+                {% endfor %}
+            </tr>
+        {% endfor %}
+    </tbody>
+</table>

gestioncof/cms/templates/cofcms/cof_actu_index_page.html

@@ -1,6 +1,10 @@
-{% extends "cofcms/base.html" %}
+{% extends "cofcms/base_aside.html" %}
 {% load wagtailimages_tags cofcms_tags %}
 
+{% block aside %}
+    {% calendar %}
+{% endblock %}
+
 {% block content %}
     <section class="intro">
         <h1>{{ page.title }}</h1>

gestioncof/cms/templates/cofcms/cof_directory_page.html

@@ -1,6 +1,15 @@
-{% extends "cofcms/base.html" %}
+{% extends "cofcms/base_aside.html" %}
 {% load wagtailimages_tags cofcms_tags %}
 
+{% block aside %}
+    <h2>Accès rapide</h2>
+    <ul>
+        {% for entry in page.entries %}
+            <li><a href="#{{ entry.slug }}">{{ entry.title }}</a></li>
+        {% endfor %}
+    </ul>
+{% endblock %}
+
 {% block content %}
     <section class="intro">
         <h1>{{ page.title }}</h1>

gestioncof/cms/templates/cofcms/cof_root_page.html

@@ -1,2 +1,26 @@
-{% extends "cofcms/base.html" %}
+{% extends "cofcms/base_aside.html" %}
+{% load static cofcms_tags wagtailimages_tags %}
 
+{% block aside %}
+    {% calendar %}
+{% endblock %}
+
+{% block content %}
+    <section class="intro">
+        <h1>{{ page.title }}</h1>
+        <div>{{ page.introduction|safe }}</div>
+    </section>
+
+    <section class="actuhome">
+        {% for actu in page.actus %}
+            {% if actu.is_event %}
+                <article class="actu">
+                    <h2>{{ actu.title }}</h2>
+                    {% if actu.image %}
+                        {% image actu.image fill-400x200 class="actu-img" %}
+                    {% endif %}
+                </article>
+            {% endif %}
+        {% endfor %}
+    </section>
+{% endblock %}

gestioncof/cms/templatetags/cofcms_tags.py

@@ -1,6 +1,9 @@
-from datetime import date
+from datetime import timedelta, date
 from django import template
 from django.conf import settings
+from django.utils import timezone
+
+from ..models import COFActuEventPage
 
 import re
 
@@ -10,3 +13,41 @@ register = template.Library()
 def obfuscate_mail(value):
     val = value.replace('', '/').replace('@', 'arbse').replace('.', 'pnt')
     return val
+
+@register.inclusion_tag("cofcms/calendar.html")
+def calendar():
+    now = timezone.now()
+    month_start = date(now.year, now.month, 1)
+    next_month = month_start + timedelta(days=32)
+    next_month = date(next_month.year, next_month.month, 1)
+    month_prestart = month_start - timedelta(days=(month_start.weekday()+7)%7)
+    month_postend = next_month + timedelta(days=(next_month.weekday()+6)%7)
+    events = COFActuEventPage.objects.live()\
+                                     .filter(date_start__range=[month_prestart,
+                                                                month_postend])\
+                                     .order_by('-date_start')
+    events = list(events)
+    weeks = []
+    curday = month_prestart
+    deltaday = timedelta(days=1)
+    while curday < next_month and len(weeks)<10:
+        week = []
+        for k in range(7):
+            curevents = []
+            for k in range(len(events)-1, -1, -1):
+                e = events[k]
+                if e.date_start.date() > curday: break
+                if (e.date_start if e.date_end is None else e.date_end).date() < curday:
+                    del events[k]
+                else:
+                    curevents.append(e)
+            print(curevents)
+            day = {'day': curday.day,
+                   'class': (('today ' if (curday.day == now.day
+                                    and curday.month == now.month) else '')
+                             + ('in' if curday.month == now.month else 'out')),
+                   'events': curevents}
+            week.append(day)
+            curday += deltaday
+        weeks.append(week)
+    return {"events": events, "weeks": weeks}