Plus de templates, plus joli

gestioncof/cms/models.py

@@ -6,6 +6,7 @@ from wagtail.wagtailcore.fields import RichTextField, StreamField
 from wagtail.wagtailcore import blocks
 from wagtail.wagtailimages.edit_handlers import ImageChooserPanel
 from wagtail.wagtailimages.blocks import ImageChooserBlock
+from django.utils.translation import ugettext as _
 
 from wagtail.wagtailadmin.edit_handlers import FieldPanel, StreamFieldPanel
 from wagtail.wagtailsnippets.models import register_snippet
@@ -115,13 +116,14 @@ class COFActuEventPage(Page):
         if self.date_end:
             if self.date_end.date() == self.date_start.date():
                 if self.all_day:
-                    return self.date_start.strftime("le %A %w %B %Y")
+                    return self.date_start.strftime(_("le %A %d %B %Y"))
                 else:
-                    return "le %s à %s" % \
+                    return _("le %s de %s à %s") % \
-                        (self.date_start.strftime("%A %w %B %Y de %Hh%M"),
+                        (self.date_start.strftime("%A %d %B %Y"),
-                         self.date_end.strftime("%Hh%M"))
+                         self.date_start.strftime(_("%Hh%M")),
+                         self.date_end.strftime(_("%Hh%M")))
             else:
-                tmpl = "%A %w %B %Y"
+                tmpl = "%A %d %B %Y"
                 diff_i = len(tmpl)
                 if self.date_end.year != self.date_start.year:
                     diff_i = len(tmpl)
@@ -132,11 +134,12 @@ class COFActuEventPage(Page):
                     common = tmpl[diff_i:]
                     diff = tmpl[:diff_i]
                 if self.all_day:
-                    return "du %s au %s %s" % (self.date_start.strftime(diff),
+                    return _("du %s au %s %s") % \
-                                               self.date_end.strftime(diff),
+                        (self.date_start.strftime(diff),
-                                               self.date_end.strftime(common))
+                         self.date_end.strftime(diff),
+                         self.date_end.strftime(common))
                 else:
-                    return "du %s %s %s au %s %s" % \
+                    return _("du %s %s à %s au %s à %s") % \
                         (self.date_start.strftime(diff),
                          self.date_start.strftime(common),
                          self.date_start.strftime("%Hh%M"),
@@ -144,9 +147,9 @@ class COFActuEventPage(Page):
                          self.date_end.strftime("%Hh%M"))
         else:
             if self.all_day:
-                return self.date_start.strftime("le %A %w %B %Y")
+                return self.date_start.strftime(_("le %A %d %B %Y"))
             else:
-                return self.date_start.strftime("le %A %w %B %Y à %Hh%M")
+                return self.date_start.strftime(_("le %A %d %B %Y à %Hh%M"))
     class Meta:
         verbose_name = "Actu liée à un évènement"
         verbose_name_plural = "Actus liées à des évènements"
@@ -164,7 +167,9 @@ class COFDirectoryPage(Page):
 
     @property
     def entries(self):
-        entries = COFDirectoryEntryPage.objects.live().descendant_of(self)
+        entries = COFDirectoryEntryPage.objects.live()\
+                                               .descendant_of(self)\
+                                               .order_by("title")
         return entries
 
     class Meta:

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

@@ -103,59 +103,84 @@ h2 {
 a {
   color: #f9752b;
   text-decoration: none;
+  font-weight: bold;
 }
 
 /* line 43, ../sass/screen.scss */
+h2 a {
+  font-weight: inherit;
+  color: inherit;
+}
+
+/* line 49, ../sass/screen.scss */
 header section {
   display: flex;
   width: 100%;
   justify-content: space-between;
   align-items: stretch;
 }
-/* line 49, ../sass/screen.scss */
+/* line 55, ../sass/screen.scss */
 header section.bottom-menu {
   justify-content: space-around;
   text-align: center;
   background: #47395e;
 }
-/* line 55, ../sass/screen.scss */
+/* line 61, ../sass/screen.scss */
 header h1 {
   padding: 0 15px;
 }
-/* line 59, ../sass/screen.scss */
+/* line 65, ../sass/screen.scss */
 header nav ul {
   display: flex;
 }
-/* line 61, ../sass/screen.scss */
+/* line 67, ../sass/screen.scss */
 header nav ul li {
   display: inline-block;
 }
-/* line 63, ../sass/screen.scss */
+/* line 69, ../sass/screen.scss */
 header nav ul li > * {
   display: block;
   padding: 10px 15px;
   font-weight: bold;
 }
-/* line 68, ../sass/screen.scss */
+/* line 74, ../sass/screen.scss */
 header nav ul li > *:hover {
   background: #1e2139;
 }
 
-/* line 77, ../sass/screen.scss */
+/* line 83, ../sass/screen.scss */
+article {
+  line-height: 1.4;
+}
+/* line 85, ../sass/screen.scss */
+article p, article ul {
+  margin: 0.4em 0;
+}
+/* line 88, ../sass/screen.scss */
+article ul {
+  padding-left: 20px;
+}
+/* line 90, ../sass/screen.scss */
+article ul li {
+  list-style: outside;
+}
+
+/* line 96, ../sass/screen.scss */
 .container {
   max-width: 1000px;
   margin: 0 auto;
   position: relative;
 }
-/* line 82, ../sass/screen.scss */
+/* line 101, ../sass/screen.scss */
 .container .aside-wrap {
   position: absolute;
   top: 30px;
   height: 100%;
   width: 250px;
 }
-/* line 88, ../sass/screen.scss */
+/* line 107, ../sass/screen.scss */
 .container .aside-wrap .aside {
+  color: #fff;
   position: fixed;
   position: sticky;
   top: 5px;
@@ -164,32 +189,43 @@ header nav ul li > *:hover {
   padding: 15px;
   box-shadow: -4px 4px 1px rgba(0, 0, 0, 0.3);
 }
-/* line 97, ../sass/screen.scss */
+/* line 117, ../sass/screen.scss */
 .container .aside-wrap .aside .calendar {
   margin: 0 auto;
   display: block;
 }
-/* line 104, ../sass/screen.scss */
+/* line 124, ../sass/screen.scss */
 .container .content {
   max-width: 700px;
   margin-left: auto;
   margin-right: 0;
 }
-/* line 111, ../sass/screen.scss */
+/* line 129, ../sass/screen.scss */
+.container .content .intro {
+  border-bottom: 3px solid #6f4800;
+  margin: 20px -10px;
+  margin-top: 5px;
+  padding: 15px 5px;
+}
+/* line 139, ../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 */
+/* line 143, ../sass/screen.scss */
 .container .content section article a {
   color: #30355a;
 }
-/* line 120, ../sass/screen.scss */
+/* line 148, ../sass/screen.scss */
 .container .content section article + h2 {
   margin-top: 15px;
 }
-/* line 125, ../sass/screen.scss */
+/* line 152, ../sass/screen.scss */
+.container .content section article + article {
+  margin-top: 25px;
+}
+/* line 157, ../sass/screen.scss */
 .container .content section.directory article.entry {
   width: 80%;
   max-width: 600px;
@@ -197,7 +233,7 @@ header nav ul li > *:hover {
   position: relative;
   padding-right: 120px;
 }
-/* line 132, ../sass/screen.scss */
+/* line 164, ../sass/screen.scss */
 .container .content section.directory article.entry .entry-image {
   display: block;
   position: absolute;
@@ -210,61 +246,109 @@ header nav ul li > *:hover {
   transform: translateX(90%);
   top: -15px;
 }
-/* line 144, ../sass/screen.scss */
+/* line 176, ../sass/screen.scss */
 .container .content section.directory article.entry .entry-image img {
   width: auto;
   height: auto;
   max-width: 100%;
   max-height: 100%;
 }
-/* line 155, ../sass/screen.scss */
+/* line 186, ../sass/screen.scss */
+.container .content section.actuhome {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: center;
+}
+/* line 192, ../sass/screen.scss */
+.container .content section.actuhome article + article {
+  margin: 0;
+}
+/* line 196, ../sass/screen.scss */
 .container .content section.actuhome article.actu {
   background: none;
   box-shadow: none;
   max-width: 400px;
+  min-width: 300px;
+  flex: 1;
 }
-/* line 160, ../sass/screen.scss */
+/* line 203, ../sass/screen.scss */
 .container .content section.actuhome article.actu .actu-header {
   position: relative;
   box-shadow: -4px 5px 1px rgba(0, 0, 0, 0.3);
   padding: 0;
   margin: 0;
   overflow: hidden;
+  background-size: cover;
+  background-position: center center;
 }
-/* line 167, ../sass/screen.scss */
+/* line 212, ../sass/screen.scss */
-.container .content section.actuhome article.actu .actu-header img {
-  position: absolute;
-  top: 0;
-  left: 0;
-  min-height: 100%;
-  min-width: 100%;
-  height: auto;
-  width: auto;
-  z-index: -1;
-}
-/* line 177, ../sass/screen.scss */
 .container .content section.actuhome article.actu .actu-header h2 {
   width: 100%;
   height: 100%;
+  padding: 5px;
   padding-top: 150px;
+  text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
+}
+/* line 218, ../sass/screen.scss */
+.container .content section.actuhome article.actu .actu-header h2 a {
+  color: #fff;
+}
+/* line 224, ../sass/screen.scss */
+.container .content section.actuhome article.actu .actu-misc {
+  background: #ffe7bc;
+  box-shadow: -4px 5px 1px rgba(0, 0, 0, 0.3);
+  margin: 0 10px;
+  padding: 15px;
+  padding-top: 5px;
+}
+/* line 231, ../sass/screen.scss */
+.container .content section.actuhome article.actu .actu-misc .actu-minical {
+  display: block;
+}
+/* line 234, ../sass/screen.scss */
+.container .content section.actuhome article.actu .actu-misc .actu-dates {
+  display: block;
+  text-align: right;
+  font-size: 0.9em;
 }
 
-/* line 194, ../sass/screen.scss */
+/* line 247, ../sass/screen.scss */
 .calendar td, .calendar th {
   text-align: center;
   vertical-align: center;
   border: 2px solid transparent;
   padding: 1px;
 }
-/* line 201, ../sass/screen.scss */
+/* line 254, ../sass/screen.scss */
 .calendar th {
   font-weight: bold;
 }
-/* line 206, ../sass/screen.scss */
+/* line 258, ../sass/screen.scss */
+.calendar td {
+  font-size: 0.8em;
+  width: 25px;
+  height: 30px;
+}
+/* line 263, ../sass/screen.scss */
 .calendar td.out {
   opacity: 0.3;
 }
-/* line 209, ../sass/screen.scss */
+/* line 266, ../sass/screen.scss */
 .calendar td.today {
   border-bottom-color: #000;
 }
+/* line 269, ../sass/screen.scss */
+.calendar td:nth-child(7) {
+  background: rgba(0, 0, 0, 0.3);
+}
+/* line 272, ../sass/screen.scss */
+.calendar td:nth-child(6) {
+  background: rgba(0, 0, 0, 0.2);
+}
+/* line 275, ../sass/screen.scss */
+.calendar td.hasevent {
+  font-weight: bold;
+  color: #f9752b;
+  font-size: 1em;
+}

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

@@ -37,6 +37,12 @@ h2 {
 a {
     color: $lien;
     text-decoration: none;
+    font-weight: bold;
+}
+
+h2 a {
+    font-weight: inherit;
+    color: inherit;
 }
 
 header {
@@ -74,6 +80,19 @@ header {
     }
 }
 
+article {
+    line-height: 1.4;
+    p, ul {
+        margin: 0.4em 0;
+    }
+    ul {
+        padding-left: 20px;
+        li {
+            list-style: outside;
+        }
+    }
+}
+
 .container {
     max-width: 1000px;
     margin: 0 auto;
@@ -86,6 +105,7 @@ header {
         width: 250px;
         
         .aside {
+            color: #fff;
             position: fixed;
             position: sticky;
             top: 5px;
@@ -105,6 +125,14 @@ header {
         max-width: 700px;
         margin-left: auto;
         margin-right: 0;
+
+        .intro {
+            border-bottom: 3px solid darken($fond, 50%);
+            margin: 20px -10px;
+            margin-top: 5px;
+            padding: 15px 5px;
+            
+        }
         
         
         section {
@@ -121,6 +149,10 @@ header {
                 margin-top: 15px;
             }
 
+            article + article {
+                margin-top: 25px;
+            }
+
             &.directory {
                 article.entry {
                     width: 80%;
@@ -152,10 +184,21 @@ header {
             }
 
             &.actuhome {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: space-around;
+                align-items: center;
+
+                article + article {
+                    margin: 0;
+                }
+                
                 article.actu {
                     background: none;
                     box-shadow: none;
                     max-width: 400px;
+                    min-width: 300px;
+                    flex: 1;
                     
                     .actu-header {
                         position: relative;
@@ -163,26 +206,36 @@ header {
                         padding: 0;
                         margin: 0;
                         overflow: hidden;
+                        background-size: cover;
+                        background-position: center center;
                         
-                        img {
-                            position: absolute;
-                            top: 0;
-                            left: 0;
-                            min-height: 100%;
-                            min-width: 100%;
-                            height: auto;
-                            width: auto;
-                            z-index: -1;
-                        }
                         h2 {
                             width: 100%;
                             height: 100%;
+                            padding: 5px;
                             padding-top: 150px;
+                            text-shadow: 0 0 5px rgba(#000, 0.8);
+                            a {
+                                color: #fff;
+                            }
                         }
                     }
 
                     .actu-misc {
-                        
+                        background: lighten($fond, 15%);
+                        box-shadow: -4px 5px 1px rgba(#000, 0.3);
+                        margin: 0 10px;
+                        padding: 15px;
+                        padding-top: 5px;
+
+                        .actu-minical {
+                            display: block;
+                        }
+                        .actu-dates {
+                            display: block;
+                            text-align: right;
+                            font-size: 0.9em;
+                        }
                     }
                 }
             }
@@ -203,11 +256,26 @@ header {
     }
 
     td {
+        font-size: 0.8em;
+        width: 25px;
+        height: 30px;
+        
         &.out {
             opacity: 0.3;
         }
         &.today {
             border-bottom-color: #000;
         }
+        &:nth-child(7) {
+            background: rgba(#000, 0.3);
+        }
+        &:nth-child(6) {
+            background: rgba(#000, 0.2);
+        }
+        &.hasevent {
+            font-weight: bold;
+            color: $lien;
+            font-size: 1em;
+        }
     }
 }

gestioncof/cms/templates/cofcms/cof_actu_event_page.html

@@ -0,0 +1,17 @@
+{% extends "cofcms/base.html" %}
+{% load wagtailimages_tags cofcms_tags %}
+
+{% block content %}
+    <section class="intro">
+        <h1>{{ page.title }}</h1>
+        <p class="date">A lieu {{ page.dates }}</p>
+        <p>{{ page.chapo }}</p>
+    </section>
+
+    <section class="pagecontent">
+        {% image page.image width-700 %}
+        <article>
+            {{ page.body|safe }}
+        </article>
+    </section>
+{% endblock %}

gestioncof/cms/templates/cofcms/cof_actu_index_page.html

@@ -1,5 +1,5 @@
 {% extends "cofcms/base_aside.html" %}
-{% load wagtailimages_tags cofcms_tags %}
+{% load wagtailimages_tags cofcms_tags wagtailcore_tags %}
 
 {% block aside %}
     {% calendar %}
@@ -14,8 +14,13 @@
     <section class="actulist">
         {% for actu in page.actus %}
             <article class="actu">
-                <h2>{{ actu.title }}</h2>
+                <h2><a href="{% pageurl actu %}">{{ actu.title }}</a></h2>
-                {{ actu.body|safe }}
+                {% if actu.is_event %}
+                    <p>{{ actu.chapo }}</p>
+                {% else %}
+                    {{ actu.body|safe|truncatewords_html:25 }}
+                {% endif %}
+                <a href="{% pageurl actu %}">Lire plus &gt;</a>
             </article>
         {% endfor %}
     </section>

gestioncof/cms/templates/cofcms/cof_actu_page.html

@@ -0,0 +1,16 @@
+{% extends "cofcms/base.html" %}
+{% load wagtailimages_tags cofcms_tags %}
+
+{% block content %}
+    <section class="intro">
+        <h1>{{ page.title }}</h1>
+        <p class="date">Publié le {{ page.date }}</p>
+    </section>
+
+    <section class="pagecontent">
+        {% image page.image width-700 %}
+        <article>
+            {{ page.body|safe }}
+        </article>
+    </section>
+{% endblock %}

gestioncof/cms/templates/cofcms/cof_root_page.html

@@ -1,5 +1,5 @@
 {% extends "cofcms/base_aside.html" %}
-{% load static cofcms_tags wagtailimages_tags %}
+{% load static cofcms_tags wagtailimages_tags i18n wagtailcore_tags %}
 
 {% block aside %}
     {% calendar %}
@@ -14,15 +14,13 @@
     <section class="actuhome">
         {% for actu in page.actus %}
             <article class="actu">
-                <div class="actu-header">
+                <div class="actu-header" {% if actu.image %}{% image actu.image fill-400x200 as img %}style="background-image:url('{{ img.url }}');"{% endif %}>
-                    {% if actu.image %}
+                    <h2><a href="{% pageurl actu %}">{{ actu.title }}</a></h2>
-                        {% image actu.image fill-400x200 class="actu-img" %}
-                    {% endif %}
-                    <h2>{{ actu.title }}</h2>
                 </div>
                 {% if actu.is_event %}
                     <div class="actu-misc">
-                        <span class="actu-minical">{% mini_calendar actu %}</span>{{ actu.dates }}
+                        {% get_current_language as curlang %}
+                        <span class="actu-minical">{% mini_calendar actu curlang %}</span><span class="actu-dates">{{ actu.dates }}</span>
                     </div>
                 {% endif %}
             </article>

gestioncof/cms/templatetags/cofcms_tags.py

@@ -2,6 +2,7 @@ from datetime import timedelta, date
 from django import template
 from django.conf import settings
 from django.utils import timezone
+import locale
 
 from ..models import COFActuEventPage
 
@@ -45,7 +46,8 @@ def calendar():
             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')),
+                             + ('in ' if curday.month == now.month else 'out')
+                             + ('hasevent' if len(curevents) > 0 else '')),
                    'events': curevents}
             week.append(day)
             curday += deltaday
@@ -53,7 +55,11 @@ def calendar():
     return {"events": events, "weeks": weeks}
 
 @register.inclusion_tag("cofcms/mini_calendar.html")
-def mini_calendar(event):
+def mini_calendar(event, loc):
+    try:
+        locale.setlocale(locale.LC_TIME, loc)
+    except locale.Error:
+        pass
     days = []
     today = timezone.now().date()
     date_start = event.date_start.date()