Improvements for K-Fêt CMS.

K-Fêt - Wagtail
- Page content becomes a StreamField.
- GroupTeam snippet becomes a block for stream field.
- Navigation menu moved becomes a "flatmenu", preventing possible future conflicts.
- Page layout can be modified in wagtail admin.

K-Fêt
- Add shorthands for ukf account balance/article price.
- Cleaning stylesheets and templates.

kfet/cms/apps.py

@@ -5,3 +5,6 @@ class KFetCMSAppConfig(AppConfig):
     name = 'kfet.cms'
     label = 'kfetcms'
     verbose_name = 'CMS K-Fêt'
+
+    def ready(self):
+        from . import hooks

kfet/cms/context_processors.py

@@ -1,7 +1,7 @@
 from kfet.models import Article
 
 
-def get_articles(request):
+def get_articles(request=None):
     articles = (
         Article.objects
         .filter(is_sold=True, hidden=False)

kfet/cms/hooks.py

@@ -0,0 +1,12 @@
+from django.contrib.staticfiles.templatetags.staticfiles import static
+from django.utils.html import format_html
+
+from wagtail.wagtailcore import hooks
+
+
+@hooks.register('insert_editor_css')
+def editor_css():
+    return format_html(
+        '<link rel="stylesheet" href="{}">',
+        static('kfetcms/css/editor.css'),
+    )

kfet/cms/migrations/0001_initial.py

@@ -2,9 +2,11 @@
 from __future__ import unicode_literals
 
 from django.db import migrations, models
-import modelcluster.fields
+import wagtail.wagtailsnippets.blocks
+import wagtail.wagtailcore.blocks
 import wagtail.wagtailcore.fields
 import django.db.models.deletion
+import kfet.cms.models
 
 
 class Migration(migrations.Migration):
@@ -15,24 +17,15 @@ class Migration(migrations.Migration):
     ]
 
     operations = [
-        migrations.CreateModel(
-            name='GroupTeam',
-            fields=[
-                ('id', models.AutoField(primary_key=True, verbose_name='ID', auto_created=True, serialize=False)),
-                ('name', models.CharField(max_length=255, verbose_name='Nom')),
-            ],
-            options={
-                'verbose_name': 'Groupe de K-Fêt-eux-ses',
-                'verbose_name_plural': 'Groupes de K-Fêt-eux-ses',
-            },
-        ),
         migrations.CreateModel(
             name='KFetPage',
             fields=[
-                ('page_ptr', models.OneToOneField(primary_key=True, to='wagtailcore.Page', parent_link=True, auto_created=True, serialize=False)),
+                ('page_ptr', models.OneToOneField(serialize=False, primary_key=True, parent_link=True, auto_created=True, to='wagtailcore.Page')),
                 ('no_header', models.BooleanField(verbose_name='Sans en-tête', help_text="Coché, l'en-tête (avec le titre) de la page n'est pas affiché.", default=False)),
-                ('content', wagtail.wagtailcore.fields.RichTextField(verbose_name='Contenu')),
+                ('content', wagtail.wagtailcore.fields.StreamField((('rich', wagtail.wagtailcore.blocks.RichTextBlock(label='Éditeur')), ('carte', kfet.cms.models.MenuBlock()), ('group_team', wagtail.wagtailcore.blocks.StructBlock((('show_only', wagtail.wagtailcore.blocks.IntegerBlock(help_text='Nombre initial de membres affichés. Laisser vide pour tou-te-s les afficher.', required=False, label='Montrer seulement')), ('members', wagtail.wagtailcore.blocks.ListBlock(wagtail.wagtailsnippets.blocks.SnippetChooserBlock(kfet.cms.models.MemberTeam), classname='team-group', label='K-Fêt-eux-ses'))))), ('group', wagtail.wagtailcore.blocks.StreamBlock((('rich', wagtail.wagtailcore.blocks.RichTextBlock(label='Éditeur')), ('carte', kfet.cms.models.MenuBlock()), ('group_team', wagtail.wagtailcore.blocks.StructBlock((('show_only', wagtail.wagtailcore.blocks.IntegerBlock(help_text='Nombre initial de membres affichés. Laisser vide pour tou-te-s les afficher.', required=False, label='Montrer seulement')), ('members', wagtail.wagtailcore.blocks.ListBlock(wagtail.wagtailsnippets.blocks.SnippetChooserBlock(kfet.cms.models.MemberTeam), classname='team-group', label='K-Fêt-eux-ses')))))), label='Contenu groupé'))), verbose_name='Contenu')),
-                ('custom_template', models.CharField(max_length=255, verbose_name='Template personnalisé', blank=True)),
+                ('layout', models.CharField(max_length=255, choices=[('kfet/base_col_1.html', 'Une colonne : centrée sur la page'), ('kfet/base_col_2.html', 'Deux colonnes : fixe à gauche, contenu à droite'), ('kfet/base_col_mult.html', 'Contenu scindé sur plusieurs colonnes')], help_text='Comment cette page devrait être affichée ?', verbose_name='Template', default='kfet/base_col_mult.html')),
+                ('main_size', models.CharField(max_length=255, blank=True, verbose_name='Taille de la colonne de contenu')),
+                ('col_count', models.CharField(max_length=255, blank=True, verbose_name='Nombre de colonnes', help_text="S'applique au page dont le contenu est scindé sur plusieurs colonnes")),
             ],
             options={
                 'verbose_name': 'page K-Fêt',
@@ -40,33 +33,14 @@ class Migration(migrations.Migration):
             },
             bases=('wagtailcore.page',),
         ),
-        migrations.CreateModel(
-            name='KFetPageGroupTeam',
-            fields=[
-                ('id', models.AutoField(primary_key=True, verbose_name='ID', auto_created=True, serialize=False)),
-                ('sort_order', models.IntegerField(editable=False, null=True, blank=True)),
-                ('title', models.CharField(max_length=255, verbose_name='Titre du groupe', blank=True)),
-                ('content', wagtail.wagtailcore.fields.RichTextField(verbose_name='Texte de présentation du groupe')),
-                ('group', models.ForeignKey(related_name='+', verbose_name='Groupe de K-Fêt-eux-ses', to='kfetcms.GroupTeam')),
-                ('page', modelcluster.fields.ParentalKey(related_name='team_groups', to='kfetcms.KFetPage')),
-                ('show_only', models.IntegerField(default=None, verbose_name='Montrer seulement', blank=True, null=True, help_text='Nombre de membres du groupe affichés initialement. Laisser vide pour tou-te-s les afficher.')),
-
-            ],
-            options={
-                'abstract': False,
-                'ordering': ['sort_order'],
-            },
-        ),
         migrations.CreateModel(
             name='MemberTeam',
             fields=[
-                ('id', models.AutoField(primary_key=True, verbose_name='ID', auto_created=True, serialize=False)),
+                ('id', models.AutoField(verbose_name='ID', auto_created=True, serialize=False, primary_key=True)),
-                ('sort_order', models.IntegerField(editable=False, null=True, blank=True)),
+                ('first_name', models.CharField(blank=True, max_length=255, verbose_name='Prénom', default='')),
-                ('first_name', models.CharField(max_length=255, verbose_name='Prénom', blank=True, default='')),
+                ('last_name', models.CharField(blank=True, max_length=255, verbose_name='Nom', default='')),
-                ('last_name', models.CharField(max_length=255, verbose_name='Nom', blank=True, default='')),
+                ('nick_name', models.CharField(verbose_name='Alias', blank=True, default='', max_length=255)),
-                ('nick_name', models.CharField(max_length=255, verbose_name='Alias', blank=True, default='')),
+                ('photo', models.ForeignKey(null=True, related_name='+', on_delete=django.db.models.deletion.SET_NULL, verbose_name='Photo', blank=True, to='wagtailimages.Image')),
-                ('group', modelcluster.fields.ParentalKey(related_name='members', verbose_name='Groupe de K-Fêt-eux-ses', to='kfetcms.GroupTeam')),
-                ('photo', models.ForeignKey(related_name='+', on_delete=django.db.models.deletion.SET_NULL, blank=True, verbose_name='Photo', to='wagtailimages.Image', null=True)),
             ],
             options={
                 'verbose_name': 'K-Fêt-eux-se',

kfet/cms/models.py

@@ -1,142 +1,32 @@
 from django.db import models
 from django.utils.translation import ugettext_lazy as _
 
-from modelcluster.models import ClusterableModel, ParentalKey
+from wagtail.wagtailadmin.edit_handlers import (
-from wagtail.wagtailadmin.edit_handlers import FieldPanel, InlinePanel
+    FieldPanel, FieldRowPanel, MultiFieldPanel, StreamFieldPanel
-from wagtail.wagtailcore.fields import RichTextField
+)
-from wagtail.wagtailcore.models import Orderable, Page
+from wagtail.wagtailcore import blocks
+from wagtail.wagtailcore.fields import StreamField
+from wagtail.wagtailcore.models import Page
 from wagtail.wagtailimages.edit_handlers import ImageChooserPanel
-from wagtail.wagtailsnippets.edit_handlers import SnippetChooserPanel
+from wagtail.wagtailsnippets.blocks import SnippetChooserBlock
 from wagtail.wagtailsnippets.models import register_snippet
 
 from kfet.cms.context_processors import get_articles
 
 
-class KFetPage(Page):
-    no_header = models.BooleanField(
-        verbose_name=_('Sans en-tête'),
-        default=False,
-        help_text=_(
-            "Coché, l'en-tête (avec le titre) de la page n'est pas affiché."
-        ),
-    )
-    content = RichTextField(verbose_name=_('Contenu'))
-    custom_template = models.CharField(
-        verbose_name=_('Template personnalisé'),
-        max_length=255,
-        blank=True,
-    )
-
-    content_panels = Page.content_panels + [
-        FieldPanel('no_header'),
-        FieldPanel('content', classname='full'),
-        InlinePanel('team_groups', label=_("Groupes de K-Fêt-eux-ses")),
-    ]
-
-    settings_panels = Page.settings_panels + [
-        FieldPanel('custom_template'),
-    ]
-
-    class Meta:
-        verbose_name = _('page K-Fêt')
-        verbose_name_plural = _('pages K-Fêt')
-
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
-        self.template = "kfetcms/base.html"
-
-    def get_context(self, request, *args, **kwargs):
-        context = super().get_context(request, *args, **kwargs)
-
-        page = context['page']
-
-        if not page.seo_title:
-            page.seo_title = page.title
-
-        if self.slug == "carte":
-            context.update(get_articles(request))
-
-        return context
-
-    def get_template(self, request, *args, **kwargs):
-        return self.custom_template or (
-            super().get_template(request, *args, **kwargs))
-
-
-class KFetPageGroupTeam(Orderable, models.Model):
-    page = ParentalKey(KFetPage, related_name='team_groups')
-    group = models.ForeignKey(
-        'kfetcms.GroupTeam',
-        verbose_name=_('Groupe de K-Fêt-eux-ses'),
-        related_name='+',
-    )
-    title = models.CharField(
-        verbose_name=_('Titre du groupe'),
-        max_length=255,
-        blank=True,
-    )
-    content = RichTextField(
-        verbose_name=_('Texte de présentation du groupe'),
-    )
-    show_only = models.IntegerField(
-        verbose_name=_('Montrer seulement'),
-        blank=True, null=True, default=None,
-        help_text=_(
-            'Nombre de membres du groupe affichés initialement. Laisser vide '
-            'pour tou-te-s les afficher.'
-        ),
-    )
-
-    panels = [
-        FieldPanel('title', classname='full'),
-        FieldPanel('show_only', classname='full'),
-        FieldPanel('content', classname='full'),
-        SnippetChooserPanel('group'),
-    ]
-
-
 @register_snippet
-class GroupTeam(ClusterableModel):
+class MemberTeam(models.Model):
-    name = models.CharField(
-        verbose_name=_('Nom'),
-        max_length=255,
-    )
-
-    class Meta:
-        verbose_name = _('Groupe de K-Fêt-eux-ses')
-        verbose_name_plural = _('Groupes de K-Fêt-eux-ses')
-
-    def __str__(self):
-        return self.name
-
-    panels = [
-        FieldPanel('name', classname='full'),
-        InlinePanel('members', label=_('Membres du groupe')),
-    ]
-
-
-@register_snippet
-class MemberTeam(Orderable, models.Model):
-    group = ParentalKey(
-        GroupTeam,
-        verbose_name=_("Groupe de K-Fêt-eux-ses"),
-        on_delete=models.CASCADE,
-        related_name='members',
-    )
     first_name = models.CharField(
         verbose_name=_('Prénom'),
-        max_length=255,
+        blank=True, default='', max_length=255,
-        blank=True, default='',
     )
     last_name = models.CharField(
         verbose_name=_('Nom'),
-        max_length=255,
+        blank=True, default='', max_length=255,
-        blank=True, default='',
     )
     nick_name = models.CharField(
         verbose_name=_('Alias'),
-        max_length=255,
+        blank=True, default='', max_length=255,
-        blank=True, default='',
     )
     photo = models.ForeignKey(
         'wagtailimages.Image',
@@ -149,17 +39,136 @@ class MemberTeam(Orderable, models.Model):
     class Meta:
         verbose_name = _('K-Fêt-eux-se')
 
-    def __str__(self):
-        return self.get_full_name()
-
     panels = [
         FieldPanel('first_name'),
         FieldPanel('last_name'),
         FieldPanel('nick_name'),
-        FieldPanel('group'),
         ImageChooserPanel('photo'),
     ]
 
+    def __str__(self):
+        return self.get_full_name()
+
     def get_full_name(self):
-        full_name = '{} {}'.format(self.first_name, self.last_name)
+        return '{} {}'.format(self.first_name, self.last_name).strip()
-        return full_name.strip()
+
+
+class MenuBlock(blocks.StaticBlock):
+    class Meta:
+        icon = 'list-ul'
+        label = _('Carte')
+        template = 'kfetcms/block_menu.html'
+
+    def get_context(self, *args, **kwargs):
+        context = super().get_context(*args, **kwargs)
+        context.update(get_articles())
+        return context
+
+
+class GroupTeamBlock(blocks.StructBlock):
+    show_only = blocks.IntegerBlock(
+        label=_('Montrer seulement'),
+        required=False,
+        help_text=_(
+            'Nombre initial de membres affichés. Laisser vide pour tou-te-s '
+            'les afficher.'
+        ),
+    )
+    members = blocks.ListBlock(
+        SnippetChooserBlock(MemberTeam),
+        label=_('K-Fêt-eux-ses'),
+        classname='team-group',
+    )
+
+    class Meta:
+        icon = 'group'
+        label = _('Groupe de K-Fêt-eux-ses')
+        template = 'kfetcms/block_teamgroup.html'
+
+
+class ChoicesStreamBlock(blocks.StreamBlock):
+    rich = blocks.RichTextBlock(label=_('Éditeur'))
+    carte = MenuBlock()
+    group_team = GroupTeamBlock()
+
+
+class KFetStreamBlock(ChoicesStreamBlock):
+    group = ChoicesStreamBlock(label=_('Contenu groupé'))
+
+
+class KFetPage(Page):
+
+    content = StreamField(KFetStreamBlock, verbose_name=_('Contenu'))
+
+    # Layout fields
+
+    TEMPLATE_COL_1 = 'kfet/base_col_1.html'
+    TEMPLATE_COL_2 = 'kfet/base_col_2.html'
+    TEMPLATE_COL_MULT = 'kfet/base_col_mult.html'
+
+    no_header = models.BooleanField(
+        verbose_name=_('Sans en-tête'),
+        default=False,
+        help_text=_(
+            "Coché, l'en-tête (avec le titre) de la page n'est pas affiché."
+        ),
+    )
+    layout = models.CharField(
+        verbose_name=_('Template'),
+        choices=[
+            (TEMPLATE_COL_1, _('Une colonne : centrée sur la page')),
+            (TEMPLATE_COL_2, _('Deux colonnes : fixe à gauche, contenu à droite')),
+            (TEMPLATE_COL_MULT, _('Contenu scindé sur plusieurs colonnes')),
+        ],
+        default=TEMPLATE_COL_MULT, max_length=255,
+        help_text=_(
+            "Comment cette page devrait être affichée ?"
+        ),
+    )
+    main_size = models.CharField(
+        verbose_name=_('Taille de la colonne de contenu'),
+        blank=True, max_length=255,
+    )
+    col_count = models.CharField(
+        verbose_name=_('Nombre de colonnes'),
+        blank=True, max_length=255,
+        help_text=_(
+            "S'applique au page dont le contenu est scindé sur plusieurs colonnes."
+        ),
+    )
+
+    # Panels
+
+    content_panels = Page.content_panels + [
+        StreamFieldPanel('content'),
+    ]
+
+    layout_panel = [
+        FieldPanel('no_header'),
+        FieldPanel('layout'),
+        FieldRowPanel([
+            FieldPanel('main_size'),
+            FieldPanel('col_count'),
+        ]),
+    ]
+
+    settings_panels = [
+        MultiFieldPanel(layout_panel, _('Affichage'))
+    ] + Page.settings_panels
+
+    # Base template
+    template = "kfetcms/base.html"
+
+    class Meta:
+        verbose_name = _('page K-Fêt')
+        verbose_name_plural = _('pages K-Fêt')
+
+    def get_context(self, request, *args, **kwargs):
+        context = super().get_context(request, *args, **kwargs)
+
+        page = context['page']
+
+        if not page.seo_title:
+            page.seo_title = page.title
+
+        return context

kfet/cms/static/kfetcms/css/base.css

@@ -0,0 +1,93 @@
+.main.cms {
+    padding: 20px 15px;
+}
+
+@media (min-width: 768px) {
+    .main.cms {
+        padding: 35px 30px;
+    }
+}
+
+.cms {
+    text-align: justify;
+    font-size: 1.1em;
+}
+
+@media (min-width:768px) {
+    .cms {
+        font-size: 1.2em;
+        line-height: 1.6em;
+    }
+}
+
+/* Titles */
+
+.cms h2, .cms h3 {
+    clear: both;
+    margin: 0 0 15px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #c8102e;
+    text-align: left;
+    font-weight: bold;
+}
+
+@media (min-width: 768px) {
+    .cms h2, .cms h3 {
+        padding-bottom: 15px;
+    }
+}
+
+/* Paragraphs */
+
+.cms p {
+    margin-bottom: 20px;
+    text-indent: 2em;
+}
+
+.cms p + :not(h2):not(h3):not(div) {
+    margin-top: -10px;
+}
+
+@media (min-width: 768px) {
+    .cms p {
+        padding-bottom: 15px;
+    }
+
+    .cms p + :not(h2):not(h3):not(div) {
+        margin-top: -30px;
+    }
+}
+
+
+/* Lists */
+
+.cms ol, .cms ul {
+    padding: 0 0 0 15px;
+    margin: 0 0 10px;
+}
+
+.cms ul {
+    list-style-type: square;
+}
+
+.cms ol > li, .cms ul > li {
+    padding-left: 5px;
+}
+
+
+/* Images */
+
+.cms .richtext-image {
+    max-height: 100%;
+    margin: 5px 0 15px;
+}
+
+.cms .richtext-image.left {
+    float: left;
+    margin-right: 30px;
+}
+
+.cms .richtext-image.right {
+    float: right;
+    margin-left: 30px;
+}

kfet/cms/static/kfetcms/css/editor.css

@@ -0,0 +1,18 @@
+.snippets.listing thead, .snippets.listing thead tr {
+    border: 0;
+}
+
+.snippets.listing tbody {
+    display: block;
+    column-count: 2;
+}
+
+.snippets.listing tbody tr {
+    display: block;
+}
+
+@media (min-width: 992px) {
+    .snippets.listing tbody {
+        column-count: 3;
+    }
+}

kfet/cms/static/kfetcms/css/index.css

@@ -1,155 +1,3 @@
-.cms-content {
+@import url("base.css");
-    text-align: justify;
+@import url("menu.css");
-    font-size: 1.1em;
+@import url("team.css");
-}
-
-@media (min-width:768px) {
-    .cms-content {
-        font-size: 1.2em;
-        line-height: 1.6em;
-    }
-}
-
-.cms-column {
-    column-gap: 45px;
-
-    padding: 20px 15px;
-    background: white;
-}
-
-@media (min-width: 768px) {
-    .cms-column {
-        padding: 35px 30px;
-    }
-}
-
-@media (min-width: 992px) {
-    .cms-column {
-        margin: 0 15px;
-    }
-}
-
-
-/* Titles */
-
-.cms-content h2, .cms-content h3 {
-    clear: both;
-    margin: 0 0 15px;
-    padding-bottom: 10px;
-    border-bottom: 1px solid #c8102e;
-    text-align: left;
-    font-weight: bold;
-}
-
-@media (min-width: 768px) {
-    .cms-content h2, .cms-content h3 {
-        padding-bottom: 15px;
-    }
-}
-
-/* Paragraphs */
-
-.cms-content p {
-    margin-bottom: 20px;
-    text-indent: 2em;
-}
-
-.cms-content p + :not(h2):not(h3):not(div) {
-    margin-top: -10px;
-}
-
-@media (min-width: 768px) {
-    .cms-content p {
-        padding-bottom: 15px;
-    }
-
-    .cms-content p + :not(h2):not(h3):not(div) {
-        margin-top: -30px;
-    }
-}
-
-
-/* Lists */
-
-.cms-content ol, .cms-content ul {
-    padding: 0 0 0 15px;
-    margin: 0 0 10px;
-}
-
-.cms-content ul {
-    list-style-type: square;
-}
-
-.cms-content ol > li, .cms-content ul > li {
-    padding-left: 5px;
-}
-
-
-/* Images */
-
-.cms-content .richtext-image {
-    max-height: 100%;
-    margin: 5px 0 15px;
-}
-
-.cms-content .richtext-image.left {
-    float: left;
-    margin-right: 30px;
-}
-
-.cms-content .richtext-image.right {
-    float: right;
-    margin-left: 30px;
-}
-
-
-/* Team groups & members */
-
-.team-group {
-    margin-bottom: 20px;
-}
-
-.team-group .col-btn {
-    margin-bottom: 20px;
-}
-
-.team-group .member-more {
-    display: none;
-}
-
-.team-member {
-    padding: 0;
-    margin-bottom: 20px;
-    min-height: 190px;
-    background-color: inherit;
-    border: 0;
-}
-
-.team-member img {
-    max-width: 100%;
-    max-height: 125px;
-    width: auto;
-    height: auto;
-    display: block;
-}
-
-.team-member .infos {
-    height: 50px;
-    margin-top: 15px;
-}
-
-@media (min-width: 768px) {
-    .team-group {
-        margin-left: 20px;
-        margin-right: 20px;
-    }
-
-    .team-member {
-        min-height: 215px;
-    }
-
-    .team-member img {
-        max-height: 150px;
-    }
-}
-

kfet/cms/static/kfetcms/css/team.css

@@ -0,0 +1,47 @@
+.team-group {
+    margin-bottom: 20px;
+}
+
+.team-group .col-btn {
+    margin-bottom: 20px;
+}
+
+.team-group .member-more {
+    display: none;
+}
+
+.team-member {
+    padding: 0;
+    margin-bottom: 20px;
+    min-height: 190px;
+    background-color: inherit;
+    border: 0;
+}
+
+.team-member img {
+    max-width: 100%;
+    max-height: 125px;
+    width: auto;
+    height: auto;
+    display: block;
+}
+
+.team-member .infos {
+    height: 50px;
+    margin-top: 15px;
+}
+
+@media (min-width: 768px) {
+    .team-group {
+        margin-left: 20px;
+        margin-right: 20px;
+    }
+
+    .team-member {
+        min-height: 215px;
+    }
+
+    .team-member img {
+        max-height: 150px;
+    }
+}

kfet/cms/templates/kfetcms/base.html

@@ -1,68 +1,41 @@
-{% extends "kfet/base.html" %}
+{% extends page.layout %}
-{% load static %}
+{% load static wagtailcore_tags wagtailuserbar %}
-{% load wagtailuserbar %}
+
-{% load wagtailcore_tags %}
+{# CSS/JS #}
 
 {% block extra_head %}
+{{ block.super }}
 <link rel="stylesheet" type="text/css" href="{% static "kfetcms/css/index.css" %}">
 {% endblock %}
 
-{% block title %}{{ page.seo_title }}{% endblock %}
+{# Titles #}
 
-{% block header-class %}text-center{% endblock %}
+{% block title %}{{ page.seo_title }}{% endblock %}
 {% block header-title %}{{ page.title }}{% endblock %}
 
-{% block content %}
+{# Layout #}
 
-<div class="row row-messages">
+{% block main-size %}{{ page.main_size|default:block.super }}{% endblock %}
-  {% include "kfet/base_messages.html" %}
+{% block mult-count %}{{ page.col_count|default:block.super }}{% endblock %}
-</div>
 
-<div class="row column-row">
+{% block main-class %}cms main-bg{% endblock %}
-  <div class="cms-column {% block col-size %}column-md-2{% endblock %}">
-    <div class="cms-content">
-      {% block block1-content %}
-      {% endblock %}
 
-      {% block block2-content %}
+{# Content #}
-      {{ page.content|richtext }}
-      {% endblock %}
 
-      {% block block3-content %}
+{% block main %}
-      {% endblock %}
+
-    </div>
+{% for block in page.content %}
+  <div class="{% if block.block_type == "rich" or block.block_type == "group" %}unbreakable{% endif %}">
+    {% include_block block %}
   </div>
-</div>
+{% endfor %}
 
 {% wagtailuserbar %}
 
-<script type="text/javascript">
-$( function() {
-
-// Titles and their following elements (until next title) are unbreakable.
-// This workaround should not be necessary if we use StreamField instead of
-// RichTextField in wagtail pages.
-$('.cms-content h2, .cms-content h3').filter( function() {
-    return $(this).closest('.unbreakable').length == 0;
-})
-.each( function() {
-    let elt = $('<div>', {class: "unbreakable"});
-    $(this).before(elt);
-
-    let current = $(this);
-    while (current.length !== 0) {
-        let next = current.next(':not(h2, h3)');
-        current.appendTo(elt);
-        current = next;
-    }
-
-});
-
-});
-</script>
-
 {% endblock %}
 
+{# Footer #}
+
 {% block footer %}
 {% include "kfet/base_footer.html" %}
 {% endblock %}

kfet/cms/templates/kfetcms/block_menu.html

@@ -0,0 +1,11 @@
+{% load static %}
+
+{% if pressions %}
+  {% include "kfetcms/block_menu_category.html" with title="Pressions du moment" articles=pressions class="carte-inverted" %}
+{% endif %}
+
+{% regroup articles by category as categories %}
+
+{% for category in categories %}
+  {% include "kfetcms/block_menu_category.html" with title=category.grouper.name articles=category.list %}
+{% endfor %}

kfet/cms/templates/kfetcms/block_menu_category.html

@@ -0,0 +1,12 @@
+<div class="carte {{ class }} unbreakable">
+  <h3 class="carte-title">{{ title }}</h3>
+  <ul class="carte-list">
+    {% for article in articles %}
+    <li class="carte-item">
+      <div class="filler"></div>
+      <span class="carte-label">{{ article.name }}</span>
+      <span class="carte-ukf">{{ article.price_ukf }} UKF</span>
+    </li>
+    {% endfor %}
+  </ul>
+</div>

kfet/cms/templates/kfetcms/block_teamgroup.html

@@ -1,27 +1,32 @@
-{% extends "kfetcms/base.html" %}
+{% load wagtailcore_tags wagtailimages_tags %}
-{% load wagtailcore_tags %}
-{% load wagtailimages_tags %}
 
-{% block block1-content %}
 
-{% for group_block in page.team_groups.all %}
+{% with groupteam=value len=value.members|length %}
-<h3>{{ group_block.title }}</h3>
-<div>
-  {{ group_block.content|richtext }}
-</div>
 
-{% with members=group_block.group.members.all %}
-{% with len=members|length %}
-
-{% if len > 0 %}
 <div class="team-group row">
 
   {% if len == 2 %}
   <div class="visible-sm col-sm-3"></div>
   {% endif %}
 
-  {% for member in members %}
+  {% for member in groupteam.members %}
-  <div class="col-xs-6 {% if len == 1 %}col-sm-4 col-sm-offset-4{% elif len == 3 %}col-sm-4{% elif len == 2%}col-sm-3 col-md-6{% else %}col-sm-3 col-md-4 col-lg-3{% endif %} {% if group_block.show_only != None and forloop.counter0 >= group_block.show_only %}member-more{% endif %}">
+  <div class="
+      {% if len == 1 %}
+        col-xs-12
+      {% else %}
+        col-xs-6
+        {% if len == 3 %}
+          col-sm-4
+        {% elif len == 2 %}
+          col-sm-3 col-md-6
+        {% else %}
+          col-sm-3 col-md-4 col-lg-3
+        {% endif %}
+      {% endif %}
+      {% if groupteam.show_only != None and forloop.counter0 >= groupteam.show_only %}
+        member-more
+      {% endif %}
+      ">
     <div class="team-member thumbnail text-center">
       {% image member.photo max-200x500 %}
       <div class="infos">
@@ -35,10 +40,10 @@
   </div>
   {% endfor %}
 
-  {% if group_block.show_only != None and len > group_block.show_only %}
+  {% if groupteam.show_only != None and len > groupteam.show_only %}
   <div class="col-xs-12 col-btn text-center">
     <button class="btn btn-primary btn-lg more">
-      {% if group_block.show_only %}
+      {% if groupteam.show_only %}
         Y'en a plus !
       {% else %}
         Les voir
@@ -48,12 +53,8 @@
   {% endif %}
 
 </div>
-{% endif %}
 
 {% endwith %}
-{% endwith %}
-
-{% endfor %}
 
 <script type="text/javascript">
 $( function() {
@@ -63,5 +64,3 @@ $( function() {
     });
 });
 </script>
-
-{% endblock %}

kfet/cms/templates/kfetcms/carte.html

@@ -1,46 +0,0 @@
-{% extends "kfetcms/base.html" %}
-{% load static %}
-{% load kfet_tags %}
-
-{% block extra_head %}
-{{ block.super }}
-<link rel="stylesheet" type="text/css" href="{% static "kfet/css/home.css" %}">
-{% endblock %}
-
-{% block col-size %}column-sm-2 column-md-3{% endblock %}
-
-{% block block3-content %}
-
-{% if pressions %}
-<div class="unbreakable carte carte-inverted">
-  <h3 class="carte-title">Pressions du moment</h3>
-  <ul class="carte-list">
-    {% for article in pressions %}
-    <li class="carte-item">
-      <div class="filler"></div>
-      <span class="carte-label">{{ article.name }}</span>
-      <span class="carte-ukf">{{ article.price | ukf:False}} UKF</span>
-    </li>
-    {% endfor %}
-  </ul>
-</div><!-- endblock unbreakable -->
-{% endif %}
-
-{% regroup articles by category as categories %}
-
-{% for category in categories %}
-<div class="unbreakable carte">
-  <h3 class="carte-title">{{ category.grouper.name }}</h3>
-  <ul class="carte-list">
-    {% for article in category.list %}
-    <li class="carte-item">
-      <div class="filler"></div>
-      <span class="carte-label">{{ article.name }}</span>
-      <span class="carte-ukf">{{ article.price | ukf:False}} UKF</span>
-    </li>
-    {% endfor %}
-  </ul>
-</div><!-- endblock unbreakable -->
-{% endfor %}
-
-{% endblock %}

kfet/forms.py

@@ -25,18 +25,22 @@ from gestioncof.models import CofProfile
 # -----
 
 class DateTimeWidget(forms.DateTimeInput):
-    def __init__(self, attrs = None):
+    def __init__(self, *args, **kwargs):
-        super(DateTimeWidget, self).__init__(attrs)
+        super().__init__(*args, **kwargs)
         self.attrs['format'] = '%Y-%m-%d %H:%M'
+
     class Media:
         css = {
-                'all': ('kfet/css/bootstrap-datetimepicker.min.css',)
+            'all': ('kfet/css/bootstrap-datetimepicker.min.css',)
-            }
+        }
-        js  = (
+        js = (
-                'kfet/js/moment.js',
+            'kfet/js/moment.js',
-                'kfet/js/moment-fr.js',
+            'kfet/js/moment-fr.js',
-                'kfet/js/bootstrap-datetimepicker.min.js',
+            'kfet/js/moment-timezone-with-data-2010-2020.js',
-            )
+            'kfet/js/bootstrap-datetimepicker.min.js',
+        )
+
+
 # -----
 # Account forms
 # -----
@@ -459,8 +463,11 @@ class KFetConfigForm(ConfigForm):
 
 
 class FilterHistoryForm(forms.Form):
-    checkouts = forms.ModelMultipleChoiceField(queryset = Checkout.objects.all())
+    checkouts = forms.ModelMultipleChoiceField(queryset=Checkout.objects.all())
-    accounts = forms.ModelMultipleChoiceField(queryset = Account.objects.all())
+    accounts = forms.ModelMultipleChoiceField(queryset=Account.objects.all())
+    from_date = forms.DateTimeField(widget=DateTimeWidget)
+    to_date = forms.DateTimeField(widget=DateTimeWidget)
+
 
 # -----
 # Transfer forms

kfet/models.py

@@ -14,7 +14,8 @@ from datetime import date
 import re
 import hashlib
 
-from kfet.config import kfet_config
+from .config import kfet_config
+from .utils import to_ukf
 
 def choices_length(choices):
     return reduce(lambda m, choice: max(m, len(choice[0])), choices, 0)
@@ -102,6 +103,10 @@ class Account(models.Model):
         return self.cofprofile.is_cof
 
     # Propriétés supplémentaires
+    @property
+    def balance_ukf(self):
+        return to_ukf(self.balance, is_cof=self.is_cof)
+
     @property
     def real_balance(self):
         if hasattr(self, 'negative') and self.negative.balance_offset:
@@ -309,6 +314,10 @@ class AccountNegative(models.Model):
             ('view_negs', 'Voir la liste des négatifs'),
         )
 
+    @property
+    def until_default(self):
+        return self.start + kfet_config.overdraft_duration
+
 
 class Checkout(models.Model):
     created_by = models.ForeignKey(
@@ -461,6 +470,10 @@ class Article(models.Model):
     def get_absolute_url(self):
         return reverse('kfet.article.read', kwargs={'pk': self.pk})
 
+    def price_ukf(self):
+        return to_ukf(self.price)
+
+
 class ArticleRule(models.Model):
     article_on = models.OneToOneField(
         Article, on_delete = models.PROTECT,

kfet/signals.py

@@ -4,7 +4,7 @@ from django.contrib import messages
 from django.contrib.auth.signals import user_logged_in
 from django.core.urlresolvers import reverse
 from django.dispatch import receiver
-from django.utils.html import mark_safe
+from django.utils.safestring import mark_safe
 
 
 @receiver(user_logged_in)

kfet/static/kfet/css/base/buttons.css

@@ -0,0 +1,88 @@
+/* General ------------------------- */
+
+.btn {
+    border: 0;
+    outline: none !important;
+
+    transition: background-color, border, color, opacity;
+    transition-duration: 0.15s;
+
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+
+    font-family: "Roboto Slab";
+}
+
+.btn, .btn-lg, .btn-group-lg>.btn {
+    border-radius:0;
+}
+
+
+/* Default ------------------------- */
+
+.btn-default {
+    background-color: transparent !important;
+    color: #555;
+}
+
+.btn-default:hover,
+.btn-default.focus, .btn-default:focus {
+    color: #c8102e;
+}
+
+.btn-default[disabled]:hover, .btn-default.disabled:hover {
+    color: inherit !important;
+}
+
+
+/* Primary ------------------------- */
+
+.btn-primary {
+    background-color:#c63b52;
+    color:#FFF;
+}
+
+.btn-primary:hover,
+.btn-primary.focus, .btn-primary:focus,
+.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover,
+.btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover {
+    background-color:#c8102e;
+    color:#FFF;
+}
+
+
+/* Primary + White background ------ */
+
+.btn-primary-w {
+    background: white;
+    color: black;
+}
+
+.btn-primary-w:hover {
+    background: #c63b52;
+    color: white;
+}
+
+.btn-primary-w.focus, .btn-primary-w:focus,
+.btn-primary-w.active.focus, .btn-primary-w.active:focus, .btn-primary-w.active:hover,
+.btn-primary-w:active.focus, .btn-primary-w:active:focus, .btn-primary-w:active:hover {
+    background: #c8102e;
+    color: white;
+}
+
+
+/* Nav ----------------------------- */
+
+.btn-nav {
+    background-color: transparent !important;
+    color: inherit;
+    border-bottom: 1px solid #ddd;
+}
+
+.btn-nav:hover,
+.btn-nav.focus, .btn-nav:focus,
+.btn-nav.active.focus, .btn-nav.active:focus, .btn-nav.active:hover,
+.btn-nav:active.focus, .btn-nav:active:focus, .btn-nav:active:hover {
+    border-bottom: 1px solid #c8102e;
+}

kfet/static/kfet/css/base/fixed.css

@@ -0,0 +1,151 @@
+.fixed > * + * {
+    margin-top: 15px;
+}
+
+
+/* Aside --------------------------- */
+
+/* Aside - Block */
+
+aside {
+    background: white;
+    padding: 15px;
+}
+
+aside > * + * {
+    margin-top: 15px;
+}
+
+/* Aside - Misc */
+
+aside .glyphicon-question-sign {
+    font-size: 0.8;
+}
+
+aside h4 {
+    font-weight: bold;
+}
+
+/* Aside - Heading */
+
+aside .heading {
+    font-family: "Roboto Slab";
+    font-size: 25px;
+    font-weight: bold;
+    line-height: 1.1;
+    text-align: center;
+}
+
+aside .heading .big {
+    font-size: 2em;
+}
+
+aside .heading .sub {
+    font-size: 0.7em;
+    font-weight: normal;
+}
+
+@media (min-width: 992px) {
+    aside .heading {
+        font-size: 32px;
+        line-height: 1.3;
+    }
+}
+
+/* Aside - Buttons */
+
+aside .buttons {
+    margin-left: -15px;
+    margin-right: -15px;
+}
+
+aside .buttons > * {
+    flex: 0 1 auto !important;
+}
+
+
+/* Aside - Text */
+
+aside .text {
+    line-height: 1.3;
+    font-size: 14px;
+}
+
+@media (min-width: 992px) {
+    aside .text {
+        line-height: 1.6;
+        font-size: 16px;
+    }
+}
+
+aside .text ul {
+    margin-bottom: 0;
+}
+
+
+/* Buttons ------------------------- */
+
+.fixed .buttons {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+
+    text-align: center;
+}
+
+.fixed .buttons > * {
+    flex: 0 1 auto;
+    overflow: hidden;
+}
+
+.fixed .buttons > .solo {
+    flex: 1 100%;
+}
+
+@media (min-width: 768px) {
+    .fixed .buttons > * {
+        flex: 1 auto;
+    }
+
+    .fixed .buttons > .full > * {
+        width: 100%;
+    }
+}
+
+.fixed .buttons .btn {
+    padding: 8px 12px;
+}
+
+@media (min-width: 992px) {
+    .fixed .buttons .btn {
+        font-size: 16px;
+    }
+}
+
+
+/* Tabs ---------------------------- */
+
+.fixed .tabs-buttons {
+    margin-bottom: -5px;
+}
+
+.fixed .tabs-buttons > * {
+    margin-bottom: 5px;
+}
+
+.fixed .tabs-buttons .glyphicon-chevron-right {
+    margin-left: 5px;
+    line-height: 1.4;
+    color: white;
+}
+
+@media (min-width: 768px) {
+    .fixed .tabs-buttons {
+        text-align: right;
+        justify-content: flex-end;
+    }
+
+    .fixed .tabs-buttons > * {
+        flex: 1 100%;
+    }
+}

kfet/static/kfet/css/base/footer.css

@@ -10,10 +10,9 @@
 }
 
 .footer a {
-    color: inherit;
+    color: inherit !important;
 }
 
 .footer a:hover, .footer a:focus {
-    color: inherit;
     text-decoration: underline;
 }

kfet/static/kfet/css/base/main.css

@@ -0,0 +1,138 @@
+/* Global layout ------------------- */
+
+.main-col, .fixed-col {
+    padding: 0 0 15px;
+}
+
+@media (min-width: 768px) {
+    .fixed-col {
+        position: sticky;
+        top: 35px;
+        padding-top: 15px;
+    }
+
+    .fixed-col + .main-col {
+        padding: 15px 0 15px 15px;
+    }
+}
+
+@media (min-width: 992px) {
+    .main-col {
+        padding: 15px;
+    }
+}
+
+.main-col-mult {
+    column-gap: 45px;
+}
+
+.main-bg {
+    background: white;
+}
+
+.main-padding {
+    padding: 15px;
+}
+
+@media (min-width: 768px) {
+    .main-padding {
+        padding: 30px;
+    }
+}
+
+
+/* Section ------------------------- */
+
+section {
+    margin-bottom: 15px;
+    position:relative;
+}
+
+section:last-child {
+    margin-bottom: 0;
+}
+
+
+/* Section - Elements -------------- */
+
+section > * {
+    background: white;
+    padding: 15px;
+}
+
+section > .full,
+section > table,
+section > .table-responsive {
+    padding: 0 !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+}
+
+section .full {
+    margin-left: -15px;
+    margin-right: -15px;
+}
+
+@media (min-width: 992px) {
+    section > * {
+        padding: 30px;
+    }
+
+    section .full {
+        margin-left: -30px;
+        margin-right: -30px;
+    }
+}
+
+section .row > div:last-child {
+    margin-bottom: 0 !important;
+}
+
+@media (max-width: 768px) {
+    section .row > div {
+        margin-bottom: 10px;
+    }
+}
+
+@media (max-width: 1200px) {
+    section .row > div {
+        margin-bottom: 20px;
+    }
+}
+
+section ul ul {
+    padding-left: 30px;
+}
+
+/* Titles & Heading */
+
+section h2,
+section .heading {
+    background: transparent;
+    margin: 20px 15px 15px;
+    padding: 0;
+    border-bottom: 3px solid #c8102e;
+    font-family: "Roboto Slab";
+    font-size: 40px;
+    line-height: 1.1;
+}
+
+section h3 {
+    border-bottom: 2px solid #c8102e;
+    margin: 0 0 10px;
+    padding: 10px 0 10px;
+    font-size: 25px;
+    font-weight: bold;
+}
+
+section .heading .buttons {
+    opacity: 0.7;
+    top: 10px;
+    float: right;
+}
+
+section h2:first-child,
+section h3:first-child {
+    padding-top: 0;
+    margin-top: 0;
+}

kfet/static/kfet/css/base/messages.css

@@ -0,0 +1,36 @@
+.messages .alert {
+    padding:10px 15px;
+    margin:0;
+    border:0;
+    border-radius:0;
+}
+
+.messages .alert:last-child {
+    margin-bottom: 15px;
+}
+
+.messages .alert .close {
+    top:0;
+    right:0;
+}
+
+.messages .alert-info {
+    color:inherit;
+    background-color:#ccc;
+}
+
+.messages .alert-error {
+    color: white;
+    background-color: #c63b52;
+}
+
+.messages .alert-success {
+    color: white;
+    background: #3d9947;
+}
+
+.messages a {
+    font-weight: bold;
+    text-decoration: none;
+}
+

kfet/static/kfet/css/base/misc.css

@@ -0,0 +1,107 @@
+/* General ------------------------- */
+
+body {
+    margin-top:50px;
+    font-family:Roboto;
+    background:#ddd;
+}
+
+.glyphicon + span, span + .glyphicon {
+    margin-left: 10px;
+}
+
+/* Titles */
+
+h1,h2,h3,h4,h5,h6 {
+    font-family:"Roboto Slab";
+}
+
+/* Links */
+
+a {
+    color:#C8202E;
+}
+
+a:focus, a:hover {
+    color:#C8102E;
+}
+
+/* Inputs */
+
+:focus {
+    outline:none;
+}
+
+textarea {
+    font-family:'Roboto Mono';
+    border-radius:0 !important;
+}
+
+/* Lists */
+
+ul, ol {
+    padding-left: 30px;
+}
+
+ul {
+    list-style-type: square;
+}
+
+/* Tables */
+
+.table {
+    margin-bottom:0;
+    border-bottom:1px solid #ddd;
+    width:100%;
+    background-color: #FFF;
+}
+
+.table td {
+    vertical-align:middle !important;
+}
+
+.table td.no-padding {
+    padding:0;
+}
+
+.table thead {
+    background:#c8102e;
+    color:#fff;
+    font-weight:bold;
+    font-size:16px;
+}
+
+.table thead td {
+    padding:8px !important;
+}
+
+.table tr.section {
+    background: #c63b52 !important;
+    color:#fff;
+    font-weight:bold;
+}
+
+.table tr.section td {
+    border-top:0;
+    font-size:16px;
+    padding:8px 30px;
+}
+
+.table tr.more td {
+    padding: 0;
+}
+
+.table-responsive {
+    border: 0;
+    margin-bottom: 0;
+}
+
+/* Toggle on hover ----------------- */
+
+.toggle:not(:hover) .hover {
+    display: none;
+}
+
+.toggle:hover .base {
+    display: none;
+}

kfet/static/kfet/css/index.css

@@ -1,306 +1,64 @@
-@import url("nav.css");
+/* Libs */
-@import url("footer.css");
+@import url("libs/columns.css");
+
+/* Libs customizations */
+@import url("libs/jconfirm-kfet.css");
+@import url("libs/multiple-select-kfet.css");
+
+/* Base */
+@import url("base/misc.css");
+@import url("base/buttons.css");
+
+/* Blocks */
+@import url("base/main.css");
+@import url("base/nav.css");
+@import url("base/messages.css");
+@import url("base/fixed.css");
+@import url("base/footer.css");
+
+/* Components */
 @import url("kpsul.css");
-@import url("jconfirm-kfet.css");
 @import url("history.css");
 
-body {
+
-    margin-top:50px;
+
-    font-family:Roboto;
+.header {
-    background:#ddd;
+    padding: 15px 20px;
+
+    background-color: rgba(200,16,46,1);
+    color: #FFF;
 }
 
-h1,h2,h3,h4,h5,h6 {
+.header h1 {
-    font-family:"Roboto Slab";
+    padding: 0;
-}
+    margin: 0;
-
+    font-weight: bold;
-a {
-    color:#C8202E;
-}
-
-a:focus, a:hover {
-    color:#C8102E;
-}
-
-:focus {
-    outline:none;
-}
-
-textarea {
-    font-family:'Roboto Mono';
-    border-radius:0 !important;
-}
-
-.glyphicon + span, span + .glyphicon {
-    margin-left: 10px;
-}
-
-.table {
-    margin-bottom:0;
-    border-bottom:1px solid #ddd;
-    width:100%;
-    background-color: #FFF;
-}
-
-.table td {
-    vertical-align:middle !important;
-}
-
-.table td.no-padding {
-    padding:0;
-}
-
-.table thead {
-    background:#c8102e;
-    color:#fff;
-    font-weight:bold;
-    font-size:16px;
-}
-
-.table thead td {
-    padding:8px !important;
-}
-
-.table tr.section {
-    background:#c8102e;
-    color:#fff;
-    font-weight:bold;
-}
-
-.table tr.section td {
-    border-top:0;
-    font-size:16px;
-    padding:8px 30px;
-}
-
-.table-hover > tbody > tr.section:hover {
-    background:#c8102e;
-}
-
-.table-responsive {
-    border: 0;
-    margin-bottom: 0;
-}
-
-.btn {
-    border: 0;
-
-    transition: background-color, color;
-    transition-duration: 0.15s;
-
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-
-    font-family: "Roboto Slab";
-}
-
-.btn, .btn-lg, .btn-group-lg>.btn {
-    border-radius:0;
-}
-
-.btn-primary {
-    background-color:#c63b52;
-    color:#FFF;
-    border:0;
-}
-
-.btn-primary:hover,
-.btn-primary.focus, .btn-primary:focus,
-.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover,
-.btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover,
-.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
-    outline: 0;
-    background-color:#bf0f2c;
-    background-color:#c8102e;
-    color:#FFF;
-}
-
-.btn-primary[disabled]:hover,
-.btn-primary[disabled]:focus {
-    background-color: #000;
-    color: #666;
-}
-
-.nav-pills>li>a {
-    border-radius:0;
-}
-
-.nav-pills>li>a:focus, .nav-pills>li>a:hover {
-    outline: 0;
-    background-color:rgba(200,16,46,1);
-    color:#FFF;
-}
-
-.header-row {
-    background-color:rgba(200,16,46,1);
-    color:#FFF;
-}
-
-.page-header {
-    border:0;
-    padding:0;
-    margin:15px 20px;
-    font-weight:bold;
 }
 
 .nopadding {
     padding: 0 !important;
 }
 
-.col-content-left, .col-content-right {
+.frozen-account {
-    padding:0;
-}
-
-
-@media (min-width: 768px) {
-    .col-content-left {
-        position: sticky;
-        top:50px;
-        margin-bottom: 15px;
-    }
-}
-
-.content-left-top {
-    background:#fff;
-    padding:15px;
-}
-
-@media (min-width: 1200px) {
-    .content-left-top {
-        padding: 30px;
-    }
-}
-
-.content-left .btn-lg {
-    font-size: 16px;
-}
-
-.btn-actions {
-    margin: 0 -15px;
-}
-
-.btn-actions .btn {
-    color: inherit;
-}
-
-.btn-actions .btn:not([disabled]):hover, .btn-actions .btn:not([disabled]):focus {
-    color: #c8102e;
-}
-
-.content-left-top.frozen-account {
     background:#5072e0;
     color:#fff;
 }
 
-.content-left .block {
+
-    padding-top:15px;
+.main .table a:not(.btn) {
+    color: inherit;
 }
 
-.content-left .block .line {
+.main .table a:not(.btn):focus ,
-    font-size:16px;
+.main .table a:not(.btn):hover  {
-    line-height:30px;
+    color: #C81022;
 }
 
-.content-left .line.line-big {
-    font-family:"Roboto Slab";
-    font-size:60px;
-    font-weight:bold;
-    text-align:center;
-    overflow:hidden;
-}
-
-.content-left .line.line-bigsub {
-    font-size:25px;
-    font-weight:bold;
-    text-align:center;
-}
-
-.content-left .line.balance {
-    font-size:45px;
-    text-align:center;
-}
-
-@media (min-width: 1200px) {
-    .content-left .line.line-big {
-        margin-top: -15px;
-    }
-}
-
-@media (min-width: 768px) {
-    .content-right {
-        margin: 15px;
-    }
-}
-
-.content-right-block {
-    margin-top: 15px;
-    position:relative;
-}
-
-.content-right-block > *:not(.buttons-title) {
-    background: #fff;
-}
-
-.content-right-block > h2 {
-    background: transparent !important;
-}
-
-.content-right-block .buttons-title {
-    position:absolute;
-    top:8px;
-    right:20px;
-}
-
-.content-right-block > div.row {
-    margin:0;
-}
-
-.content-right-block h2 {
-    margin:20px 20px 15px;
-    padding-bottom:5px;
-    border-bottom:3px solid #c8102e;
-    font-size:40px;
-}
-
-.content-right-block h3 {
-    border-bottom: 1px solid #c8102e;
-    margin: 0px 15px 15px;
-    padding: 20px 20px 10px;
-    font-size:25px;
-}
-
-.content-right-block a:not(.btn) {
-    color:#000;
-}
-
-.content-right-block a:not(.btn):focus ,
-.content-right-block a:not(.btn):hover  {
-    color:#C81022;
-}
 
 /*
  * Pages tableaux seuls
  */
 
-.content-center > *:not(.content-right-block) {
-    background: #fff;
-}
-
-@media (min-width: 992px) {
-    .content-center {
-        margin: 15px 0;
-    }
-
-    .column-row {
-        margin-top: 15px;
-        margin-bottom: 15px;
-    }
-}
-
-.content-center tbody tr:not(.section) td {
-    padding:0px 5px;
-}
 
 .table .form-control {
     padding: 1px 12px ;
@@ -313,6 +71,10 @@ textarea {
     background: #f5f5f5;
 }
 
+.table-condensed-input tbody tr:not(.section) td {
+    padding:0px 5px;
+}
+
 .table-condensed input.form-control {
     margin: 0 !important;
     border-top: 0;
@@ -320,19 +82,34 @@ textarea {
     border-radius: 0;
 }
 
-.content-center .auth-form {
+.auth-form {
-    margin:15px;
+    padding: 15px 0;
+    background: #d86c7e;
+    color: white;
+}
+
+.auth-form.form-horizontal {
+    padding: 0;
+    margin: 0;
+}
+
+.auth-form .form-group {
+    margin-bottom: 0;
+}
+
+.auth-form input {
+    box-shadow: none !important;
+    background: transparent;
+    color: white;
+    border: 0 !important;
+    border-radius: 0;
+    border-bottom: 1px solid white !important;
 }
 
 /*
  * Pages formulaires seuls
  */
 
-.content-form {
-    background-color: #fff;
-    padding: 15px;
-}
-
 .account_create #id_trigramme {
     display:block;
     width:200px;
@@ -395,40 +172,48 @@ textarea {
     padding:5px 20px;
 }
 
-/*
+/* Account autocomplete window */
- * Messages
+
+#account_results ul {
+    list-style-type:none;
+    background:rgba(255,255,255,0.9);
+    padding:0;
+}
+
+#account_results li {
+    display:block;
+    padding:5px 20px;
+    height:100%;
+    width:100%;
+}
+
+#account_results .hilight {
+    background:rgba(200,16,46,0.9);
+    color:#fff;
+    text-decoration:none;
+}
+
+/**
+ * Stats (graphs)
  */
 
-.messages .alert {
+.stat-nav {
-    padding:10px 15px;
+    margin-bottom: 10px;
-    margin:0;
+    font-family: Roboto;
-    border:0;
-    border-radius:0;
 }
 
-.messages .alert .close {
+.stat-nav li {
-    top:0;
+    float: left;
-    right:0;
 }
 
-.messages .alert-info {
+.stat-nav a {
-    color:inherit;
+    opacity: 0.6;
-    background-color:#ccc;
+    font-family: Roboto;
 }
 
-.messages .alert-error {
+.stat-nav a:hover,
-    color: white;
+.stat-nav a.focus, .stat-nav a:focus {
-    background-color: #c63b52;
+    opacity: 1;
-}
-
-.messages .alert-success {
-    color: white;
-    background: #3d9947;
-}
-
-.messages a {
-    font-weight: bold;
-    text-decoration: none;
 }
 
 /*
@@ -488,57 +273,10 @@ thead .tooltip {
     height: 100px;
 }
 
-/*
- * Responsive Columns
- */
-
-.unbreakable {
-    display:inline-block;
-    width: 100%;
-}
-
-.column-xs-1, .column-sm-1, .column-md-1, .column-lg-1,
-.column-xs-2, .column-sm-2, .column-md-2, .column-lg-2,
-.column-xs-3, .column-sm-3, .column-md-3, .column-lg-3,
-.column-xs-4, .column-sm-4, .column-md-4, .column-lg-4,
-.column-xs-5, .column-sm-5, .column-md-5, .column-lg-5 {
-    column-count: 1;
-    column-gap: 0;
-}
-
-.column-xs-1 { column-count: 1; }
-.column-xs-2 { column-count: 2; }
-.column-xs-3 { column-count: 3; }
-.column-xs-4 { column-count: 4; }
-.column-xs-5 { column-count: 5; }
-
-@media (min-width: 768px) {
-    .column-sm-1 { column-count: 1; }
-    .column-sm-2 { column-count: 2; }
-    .column-sm-3 { column-count: 3; }
-    .column-sm-4 { column-count: 4; }
-    .column-sm-5 { column-count: 5; }
-}
-
-@media (min-width: 992px) {
-    .column-md-1 { column-count: 1; }
-    .column-md-2 { column-count: 2; }
-    .column-md-3 { column-count: 3; }
-    .column-md-4 { column-count: 4; }
-    .column-md-5 { column-count: 5; }
-}
-
-@media (min-width: 1200px) {
-    .column-lg-1 { column-count: 1; }
-    .column-lg-2 { column-count: 2; }
-    .column-lg-3 { column-count: 3; }
-    .column-lg-4 { column-count: 4; }
-    .column-lg-5 { column-count: 5; }
-}
 
 /* Inventaires */
 
-#inventoryform input[type=number] {
+.table-condensed-input input[type=number] {
     text-align: center;
 }
 
@@ -557,18 +295,6 @@ thead .tooltip {
     margin: 0 auto;
 }
 
-/* Multiple select customizations */
-
-.ms-choice {
-    height: 34px !important;
-    line-height: 34px !important;
-    border: 1px solid #ccc !important;
-    box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !important;
-}
-
-.ms-choice > div {
-    top: 4px !important;
-}
 
 /* Checkbox select multiple */
 

kfet/static/kfet/css/libs/columns.css

@@ -0,0 +1,43 @@
+.unbreakable {
+    display:inline-block;
+    width: 100%;
+}
+
+.column-xs-1, .column-sm-1, .column-md-1, .column-lg-1,
+.column-xs-2, .column-sm-2, .column-md-2, .column-lg-2,
+.column-xs-3, .column-sm-3, .column-md-3, .column-lg-3,
+.column-xs-4, .column-sm-4, .column-md-4, .column-lg-4,
+.column-xs-5, .column-sm-5, .column-md-5, .column-lg-5 {
+    column-count: 1;
+}
+
+.column-xs-1 { column-count: 1; }
+.column-xs-2 { column-count: 2; }
+.column-xs-3 { column-count: 3; }
+.column-xs-4 { column-count: 4; }
+.column-xs-5 { column-count: 5; }
+
+@media (min-width: 768px) {
+    .column-sm-1 { column-count: 1; }
+    .column-sm-2 { column-count: 2; }
+    .column-sm-3 { column-count: 3; }
+    .column-sm-4 { column-count: 4; }
+    .column-sm-5 { column-count: 5; }
+}
+
+@media (min-width: 992px) {
+    .column-md-1 { column-count: 1; }
+    .column-md-2 { column-count: 2; }
+    .column-md-3 { column-count: 3; }
+    .column-md-4 { column-count: 4; }
+    .column-md-5 { column-count: 5; }
+}
+
+@media (min-width: 1200px) {
+    .column-lg-1 { column-count: 1; }
+    .column-lg-2 { column-count: 2; }
+    .column-lg-3 { column-count: 3; }
+    .column-lg-4 { column-count: 4; }
+    .column-lg-5 { column-count: 5; }
+}
+

kfet/static/kfet/css/libs/jconfirm-kfet.css

@@ -49,7 +49,7 @@
 }
 
 .jconfirm .jconfirm-box .buttons button {
-    width:40px;
+    min-width:40px;
     height:100%;
     margin:0;
     margin:0 !important;
@@ -85,24 +85,3 @@
     padding-right: 50px;
     padding-left: 50px;
 }
-
-/* Account autocomplete window */
-
-#account_results ul {
-    list-style-type:none; 
-    background:rgba(255,255,255,0.9);
-    padding:0;
-}
-
-#account_results li {
-    display:block;
-    padding:5px 20px;
-    height:100%;
-    width:100%;
-}
-
-#account_results .hilight {
-    background:rgba(200,16,46,0.9); 
-    color:#fff;
-    text-decoration:none;
-}

kfet/static/kfet/css/libs/multiple-select-kfet.css

@@ -0,0 +1,14 @@
+/**
+ * Multiple Select plugin customizations
+ */
+
+.ms-choice {
+    height: 34px !important;
+    line-height: 34px !important;
+    border: 1px solid #ccc !important;
+    box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !important;
+}
+
+.ms-choice > div {
+    top: 4px !important;
+}

kfet/static/kfet/js/kfet.js

@@ -30,7 +30,7 @@ class KfetWebsocket {
     constructor(data) {
         $.extend(this, this.constructor.defaults, data);
     }
-    
+
     get url() {
         var websocket_protocol = window.location.protocol == 'https:' ? 'wss' : 'ws';
         var location_host = window.location.host;
@@ -184,3 +184,13 @@ function requestAuth(data, callback, focus_next = null) {
 
     });
 }
+
+
+/**
+ * Setup jquery-confirm
+ */
+
+jconfirm.defaults = {
+    confirmButton: '<span class="glyphicon glyphicon-ok"></span>',
+    cancelButton: '<span class="glyphicon glyphicon-remove"></span>'
+};

kfet/static/kfet/js/statistic.js

@@ -7,7 +7,7 @@
 
         var self = this;
         var element = $(target);
-        var content = $("<div>");
+        var content = $("<div class='full'>");
         var buttons;
 
         function dictToArray (dict, start) {
@@ -153,9 +153,8 @@
         // initialize the interface
         function initialize (data) {
             // creates the bar with the buttons
-            buttons = $("<div>",
+            buttons = $("<ul>",
-                        {class: "btn-group btn-group-justified",
+                        {class: "nav stat-nav",
-                         role: "group",
                          "aria-label": "select-period"});
 
             var to_click;
@@ -163,11 +162,9 @@
 
             for (var i = 0; i < context.length; i++) {
                 // creates the button
-                var btn_wrapper = $("<div>",
+                var btn_wrapper = $("<li>", {role:"presentation"});
-                                    {class: "btn-group",
+                var btn = $("<a>",
-                                     role:"group"});
+                            {class: "btn btn-nav",
-                var btn = $("<button>",
-                            {class: "btn btn-primary",
                              type: "button"})
                     .text(context[i].label)
                     .prop("stats_target_url", context[i].url)

kfet/templates/kfet/account.html

@@ -1,43 +1,41 @@
 {% extends "kfet/base_col_2.html" %}
 
-{% block title %}Liste des comptes{% endblock %}
+{% block title %}Comptes{% endblock %}
 {% block header-title %}Comptes{% endblock %}
 
-{% block fixed-content %}
+{% block fixed %}
+
+<aside>
+  <div class="heading">
+    {% with n_accounts=accounts|length|add:-1 %}
+    {{ n_accounts }}
+    <span class="sub">compte{{ n_accounts|pluralize }}</span>
+    {% endwith %}
+  </div>
+</aside>
 
-<div class="content-left-top">
-  <div class="line line-big">{{ accounts|length|add:-1 }}</div>
-  <div class="line line-bigsub">compte{{ accounts|length|add:-1|pluralize }}</div>
-</div>
 <div class="buttons">
-  <div class="btn-group btn-group-justified">
+  <div class="solo full">
-    <a class="btn btn-primary btn-lg" href="{% url 'kfet.account.create' %}">
+  <a class="btn btn-primary" href="{% url 'kfet.account.create' %}">
-      <span class="glyphicon glyphicon-plus"></span>
+    <span class="glyphicon glyphicon-plus"></span>
-      <span>Créer un compte</span>
+    <span>Créer un compte</span>
-    </a>
+  </a>
-  </div>
 </div>
-{% if perms.kfet.manage_perms or perms.kfet.view_negs %}
+
-<div class="buttons btn-group btn-group-justified">
   {% if perms.kfet.manage_perms %}
-  <div class="btn-group">
+  <a class="btn btn-primary" href="{% url 'kfet.account.group' %}">Permissions</a>
-    <a class="btn btn-primary btn-lg" href="{% url 'kfet.account.group' %}">Permissions</a>
-  </div>
   {% endif %}
+
   {% if perms.kfet.view_negs %}
-  <div class="btn-group">
+  <a class="btn btn-primary" href="{% url 'kfet.account.negative' %}">Négatifs</a>
-    <a class="btn btn-primary btn-lg" href="{% url 'kfet.account.negative' %}">Négatifs</a>
-  </div>
   {% endif %}
 </div>
-{% endif %}
 
 {% endblock %}
 
-{% block main-content %}
+{% block main %}
 
-<div class="content-right-block">
+<section>
-  <h2>Liste des comptes</h2>
   <div class="table-responsive">
     <table class="table table-hover table-condensed">
       <thead>
@@ -68,6 +66,6 @@
         </tbody>
     </table>
   </div>
-</div>
+</section>
 
 {% endblock %}

kfet/templates/kfet/account_create.html

@@ -1,4 +1,4 @@
-{% extends "kfet/base_col_1.html" %}
+{% extends "kfet/base_form.html" %}
 {% load staticfiles %}
 
 {% block title %}Nouveau compte{% endblock %}
@@ -8,9 +8,7 @@
 <script src="{% static "autocomplete_light/autocomplete.js" %}" type="text/javascript"></script>
 {% endblock %}
 
-{% block main-class %}content-form{% endblock %}
+{% block main %}
-
-{% block main-content %}
 
 <form action="" method="post" class="account_create">
   {% csrf_token %}
@@ -18,7 +16,6 @@
     {{ trigramme_form.trigramme.errors }}
     {{ trigramme_form.trigramme }}
   </div>
-  <div id="trigramme_valid"></div>
   <p class="help-block">Les mots contenant des caractères non alphanumériques seront ignorés</p>
   <input type="text" name="q" id="search_autocomplete" spellcheck="false" placeholder="Chercher un utilisateur par nom, prénom ou identifiant clipper" class="form-control">
   <div style="position:relative;">
@@ -62,7 +59,6 @@
         // et de ladisponibilité du trigramme choisi
         $('#id_trigramme').on('input', function() {
             var trigramme = $('#id_trigramme').val().toUpperCase();
-            var container = '#trigramme_valid';
 
             var pattern = /^[^a-z]{3}$/;
             if (!(trigramme.match(pattern))) {

kfet/templates/kfet/account_create_special.html

@@ -10,7 +10,7 @@
 
 {% block main-class %}content-form{% endblock %}
 
-{% block main-content %}
+{% block main %}
 
 <form action="" method="post" class="account_create">
   {% csrf_token %}

kfet/templates/kfet/account_group.html

@@ -3,53 +3,59 @@
 {% block title %}Groupes de comptes{% endblock %}
 {% block header-title %}Groupes de comptes{% endblock %}
 
-{% block fixed-content %}
+{% block fixed %}
 
-<div class="buttons btn-group btn-group-justified">
+<div class="buttons">
-  <a class="btn btn-primary btn-lg" href="{% url 'kfet.account.group.create' %}">Créer un groupe</a>
+  <a class="btn btn-primary" href="{% url 'kfet.account.group.create' %}">
+    <span class="glyphicon glyphicon-plus"></span><span>Créer un groupe</span>
+  </a>
 </div>
 
 {% endblock %}
 
-{% block main-content %}
+{% block main %}
 
 {% for group in groups %}
-<div class="content-right-block">
+<section>
-  <div class="buttons-title">
+  <div class="heading">
-    <a class="btn btn-primary" href="{% url 'kfet.account.group.update' group.pk %}">
+    {{ group.name }}
-      <span class="glyphicon glyphicon-cog"></span>
+    <div class="buttons">
-    </a>
+      <a class="btn btn-default" href="{% url 'kfet.account.group.update' group.pk %}">
+        <span class="glyphicon glyphicon-cog"></span><span class="hidden-xs">Éditer</span>
+      </a>
+    </div>
   </div>
-  <h2>{{ group.name }}</h2>
+  <div>
-  <div class="row">
+    <h3>Comptes</h3>
-    <div class="col-sm-6">
+    <div class="sub-block column-sm-2 column-md-3">
-      <h3>Permissions</h3>
+    <ul>
+      {% for user in group.user_set.all %}
+      <li>
+        <a href="{% url "kfet.account.update" user.profile.account_kfet.trigramme %}">
+          {{ user.profile.account_kfet }}
+        </a>
+      </li>
+      {% endfor %}
+    </ul>
+    </div>
+    <h3>Permissions</h3>
+    <div class="column-sm-2 column-lg-3">
       {% regroup group.permissions.all by content_type as grouped_perms %}
       <ul class="list-unstyled">
         {% for perms_group in grouped_perms %}
-          <li><b>{{ perms_group.grouper|title }}</b>
+        <li class="unbreakable">
-          <ul class="list-unstyled">
+          <b>{{ perms_group.grouper|title }}</b>
-          {% for perm in perms_group.list %}
+          <ul>
-            <li style="padding-left: 20px">{{ perm.name }}</li>
+            {% for perm in perms_group.list %}
-          {% endfor %}
+            <li>{{ perm.name }}</li>
+            {% endfor %}
           </ul>
-        {% endfor %}
-      </ul>
-    </div>
-    <div class="col-sm-6">
-      <h3>Comptes</h3>
-      <ul class="list-unstyled">
-        {% for user in group.user_set.all %}
-        <li>
-          <a href="{% url "kfet.account.update" user.profile.account_kfet.trigramme %}">
-            {{ user.profile.account_kfet }}
-          </a>
         </li>
         {% endfor %}
       </ul>
     </div>
   </div>
-</div>
+</section>
 {% endfor %}
 
 {% endblock %}

kfet/templates/kfet/account_group_form.html

@@ -1,4 +1,4 @@
-{% extends 'kfet/base_col_1.html' %}
+{% extends 'kfet/base_form.html' %}
 {% load staticfiles %}
 {% load widget_tweaks %}
 
@@ -10,9 +10,7 @@
 {% block title %}Permissions - Édition{% endblock %}
 {% block header-title %}Modification des permissions{% endblock %}
 
-{% block main-class %}content-form{% endblock %}
+{% block main %}
-
-{% block main-content %}
 
 <form action="" method="post" class="form-horizontal">
   {% csrf_token %}
@@ -23,8 +21,12 @@
         <span class="input-group-addon">K-Fêt</span>
         {{ form.name|add_class:"form-control" }}
       </div>
-      {% if form.name.errors %}<span class="help-block">{{ form.name.errors }}</span>{% endif %}
+      {% if form.name.errors %}
-      {% if form.name.help_text %}<span class="help-block">{{ form.name.help_text }}</span>{% endif %}
+        <span class="help-block">{{ form.name.errors }}</span>
+      {% endif %}
+      {% if form.name.help_text %}
+        <span class="help-block">{{ form.name.help_text }}</span>
+      {% endif %}
     </div>
   </div>
   {% include "kfet/form_field_snippet.html" with field=form.permissions %}

kfet/templates/kfet/account_negative.html

@@ -1,72 +1,76 @@
 {% extends "kfet/base_col_2.html" %}
 
 {% block title %}Comptes - Négatifs{% endblock %}
-{% block header-title %}Comptes en négatifs{% endblock %}
+{% block header-title %}Comptes en négatif{% endblock %}
 
-{% block fixed-content %}
+{% block fixed %}
 
-<div class="content-left-top">
+<aside>
-  <div class="line line-big">{{ negatives|length }}</div>
+  <div class="heading">
-  <div class="line line-bigsub">compte{{ negatives|length|pluralize }} en négatif</div>
+    {{ negatives|length }}
-  <div class="block">
+    <span class="sub">compte{{ negatives|length|pluralize }} en négatif</span>
-    <div class="line"><b>Total:</b> {{ negatives_sum|floatformat:2 }}€</div>
   </div>
-  <div class="block">
+  <div class="text">
-    <div class="line"><b>Découvert autorisé par défaut</b></div>
+    <b>Total:</b> {{ negatives_sum|floatformat:2 }}€
-    <div class="line">Montant: {{ kfet_config.overdraft_amount }}€</div>
-    <div class="line">Pendant: {{ kfet_config.overdraft_duration }}</div>
   </div>
-</div>
+  <div class="text">
+    <b>Plafond par défaut</b>
+    <ul class="list-unstyled">
+      <li>Montant: {{ kfet_config.overdraft_amount }}€</li>
+      <li>Pendant: {{ kfet_config.overdraft_duration }}</li>
+    </ul>
+  </div>
+</aside>
+
 {% if perms.kfet.change_settings %}
-<div class="buttons btn-group btn-group-justified">
+<div class="buttons">
-  <a class="btn btn-primary btn-lg" href="{% url 'kfet.settings' %}">Modifier les valeurs par défaut</a>
+  <div class="full">
+    <button type="button" class="btn btn-primary" href="{% url 'kfet.settings' %}">Modifier les valeurs par défaut</a>
+  </div>
 </div>
 {% endif %}
 
 {% endblock %}
 
-{% block main-content %}
+{% block main %}
 
-<div class="content-right-block">
+<div class="table-responsive">
-  <h2>Liste des comptes en négatifs</h2>
+  <table class="table table-hover table-condensed">
-  <div class="table-responsive">
+    <thead>
-    <table class="table table-hover table-condensed">
+      <tr>
-      <thead>
+        <td class="text-center">Tri.</td>
-        <tr>
+        <td>Nom</td>
-          <td class="text-center">Tri.</td>
+        <td class="text-right">Balance</td>
-          <td>Nom</td>
+        <td class="text-right">Réelle</td>
-          <td class="text-right">Balance</td>
+        <td>Début</td>
-          <td class="text-right">Réelle</td>
+        <td>Découvert autorisé</td>
-          <td>Début</td>
+        <td>Jusqu'au</td>
-          <td>Découvert autorisé</td>
+        <td>Balance offset</td>
-          <td>Jusqu'au</td>
+      </tr>
-          <td>Balance offset</td>
+    </thead>
-        </tr>
+    <tbody>
-      </thead>
+      {% for neg in negatives %}
-      <tbody>
+      <tr>
-        {% for neg in negatives %}
+        <td class="text-center">
-          <tr>
+          <a href="{% url 'kfet.account.update' neg.account.trigramme %}">
-            <td class="text-center">
+            {{ neg.account.trigramme }}
-              <a href="{% url 'kfet.account.update' neg.account.trigramme %}">
+          </a>
-                {{ neg.account.trigramme }}
+        </td>
-              </a>
+        <td>{{ neg.account.name }}</td>
-            </td>
+        <td class="text-right">{{ neg.account.balance|floatformat:2 }}€</td>
-            <td>{{ neg.account.name }}</td>
+        <td class="text-right">
-            <td class="text-right">{{ neg.account.balance|floatformat:2 }}€</td>
+          {% if neg.balance_offset %}
-            <td class="text-right">
+            {{ neg.account.real_balance|floatformat:2 }}€
-              {% if neg.balance_offset %}
+          {% endif %}
-                {{ neg.account.real_balance|floatformat:2 }}€
+        </td>
-              {% endif %}
+        <td>{{ neg.start|date:'d/m/Y H:i:s'}}</td>
-            </td>
+        <td>{{ neg.authz_overdraft_amount|default_if_none:'' }}</td>
-            <td>{{ neg.start|date:'d/m/Y H:i:s'}}</td>
+        <td>{{ neg.authz_overdrafy_until|default_if_none:'' }}</td>
-            <td>{{ neg.authz_overdraft_amount|default_if_none:'' }}</td>
+        <td>{{ neg.balance_offset|default_if_none:'' }}</td>
-            <td>{{ neg.authz_overdrafy_until|default_if_none:'' }}</td>
+      </tr>
-            <td>{{ neg.balance_offset|default_if_none:'' }}</td>
+      {% endfor %}
-          </tr>
+    </tbody>
-        {% endfor %}
+  </table>
-      </tbody>
-    </table>
-  </div>
 </div>
 
 {% endblock %}

kfet/templates/kfet/account_read.html

@@ -48,38 +48,43 @@ $(document).ready(function() {
 {% include "kfet/base_footer.html" %}
 {% endblock %}
 
-{% block fixed-content %}
+{% block fixed %}
 {% include "kfet/left_account.html" %}
 {% endblock %}
 
-{% block main-content %}
+{% block main %}
 
 <div class="tab-content">
+
   {% if account.user == request.user %}
-  <div class="content-right-block tab-pane fade in active" id="tab_stats">
+  <div id="tab_stats" class="tab-pane fade in active">
-    <h2>Statistiques</h2>
+    <section>
-    <div>
+      <div>
-      <h3>Ma balance</h3>
+        <h3>Ma balance</h3>
-        <div id="stat_balance"></div>
+          <div id="stat_balance"></div>
-      <h3>Ma consommation</h3>
+        <h3>Ma consommation</h3>
-        <div id="stat_last"></div>
+          <div id="stat_last"></div>
-    </div>
+      </div>
-  </div><!-- content-right-block -->
+    </section>
+  </div><!-- stats tab -->
   {% endif %}
-  <div class="content-right-block tab-pane fade {% if account.user != request.user %}in active{% endif %}" id="tab_history">
+
-    {% if addcosts %}
+  <div id="tab_history" class="tab-pane fade {% if account.user != request.user %}in active{% endif %}">
-    <h2>Gagné des majorations</h2>
+    <section>
-    <div>
+      {% if addcosts %}
-      <ul>
+      <h2>Gagné des majorations</h2>
-        {% for addcost in addcosts %}
+      <div>
-        <li>{{ addcost.date|date:'l j F' }}: +{{ addcost.sum_addcosts }}€</li>
+        <ul>
-        {% endfor %}
+          {% for addcost in addcosts %}
-        </ul>
+          <li>{{ addcost.date|date:'l j F' }}: +{{ addcost.sum_addcosts }}€</li>
-    </div>
+          {% endfor %}
-    {% endif %}
+          </ul>
-    <h2>Historique</h2>
+      </div>
-      <div id="history"></div>
+      {% endif %}
-  </div><!-- content-right-block -->
+      <div id="history" class="full"></div>
+    </section>
+  </div><!-- history tab -->
+
 </div><!-- tab-content -->
 
 <script type="text/javascript">

kfet/templates/kfet/account_update.html

@@ -1,4 +1,4 @@
-{% extends "kfet/base_col_1.html" %}
+{% extends "kfet/base_form.html" %}
 
 {% block extra_head %}
 {{ negative_form.media }}
@@ -21,14 +21,12 @@
 {% endblock %}
 
 {% block footer %}
-{% if not account.user.is_team %}
+{% if not account.is_team %}
-{% include "kfet/base_footer.html" %}
+  {% include "kfet/base_footer.html" %}
 {% endif %}
 {% endblock %}
 
-{% block main-class %}content-form{% endblock %}
+{% block main %}
-
-{% block main-content %}
 
 <form action="" method="post" class="form-horizontal">
   {% csrf_token %}

kfet/templates/kfet/article.html

@@ -3,66 +3,63 @@
 {% block title %}Articles{% endblock %}
 {% block header-title %}Articles{% endblock %}
 
-{% block fixed-content %}
+{% block fixed %}
 
-<div class="content-left-top">
+<aside>
-  <div class="line line-big">{{ articles|length }}</div>
+  <div class="heading">
-  <div class="line line-bigsub">article{{ articles|length|pluralize }}</div>
+    {{ articles|length }}
-</div>
+    <span class="sub">article{{ articles|length|pluralize }}</span>
-<div class="buttons btn-group btn-group-justified">
+  </div>
-  <div class="btn-group">
+</aside>
-  <a class="btn btn-primary btn-lg" href="{% url 'kfet.article.create' %}">
+
+<div class="buttons">
+  <a class="btn btn-primary" href="{% url 'kfet.article.create' %}">
     <span class="glyphicon glyphicon-plus"></span>
     <span>Nouvel article</span>
   </a>
-  </div>
+  <a class="btn btn-primary" href="{% url 'kfet.category' %}">
-  <div class="btn-group">
-  <a class="btn btn-primary btn-lg" href="{% url 'kfet.category' %}">
     Catégories
   </a>
-  </div>
 </div>
 
 {% endblock %}
 
-{% block main-content %}
+{% block main %}
-<div class="content-right-block">
+<div class="table-responsive">
-  <h2>Liste des articles</h2>
+  <table class="table table-hover table-condensed">
-  <div class="table-responsive">
+    <thead>
-    <table class="table table-hover table-condensed">
+      <tr>
-      <thead>
+        <td>Nom</td>
-        <tr>
+        <td class="text-right">Prix</td>
-          <td>Nom</td>
+        <td class="text-right">Stock</td>
-          <td class="text-right">Prix</td>
+        <td class="text-right">En vente</td>
-          <td class="text-right">Stock</td>
+        <td class="text-right">Affiché</td>
-          <td class="text-right">En vente</td>
+        <td class="text-right">Dernier inventaire</td>
-          <td class="text-right">Affiché</td>
+      </tr>
-          <td class="text-right">Dernier inventaire</td>
+    </thead>
-        </tr>
+    <tbody>
-      </thead>
+      {% for article in articles %}
-      <tbody>
+      {% ifchanged article.category %}
-        {% for article in articles %}
+      <tr class="section">
-        {% ifchanged article.category %}
+        <td colspan="6">{{ article.category.name }}</td>
-        <tr class="section">
+      </tr>
-          <td colspan="6">{{ article.category.name }}</td>
+      {% endifchanged %}
-        </tr>
+      <tr>
-        {% endifchanged %}
+        <td>
-        <tr>
+          <a href="{% url 'kfet.article.read' article.pk %}">
-          <td>
+            {{ article.name }}
-            <a href="{% url 'kfet.article.read' article.pk %}">
+          </a>
-              {{ article.name }}
+        </td>
-            </a>
+        <td class="text-right">{{ article.price }}€</td>
-          </td>
+        <td class="text-right">{{ article.stock }}</td>
-          <td class="text-right">{{ article.price }}€</td>
+        <td class="text-right">{{ article.is_sold | yesno:"En vente,Non vendu"}}</td>
-          <td class="text-right">{{ article.stock }}</td>
+        <td class="text-right">{{ article.hidden | yesno:"Caché,Affiché" }}</td>
-          <td class="text-right">{{ article.is_sold | yesno:"En vente,Non vendu"}}</td>
+        <td class="text-right">{{ article.inventory.0.at }}</td>
-          <td class="text-right">{{ article.hidden | yesno:"Caché,Affiché" }}</td>
+      </tr>
-          <td class="text-right">{{ article.inventory.0.at }}</td>
+      {% endfor %}
-        </tr>
+    </tbody>
-        {% endfor %}
+  </table>
-      </tbody>
+</div>
-    </table>
-  </div>
 </div>
 
 {% endblock %}

kfet/templates/kfet/article_create.html

@@ -1,12 +1,10 @@
-{% extends 'kfet/base_col_1.html' %}
+{% extends 'kfet/base_form.html' %}
 
 {% block title %}Nouvel article{% endblock %}
 {% block header-title %}Création d'un article{% endblock %}
 
-{% block main-class %}content-form{% endblock %}
+{% block main %}
 
-{% block main-content %}
+{% include "kfet/form_full_snippet.html" with authz=perms.kfet.add_article submit_text="Enregistrer" %}
-
-{% include "kfet/base_form.html" with authz=perms.kfet.add_article submit_text="Enregistrer" %}
 
 {% endblock %}

kfet/templates/kfet/article_inventories_snippet.html

@@ -0,0 +1,22 @@
+<table class="table table-hover table-condensed">
+  <thead>
+    <tr>
+      <td>Date</td>
+      <td>Stock</td>
+      <td>Erreur</td>
+    </tr>
+  </thead>
+  <tbody>
+    {% for inventoryart in inventoryarts %}
+    <tr>
+      <td>
+        <a href="{% url "kfet.inventory.read" inventoryart.inventory.pk %}">
+          {{ inventoryart.inventory.at }}
+        </a>
+      </td>
+      <td>{{ inventoryart.stock_new }}</td>
+      <td>{{ inventoryart.stock_error }}</td>
+    </tr>
+    {% endfor %}
+  </tbody>
+</table>

kfet/templates/kfet/article_read.html

@@ -1,5 +1,5 @@
 {% extends 'kfet/base_col_2.html' %}
-{% load staticfiles %}
+{% load staticfiles kfet_tags %}
 
 {% block extra_head %}
 <script type="text/javascript" src="{% static 'kfet/js/Chart.bundle.js' %}"></script>
@@ -9,96 +9,104 @@
 {% block title %}Article - {{ article.name }}{% endblock %}
 {% block header-title %}Informations sur l'article {{ article.name }}{% endblock %}
 
-{% block fixed-content %}
+{% block fixed %}
 
-<div class="content-left-top">
+<aside>
-  <div class="line line-big">{{ article.name }}</div>
+  <div class="heading">
-  <div class="line line-bigsub">{{ article.category }}</div>
+    <div>{{ article.name }}</div>
-  <div class="block text-center">
+    <div class="sub">{{ article.category }}</div>
-    <div class="btn-actions btn-group">
-    <a class="btn btn-lg" href="{% url 'kfet.article.update' article.pk %}">
-      <span class="glyphicon glyphicon-cog"></span>
-      <span>Éditer</span>
-    </a>
-    </div>
   </div>
-  <div class="block">
+  <div class="buttons">
-    <div class="line">Prix (hors réduc.): {{ article.price }}€</div>
+    <a class="btn btn-default" href="{% url 'kfet.article.update' article.pk %}">
-    <div class="line">Stock: {{ article.stock }}</div>
+      <span class="glyphicon glyphicon-cog"></span><span>Éditer</span>
-    <div class="line">En vente: {{ article.is_sold | yesno:"Oui,Non" }}</div>
+    </a>
-    <div class="line">Affiché: {{ article.hidden | yesno:"Non,Oui" }}</div>
+  </div>
+  <div class="text">
+    <ul class="list-unstyled">
+      <li>
+        <b>Prix:</b> <span>{{ article.price }}€</span>
+        <span data-toggle="tooltip" data-placement="right" class="glyphicon glyphicon-question-sign" title="Hors réduction COF"></span>
+      </li>
+      <li><b>Stock:</b> {{ article.stock }}</li>
+      <li><b>En vente:</b> {{ article.is_sold|yesno|title }}</li>
+      <li><b>Affiché:</b> {{ article.hidden|yesno|title }}</li>
+    </ul>
+  </div>
+</aside>
+
+<div class="buttons tabs-buttons">
+  <div>
+    <a href="#tab_summary" data-toggle="pill" class="btn btn-primary-w focus">
+      Résumé
+      <span class="hidden-xs glyphicon glyphicon-chevron-right"></span>
+    </a>
+  </div>
+  <div>
+    <a href="#tab_inventories" data-toggle="pill" class="btn btn-primary-w">
+      Inventaires
+      <span class="hidden-xs glyphicon glyphicon-chevron-right"></span>
+    </a>
+  </div>
+  <div>
+    <a href="#tab_suppliers" data-toggle="pill" class="btn btn-primary-w">
+      Fournisseurs
+      <span class="hidden-xs glyphicon glyphicon-chevron-right"></span>
+    </a>
   </div>
 </div>
 
 {% endblock %}
 
-{% block main-content %}
+{% block main %}
 
-<div class="content-right-block">
+<div class="tab-content">
-  <h2>Historique</h2>
+
-  <div class="row" style="padding-bottom: 15px">
+  <div id="tab_summary" class="tab-pane fade in active">
-    <div class="col-md-6">
+
-      <h3>Inventaires</h3>
+<section>
-      <div class="table-responsive">
+  <div>
-        <table class="table table-hover table-condensed">
+    <div class="row">
-          <thead>
+      <div class="col-lg-6">
-            <tr>
+
-              <td>Date</td>
+        <h3>Inventaires récents</h3>
-              <td>Stock</td>
+        <div class="table-responsive">
-              <td>Erreur</td>
+          {% include "kfet/article_inventories_snippet.html" with inventoryarts=inventoryarts|slice:5 %}
-            </tr>
+        </div>
-          </thead>
+
-          <tbody>
+      </div><!-- col -->
-            {% for inventoryart in inventoryarts %}
+      <div class="col-lg-6">
-            <tr>
+
-              <td>
+        <h3>Derniers prix fournisseurs</h3>
-                <a href="{% url "kfet.inventory.read" inventoryart.inventory.pk %}">
+        <div class="table-responsive">
-                  {{ inventoryart.inventory.at }}
+          {% include "kfet/article_suppliers_snippet.html" with supplierarts=supplierarts|slice:5 %}
-                </a>
+        </div>
-              </td>
+
-              <td>{{ inventoryart.stock_new }}</td>
+      </div><!-- col -->
-              <td>{{ inventoryart.stock_error }}</td>
+    </div><!-- row -->
-            </tr>
+  </div>
-            {% endfor %}
+</section>
-          </tbody>
+
-        </table>
+<section>
-      </div>
-    </div>
-    <div class="col-md-6">
-      <h3>Prix fournisseurs</h3>
-      <div class="table-responsive">
-        <table class="table table-hover table-condensed">
-          <thead>
-            <tr>
-              <td>Date</td>
-              <td>Fournisseur</td>
-              <td>HT</td>
-              <td>TVA</td>
-              <td>Droits</td>
-            </tr>
-          </thead>
-          <tbody>
-            {% for supplierart in supplierarts %}
-            <tr>
-              <td>{{ supplierart.at }}</td>
-              <td>{{ supplierart.supplier.name }}</td>
-              <td>{{ supplierart.price_HT }}</td>
-              <td>{{ supplierart.TVA }}</td>
-              <td>{{ supplierart.rights }}</td>
-            </tr>
-            {% endfor %}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div><!-- /row-->
-</div>
-<div class="content-right-block">
-  <h2>Statistiques</h2>
   <div>
     <h3>Ventes</h3>
     <div id="stat_last"></div>
   </div>
+</section>
+
+  </div><!-- summary tab -->
+
+  <div id="tab_inventories" class="tab-pane fade">
+    <div class="table-responsive">
+      {% include "kfet/article_inventories_snippet.html" %}
+    </div>
+  </div><!-- inventories tab -->
+
+  <div id="tab_suppliers" class="tab-pane fade">
+    <div class="table-responsive">
+      {% include "kfet/article_suppliers_snippet.html" %}
+    </div>
+  </div><!-- suppliers tab -->
+
 </div>
 
 <script type="text/javascript">
@@ -107,6 +115,20 @@ $(document).ready(function() {
         "{% url 'kfet.article.stat.sales.list' article.id %}",
         $("#stat_last")
     );
+
+
+    $('[data-toggle="tooltip"]').tooltip();
+
+    $("table .more").click( function() {
+        $(this).hide();
+        $(this).siblings(".hidden").removeClass("hidden");
+    });
+
+    let tabs_buttons = $('.tabs-buttons a');
+    tabs_buttons.click( function() {
+        tabs_buttons.removeClass('focus');
+        $(this).addClass('focus');
+    });
 });
 </script>
 

kfet/templates/kfet/article_suppliers_snippet.html

@@ -0,0 +1,22 @@
+<table class="table table-hover table-condensed">
+  <thead>
+    <tr>
+      <td>Date</td>
+      <td>Fournisseur</td>
+      <td>HT</td>
+      <td>TVA</td>
+      <td>Droits</td>
+    </tr>
+  </thead>
+  <tbody>
+    {% for supplierart in supplierarts %}
+    <tr>
+      <td>{{ supplierart.at }}</td>
+      <td>{{ supplierart.supplier.name }}</td>
+      <td>{{ supplierart.price_HT|default_if_none:"" }}</td>
+      <td>{{ supplierart.TVA|default_if_none:"" }}</td>
+      <td>{{ supplierart.rights|default_if_none:"" }}</td>
+    </tr>
+    {% endfor %}
+  </tbody>
+</table>

kfet/templates/kfet/article_update.html

@@ -1,12 +1,10 @@
-{% extends "kfet/base_col_1.html" %}
+{% extends "kfet/base_form.html" %}
 
 {% block title %}{{ article.name }} - Édition{% endblock %}
 {% block header-title %}Édition de l'article {{ article.name }}{% endblock %}
 
-{% block main-class %}content-form{% endblock %}
+{% block main %}
 
-{% block main-content %}
+{% include "kfet/form_full_snippet.html" with authz=perms.kfet.change_article submit_text="Mettre à jour"%}
-
-{% include "kfet/base_form.html" with authz=perms.kfet.change_article submit_text="Mettre à jour"%}
 
 {% endblock %}

kfet/templates/kfet/base.html

@@ -1,5 +1,4 @@
-{% load staticfiles %}
+{% load static menu_tags %}
-{% load menu_tags %}
 <!DOCTYPE html>
 <html lang="fr">
 <head>
@@ -33,17 +32,17 @@
     <![endif]-->
 </head>
 <body>
-  {% main_menu template="kfet/base_nav.html" %}
+  {% flat_menu "kfet-nav" template="kfet/base_nav.html" apply_active_classes=True %}
   <div class="container-fluid">
     {% block header %}
     {% if not page or not page.no_header %}
-      <div class="row header-row">
+      <header class="row">
-        <div class="{% block header-class %}{% endblock %}">
+        <div class="header {% block header-class %}{% endblock %}">
-          <h1 class="page-header">
+          <h1>
             {% block header-title %}{% endblock %}
           </h1>
         </div>
-      </div>
+      </header>
     {% endif %}
     {% endblock %}
 

kfet/templates/kfet/base_col_1.html

@@ -4,11 +4,11 @@
 
 {% block content %}
 
-<div class="row">
+<div class="row content-row">
-  <div class="nopadding {% block main-size %}col-md-8 col-md-offset-2{% endblock %}">
+  <div class="main-col {% block main-size %}col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2{% endblock %}">
     {% include "kfet/base_messages.html" %}
-    <div class="content-center {% block main-class %}{% endblock %}">
+    <div class="main {% block main-class %}{% endblock %}">
-      {% block main-content %}{% endblock %}
+      {% block main %}{% endblock %}
     </div>
   </div>
 </div>

kfet/templates/kfet/base_col_2.html

@@ -2,16 +2,16 @@
 
 {% block content %}
 
-<div class="row">
+<div class="row content-row">
-  <div class="col-content-left {% block fixed-size %}col-sm-3{% endblock %}">
+  <div class="fixed-col {% block fixed-size %}col-sm-3{% endblock %}">
-    <div class="content-left">
+    <div class="fixed {% block fixed-class %}{% endblock %}">
-      {% block fixed-content %}{% endblock %}
+      {% block fixed %}{% endblock %}
     </div>
   </div>
-  <div class="col-content-right {% block main-size %}col-sm-9{% endblock %}">
+  <div class="main-col {% block main-size %}col-sm-9{% endblock %}">
     {% include "kfet/base_messages.html" %}
-    <div class="content-right">
+    <div class="main {% block main-class %}{% endblock %}">
-      {% block main-content %}{% endblock %}
+      {% block main %}{% endblock %}
     </div>
   </div>
 </div>

kfet/templates/kfet/base_col_mult.html

@@ -0,0 +1,18 @@
+{% extends "kfet/base.html" %}
+
+{% block header-class %}text-center{% endblock %}
+
+{% block content %}
+
+<div class="row content-row">
+  <div class="main-col {% block main-size %}col-xs-12{% endblock %}">
+    {% include "kfet/base_messages.html" %}
+    <div class="main {% block main-class %}{% endblock %}">
+      <div class="main-col-mult {% block mult-count %}column-md-2{% endblock %}">
+        {% block main %}{% endblock %}
+      </div>
+    </div>
+  </div>
+</div>
+
+{% endblock %}

kfet/templates/kfet/base_footer.html

@@ -2,7 +2,7 @@
 
 {% with "k-fet@ens.fr" as kfet_mail %}
 
-<div class="footer-row row">
+<footer class="row">
   <div class="footer">
     <span>
       <a href="{% slugurl "mentions-legales" %}">Mentions légales</a>

kfet/templates/kfet/base_form.html

@@ -1,10 +1,9 @@
-{% load kfet_tags %}
+{% extends "kfet/base_col_1.html" %}
 
-<form action="" method="post" class="form-horizontal">
+{% block main-class %}main-bg main-padding{% endblock %}
-  {% csrf_token %}
+
-  {% include "kfet/form_snippet.html" %}
+{% block main %}
-  {% if not authz %}
+
-    {% include "kfet/form_authentication_snippet.html" %}
+{% include "kfet/form_full_snippet.html" %}
-  {% endif %}
+
-  {% include "kfet/form_submit_snippet.html" with value=submit_text %}
+{% endblock %}
-</form>

kfet/templates/kfet/base_nav.html

@@ -44,6 +44,8 @@
     <ul class="nav navbar-nav navbar-right nav-app">
       {% if user.username == 'kfet_genericteam' %}
         {% include "kfet/nav_item.html" with text="Équipe standard" %}
+      {% elif user.is_authenticated and not user.profile.account_kfet %}
+        {% include "kfet/nav_item.html" with class="disabled" href="#" glyphicon="user" text="Mon compte" %}
       {% elif user.profile.account_kfet.readable %}
         {% url "kfet.account.read" user.profile.account_kfet.trigramme as url_my_account %}
         {% include "kfet/nav_item.html" with href=url_my_account glyphicon="user" text="Mon compte" %}
@@ -53,7 +55,7 @@
         {% include "kfet/nav_item.html" with url="kfet.transfers" glyphicon="transfer" text="Transferts" %}
         {% include "kfet/nav_item.html" with url="kfet.history" glyphicon="th-list" text="Historique" %}
       <li class="dropdown">
-        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
           <span class="glyphicon glyphicon-option-vertical"></span>
         </a>
         <ul class="dropdown-menu">

kfet/templates/kfet/category.html

@@ -3,43 +3,42 @@
 {% block title %}Categories d'articles{% endblock %}
 {% block header-title %}Categories d'articles{% endblock %}
 
-{% block fixed-content %}
+{% block fixed %}
 
-<div class="content-left-top">
+<aside>
-  <div class="line line-big">{{ categories|length }}</div>
+  <div class="heading">
-  <div class="line line-bigsub">catégorie{{ categories|length|pluralize }}</div>
+    {{ categories|length }}
-</div>
+    <span class="sub">catégorie{{ categories|length|pluralize }}</span>
-
-{% endblock %}
-
-{% block main-content %}
-
-<div class="content-right-block">
-  <h2>Liste des catégories</h2>
-  <div class="table-responsive">
-    <table class="table table-hover table-condensed">
-      <thead>
-        <tr>
-          <td>Nom</td>
-          <td class="text-right">Nombre d'articles</td>
-          <td class="text-right">Peut être majorée</td>
-        </tr>
-      </thead>
-      <tbody>
-        {% for category in categories %}
-        <tr>
-          <td>
-            <a href="{% url 'kfet.category.update' category.pk %}">
-              {{ category.name }}
-            </a>
-          </td>
-          <td class="text-right">{{ category.articles.all|length }}</td>
-          <td class="text-right">{{ category.has_addcost | yesno:"Oui,Non"}}</td>
-        </tr>
-        {% endfor %}
-      </tbody>
-    </table>
   </div>
+</aside>
+
+{% endblock %}
+
+{% block main %}
+
+<div class="table-responsive">
+  <table class="table table-hover table-condensed">
+    <thead>
+      <tr>
+        <td>Nom</td>
+        <td class="text-right">Nombre d'articles</td>
+        <td class="text-right">Peut être majorée</td>
+      </tr>
+    </thead>
+    <tbody>
+      {% for category in categories %}
+      <tr>
+        <td>
+          <a href="{% url 'kfet.category.update' category.pk %}">
+            {{ category.name }}
+          </a>
+        </td>
+        <td class="text-right">{{ category.articles.all|length }}</td>
+        <td class="text-right">{{ category.has_addcost | yesno:"Oui,Non"}}</td>
+      </tr>
+      {% endfor %}
+    </tbody>
+  </table>
 </div>
 
 {% endblock %}

kfet/templates/kfet/category_update.html

@@ -1,12 +1,10 @@
-{% extends "kfet/base_col_1.html" %}
+{% extends "kfet/base_form.html" %}
 
 {% block title %}{{ articlecategory.name }} - Édition{% endblock %}
 {% block header-title %}Édition de la catégorie {{ articlecategory.name }}{% endblock %}
 
-{% block main-class %}content-form{% endblock %}
+{% block main %}
 
-{% block main-content %}
+{% include "kfet/form_full_snippet.html" with authz=perms.kfet.edit_articlecategory submit_text="Enregistrer"%}
-
-{% include "kfet/base_form.html" with authz=perms.kfet.edit_articlecategory submit_text="Enregistrer"%}
 
 {% endblock %}

kfet/templates/kfet/checkout.html

@@ -3,14 +3,17 @@
 {% block title %}Caisses{% endblock %}
 {% block header-title %}Caisses{% endblock %}
 
-{% block fixed-content %}
+{% block fixed %}
 
-<div class="content-left-top text-center">
+<aside>
-  <div class="line line-big">{{ checkouts|length }}</div>
+  <div class="heading">
-  <div class="line line-bigsub">caisse{{ checkouts|length|pluralize }}</div>
+    {{ checkouts|length }}
-</div>
+    <span class="sub">caisse{{ checkouts|length|pluralize }}</span>
-<div class="buttons btn-group btn-group-justified">
+  </div>
-  <a class="btn btn-primary btn-lg" href="{% url 'kfet.checkout.create' %}">
+</aside>
+
+<div class="buttons">
+  <a class="btn btn-primary" href="{% url 'kfet.checkout.create' %}">
     <span class="glyphicon glyphicon-plus"></span>
     <span>Créer une caisse</span>
   </a>
@@ -18,38 +21,35 @@
 
 {% endblock %}
 
-{% block main-content %}
+{% block main %}
 
-<div class="content-right-block">
+<div class="table-responsive">
-  <h2>Liste des caisses</h2>
+  <table class="table table-hover table-condensed">
-  <div class="table-responsive">
+    <thead>
-    <table class="table table-hover table-condensed">
+      <tr>
-      <thead>
+        <td>Nom</td>
-        <tr>
+        <td class="text-right">Balance</td>
-          <td>Nom</td>
+        <td class="text-right">Déb. valid.</td>
-          <td class="text-right">Balance</td>
+        <td class="text-right">Fin valid.</td>
-          <td class="text-right">Déb. valid.</td>
+        <td class="text-right">Protégée</td>
-          <td class="text-right">Fin valid.</td>
+      </tr>
-          <td class="text-right">Protégée</td>
+    </thead>
-        </tr>
+    <tbody>
-      </thead>
+      {% for checkout in checkouts %}
-      <tbody>
+      <tr>
-        {% for checkout in checkouts %}
+        <td>
-        <tr>
+          <a href="{% url 'kfet.checkout.read' checkout.pk %}">
-          <td>
+            {{ checkout.name }}
-            <a href="{% url 'kfet.checkout.read' checkout.pk %}">
+          </a>
-              {{ checkout.name }}
+        </td>
-            </a>
+        <td class="text-right">{{ checkout.balance}}€</td>
-          </td>
+        <td class="text-right">{{ checkout.valid_from }}</td>
-          <td class="text-right">{{ checkout.balance}}€</td>
+        <td class="text-right">{{ checkout.valid_to }}</td>
-          <td class="text-right">{{ checkout.valid_from }}</td>
+        <td class="text-right">{{ checkout.is_protected|yesno }}</td>
-          <td class="text-right">{{ checkout.valid_to }}</td>
+      </tr>
-          <td class="text-right">{{ checkout.is_protected|yesno }}</td>
+      {% endfor %}
-        </tr>
+    </tbody>
-        {% endfor %}
+  </table>
-      </tbody>
-    </table>
-  </div>
 </div>
 
 {% endblock %}

kfet/templates/kfet/checkout_create.html

@@ -1,13 +1,12 @@
-{% extends "kfet/base_col_1.html" %}
+{% extends "kfet/base_form.html" %}
 {% block extra_head %}{{ form.media }}{% endblock %}
 
 {% block title %}Nouvelle caisse{% endblock %}
 {% block header-title %}Création d'une caisse{% endblock %}
 
-{% block main-class %}content-form{% endblock %}
+{% block main %}
-{% block main-content %}
 
-{% include "kfet/base_form.html" with authz=perms.kfet.add_checkout submit_text="Enregistrer" %}
+{% include "kfet/form_full_snippet.html" with authz=perms.kfet.add_checkout submit_text="Enregistrer" %}
 
 <script type="text/javascript">
 

kfet/templates/kfet/checkout_read.html

@@ -3,15 +3,12 @@
 {% block title %}Caisse - {{ checkout.name }}{% endblock %}
 {% block header-title %}Informations sur la caisse {{ checkout.name }}{% endblock %}
 
-{% block fixed-content %}
+{% block fixed %}
 {% include 'kfet/left_checkout.html' %}
 {% endblock %}
 
-{% block fixed-size %}col-sm-4 col-lg-3{% endblock %}
+{% block main %}
-{% block main-size %}col-sm-8 col-lg-9{% endblock %}
+<section>
-
-{% block main-content %}
-<div class="content-right-block">
   <h2>Relevés</h2>
   <div class="table-responsive">
     {% if not statements %}
@@ -42,6 +39,6 @@
       </table>
     {% endif %}
   </div>
-</div>
+</section>
 
 {% endblock %}

kfet/templates/kfet/checkout_update.html

@@ -1,20 +1,12 @@
-{% extends "kfet/base_col_2.html" %}
+{% extends "kfet/base_form.html" %}
 {% block extra_head %}{{ form.media }}{% endblock %}
 
 {% block title %}Caisse {{ checkout.name }} - Édition{% endblock %}
 {% block header-title %}Édition de la caisse {{ checkout.name }}{% endblock %}
 
-{% block fixed-content %}
+{% block main %}
-{% include "kfet/left_checkout.html" %}
-{% endblock %}
 
-{% block main-content %}
+{% include "kfet/form_full_snippet.html" with authz=perms.kfet.change_checkout submit_text="Mettre à jour" %}
-
-<div class="content-right-block">
-  <div style="padding: 15px;">
-    {% include "kfet/base_form.html" with authz=perms.kfet.change_checkout submit_text="Mettre à jour" %}
-  </div>
-</div>
 
 <script type="text/javascript">
 

kfet/templates/kfet/checkoutstatement_create.html

@@ -1,20 +1,16 @@
-{% extends "kfet/base_col_2.html" %}
+{% extends "kfet/base_col_1.html" %}
 {% load l10n %}
 {% load widget_tweaks %}
 
 {% block title %}Nouveau relevé - {{ checkout.name }}{% endblock %}
 {% block header-title %}Création d'un relevé pour la caisse {{ checkout.name }}{% endblock %}
 
-{% block fixed-content %}
+{% block main %}
-{% include "kfet/left_checkout.html" %}
-{% endblock %}
-
-{% block main-content %}
 <form action="" method="post">
   {% csrf_token %}
-  <div class="content-right-block">
+  <section>
     <h2>Général</h2>
-    <div class="content-form statement-create-summary">
+    <div class="statement-create-summary">
       <table>
         <tr>
           <td>
@@ -41,18 +37,18 @@
           <td><span id="amount_error">0</span> €</td>
         </tr>
       </table>
+      <br>
       {% if not perms.kfet.add_checkoutstatement %}
         {% include "kfet/form_authentication_snippet.html" %}
       {% endif %}
-      <br>
       <div class="row text-center">
-          <input type="submit" value="Enregistrer" class="btn btn-lg btn-primary">
+        <input type="submit" class="btn btn-primary btn-lg" value="Enregistrer">
       </div>
     </div>
-  </div>
+  </section>
-  <div class="content-right-block">
+  <section>
     <h2>Pris</h2>
-    <div id="detail_taken">
+    <div id="detail_taken" class="nopadding">
       <div class="table-responsive">
         <table class="table table-condensed">
           <thead>
@@ -122,10 +118,10 @@
         </table>
       </div>
     </div>
-  </div>
+  </section>
-  <div class="content-right-block">
+  <section>
     <h2>En caisse</h2>
-    <div id="detail_balance">
+    <div id="detail_balance" class="nopadding">
       <div class="table-responsive">
         <table class="table table-condensed">
           <thead>
@@ -181,23 +177,22 @@
         </table>
       </div>
     </div>
-  </div>
+  </section>
 </form>
 
 <script type="text/javascript">
 $(document).ready(function() {
-    $('#id_not_count').on('change', function() {
+    let $not_count = $('#id_not_count');
-        if ($(this).prop('checked')) {
-            $('#detail_balance input').prop('disabled', true);
-        } else {
-            $('#detail_balance input').prop('disabled', false);
-        }
-        updateAmounts();
-    });
 
-    $('#detail_balance input, #detail_taken input').on('input', function() {
+    function updateAll() {
+        $('#detail_balance input').prop('disabled', $not_count.prop('checked'));
         updateAmounts();
-    });
+    }
+
+    $not_count.on('change', updateAll);
+    updateAll();
+
+    $('#detail_balance input, #detail_taken input').on('input', updateAmounts);
 
     function getTotal(id_container) {
         var total = 0;
@@ -210,7 +205,7 @@ $(document).ready(function() {
     function updateAmounts() {
         var balance_old = parseFloat($('#balance_old').text());
         var taken = getTotal('detail_taken');
-        if ($('#id_not_count').prop('checked')) {
+        if ($not_count.prop('checked')) {
             var error = 0;
             var balance_new = balance_old - taken;
         } else {

kfet/templates/kfet/checkoutstatement_update.html

@@ -1,4 +1,4 @@
-{% extends "kfet/base_col_1.html" %}
+{% extends "kfet/base_form.html" %}
 
 {% block title %}Modification d'un relevé{% endblock %}
 {% block header-title %}
@@ -6,10 +6,8 @@ Caisse {{ checkout.name }}<br>
 Modification du relevé {{ checkoutstatement.at }}
 {% endblock %}
 
-{% block main-class %}content-form{% endblock %}
+{% block main %}
 
-{% block main-content %}
+{% include "kfet/form_full_snippet.html" with authz=perms.kfet.change_checkoutstatement submit_text="Enregistrer"%}
-
-{% include "kfet/base_form.html" with authz=perms.kfet.change_checkoutstatement submit_text="Enregistrer"%}
 
 {% endblock %}

kfet/templates/kfet/form_authentication_snippet.html

@@ -1,4 +1,4 @@
-<div class="form-group">
+<div class="form-group auth-form">
   <label for="password" class="col-sm-2 control-label">Authentification</label>
   <div class="col-sm-10">
     <input type="password" name="KFETPASSWORD" id="password" class="form-control">

kfet/templates/kfet/form_full_snippet.html

@@ -0,0 +1,8 @@
+<form action="" method="post" class="form-horizontal">
+  {% csrf_token %}
+  {% include "kfet/form_snippet.html" %}
+  {% if not authz %}
+    {% include "kfet/form_authentication_snippet.html" %}
+  {% endif %}
+  {% include "kfet/form_submit_snippet.html" with value=submit_text %}
+</form>

kfet/templates/kfet/history.html

@@ -1,60 +1,42 @@
-{% extends 'kfet/base.html' %}
+{% extends 'kfet/base_col_2.html' %}
-{% load staticfiles %}
+{% load l10n staticfiles widget_tweaks %}
-{% load l10n %}
 
 {% block extra_head %}
 <link rel="stylesheet" type="text/css" href="{% static 'kfet/css/jquery-ui.min.css' %}">
-<link rel="stylesheet" type="text/css" href="{% static 'kfet/css/bootstrap-datetimepicker.min.css' %}">
 <link rel="stylesheet" type="text/css" href="{% static 'kfet/css/multiple-select.css' %}">
 <script type="text/javascript" src="{% static 'kfet/js/js.cookie.js' %}"></script>
 <script type="text/javascript" src="{% static 'kfet/js/jquery-ui.min.js' %}"></script>
-<script type="text/javascript" src="{% static 'kfet/js/jquery-confirm.js' %}"></script>
-<script type="text/javascript" src="{% static 'kfet/js/moment.js' %}"></script>
-<script type="text/javascript" src="{% static 'kfet/js/moment-fr.js' %}"></script>
-<script type="text/javascript" src="{% static 'kfet/js/moment-timezone-with-data-2010-2020.js' %}"></script>
-<script type="text/javascript" src="{% static 'kfet/js/bootstrap-datetimepicker.min.js' %}"></script>
 <script type="text/javascript" src="{% static 'kfet/js/multiple-select.js' %}"></script>
+{{ filter_form.media }}
 <script type="text/javascript" src="{% static 'kfet/js/history.js' %}"></script>
 {% endblock %}
 
 {% block title %}Historique{% endblock %}
-{% block content-header-title %}Historique{% endblock %}
+{% block header-title %}Historique{% endblock %}
 
-{% block content %}
+{% block fixed %}
 
-<div class="row">
+<aside>
-  <div class="col-sm-4 col-md-3 col-content-left">
+  <div class="heading">
-    <div class="content-left">
+    <span id="nb_opes"></span>
-      <div class="content-left-top">
+    <span class="sub">opérations</span>
-        <div class="line line-big" id="nb_opes"></div>
-        <div class="line line-bigsub">opérations</div>
-        <div class="block">
-          <div class="line" style="position:relative"><b>De</b> <input type="text" id="from_date" class="form-control"></div>
-          <div class="line" style="position:relative"><b>à</b> <input type="text" id="to_date" class="form-control"></div>
-          <div class="line"><b>Caisses</b> {{ filter_form.checkouts }}</div>
-          <div class="line"><b>Comptes</b> {{ filter_form.accounts }}</div>
-        </div>
-      </div>
-    </div>
   </div>
-  <div class="col-sm-8 col-md-9 col-content-right">
+  <div class="text">
-    {% include 'kfet/base_messages.html' %}
+    <ul class="list-unstyled">
-    <div class="content-right">
+      <li style="position: relative;"><b>De</b> {{ filter_form.from_date|add_class:"form-control" }}</li>
-      <div class="content-right-block">
+      <li style="position: relative;"><b>à</b> {{ filter_form.to_date|add_class:"form-control" }}</li>
-        <h2>Général</h2>
+      <li><b>Caisses</b> {{ filter_form.checkouts }}</li>
-        <div>
+      <li><b>Comptes</b> {{ filter_form.accounts }}</li>
-        </div>
+    </ul>
-      </div>
-      <div class="content-right-block">
-        <h2>Opérations</h2>
-        <div>
-          <table id="history" class="table">
-          </table>
-        </div>
-      </div>
-    </div>
   </div>
-</div>
+</aside>
+
+{% endblock %}
+
+{% block main %}
+
+<table id="history" class="table">
+</table>
 
 <script type="text/javascript">
 $(document).ready(function() {
@@ -62,8 +44,8 @@ $(document).ready(function() {
 
     khistory = new KHistory();
 
-    var $from_date = $('#from_date');
+    var $from_date = $('#id_from_date');
-    var $to_date = $('#to_date');
+    var $to_date = $('#id_to_date');
     var $checkouts = $('#id_checkouts');
     var $accounts = $('#id_accounts');
 
@@ -102,22 +84,21 @@ $(document).ready(function() {
         });
     }
 
-    $('#from_date').datetimepicker({
+    let defaults_datetimepicker = {
         timeZone  : 'Europe/Paris',
         format    : 'YYYY-MM-DD HH:mm',
         stepping  : 5,
         locale    : 'fr',
+        showTodayButton: true
+    };
+
+    $from_date.datetimepicker($.extend({}, defaults_datetimepicker, {
         defaultDate: moment().subtract(24, 'hours'),
-        showTodayButton: true,
+    }));
-    });
+    $to_date.datetimepicker($.extend({}, defaults_datetimepicker, {
-    $('#to_date').datetimepicker({
-        timeZone  : 'Europe/Paris',
-        format    : 'YYYY-MM-DD HH:mm',
-        stepping  : 5,
         defaultDate: moment(),
-        locale    : 'fr',
+    }));
-        showTodayButton: true,
+
-    });
     $("#from_date").on("dp.change", function (e) {
         $('#to_date').data("DateTimePicker").minDate(e.date);
     });
@@ -128,9 +109,9 @@ $(document).ready(function() {
     $("select").multipleSelect({
         width: '100%',
         filter: true,
-	allSelected: " ",
+        allSelected: " ",
-	selectAllText: "Tout-te-s",
+        selectAllText: "Tout-te-s",
-	countSelected: "# sur %"
+        countSelected: "# sur %"
     });
 
     $("input").on('dp.change change', function() {

kfet/templates/kfet/inventory.html

@@ -3,10 +3,10 @@
 {% block title %}Inventaires{% endblock %}
 {% block header-title %}Inventaires{% endblock %}
 
-{% block fixed-content %}
+{% block fixed %}
 
-<div class="buttons btn-group btn-group-justified">
+<div class="buttons">
-  <a href="{% url 'kfet.inventory.create' %}" class="btn btn-primary btn-lg">
+  <a href="{% url 'kfet.inventory.create' %}" class="btn btn-primary">
     <span class="glyphicon glyphicon-plus"></span>
     <span>Nouveau</span>
   </a>
@@ -14,42 +14,31 @@
 
 {% endblock %}
 
-{% block main-content %}
+{% block main %}
 
-<div class="content-right-block">
+<div class="table-responsive">
-  <h2>Liste des inventaires</h2>
+  <table class="table table-hover table-condensed">
-  <div class="table-responsive">
+    <thead>
-    <table class="table table-hover table-condensed">
+      <tr>
-      <thead>
+        <td>Date</td>
-        <tr>
+        <td>Par</td>
-          <td>Date</td>
+        <td>Nb articles</td>
-          <td>Par</td>
+      </tr>
-          <td>Nb articles</td>
+    </thead>
-          <td>Commande</td>
+    <tbody>
-        </tr>
+      {% for inventory in inventories %}
-      </thead>
+      <tr>
-      <tbody>
+        <td>
-        {% for inventory in inventories %}
+          <a href="{% url 'kfet.inventory.read' inventory.pk %}">
-        <tr>
+            <span>{{ inventory.at }}</span>
-          <td>
+          </a>
-            <a href="{% url 'kfet.inventory.read' inventory.pk %}">
+        </td>
-              <span>{{ inventory.at }}</span>
+        <td>{{ inventory.by }}</td>
-            </a>
+        <td>{{ inventory.nb_articles }}</td>
-          </td>
+      </tr>
-          <td>{{ inventory.by.trigramme }}</td>
+      {% endfor %}
-          <td>{{ inventory.nb_articles }}</td>
+    </tbody>
-          <td>
+  </table>
-            {% if inventory.order %}
-              <a href="{% url 'kfet.order.read' inventory.order.pk %}">
-                #{{ inventory.order.pk }}
-              </a>
-            {% endif %}
-          </td>
-        </tr>
-        {% endfor %}
-      </tbody>
-    </table>
-  </div>
 </div>
 
 {% endblock %}

kfet/templates/kfet/inventory_create.html

@@ -1,6 +1,5 @@
 {% extends "kfet/base_col_1.html" %}
-{% load staticfiles %}
+{% load static widget_tweaks %}
-{% load widget_tweaks %}
 
 {% block extra_head %}
 <script type="text/javascript" src="{% static 'kfet/js/reconnecting-websocket.js' %}"></script>
@@ -12,11 +11,11 @@
 
 {% block main-size %}col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2{% endblock %}
 
-{% block main-content %}
+{% block main %}
 
 <form id='inventoryform' action="" method="post">
   <div class="table-responsive">
-  <table class="table table-hover table-condensed text-center">
+  <table class="table table-hover table-condensed table-condensed-input text-center">
     <thead>
       <tr>
         <td>Article</td>

kfet/templates/kfet/inventory_read.html

@@ -3,58 +3,59 @@
 {% block title %}Inventaire #{{ inventory.pk }}{% endblock %}
 {% block header-title %}Inventaire #{{ inventory.pk }}{% endblock %}
 
-{% block fixed-content %}
+{% block fixed %}
 
-<div class="content-left-top">
+<aside>
-  <div class="line"><b>Date:</b> {{ inventory.at }}</div>
+  <div class="text">
-  <div class="line"><b>Par:</b> {{ inventory.by.trigramme }}</div>
+    <ul class="list-unstyled">
-  {% if inventory.order %}
+      <li><b>Date :</b> {{ inventory.at }}</li>
-    <div class="line">
+      <li><b>Par :</b> {{ inventory.by }}</li>
-      <b>Commande relative:</b>&nbsp;
+      {% if inventory.order %}
-      <a href="{% url 'kfet.order.read' inventory.order.pk %}">
+      <li>
-        #{{ inventory.order.pk }}
+        <b>Commande relative :</b>
-      </a>
+        <a href="{% url 'kfet.order.read' inventory.order.pk %}">
-    </div>
+          #{{ inventory.order.pk }}
-  {% endif %}
+        </a>
-</div>
+      </li>
-
+      {% endif %}
-{% endblock %}
+    </ul>
-
-{% block main-content %}
-
-<div class="content-right-block">
-  <h2>Détails</h2>
-  <div class="table-responsive">
-    <table class="table table-condensed">
-      <thead>
-        <tr>
-          <td>Article</td>
-          <td>Stock avant</td>
-          <td>Stock après</td>
-          <td>Erreur</td>
-        </tr>
-      </thead>
-      <tbody>
-        {% for inventoryart in inventoryarts %}
-          {% ifchanged inventoryart.article.category %}
-            <tr class="section">
-              <td colspan="4">{{ inventoryart.article.category.name }}</td>
-            </tr>
-          {% endifchanged %}
-          <tr>
-            <td>
-              <a href="{% url "kfet.article.read" inventoryart.article.id %}">
-                {{ inventoryart.article.name }}
-              </a>
-            </td>
-            <td>{{ inventoryart.stock_old }}</td>
-            <td>{{ inventoryart.stock_new }}</td>
-            <td>{{ inventoryart.stock_error }}</td>
-          </tr>
-        {% endfor %}
-      </tbody>
-    </table>
   </div>
+</aside>
+
+{% endblock %}
+
+{% block main %}
+
+<div class="table-responsive">
+  <table class="table table-condensed">
+    <thead>
+      <tr>
+        <td>Article</td>
+        <td>Stock avant</td>
+        <td>Stock après</td>
+        <td>Erreur</td>
+      </tr>
+    </thead>
+    <tbody>
+      {% for inventoryart in inventoryarts %}
+        {% ifchanged inventoryart.article.category %}
+          <tr class="section">
+            <td colspan="4">{{ inventoryart.article.category.name }}</td>
+          </tr>
+        {% endifchanged %}
+        <tr>
+          <td>
+            <a href="{% url "kfet.article.read" inventoryart.article.id %}">
+              {{ inventoryart.article.name }}
+            </a>
+          </td>
+          <td>{{ inventoryart.stock_old }}</td>
+          <td>{{ inventoryart.stock_new }}</td>
+          <td>{{ inventoryart.stock_error }}</td>
+        </tr>
+      {% endfor %}
+    </tbody>
+  </table>
 </div>
 
 {% endblock %}

kfet/templates/kfet/kpsul.html

@@ -8,7 +8,6 @@
 <script type="text/javascript" src="{% static 'kfet/js/js.cookie.js' %}"></script>
 <script type="text/javascript" src="{% static 'kfet/js/reconnecting-websocket.js' %}"></script>
 <script type="text/javascript" src="{% static 'kfet/js/jquery-ui.min.js' %}"></script>
-<script type="text/javascript" src="{% static 'kfet/js/jquery-confirm.js' %}"></script>
 <script type="text/javascript" src="{% static 'kfet/js/moment.js' %}"></script>
 <script type="text/javascript" src="{% static 'kfet/js/moment-fr.js' %}"></script>
 <script type="text/javascript" src="{% static 'kfet/js/moment-timezone-with-data-2010-2020.js' %}"></script>
@@ -116,22 +115,22 @@
       <div class="kpsul_middle_left_top">
         <div id="special_operations" class="btn-group btn-group-justified">
           <div class="btn-group">
-            <button role="button" class="btn btn-primary" id="operation_deposit">
+            <button type="button" class="btn btn-primary" id="operation_deposit">
               Charge <span class="hidden-xs hidden-sm">(F3)</span>
             </button>
           </div>
           <div class="btn-group">
-            <button role="button" class="btn btn-primary" id="operation_withdraw">
+            <button type="button" class="btn btn-primary" id="operation_withdraw">
               Retrait <span class="hidden-xs hidden-sm">(Shift+F3)</span>
             </button>
           </div>
           <div class="btn-group">
-            <button role="button" class="btn btn-primary" id="cool_reset">
+            <button type="button" class="btn btn-primary" id="cool_reset">
               RAZ <span class="hidden-xs hidden-sm">(F1)</span>
             </button>
           </div>
           <div class="btn-group">
-            <button role="button" class="btn btn-primary" id="ask_addcost">
+            <button type="button" class="btn btn-primary" id="ask_addcost">
               Major. <span class="hidden-xs hidden-sm">(F9)</span>
             </button>
           </div>
@@ -186,11 +185,6 @@
 {% csrf_token %}
 
 <script type="text/javascript">
-jconfirm.defaults = {
-    confirmButton: '<span class="glyphicon glyphicon-ok"></span>',
-    cancelButton: '<span class="glyphicon glyphicon-remove"></span>'
-};
-
 $(document).ready(function() {
     // -----
     // General

kfet/templates/kfet/left_account.html

@@ -1,64 +1,96 @@
 {% load kfet_tags %}
 
-<div class="content-left-top {% if account.is_frozen %}frozen-account{% endif %}">
+
-  <div class="line line-big">{{ account.trigramme }}</div>
+<aside class="aside {% if account.is_frozen %}frozen-account{% endif %}">
-  <div class="line balance">{{ account.balance|ukf:account.is_cof }} UKF</div>
+
-  <div class="block text-center">
+  <div class="heading">
-    <div class="btn-actions btn-group">
+    <div class="big">{{ account.trigramme }}</div>
-      <a class="btn btn-lg" href="{% url 'kfet.account.update' account.trigramme %}">
+    <div class="toggle">
-        <span class="glyphicon glyphicon-cog"></span>
+      <span class="base">{{ account.balance_ukf }} UKF</span>
-        <span>Éditer</span>
+      <span class="hover">{{ account.balance }} €</span>
-      </a>
-      <a class="btn btn-lg" disabled>
-        <span class="glyphicon glyphicon-credit-card"></span>
-        <span>Créditer</span>
-      </a>
     </div>
   </div>
-  <div class="block">
+
-    <div class="line">{{ account.name }}</div>
+  <div class="buttons">
-    {% if perms.kfet.is_team %}
+    <a class="btn btn-default" href="{% url 'kfet.account.update' account.trigramme %}">
-      <div class="line">{{ account.nickname }}</div>
+      <span class="glyphicon glyphicon-cog"></span><span>Éditer</span>
-    {% endif %}
+    </a>
-    <div class="line">
+    <a class="btn btn-default" disabled>
-      {% if account.email %}
+      <span class="glyphicon glyphicon-credit-card"></span><span>Créditer</span>
-        {{ account.email }}
+    </a>
-      {% else %}
+  </div>
-        Pas d'email !
+
+  <div class="text">
+    <h4>{{ account.name|title }}</h4>
+    <ul class="list-unstyled">
+      {% if perms.kfet.is_team %}
+      <li>{{ account.nickname }}</li>
       {% endif %}
-    </div>
+      <li>{{ account.email|default:"Pas d'email!" }}</li>
-    <div class="line">
+      <li>{{ account.departement }} {{ account.promo }}</li>
-      {{ account.departement }} {{ account.promo }}
+      <li>
-    </div>
+        {% if account.is_cof %}
-    <div class="line">{{ account.is_cof|yesno:"Est COF,N'est pas COF" }}</div>
+        <span title="Réduction de {{ kfet_config.reduction_cof }} % sur tes commandes" data-toggle="tooltip" data-placement="right">Adhérent COF</span>
+        {% else %}
+        Non-COF
+        {% endif %}
+      </li>
+    </ul>
   </div>
+
   {% if account.negative %}
-  <div class="block block-neg">
+  <div class="text">
-    {% if account.negative.start %}
+    <h4>Négatif</h4>
-      <div class="line">En négatif depuis {{ account.negative.start }}</div>
+    <ul class="list-unstyled">
-    {% endif %}
+      {% if account.negative.start %}
-    {% if account.negative.balance_offset %}
+      <li>Depuis le <b>{{ account.negative.start|date:"d/m/Y à H:i" }}</b></li>
-      <div class="line">Solde réel: {{ account.real_balance }} €</div>
+      {% endif %}
-    {% endif %}
+      {% if account.real_balance != account.balance %}
-    {% if account.negative.authz_overdraft_amount %}
+      <li>Solde réel: {{ account.real_balance }} €</li>
-      <div class="line">Découvert autorisé: {{ account.negative.authz_overdraft_amount }} €</div>
+      {% endif %}
-    {% endif %}
+      <li>
-    {% if account.negative.authz_overdraft_until %}
+        Plafond :
-      <div class="line">Découvert autorisé jusqu'à : {{ account.negative.authz_overdraft_until }}</div>
+        <b>{{ account.negative.authz_overdraft_amount|default:kfet_config.overdraft_amount }} €</b>
-    {% endif %}
+        jusqu'au
+        <b>{{ account.negative.authz_overdraft_until|default:account.negative.until_default|date:"d/m/Y à H:i" }}</b>
+      </li>
+    </ul>
   </div>
   {% endif %}
-</div>
+
+</aside>
+
+
 
 {% if account.user == request.user %}
-<div class="buttons-tabs">
+<div class="buttons tabs-buttons">
-  <div class="btn-group btn-group-justified">
+  <div>
-    <div class="btn-group">
+    <a class="btn btn-primary-w focus" data-toggle="pill" href="#tab_stats">
-      <a class="btn btn-primary btn-lg" data-toggle="pill" href="#tab_stats">Statistiques</a>
+      Statistiques
-    </div>
+      <span class="hidden-xs glyphicon glyphicon-chevron-right"></span>
-    <div class="btn-group">
+    </a>
-      <a class="btn btn-primary btn-lg" data-toggle="pill" href="#tab_history">Historique</a>
+  </div>
-    </div>
+  <div>
+    <a class="btn btn-primary-w" data-toggle="pill" href="#tab_history">
+      Historique
+      <span class="hidden-xs glyphicon glyphicon-chevron-right"></span>
+    </a>
   </div>
 </div>
 {% endif %}
+
+<script type="text/javascript">
+$( function() {
+
+    // Tooltips
+    $('[data-toggle="tooltip"]').tooltip();
+
+    // Opened tab button
+    let tabs_buttons = $('.tabs-buttons a');
+    tabs_buttons.click( function() {
+        tabs_buttons.removeClass('focus');
+        $(this).addClass('focus');
+    });
+
+});
+</script>

kfet/templates/kfet/left_checkout.html

@@ -1,24 +1,24 @@
-<div class="content-left-top">
+<aside>
-  <div class="line line-big">{{ checkout.name }}</div>
+  <div class="heading">
-  <div class="line balance">{{ checkout.balance|floatformat:2 }} €</div>
+    {{ checkout.name }}
-  <div class="block text-center">
+    <div class="sub">{{ checkout.balance|floatformat:2 }} €</div>
-    <div class="btn-actions btn-group">
-      <div class="btn-group">
-        <a class="btn btn-lg {% if checkout.is_protected %} disabled{% endif %}" href="{% url 'kfet.checkout.update' checkout.pk %}">
-          <span class="glyphicon glyphicon-cog"></span>
-          <span>Modifier</span>
-        </a>
-      </div>
-    </div>
   </div>
-  <div class="block">
+  <div class="buttons">
-    <div class="line">Valide du {{ checkout.valid_from|date:'l j F Y, G:i' }}</div>
+    <a class="btn btn-default {% if checkout.is_protected %} disabled{% endif %}" href="{% url 'kfet.checkout.update' checkout.pk %}">
-    <div class="line">au {{ checkout.valid_to|date:'l j F Y, G:i' }}</div>
+      <span class="glyphicon glyphicon-cog"></span><span>Modifier</span>
-    <div class="line">Créée par {{ checkout.created_by }}</div>
+    </a>
   </div>
-</div>
+  <div class="text">
-<div class="buttons btn-group btn-group-justified">
+    <ul class="list-unstyled">
-  <a class="btn btn-primary btn-lg" href="{% url 'kfet.checkoutstatement.create' checkout.pk %}">
+      <li>Valide du {{ checkout.valid_from|date:'l j F Y, G:i' }}</li>
+      <li>au {{ checkout.valid_to|date:'l j F Y, G:i' }}</li>
+      <li>Créée par {{ checkout.created_by }}</li>
+    </ul>
+  </div>
+</aside>
+
+<div class="buttons">
+  <a class="btn btn-primary" href="{% url 'kfet.checkoutstatement.create' checkout.pk %}">
     Effectuer un relevé
   </a>
 </div>

kfet/templates/kfet/nav_item.html

@@ -1,7 +1,7 @@
 {% if not href %}
   {% url url as href %}
 {% endif %}
-<li class="{% if not href %}navbar-text{% endif %} {% if request.path == href %}active{% endif %}">
+<li class="{% if not href %}navbar-text{% endif %} {% if request.path == href %}active{% endif %} {{ class }}">
   {% if href %}
   <a href="{{ href }}" title="{{ text }}">
   {% endif %}<!--

kfet/templates/kfet/order.html

@@ -3,18 +3,20 @@
 {% block title %}Commandes{% endblock %}
 {% block header-title %}Commandes{% endblock %}
 
-{% block fixed-content %}
+{% block fixed %}
 
-<div class="content-left-top">
+<aside>
-  <div class="line line-big">{{ orders|length }}</div>
+  <div class="heading">
-  <div class="line line-bigsub">commande{{ orders|length|pluralize }}</div>
+    {{ orders|length }}
-</div>
+    <span class="sub">commande{{ orders|length|pluralize }}</span>
+  </div>
+</aside>
 
 {% endblock %}
 
-{% block main-content %}
+{% block main %}
 
-<div class="content-right-block">
+<section>
   <h2>Fournisseurs</h2>
   <div class="table-responsive">
     <table class="table table-hover table-condensed">
@@ -30,8 +32,8 @@
         {% for supplier in suppliers %}
         <tr>
           <td class="no-padding">
-            <a href="{% url 'kfet.order.new' supplier.pk %}" class="btn btn-primary">
+            <a href="{% url 'kfet.order.new' supplier.pk %}" class="btn btn-default">
-              Passer une commande
+              Commander
             </a>
           </td>
           <td>
@@ -48,8 +50,9 @@
       </tbody>
     </table>
   </div>
-</div>
+</section>
-<div class="content-right-block">
+
+<section>
   <h2>Liste des commandes</h2>
   <div class="table-responsive">
     <table class="table table-hover table-condensed">
@@ -66,7 +69,7 @@
         <tr>
           <td class="no-padding">
             {% if not order.inventory %}
-              <a href="{% url 'kfet.order.to_inventory' order.pk %}" class="btn btn-primary">
+              <a href="{% url 'kfet.order.to_inventory' order.pk %}" class="btn btn-default">
                 Générer inventaire
               </a>
             {% endif %}
@@ -89,6 +92,6 @@
       </tbody>
     </table>
   </div>
-</div>
+</section>
 
 {% endblock %}

kfet/templates/kfet/order_create.html

@@ -4,14 +4,14 @@
 {% block title %}Nouvelle commande{% endblock %}
 {% block header-title %}Création d'une commande {{ supplier.name }}{% endblock %}
 
-{% block main-size %}col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2{% endblock %}
+{% block main-size %}col-lg-8 col-lg-offset-2{% endblock %}
 
-{% block main-content %}
+{% block main %}
 
 <form action="" method="post">
   {% csrf_token %}
   <div class="table-responsive">
-  <table class="table table-hover table-condensed text-center">
+  <table class="table table-hover table-condensed table-condensed-input text-center">
     <thead>
       <tr>
         <td rowspan="2">Article</td>

kfet/templates/kfet/order_read.html

@@ -3,38 +3,43 @@
 {% block title %}Commande #{{ order.pk }}{% endblock %}
 {% block header-title %}Commande #{{ order.pk }}{% endblock %}
 
-{% block fixed-content %}
+{% block fixed %}
 
-<div class="content-left-top">
+<aside>
-  <div class="line"><b>Créée le:</b> {{ order.at }}</div>
+  <div class="text">
-  <div class="line">
+    <ul class="list-unstyled">
-    <b>Fournisseur:</b>&nbsp;
+      <li><b>Créée le:</b> {{ order.at }}</li>
-    <a href="{% url "kfet.order.supplier.update" order.supplier.id %}">
+      <li>
-      {{ order.supplier.name }}
+        <b>Fournisseur:</b>
-    </a>
+        <a href="{% url "kfet.order.supplier.update" order.supplier.id %}">
+          {{ order.supplier.name }}
+        </a>
+      </li>
+      {% if order.inventory %}
+      <li>
+        <b>Inventaire relatif:</b>
+        <a href="{% url "kfet.inventory.read" order.inventory.pk %}">
+          #{{ order.inventory.pk }}
+        </a>
+      </li>
+      {% endif %}
+    </ul>
   </div>
-  {% if order.inventory %}
+</aside>
-    <div class="line">
+
-      <b>Inventaire relatif:</b>
+{% if not order.inventory %}
-      <a href="{% url "kfet.inventory.read" order.inventory.pk %}">
+<div class="buttons">
-        #{{ order.inventory.pk }}
+  <a class="btn btn-primary" href="{% url 'kfet.order.to_inventory' order.pk %}">
-      </a>
-    </div>
-  {% endif %}
-</div>
-<div class="buttons btn-group btn-group-justified">
-  {% if not order.inventory %}
-  <a class="btn btn-primary btn-lg" href="{% url 'kfet.order.to_inventory' order.pk %}">
     Générer inventaire
   </a>
-  {% endif %}
 </div>
+{% endif %}
 
 {% endblock %}
 
-{% block main-content %}
+{% block main %}
 
-<div class="content-right-block">
+<section>
   <h2>Détails</h2>
   <div class="table-responsive">
     <table class="table table-condensed">
@@ -74,12 +79,13 @@
       </tbody>
     </table>
   </div>
-</div>
+</section>
-<div class="content-right-block">
+
+<section>
   <h2>Mail</h2>
-  <div>
+  <div class="full">
     <textarea class="form-control" style="height:500px;">{{ mail }}</textarea>
   </div>
-</div>
+</section>
 
 {% endblock %}

kfet/templates/kfet/order_to_inventory.html

@@ -6,12 +6,12 @@
 
 {% block main-size %}col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2{% endblock %}
 
-{% block main-content %}
+{% block main %}
 
 <form action="" method="post">
   {% csrf_token %}
   <div class="table-responsive">
-  <table class='table table-condensed text-center'>
+  <table class='table table-condensed table-condensed-input text-center'>
     <thead>
       <tr>
         <td style="width: 25%">Article</td>

kfet/templates/kfet/settings.html

@@ -3,19 +3,19 @@
 {% block title %}Paramètres{% endblock %}
 {% block header-title %}Paramètres{% endblock %}
 
-{% block fixed-content %}
+{% block fixed %}
 
-<div class="buttons btn-group btn-group-justified">
+<div class="buttons">
-  <a class="btn btn-primary btn-lg" href="{% url 'kfet.settings.update' %}">
+  <a class="btn btn-primary" href="{% url 'kfet.settings.update' %}">
     Modifier
   </a>
 </div>
 
 {% endblock %}
 
-{% block main-content %}
+{% block main %}
 
-<div class="content-right-block">
+<section>
   <h2>Valeurs</h2>
   <div class="table-responsive">
     <table class="table table-hover table-condensed">
@@ -35,6 +35,6 @@
       </tbody>
     </table>
   </div>
-</div>
+</section>
 
 {% endblock %}

kfet/templates/kfet/settings_update.html

@@ -1,12 +1,10 @@
-{% extends "kfet/base_col_1.html" %}
+{% extends "kfet/base_form.html" %}
 
 {% block title %}Modification des paramètres{% endblock %}
 {% block header-title %}Modification des paramètres{% endblock %}
 
-{% block main-class %}content-form{% endblock %}
+{% block main %}
 
-{% block main-content %}
+{% include "kfet/form_full_snippet.html" with authz=perms.kfet.change_settings submit_text="Mettre à jour"%}
-
-{% include "kfet/base_form.html" with authz=perms.kfet.change_settings submit_text="Mettre à jour"%}
 
 {% endblock %}

kfet/templates/kfet/supplier_form.html

@@ -1,12 +1,10 @@
-{% extends "kfet/base_col_1.html" %}
+{% extends "kfet/base_form.html" %}
 
 {% block title %}{{ supplier.name }} - Édition{% endblock %}
 {% block header-title %}Édition du fournisseur {{ supplier.name }}{% endblock %}
 
-{% block main-class %}content-form{% endblock %}
+{% block main %}
 
-{% block main-content %}
+{% include 'kfet/form_full_snippet.html' with authz=perms.kfet.change_supplier submit_text="Mettre à jour" %}
-
-{% include 'kfet/base_form.html' with authz=perms.kfet.change_supplier submit_text="Mettre à jour" %}
 
 {% endblock %}

kfet/templates/kfet/transfers.html

@@ -1,4 +1,4 @@
-{% extends 'kfet/base.html' %}
+{% extends 'kfet/base_col_2.html' %}
 {% load staticfiles %}
 
 {% block extra_head %}
@@ -10,47 +10,36 @@
 {% endblock %}
 
 {% block title %}Transferts{% endblock %}
-{% block content-header-title %}Transferts{% endblock %}
+{% block header-title %}Transferts{% endblock %}
 
-{% block content %}
+{% block fixed %}
 
-<div class="row">
+<div class="buttons">
-  <div class="col-sm-4 col-md-3 col-content-left">
+  <a class="btn btn-primary" href="{% url 'kfet.transfers.create' %}">
-    <div class="content-left">
+    Nouveaux
-      <div class="content-left-top">
+  </a>
-      </div>
+</div>
-      <div class="buttons btn-group btn-group-justified">
+
-        <a class="btn btn-primary btn-lg" href="{% url 'kfet.transfers.create' %}">
+{% endblock %}
-          Nouveaux
+
-        </a>
+{% block main %}
-      </div>
+
+<div id="history">
+  {% for transfergroup in transfergroups %}
+    <div class="opegroup transfergroup" data-transfergroup="{{ transfergroup.pk }}">
+      <span>{{ transfergroup.at }}</span>
+      <span>{{ transfergroup.valid_by.trigramme }}</span>
+      <span>{{ transfergroup.comment }}</span>
     </div>
-  </div>
+    {% for transfer in transfergroup.transfers.all %}
-  <div class="col-sm-8 col-md-9 col-content-right">
+    <div class="ope transfer{% if transfer.canceled_at %} canceled{% endif %}" data-transfer="{{ transfer.pk }}" data-transfergroup="{{ transfergroup.pk }}">
-    {% include 'kfet/base_messages.html' %}
+        <span class="amount">{{ transfer.amount }} €</span>
-    <div class="content-right">
+        <span class="from_acc">{{ transfer.from_acc.trigramme }}</span>
-      <div class="content-right-block">
+        <span class="glyphicon glyphicon-arrow-right"></span>
-        <h2>Liste des transferts</h2>
+        <span class="to_acc">{{ transfer.to_acc.trigramme }}</span>
-        <div id="history">
-          {% for transfergroup in transfergroups %}
-            <div class="opegroup transfergroup" data-transfergroup="{{ transfergroup.pk }}">
-              <span>{{ transfergroup.at }}</span>
-              <span>{{ transfergroup.valid_by.trigramme }}</span>
-              <span>{{ transfergroup.comment }}</span>
-            </div>
-            {% for transfer in transfergroup.transfers.all %}
-            <div class="ope transfer{% if transfer.canceled_at %} canceled{% endif %}" data-transfer="{{ transfer.pk }}" data-transfergroup="{{ transfergroup.pk }}">
-                <span class="amount">{{ transfer.amount }} €</span>
-                <span class="from_acc">{{ transfer.from_acc.trigramme }}</span>
-                <span class="glyphicon glyphicon-arrow-right"></span>
-                <span class="to_acc">{{ transfer.to_acc.trigramme }}</span>
-              </div>
-            {% endfor %}
-          {% endfor %}
-        </div>
       </div>
-    </div>
+    {% endfor %}
-  </div>
+  {% endfor %}
 </div>
 
 <script type="text/javascript">

kfet/templates/kfet/transfers_create.html

@@ -11,9 +11,9 @@
 
 {% block main-size %}col-sm-12{% endblock %}
 
-{% block main-content %}
+{% block main %}
 
-<form id="transfers_form" style="background-color: transparent;">
+<form id="transfers_form">
   {% csrf_token %}
   <div class="transfer_general text-center">
     <input type="text" name="comment" id="comment" placeholder="Commentaire"><!--

kfet/templatetags/kfet_tags.py

@@ -1,15 +1,18 @@
 # -*- coding: utf-8 -*-
 
+import re
+
 from django import template
 from django.utils.html import escape
 from django.utils.safestring import mark_safe
-from math import floor
-import re
 
-from kfet.config import kfet_config
+from ..utils import to_ukf
+
 
 register = template.Library()
 
+register.filter('ukf', to_ukf)
+
 
 @register.filter()
 def highlight_text(text, q):
@@ -38,11 +41,13 @@ def highlight_clipper(clipper, q):
 
 
 @register.filter()
-def ukf(balance, is_cof):
+def widget_type(field):
-    grant = is_cof and (1 + kfet_config.subvention_cof / 100) or 1
+    return field.field.widget.__class__.__name__
-    return floor(balance * 10 * grant)
 
 
 @register.filter()
-def widget_type(field):
+def slice(l, start, end=None):
-    return field.field.widget.__class__.__name__
+    if end is None:
+        end = start
+        start = 0
+    return l[start:end]

kfet/tests/test_statistic.py

@@ -9,7 +9,8 @@ from kfet.models import Account, Article, ArticleCategory
 
 
 class TestStats(TestCase):
-    @patch('kfet.signals.messages')
+
+    @patch('gestioncof.signals.messages')
     def test_user_stats(self, mock_messages):
         """
         Checks that we can get the stat-related pages without any problem.

kfet/tests/test_views.py

@@ -1,4 +1,5 @@
 from decimal import Decimal
+from unittest.mock import patch
 
 from django.test import TestCase, Client
 from django.contrib.auth.models import User
@@ -46,8 +47,9 @@ class AccountTests(TestCase):
             amount=Decimal('3')
         )
 
-    def test_account_read(self):
+    @patch('gestioncof.signals.messages')
-        """We can query the  "Accout - Read" page."""
+    def test_account_read(self, mock_messages):
+        """We can query the  "Account - Read" page."""
         client = Client()
         self.assertTrue(client.login(
             username="foobar",

kfet/utils.py

@@ -0,0 +1,10 @@
+import math
+
+from .config import kfet_config
+
+
+def to_ukf(balance, is_cof=False):
+    """Convert euro to UKF."""
+    subvention = kfet_config.subvention_cof
+    grant = (1 + subvention / 100) if is_cof else 1
+    return math.floor(balance * 10 * grant)