Fix allauth-ens version, lol

↑
Merci Erkan

lol

super message de commit

equipment/admin.py

@@ -1,7 +1,7 @@
 from django.contrib import admin
 from django import forms
 
-from .models import Equipment, EquipmentDefault, EquipmentRevision, EquipmentCategory, EquipmentLost, EquipmentAttributeValue, EquipmentAttribute
+from .models import Equipment, EquipmentDefault, EquipmentRevision, EquipmentCategory, EquipmentLost, EquipmentAttributeValue, EquipmentAttribute, EquipmentStorage
 from .fields import IdField, IdWidget
 
 
@@ -69,6 +69,11 @@ class CategoryAdmin(admin.ModelAdmin):
     search_fields = ['name',]
     autocomplete_fields = ['parent', ]
 
+class StorageAdmin(admin.ModelAdmin):
+    list_display = ['name']
+    ordering = ['name']
+    search_fields = ['name']
+
 
 class EquipmentAttributeAdmin(admin.ModelAdmin):
     list_display = ['name']
@@ -79,7 +84,7 @@ class EquipmentAttributeAdmin(admin.ModelAdmin):
 class EquipmentAdmin(admin.ModelAdmin):
     save_as_continue = True
     save_on_top = True
-    autocomplete_fields = ['category', ]
+    autocomplete_fields = ['category', 'storage', ]
     readonly_fields = ['full_category_p',
                         'added_at',
                         'modified_at',
@@ -88,7 +93,7 @@ class EquipmentAdmin(admin.ModelAdmin):
                         'stock_lost_p',
                         'ids_lost_p',
             ]
-    list_display = ['name', 'stock', 'owner', 'category', 'modified_at']
+    list_display = ['name', 'stock', 'owner', 'category', 'storage', 'modified_at']
     fieldsets = (
         ('Général', {
             'fields': ('name', 'owner', 'stock',  )
@@ -102,8 +107,8 @@ class EquipmentAdmin(admin.ModelAdmin):
                     'ids_lost_p',
                     ),
         }),
-        ('Catégorie', {
+        ('Attributs', {
-            'fields': ('category', 'full_category_p'),
+            'fields': ('category', 'full_category_p', 'storage'),
         }),
         ('Description', {
             'fields': ('description', 'added_at', 'modified_at',),
@@ -119,9 +124,10 @@ class EquipmentAdmin(admin.ModelAdmin):
                EquipmentLostExtraInline,
                EquipmentRevisionExtraInline]
     search_fields = ['name', 'description',]
-    list_filter = ['owner', 'category' ]
+    list_filter = ['owner', 'category', 'storage', ]
 
 
 admin.site.register(Equipment, EquipmentAdmin)
 admin.site.register(EquipmentCategory, CategoryAdmin)
+admin.site.register(EquipmentStorage, StorageAdmin)
 admin.site.register(EquipmentAttribute, EquipmentAttributeAdmin)

equipment/migrations/0015_auto_20190318_1245.py

@@ -0,0 +1,26 @@
+# Generated by Django 2.1.5 on 2019-03-18 11:45
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('equipment', '0014_auto_20180827_0005'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='EquipmentStorage',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=200, verbose_name='nom')),
+            ],
+        ),
+        migrations.AddField(
+            model_name='equipment',
+            name='storage',
+            field=models.ForeignKey(blank=True, default=None, null=True, on_delete=django.db.models.deletion.PROTECT, to='equipment.EquipmentStorage', verbose_name='stockage'),
+        ),
+    ]

equipment/migrations/0016_auto_20190318_1247.py

@@ -0,0 +1,17 @@
+# Generated by Django 2.1.5 on 2019-03-18 11:47
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('equipment', '0015_auto_20190318_1245'),
+    ]
+
+    operations = [
+        migrations.AlterModelOptions(
+            name='equipmentstorage',
+            options={'verbose_name': 'stockage', 'verbose_name_plural': 'stockages'},
+        ),
+    ]

equipment/models.py

@@ -10,6 +10,20 @@ from .fields import IdField
 from datetime import date
 
 
+class EquipmentStorage(models.Model):
+    name = models.CharField(
+                _("nom"),
+                max_length=200,
+                )
+
+    class Meta:
+        verbose_name = _("stockage")
+        verbose_name_plural = _("stockages")
+
+    def __str__(self):
+        return self.name
+
+
 class EquipmentCategory(models.Model):
     name = models.CharField(
                 _("nom"),
@@ -108,6 +122,14 @@ class Equipment(EventSpecificMixin, models.Model):
             verbose_name=_("catégorie"),
             on_delete=models.PROTECT,
             )
+    storage = models.ForeignKey(
+            EquipmentStorage,
+            blank=True,
+            null=True,
+            default=None,
+            verbose_name=_("stockage"),
+            on_delete=models.PROTECT,
+            )
 
     added_at = models.DateTimeField(
                 _("ajouté le"),

equipment/templates/equipment/home.html

@@ -4,21 +4,27 @@
 {% block title %}{% trans "Matériel" %}{% endblock %}
 
 {% block content %}
-    <h1>{% trans "Inventaire" %}</h1>
+    <h1 class="equipment">{% trans "Inventaire" %}</h1>
-    <a href="{% url 'equipment:list' %}" class="module">
+    <div class="module-list">
-        <span class="glyphicon glyphicon-list-alt"></span>
+      <a href="{% url 'equipment:list' %}" class="module equipment">
-        {% trans "Tout le matériel" %}
+          <span class="glyphicon glyphicon-list-alt"></span>
-    </a>
+          {% trans "Tout le matériel" %}
-    <h2>{% trans "Liste par Propriétaire" %}</h2>
+      </a>
+      <a href="#TODO" class="module equipment">
+          <span class="glyphicon glyphicon-list-alt"></span>
+          {% trans "Disponible" %}
+      </a>
+    </div>
+    <h2 class="staff">{% trans "Liste par Propriétaire" %}</h2>
     <div class="module-list">
         {% for owner in owners %}
-        <a href="{% url 'equipment:list_by_owner' owner.id %}" class="module">
+        <a href="{% url 'equipment:list_by_owner' owner.id %}" class="module staff">
             <span class="glyphicon glyphicon-user"></span>
             {{ owner.name }}
         </a>
         {% endfor %}
     </div>
-    <h2>{% trans "Liste par Catégorie" %}</h2>
+    <h2 class="equipment">{% trans "Liste par Catégorie" %}</h2>
     <div class="tree">
     <ul>
         {% for node in root_cat %}

equipment/templates/equipment/list.html

@@ -6,9 +6,9 @@
 {% block title %}{% trans "Matériel" %}{% endblock %}
 
 {% block content %}
-    <h1>Inventaire</h1>
+    <h1 class="equipment">Inventaire</h1>
     {% if subtitle %}
-    <h2>{{ subtitle }}</h2>
+    <h2 class="equipment">{{ subtitle }}</h2>
     {% endif %}
     {% render_table table %}
 {% endblock %}

event/static/css/calendar.css

@@ -0,0 +1,373 @@
+/* Calendar */
+
+#cal-container {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+
+  min-height: 80vh;
+  display: block;
+  position: relative;
+
+  line-height: 100%;
+}
+
+#cal-container,
+#cal-container * {
+  box-sizing: border-box;
+}
+
+
+
+/* Time slots */
+
+#cal-container .cal-time-slot-container {
+  display: grid;
+  grid-template-rows: 30px auto;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: calc(100% + 30px + 10px);
+  padding: 0;
+  z-index: 10;
+}
+
+#cal-container .cal-time-slot {
+  border-right: 1px solid #EEE;
+  background-color: #FAFAFA;
+}
+
+#cal-container .cal-time-slot:nth-child(even) {
+  background-color: #F4F4F4;
+}
+
+#cal-container .cal-time-slot:last-child {
+  border-right: 0;
+}
+
+#cal-container .cal-time-slot-hour {
+  padding: 0 0 0 calc(100% - 1.4rem + 7px);
+  background-color: #F9F9F9;/* #3D3D3D; */
+  border-bottom: 1px solid #AAA;
+  color: #333;
+  font-size: 1.4rem;
+  line-height: 30px;
+  vertical-align: middle;
+}
+
+#cal-container .cal-time-slot-hour:nth-child(even) {
+  background-color:  #FCFCFC;/* #464646; */
+}
+
+#cal-container .cal-time-slot-hour:first-child {
+  color: transparent;
+  border-right: 0;
+}
+
+#cal-container .cal-time-slot-hour.cal-last-hour {
+  padding: 0;
+  color: transparent;
+}
+
+#cal-container .cal-time-slot.cal-last-hour,
+#cal-container .cal-time-slot-hour.cal-last-hour {
+  border-right: 1px solid #AAA;
+}
+
+#cal-container .cal-time-slot.cal-first-hour,
+#cal-container .cal-time-slot-hour.cal-first-hour {
+  border-left: 1px solid #AAA;
+}
+
+/* Events */
+
+#cal-container .cal-event-container {
+  display: grid;
+  /* grid-template-columns: repeat(24, 1fr); */
+  /* grid-template-rows: repeat(12, auto); */
+
+  position: absolute;
+  top: 40px;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  z-index: 100;
+}
+
+#cal-container .cal-event {
+  position: relative;
+  height: 80px;
+  margin: 2px 0;
+  /* padding: 5px; */
+  /* background-color: #EFEFEF; */
+  border-radius: 3px;
+  /* border: 1px solid #CCC; */
+  border-width: 1px;
+  border-style: solid;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* z-index: 500; */
+  transition: 50ms ease-in;
+}
+
+#cal-container .cal-event:hover {
+  /* background-color: #FEDDDD; */
+}
+
+#cal-container .cal-event > * {
+  display: none;
+  margin: 5px;
+}
+
+#cal-container .cal-event > .cal-event-name,
+#cal-container .cal-event > .cal-event-location,
+#cal-container .cal-event > .cal-event-perm-count {
+  display: block;
+}
+
+#cal-container .cal-event > .cal-event-name {
+  font-weight: bold;
+}
+
+#cal-container .cal-event > .cal-event-location {
+  font-style: italic;
+}
+
+#cal-container .cal-event > .cal-event-perm-count {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+
+#cal-container .cal-event:not(.cal-event-subscribed) > .cal-event-perm-count.cal-perms-missing {
+  width: calc(100% - 10px);
+  right: auto;
+  margin: 5px;
+  padding: 5px;
+  background-color: #FFF;
+  border: 2px solid #E44;
+  color: #E44;
+  font-weight: bold;
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+#cal-container .cal-event.cal-event-subscribed {
+  border-width: 3px;
+  border-color: #000;
+}
+
+#cal-container .cal-event.cal-event-subscribed::after {
+  content: "✔";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 16px;
+  height: 16px;
+  padding: 1px;
+  color: #fff;
+  background-color: #000;
+  border-top-right-radius: 3px;
+}
+
+
+/* Event details popup */
+
+#cal-container .cal-event-details {
+  position: absolute;
+  min-height: 100px;
+  /* min-width: 40%; */
+  max-width: 80%;
+  padding: 20px;
+  background-color: #333;
+  color: #FFF;
+  border-radius: 4px;
+  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6);
+  z-index: 1000;
+}
+
+#cal-container .cal-event-details:after {
+	bottom: 100%;
+	left: 50%;
+	border: solid transparent;
+	content: " ";
+	height: 0;
+	width: 0;
+	position: absolute;
+	pointer-events: none;
+	border-bottom-color: #333;
+	border-width: 20px;
+	margin-left: -20px;
+}
+
+#cal-container .cal-event-details.above-event:after {
+	top: 100%;
+  left: 50%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+	border-top-color: #333;
+	border-width: 20px;
+	margin-left: -20px;
+}
+
+#cal-container .cal-event-details * {
+  z-index: 1000;
+}
+
+#cal-container .cal-event-details .cal-detail-close-button {
+  width: 35px;
+  height: 35px;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  margin: 0;
+  padding: 5px;
+  background: transparent;
+  border: none;
+  border-radius: 50%;
+  font-size: 1.6rem;
+  color: #BBB;
+  transition: 100ms ease-out;
+}
+
+#cal-container .cal-event-details .cal-detail-close-button:hover {
+  background-color: #484848;
+  color: #EFEFEF;
+}
+
+#cal-container .cal-event-details a,
+#cal-container .cal-event-details a:hover {
+  color: #FFF;
+  text-decoration: none;
+}
+
+#cal-container .cal-event-details .cal-detail-name > h3 {
+  margin: 0 0 25px 26px;
+  padding: 10px;
+  border-radius: 4px;
+  color: #FFF;
+  font-size: 2.5rem;
+  text-transform: uppercase;
+  text-align: center;
+}
+
+#cal-container .cal-event-details .cal-detail-name > h3::after {
+  content: "";
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  margin: 0 0 0 10px;
+  vertical-align: middle;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAA90lEQVQoz2WRsS6DURiGn/yaaNqBySpGicFg6iJcAYuuNBaJpJEg6gLcADFIdWR0BZZKS4SBRTe3YFf/Y/j/c3LUe4Zz3vd78+U734uUJ7Ptg7k68NDpoIdyU9V3TzzwRdXt1HCq9pwR510W616oZ8Gwoe6KWFN1ScStogui3sRJ9uxYLd/n6hTuaCy3XHfNWuR6hM+OojBQdSXyJ0cZizwSsMo3kEc+ZCEjxZgxE8j4oBFZhRww8gaff4fEL3UuGfK4uG5L4VLVfvrNCrDJHfd0gSrXQB2AJvu0+Cm8HbXnbGw9seqwWH2z65Wv/8MKcfdVHaZx/wKtOg5kifzQhwAAAABJRU5ErkJggg==);
+  opacity: 0.6;
+}
+
+#cal-container .cal-event-details .cal-detail-name:hover > h3 {
+  margin-right: 26px;
+  margin-bottom: 10px;
+  background-color: #484848;
+  color: #FFF;
+}
+
+#cal-container .cal-event-details .cal-detail-name:hover > h3::after {
+  content: "Cliquez pour afficher les détails.";
+  display: block;
+  width: auto;
+  height: 15px;
+  padding: 2px 0 0 0;
+  font-size: 1.2rem;
+  background-image: none;
+  color: #DDD;
+}
+
+#cal-container .cal-event-details .cal-detail-name:hover + .cal-detail-close-button {
+  opacity: 0;
+}
+
+#cal-container .cal-event-details table {
+  margin: 0 auto;
+  font-size: 1.8rem;
+}
+
+#cal-container .cal-event-details td.cal-detail-label {
+  padding: 0 10px 10px 0;
+  font-weight: bold;
+  text-align: right;
+}
+
+#cal-container .cal-event-details td.cal-detail-value {
+  padding: 0 0 10px 10px;
+  text-align: left;
+}
+
+#cal-container .cal-event-details .cal-detail-perm-area {
+  margin: 10px 0;
+  padding: 10px;
+  background-color: #DFDFDF;
+  color: #333;
+  text-align: center;
+  border-radius: 4px;
+}
+
+#cal-container .cal-event-details .cal-detail-perm-title {
+  display: block;
+  margin: 0 0 10px 0;
+}
+
+#cal-container .cal-event-details .cal-detail-perm-area .cal-detail-perm-count {
+  margin: 0 10px 0 0;
+  font-size: 2.5rem;
+  vertical-align: middle;
+}
+
+#cal-container .cal-event-details .cal-detail-perm-area .cal-detail-perm-count.cal-perms-missing {
+  color: #E44;
+}
+
+#cal-container .cal-event-details .cal-detail-perm-area .cal-detail-perm-count.cal-perms-full {
+  color: #393;
+}
+
+
+#cal-container .cal-event-details .cal-detail-perm-area .cal-detail-perm-subscription-switch {
+  margin: 0 0 0 10px;
+  padding: 10px;
+  font-size: 1.8rem;
+  vertical-align: middle;
+}
+
+#cal-container .cal-event-details .cal-detail-perm-area .cal-detail-perm-nb-missing-perms {
+  margin: 20px 0 0 0;
+  padding: 5px;
+  background-color: #FFF;
+  border-radius: 4px;
+  text-align: center;
+  font-size: 1.5rem;
+  color: #E44;
+  font-weight: bold;
+}
+
+#cal-container .cal-event-details .cal-detail-description {
+  margin: 20px 0 20px 0;
+  color: #DDD;
+  font-size: 1.8rem;
+  font-style: italic;
+  text-align: justify;
+  line-height: 120%;
+}
+
+#cal-container .cal-event-details .cal-detail-tag {
+  display: inline-block;
+  margin: 5px;
+  padding: 5px;
+  border: 1px solid #DDD;
+}

event/static/css/tipso.css

@@ -0,0 +1,108 @@
+/* Tipso Bubble Styles */
+.tipso_bubble, .tipso_bubble > .tipso_arrow{
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing:    border-box;
+	box-sizing:         border-box;
+}
+.tipso_bubble {
+  position: absolute;
+	text-align: center;
+	border-radius: 6px;
+	z-index: 9999;
+}
+.tipso_style{
+	/* cursor: help; */
+	border-bottom: 1px dotted;
+}
+.tipso_title {
+  padding: 3px 0;
+	border-radius: 6px 6px 0 0;
+  font-weight: 700;
+}
+.tipso_content {
+  word-wrap: break-word;
+	padding: 0.5em;
+}
+
+/* Tipso Bubble size classes - Similar to Foundation's syntax*/
+.tipso_bubble.tiny {
+	font-size: 0.6rem;
+}
+.tipso_bubble.small {
+	font-size: 0.8rem;
+}
+.tipso_bubble.default {
+	font-size: 1rem;
+}
+.tipso_bubble.large {
+	font-size: 1.2rem;
+	width: 100%;
+}
+
+.tipso_bubble.cal_small {
+  font-size: 1.6rem;
+}
+
+/* Tipso Bubble Div */
+.tipso_bubble > .tipso_arrow{
+	position: absolute;
+	width: 0; height: 0;
+	border: 8px solid;
+	pointer-events: none;
+}
+.tipso_bubble.top > .tipso_arrow {
+	border-top-color: #000;
+	border-right-color: transparent;
+	border-left-color: transparent;
+	border-bottom-color: transparent;
+	top: 100%;
+	left: 50%;
+	margin-left: -8px;
+}
+.tipso_bubble.bottom > .tipso_arrow {
+	border-bottom-color: #000;
+	border-right-color: transparent;
+	border-left-color: transparent;
+	border-top-color: transparent;
+	bottom: 100%;
+	left: 50%;
+	margin-left: -8px;
+}
+.tipso_bubble.left > .tipso_arrow {
+	border-left-color: #000;
+	border-top-color: transparent;
+	border-bottom-color: transparent;
+	border-right-color: transparent;
+	top: 50%;
+	left: 100%;
+	margin-top: -8px;
+}
+.tipso_bubble.right > .tipso_arrow {
+	border-right-color: #000;
+	border-top-color: transparent;
+	border-bottom-color: transparent;
+	border-left-color: transparent;
+	top: 50%;
+	right: 100%;
+	margin-top: -8px;
+}
+
+.tipso_bubble .top_right_corner,
+.tipso_bubble.top_right_corner {
+	border-bottom-left-radius: 0;
+}
+
+.tipso_bubble .bottom_right_corner,
+.tipso_bubble.bottom_right_corner  {
+	border-top-left-radius: 0;
+}
+
+.tipso_bubble .top_left_corner,
+.tipso_bubble.top_left_corner {
+	border-bottom-right-radius: 0;
+}
+
+.tipso_bubble .bottom_left_corner,
+.tipso_bubble.bottom_left_corner  {
+	border-top-right-radius: 0;
+}

event/static/js/interval_coloration.js

@@ -0,0 +1,84 @@
+// Interval graph coloring algorithm, by Twal
+
+class IntervalColoration {
+    constructor (intervals) {
+        this.intervals = intervals;
+        this.n = this.intervals.length;
+        this.computeInterferenceGraph();
+        this.computePEO();
+        this.computeColoration();
+    }
+
+    computeInterferenceGraph() {
+        this.adj = new Array(this.n);
+        for (let i = 0; i < this.n; ++i) {
+            this.adj[i] = [];
+        }
+        for (let i = 0; i < this.n; ++i) {
+            for (let j = 0; j < i; ++j) {
+                let inti = this.intervals[i];
+                let intj = this.intervals[j];
+                if (inti[0] < intj[1] && intj[0] < inti[1]) {
+                    this.adj[i].push(j);
+                    this.adj[j].push(i);
+                }
+            }
+        }
+    }
+
+    //Perfect elimination order using Maximum Cardinality Search
+    //Runs in O(n^2), could be optimized in O(n log n)
+    computePEO() {
+        let marked = new Array(this.n);
+        let nbMarkedNeighbor = new Array(this.n);
+        this.perm = new Array(this.n);
+        for (let i = 0; i < this.n; ++i) {
+            marked[i] = false;
+            nbMarkedNeighbor[i] = 0;
+        }
+        for (let k = this.n-1; k >= 0; --k) {
+            let maxi = -1;
+            for (let i = 0; i < this.n; ++i) {
+                if (!marked[i] && (maxi == -1 || nbMarkedNeighbor[i] >= nbMarkedNeighbor[maxi])) {
+                    maxi = i;
+                }
+            }
+            for (let i = 0; i < this.adj[maxi].length; ++i) {
+                nbMarkedNeighbor[this.adj[maxi][i]] += 1;
+            }
+            this.perm[maxi] = k;
+            marked[maxi] = true;
+        }
+        // console.log(this.perm);
+    }
+
+    computeColoration() {
+        this.colors = new Array(this.n);
+        let isColorUsed = new Array(this.n);
+        for (let i = 0; i < this.n; ++i) {
+            this.colors[i] = -1;
+            isColorUsed[i] = false;
+        }
+        for (let i = 0; i < this.n; ++i) {
+            let ind = this.perm[i];
+            for (let j = 0; j < this.adj[ind].length; ++j) {
+                let neigh = this.adj[ind][j];
+                if (this.colors[neigh] >= 0) {
+                    isColorUsed[this.colors[neigh]] = true;
+                }
+            }
+            for (let j = 0; j < this.n; ++j) {
+                if (!isColorUsed[j]) {
+                    this.colors[ind] = j;
+                    break;
+                }
+            }
+            for (let j = 0; j < this.adj[ind].length; ++j) {
+                let neigh = this.adj[ind][j];
+                if (this.colors[neigh] >= 0) {
+                    isColorUsed[this.colors[neigh]] = false;
+                }
+            }
+        }
+    }
+}

event/templates/event/calendar.html

@@ -0,0 +1,116 @@
+{% extends "shared/fluid.html" %}
+{% load i18n staticfiles event_tags %}
+
+{% block extra_css %}
+    {{ block.super }}
+    <link rel="stylesheet" href="{% static "css/tipso.css" %}">
+    <link rel="stylesheet" href="{% static "css/calendar.css" %}">
+
+    <style>
+      #cal-toggle-unsubscribed-events-display {
+        display: block;
+        position: fixed;
+        bottom: 30px;
+        left: 30px;
+        border-bottom: 2px solid rgb(150, 50, 50);
+        font-size: 1.6rem;
+        font-weight: bold;
+        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4),
+                    0 1px 1px rgba(150, 50, 50, 0.7);
+        text-shadow: 0 0 7px rgb(150, 50, 50);
+        z-index: 5000;
+      }
+    </style>
+{% endblock %}
+
+{% block extra_js %}
+    {{ block.super }}
+    <script type="text/javascript" src="{% static "js/tipso.min.js" %}"></script>
+    <script type="text/javascript" src="{% static "js/interval_coloration.js" %}"></script>
+    <script type="text/javascript" src="{% static "js/calendar.js" %}"></script>
+
+    <script type="text/javascript">
+      $(document).ready(() => {
+        let calendar = new Calendar({
+          startDate: new Date(2018, 10, 30, 8),
+          endDate: new Date(2018, 11, 2, 6),
+          eventDetailURLFormat: "https://cof.ens.fr/poulpe/event/activity/999999",
+          subscriptionURLFormat: "{% url "event:enrol_activity" 999999 %}?ajax=json",
+          csrfToken: $(".planning [name=csrfmiddlewaretoken]").val(),
+          groupEventsByLocation: true
+        });
+
+        // TODO: move this elsewhere
+        // Button to switch between:
+        // - displaying all events (default);
+        // - only displaying events for which the current user is enroled.
+
+        // Create the button
+        let toggleUnsubscribedEventDisplayButton = $("<button>")
+          .attr("type", "button")
+          .attr("id", "cal-toggle-unsubscribed-events-display")
+          .addClass("btn btn-primary")
+          .appendTo(calendar.containerNode);
+
+        // Set/update its label
+        function updateToggleButtonLabel () {
+          if (calendar.onlyDisplaySubscribedEvents) {
+            toggleUnsubscribedEventDisplayButton.html("Afficher toutes les activités");
+          }
+          else {
+            toggleUnsubscribedEventDisplayButton.html("Afficher seulement mes permanences");
+          }
+        }
+
+        updateToggleButtonLabel();
+
+        // Switch between display modes on click
+        toggleUnsubscribedEventDisplayButton.on("click", () => {
+          calendar.toggleEventsNotSubscribedByUser();
+          updateToggleButtonLabel();
+        });
+
+
+        // DEBUG: js console helpers, to be removed
+        console.log(calendar);
+        window["cal"] = calendar;
+      });
+    </script>
+{% endblock %}
+
+{% block content %}
+    <div class="planning">
+    {% csrf_token %}
+    {% regroup activities by beginning|date:"Y-m-d" as days_list %}
+    <div class="content fluid" id="cal-container">
+    {% for day in days_list %}
+        {% for activity in day.list %}
+            <div class="cal-event">
+                <span class="cal-event-id">{{ activity.id }}</span>
+                <span class="cal-event-name">{{ activity|get_herited:'title' }}</span>
+                <span class="cal-event-start-date">{{ activity.beginning | date:"j/m/Y H:i" }}</span>
+                <span class="cal-event-end-date">{{ activity.end | date:"j/m/Y H:i" }}</span>
+                {% with activity|get_herited:'places' as places %}
+                <span class="cal-event-location">{{ places.all | join:", " }}</span>
+                {% endwith %}
+                <span class="cal-event-description">{{ activity.description }}</span>
+                <span class="cal-event-url">{% url "event:activity" activity.id %}</span>
+
+                {% if activity|get_herited:'has_perm' %}
+                <span class="cal-event-has-perms">1</span>
+                <span class="cal-event-min-nb-perms">{{ activity|get_herited:'min_perm' }}</span>
+                <span class="cal-event-max-nb-perms">{{ activity|get_herited:'max_perm' }}</span>
+                <span class="cal-event-nb-perms">{{ activity.staff.count }}</span>
+                <span class="cal-event-subscribed">{% is_enrolled activity request.user %}</span>
+                {% endif %}
+
+                {% with activity|get_herited:'tags' as tags %}
+                {% for tag in tags.all %}
+                <span class="cal-event-tag">{{ tag.name }}</span>
+                {% endfor %}
+                {% endwith %}
+            </div>
+        {% endfor %}
+    {% endfor %}
+    </div>
+{% endblock %}

event/templates/event/event.html

@@ -29,8 +29,24 @@
             <span class="glyphicon glyphicon-tree-deciduous"></span>
             lieux spécifiques
         </a>
+        <a href="{% url "event:calendar" event.slug %}" class="module">
+            Calendrier
+        </a>
+        {% if staffuser %}
+        <a href="{% url "event:event" event.slug %}" class="module">
+            Toutes les activités
+        </a>
+        {% else %}
+        <a href="{% url "event:event-staff" event.slug user.username %}" class="module">
+            Mes perms
+        </a>
+        {% endif %}
     </div>
+    {% if staffuser %}
+    <h2>Perms de {{ staffuser.first_name }} {{ staffuser.last_name }}</h2>
+    {% else %}
     <h2>Planning</h2>
+    {% endif %}
 
     <div class="planning">
     {% regroup activities by beginning|date:"Y-m-d" as days_list %}

event/templatetags/event_tags.py

@@ -14,3 +14,8 @@ def enrol_btn(activity, user):
         "enrolled": activity.staff.filter(id=user.id).exists(),
         "activity": activity,
     }
+
+@register.simple_tag
+def is_enrolled(activity, user):
+    user_is_enrolled = activity.staff.filter(id=user.id).exists()
+    return "1" if user_is_enrolled else "0"

event/urls.py

@@ -1,10 +1,12 @@
 from django.conf.urls import url
-from event.views import Index, EventView, ActivityView, EnrolActivityView
+from event.views import Index, EventView, EventViewStaff, ActivityView, EnrolActivityView, EventCalendar
 
 app_name = 'event'
 urlpatterns = [
         # url(r'^$', Index.as_view(), name='index'),
         url(r'^(?P<slug>[-\w]+)/$', EventView.as_view(), name='event'),
+        url(r'^(?P<slug>[-\w]+)/s/(?P<username>[-\w]+)/$', EventViewStaff.as_view(), name='event-staff'),
+        url(r'^(?P<slug>[-\w]+)/calendar/$', EventCalendar.as_view(), name='calendar'),
         url(r'^activity/(?P<pk>[0-9]+)/$', ActivityView.as_view(),
             name='activity'),
         url(r'^activity/(?P<pk>[0-9]+)/enrol/$',

event/views.py

@@ -1,5 +1,6 @@
 from django.views.generic import TemplateView, DetailView, View
 from django.contrib.auth.mixins import LoginRequiredMixin
+from django.contrib.auth import get_user_model
 from django.shortcuts import get_object_or_404, render
 from django.http import JsonResponse, HttpResponseRedirect
 from django.urls import reverse
@@ -7,11 +8,26 @@ from django.urls import reverse
 from .models import Event, Activity
 from equipment.models import EquipmentAttribution
 
+User = get_user_model()
+
 
 class Index(TemplateView):
     template_name = "event/index.html"
 
 
+class EventCalendar(LoginRequiredMixin, DetailView):
+    model = Event
+    template_name = 'event/calendar.html'
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        event = self.object
+        context['activities'] = (Activity.objects.filter(event=event)
+                                 .order_by('beginning').prefetch_related(
+                                      'tags', 'places', 'staff', 'parent'))
+        return context
+
+
 class EventView(LoginRequiredMixin, DetailView):
     model = Event
     template_name = 'event/event.html'
@@ -25,6 +41,24 @@ class EventView(LoginRequiredMixin, DetailView):
         return context
 
 
+class EventViewStaff(LoginRequiredMixin, DetailView):
+    model = Event
+    template_name = 'event/event.html'
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        user = User.objects.get(username=self.kwargs['username'])
+        event = self.object
+        context['staffuser'] = user
+        context['activities'] = (user.in_perm_activities
+                                 .filter(event=event)
+                                 .order_by('beginning')
+                                 .prefetch_related(
+                                      'tags', 'places', 'staff', 'parent')
+                                 )
+        return context
+
+
 class ActivityView(LoginRequiredMixin, DetailView):
     model = Activity
     template_name = 'event/activity.html'

poulpe/settings/common.py

@@ -186,11 +186,12 @@ SITE_ID = 1
 
 CAS_SERVER_URL = "https://cas.eleves.ens.fr/"   # SPI CAS
 CAS_VERIFY_URL = "https://cas.eleves.ens.fr/"
+CAS_VERSION = "2"
 CAS_IGNORE_REFERER = True
+CAS_LOGIN_MSG = None
 CAS_REDIRECT_URL = reverse_lazy('shared:home')
 CAS_EMAIL_FORMAT = "%s@clipper.ens.fr"
 CAS_FORCE_CHANGE_USERNAME_CASE = "lower"
-CAS_VERSION = 'CAS_2_SAML_1_0'
 
 LOGIN_URL = reverse_lazy('account_login')
 LOGOUT_URL = reverse_lazy('account_logout')
@@ -214,4 +215,6 @@ SOCIALACCOUNT_PROVIDERS = {
 
 
 ACCOUNT_ADAPTER = 'shared.allauth_adapter.AccountAdapter'
-SOCIALACCOUNT_ADAPTER='allauth_ens.adapter.LongTermClipperAccountAdapter'
+#SOCIALACCOUNT_ADAPTER='allauth_ens.adapter.LongTermClipperAccountAdapter'
+SOCIALACCOUNT_ADAPTER= 'shared.allauth_adapter.SocialAccountAdapter'
+

requirements.txt

@@ -3,16 +3,12 @@ asgiref==1.1.1
 django-bootstrap3==10.0.1
 channels==1.1.5
 Django==2.1
-django-allauth==0.36.0
-django-allauth-cas==1.0.0b2
 django-tables2==2.0.0a2
 django-filter==2.0.0
-django-allauth-ens
+git+https://git.eleves.ens.fr/klub-dev-ens/django-allauth-ens.git@1.1.3
 django-bootstrap-form==3.4
 drf-nested-routers==0.90.0
 django-notifications==0.1.dev0
 django-contrib-comments==1.8.0
 django-taggit==0.22.2
 Pillow==5.0.0
-
-python-cas==1.2.0

shared/static/config.rb

@@ -0,0 +1,25 @@
+require 'compass/import-once/activate'
+# Require any additional compass plugins here.
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "css"
+sass_dir = "sass"
+images_dir = "images"
+javascripts_dir = "javascripts"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

shared/static/css/_dashed-shadows.scss

@@ -0,0 +1,114 @@
+//@import "compass/css3";
+
+//Variables here:
+//(alongside with commented suggestions)
+$foreground-color:#b85b3f;//black;
+$background-color:#e8e3c7;//white
+$shadow-color:#ba9186;//$foreground-color;
+$distance:8px;
+$cut-distance:3px;//$distance/4;
+$strips-size:6px; //10px
+$strips-ratio:50%;//70%
+$strips-angle:45deg;//90deg;
+
+//cray stuff yo. be sure to try (if you please)
+$animate:false;//true
+$fixed:false;//true
+
+body{
+  font-family: 'Open Sans Condensed', sans-serif;
+  font-size:85pt;
+  background-color:$background-color;
+  text-align:center;
+  line-height:1.2em;
+  padding-top:70px;
+}
+.dashed-shadow{
+  position:relative;
+  top:$distance;
+  left:$distance;
+  display:inline-block;
+  color:$shadow-color;
+}
+.dashed-shadow:before{
+  content:" ";
+  display:block;
+
+  position:absolute;
+  $bleeding-horizontal:10px;
+  $bleeding-vertical:0px;
+  top:-$bleeding-vertical - $distance;
+  left:-$bleeding-vertical - $distance;
+  bottom:-$bleeding-horizontal + $distance;
+  right:-$bleeding-horizontal + $distance;
+  z-index:1;
+  $color:$background-color;
+  $size:$strips-ratio/2;
+  $halfSize:$size/2;
+  $p1:$halfSize;
+  $p2:50%-$halfSize;
+  $p3:50%+$halfSize;
+  $p4:100%-$halfSize;
+  $transparent:transparentize($color,1);
+  @include background-image(linear-gradient($strips-angle,$color $p1, $transparent $p1, $transparent $p2,$color $p2, $color $p3, $transparent $p3, $transparent $p4, $color $p4));
+  background-size:$strips-size $strips-size;
+  @if($animate){
+    animation:dash-animation 30s infinite linear;
+  }
+  @if($fixed){
+    background-attachment:fixed;
+  }
+}
+.dashed-shadow:hover:before{
+  animation:dash-animation 30s infinite linear;
+}
+
+.dashed-shadow:after{
+  z-index:2;
+  content:attr(data-text);
+  position:absolute;
+  left:-$distance;
+  top:-$distance;
+  color:$foreground-color;
+  text-shadow:$cut-distance $cut-distance $background-color;
+}
+
+//fancy stuff - just useless fluff, don't mind from here onwards
+
+.hello{
+  font-family:'Cookie',cursive;
+  font-size:140pt;
+}
+.sorta-block{
+  font-size:50pt;
+  line-height:1.1em;
+  @include transform(skew(0,-5deg));
+  z-index:3;
+  position:relative;
+  margin-top:20px;
+  margin-bottom:10px;
+}
+.sorta{
+  border-top:4px solid $foreground-color;
+  border-bottom:4px solid $foreground-color;
+
+  text-transform:uppercase;
+  z-index:3;
+  //position:relative;
+  //display:block;
+  //width:300px;
+  font-style:italic;
+}
+.hipsterish{
+   font-family: 'Sancreek', cursive;
+    font-size:70pt;
+}
+.dashed-shadow-text{
+  font-size:140pt;
+  line-height:0.7em;
+  //left:-10px;
+}
+.shadow{
+  font-size:120pt;
+  line-height:0.8em;
+}

shared/static/css/_filters.scss

@@ -1,3 +1,4 @@
+ // main: global.scss
 #filter_form {
     .form-group {
         .col-md-3, .col-md-9 {

shared/static/css/_forms.scss

@@ -1,3 +1,4 @@
+ // main: global.scss
 @mixin active {
     &:active,
     &.active {

shared/static/css/_header.scss

@@ -1,15 +1,14 @@
-/* BANNER */
+ // main: global.scss
-
 .strong-banner {
   padding-top       : 20px;
   padding-bottom    : 10px ;
-  background-color  : $main_bold_color;
+  background-color  : $header-background;
-  color: $second_bold_color;
+  color: $header-color;
 }
 
 
 .navbar-inverse {
-  background-color  : $main_bold_color;
+  background-color  : $header-background;
   background-color : transparent ;
   border-style	   : none ;
     .navbar-nav {
@@ -17,7 +16,7 @@
         & > .open > a:focus,
         & > .open > a:hover {
             color: #fff;
-            background-color: $main_soft_color;
+            background-color: $header-second-backgroud;
         }
     }
 }
@@ -27,7 +26,7 @@
     padding : 0px ;
 
     /* only < 768px*/
-    background-color  : $main_soft_color;
+    background-color  : $header-second-backgroud;
     padding-left: 25px;
     margin-left: -15px;
     margin-right: -15px;

shared/static/css/_messages.scss

@@ -1,3 +1,4 @@
+ // main: global.scss
 .message-info {
     color           : #31708f;
     background-color: #d9edf7;

shared/static/css/_tree.scss

@@ -1,3 +1,4 @@
+ // main: global.scss
 .tree {
     font-size:large;
     ul, li {
@@ -35,6 +36,3 @@
 
     }
 }
-
-
-

shared/static/css/_variables.scss

@@ -0,0 +1,99 @@
+ // main: global.scss
+$main_c7: #375362;
+$main_c6: #4F778C;
+$main_c5: #5D8CA6;
+$main_c3: #BDD2DE;
+$main_c1: #F0FAFF;
+
+$neutral_c2 : #F2EDDC;
+$neutral_c1: #FFFBEF;
+
+$activity_c8: #4FADB8;
+$activity_c7: #5ED1DC;
+$activity_c3: #CAE4E7;
+
+$event_c8: #3488A6;
+$event_c7: #3999BA;
+$event_c3: #AAD5E2;
+
+$todo_c8: #F19F5D;
+$todo_c7: #FF9C4D;
+$todo_c3: #FFDEBC;
+
+$equipment_c8: #E75571;
+$equipment_c7: #FF5C79;
+$equipment_c3: #FECAD6;
+
+$staff_c8: #3BAD89;
+$staff_c7: #42C2A2;
+$staff_c3: #A9E1D7;
+
+/* LEGACY COLORS*/
+$main_bold_color: #FF6969;
+$main_soft_color: #FF9191;
+$main_white_color: #FFEBEB;
+
+$second_bold_color: #FFB363;
+$second_soft_color: #FFC282;
+$second_white_color: #FFF5EB;
+
+$third_bold_color: #48B0C7;
+$third_soft_color: #8FD4E3;
+$third_white_color: #DCEAED;
+
+/* COLORS */
+/* Header */
+$header-background: $main_c7;
+$header-second-backgroud: $main_c5;
+$header-color: white;
+$underline-brand: $equipment_c7;
+
+/* Général */
+$html-background: $neutral_c1;
+$content-background: $neutral_c1;
+$content-border: $main_c7;
+$aside-background: $main_c7;
+$aside-inverted-background: $main_c5;
+
+$title_border: $main_c7;
+
+/* Le reste */
+$btn-font-color: white;
+$btn-bg-base: $main_bold_color;
+$btn-bg-special: $main_soft_color;
+$btn-border: $main_bold_color;
+
+$yes_color: #55C487;
+$no_color: #E36268;
+$dunno_color: #5599C4;
+
+/* Titres */
+$h1_background: $main_c6;
+$h2_background: $main_c3;
+$h3_background: $main_c1;
+
+$h1_background_activity: $activity_c8;
+$h2_background_activity: $activity_c7;
+$h3_background_activity: $main_c1;
+
+$h1_background_event: $event_c8;
+$h2_background_event: $event_c7;
+$h3_background_event: $main_c1;
+
+$h1_background_todo: $todo_c8;
+$h2_background_todo: $todo_c7;
+$h3_background_todo: $main_c1;
+
+$h1_background_equipment: $equipment_c8;
+$h2_background_equipment: $equipment_c7;
+$h3_background_equipment: $main_c1;
+
+$h1_background_staff: $staff_c8;
+$h2_background_staff: $staff_c7;
+$h3_background_staff: $main_c1;
+
+/* FONTS */
+$font_brand:'Lily Script One', cursive;
+$font_nav:'Work Sans', cursive;
+$font_bold:'Capriola', sans-serif;
+$font_normal:'Saira Semi Condensed', sans-serif;

shared/static/css/global.css

@@ -1,389 +0,0 @@
-@charset "UTF-8";
-/*NE PAS MODIFIER LE FICHIER .CSS, MAIS PLUTÔT LE
- FICHIER .SCSS */
-/* COLORS */
-/* FONTS */
-.message-info {
-  color: #31708f;
-  background-color: #d9edf7;
-  border-color: #bce8f1; }
-
-.message-success {
-  color: #3c763d;
-  background-color: #dff0d8;
-  border-color: #d6e9c6; }
-
-.message-warning {
-  color: #8a6d3b;
-  background-color: #fcf8e3;
-  border-color: #faebcc; }
-
-.message-error {
-  color: #a94442;
-  background-color: #f2dede;
-  border-color: #ebccd1; }
-
-.alert {
-  margin-bottom: 0; }
-
-/* BANNER */
-.strong-banner {
-  padding-top: 20px;
-  padding-bottom: 10px;
-  background-color: #FF6969;
-  color: #FFB363; }
-
-.navbar-inverse {
-  background-color: #FF6969;
-  background-color: transparent;
-  border-style: none; }
-  .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:focus, .navbar-inverse .navbar-nav > .open > a:hover {
-    color: #fff;
-    background-color: #FF9191; }
-
-.navbar-collapse {
-  border-top: 0px solid transparent;
-  padding: 0px;
-  /* only < 768px*/
-  background-color: #FF9191;
-  padding-left: 25px;
-  margin-left: -15px;
-  margin-right: -15px; }
-  @media (min-width: 768px) {
-    .navbar-collapse {
-      background-color: transparent;
-      padding-left: 0px;
-      margin-left: 0px;
-      margin-right: 0px; } }
-
-.navbar-nav {
-  width: 100%; }
-  @media (min-width: 768px) {
-    .navbar-nav {
-      float: right;
-      width: auto; } }
-
-.navbar-inverse {
-  /* BRAND */
-  /* ICONE */
-  /* LINKS */ }
-  .navbar-inverse .navbar-brand, .navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus {
-    color: white;
-    font-family: "Lily Script One", cursive;
-    font-size: xx-large;
-    border-bottom: 5px solid #FFC282; }
-  .navbar-inverse .navbar-toggle, .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
-    background-color: #FFB363;
-    border-color: #FFB363; }
-  .navbar-inverse .navbar-toggle .icon-bar {
-    background-color: #FFF5EB; }
-  .navbar-inverse .navbar-nav > li > a, .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
-    font-family: "Work Sans", cursive;
-    font-size: large;
-    color: #FFB363;
-    background: transparent; }
-    @media (min-width: 768px) {
-      .navbar-inverse .navbar-nav > li > a, .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
-        color: #FFF5EB; } }
-
-.btn-primary {
-  /**
-   * This mixins allows defining color-related properties of buttons.
-   *
-   * It sets the following properties:
-   *   color: $color, except for disabled-like buttons.
-   *   border-color: $border.
-   *   background-color: Depending on button state:
-   *     - Default, disabled:
-   *         $background-base
-   *     - Hovered, focused, actived, responsible of an opened dropdown:
-   *         (one is sufficent)
-   *         $background-special
-   *
-   * ## Bootstrap compatibility
-   *
-   * This mixin can be used to replace colors behaviors of Bootstrap buttons.
-   * Indeed, this mixin aims to replace each definition done by the
-   * 'button-variant' Bootstrap mixin.
-   *
-   */
-  color: white;
-  background-color: #FF6969;
-  border-color: #FF6969;
-  /**
-   * This mixin applies content if the button is in at least one of the
-   * following states:
-   *
-   * - hovered,
-   * - focused,
-   * - actived,
-   * - is responsible of an opened dropdown.
-   *
-   * Where possible, state is checked from class attribute and
-   * :pseudo-classes.
-   *
-   * ## Bootstrap compatibility
-   *
-   * If content defines 'color', 'background-color' and 'border', it is safe
-   * to use this mixin with Bootstrap buttons as it will overrides all
-   * Bootstrap color defaults of the previous cases.
-   * To be precise, this covers all special important-like cases of the
-   * Bootstrap mixin 'button-variant' (except the 'disabled' case).
-   *
-   */ }
-  .btn-primary:focus, .btn-primary.focus, .btn-primary:hover {
-    color: white;
-    background-color: #FF9191;
-    border-color: #FF6969; }
-  .btn-primary:active, .btn-primary.active {
-    color: white;
-    background-color: #FF9191;
-    border-color: #FF6969; }
-    .btn-primary:active:focus, .btn-primary:active.focus, .btn-primary:active:hover, .btn-primary.active:focus, .btn-primary.active.focus, .btn-primary.active:hover {
-      color: white;
-      background-color: #FF9191;
-      border-color: #FF6969; }
-  .open > .btn-primary.dropdown-toggle {
-    color: white;
-    background-color: #FF9191;
-    border-color: #FF6969; }
-    .open > .btn-primary.dropdown-toggle:focus, .open > .btn-primary.dropdown-toggle.focus, .open > .btn-primary.dropdown-toggle:hover {
-      color: white;
-      background-color: #FF9191;
-      border-color: #FF6969; }
-  .btn-primary.disabled:focus, .btn-primary.disabled.focus, .btn-primary.disabled:hover, .btn-primary[disabled]:focus, .btn-primary[disabled].focus, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary.focus, fieldset[disabled] .btn-primary:hover {
-    background-color: #FF6969;
-    border-color: #FF6969; }
-  .btn-primary .badge {
-    color: #FF6969;
-    background-color: white; }
-
-form#filter_form .form-group {
-  padding-right: 20px; }
-form#filter_form ul.form-control {
-  background-color: transparent;
-  border: none;
-  box-shadow: none; }
-
-.tree {
-  font-size: large; }
-  .tree ul, .tree li {
-    position: relative; }
-  .tree ul {
-    list-style: none;
-    padding-left: 32px; }
-  .tree li::before,
-  .tree li::after {
-    content: "";
-    position: absolute;
-    left: -12px; }
-  .tree li::before {
-    border-top: 3px solid #FFC282;
-    top: 9px;
-    width: 8px;
-    height: 0; }
-  .tree li::after {
-    border-left: 3px solid #FFC282;
-    height: 100%;
-    width: 0px;
-    top: 2px; }
-  .tree ul > li:last-child::after {
-    height: 8px; }
-
-#filter_form .form-group .col-md-3, #filter_form .form-group .col-md-9 {
-  float: none; }
-#filter_form .form-group ul.form-control {
-  padding-left: 15px;
-  list-style: none;
-  height: auto; }
-  #filter_form .form-group ul.form-control a.selected {
-    text-decoration: underline;
-    color: #c40000; }
-
-/* MISE EN FORME GÉNÉRALE */
-html {
-  height: 100%;
-  background-color: #DCEAED; }
-
-body {
-  font-family: "Saira Semi Condensed", sans-serif;
-  font-size: medium; }
-
-#principal {
-  background-color: #DCEAED; }
-
-/*MAIN*/
-main {
-  background-color: white;
-  margin-top: 0px;
-  padding: 15px; }
-  main a {
-    color: #FF6969; }
-    main a:hover, main a:active, main a:focus {
-      color: #FF6969; }
-  main h1 {
-    border-bottom: 7px solid #FFB363;
-    padding-bottom: 5px;
-    font-family: "Capriola", sans-serif;
-    font-weight: 600; }
-  main h2 {
-    border-bottom: 2px solid #FF6969;
-    color: #FF6969;
-    padding-bottom: 5px;
-    font-family: "Capriola", sans-serif;
-    font-weight: 600; }
-
-/*ASIDE*/
-aside {
-  background-color: #FFC282;
-  color: white;
-  margin-top: 0px;
-  padding: 0px !important; }
-  aside a {
-    color: #FF9191; }
-    aside a:hover, aside a:active, aside a:focus {
-      color: #FF9191; }
-  aside code {
-    color: white;
-    background-color: #FFB363; }
-  aside .heading {
-    padding: 8px 15px;
-    font-size: 32px;
-    line-height: 1.3;
-    text-align: center; }
-    aside .heading.inverted {
-      background-color: #FFF5EB;
-      color: black; }
-    aside .heading.small {
-      font-size: 25px; }
-      aside .heading.small .sub {
-        font-size: 0.7em;
-        font-weight: normal; }
-    aside .heading .sub {
-      font-size: 0.7em;
-      font-weight: normal; }
-    aside .heading.separator {
-      border-bottom-color: #FF9191;
-      border-bottom-style: solid; }
-  aside .text {
-    padding: 15px; }
-    aside .text.inverted {
-      background-color: #FFF5EB;
-      color: black; }
-
-@media (min-width: 768px) {
-  main {
-    margin-top: 20px; }
-
-  aside {
-    margin-top: 20px; } }
-hr {
-  border-top: 1px solid #FFB363; }
-
-span.vsep {
-  padding-left: 5px;
-  padding-right: 5px; }
-
-div.tag-list {
-  margin-top: 20px; }
-
-code {
-  font-size: small; }
-
-.module-list {
-  display: flex;
-  align-items: stretch;
-  flex-wrap: wrap; }
-
-a.module {
-  background-color: #FFB363;
-  color: #FFF5EB;
-  padding: 20px 40px;
-  margin: 5px;
-  border-bottom-color: #FF9191;
-  border-bottom-style: solid;
-  font-size: large;
-  display: block; }
-  a.module:hover, a.module:active, a.module:focus {
-    color: #FFF5EB;
-    background-color: #FFC282;
-    text-decoration: none; }
-
-.collapsible {
-  background-color: #777;
-  color: white;
-  cursor: pointer;
-  padding: 18px;
-  width: 100%;
-  border: none;
-  text-align: left;
-  outline: none;
-  font-size: 15px; }
-  .collapsible:after {
-    content: '\002B';
-    color: white;
-    font-weight: bold;
-    float: right;
-    margin-left: 5px; }
-  .collapsible:hover {
-    background-color: #555; }
-  .collapsible h3 {
-    margin-top: 0px;
-    margin-bottom: 0px;
-    display: inline-block; }
-
-.active {
-  background-color: #555; }
-  .active:after {
-    content: "\2212"; }
-
-.content {
-  padding: 8px 18px;
-  display: none;
-  background-color: #f1f1f1; }
-  .content.fluid {
-    padding: 0px 0px;
-    background-color: transparent; }
-  .content h4 {
-    font-size: x-large;
-    font-weight: bold;
-    display: inline-block;
-    margin: 0px 0px; }
-
-.planning .activity {
-  padding: 8px 18px;
-  padding-top: 8px;
-  padding-bottom: 12px;
-  border-left: none;
-  border-right: 6px solid #FF9191; }
-  .planning .activity.inverted {
-    border-left: 6px solid #FF9191;
-    border-right: none; }
-  .planning .activity .activity-title {
-    font-size: large; }
-
-.glyphicon.yes {
-  color: #55C487 !important; }
-.glyphicon.no {
-  color: #E36268 !important; }
-.glyphicon.dunno {
-  color: #5599C4 !important; }
-
-.sending-request {
-  position: relative; }
-  .sending-request:after {
-    content: "Chargement...";
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background: #fff;
-    opacity: 0.8;
-    color: #777;
-    text-align: center;
-    box-sizing: border-box;
-    z-index: 5;
-    top: 0;
-    left: 0;
-    padding: 8%; }
-
-/*# sourceMappingURL=global.css.map */

shared/static/css/global.css

@@ -0,0 +1 @@
+global.min.css

shared/static/css/global.scss

@@ -1,16 +1,17 @@
 /*NE PAS MODIFIER LE FICHIER .CSS, MAIS PLUTÔT LE
  FICHIER .SCSS */
-@import 'variables';
+@import '_variables';
-@import 'messages';
+@import '_messages';
-@import 'header';
+@import '_header';
-@import 'forms';
+@import '_forms';
-@import 'tree';
+@import '_tree';
-@import 'filters';
+@import '_filters';
+//@import '_dashed-shadows';
 
 /* MISE EN FORME GÉNÉRALE */
 html {
     height  : 100% ;
-    background-color: $third_white_color;
+    background-color: $html-background;
 }
 
 body {
@@ -19,15 +20,112 @@ body {
 }
 
 #principal {
-    background-color: $third_white_color;
+    background-color: $html-background;
 }
 
 /*MAIN*/
 main {
-    background-color:white;
+    background-color:$content-background;
+    border-width: 2px;
+    border-color: $content-border;
+    border-style: none;
+    border-collapse: collapse;
+    display: table-cell;
     margin-top:0px;
-    padding: 15px;
+    padding: 0px;
 
+    .fuid, h1, h2, h3 {
+      margin-left: -15px;
+      margin-right: -15px;
+      margin-top: 0px;
+      margin-bottom: 0px;
+    }
+    h1, h2, h3 {
+      margin-top: -2px;
+      margin-bottom: -2px;
+      margin-left: -17px;
+      margin-right: -17px;
+      color: white;
+      padding-left: 15px;
+      padding-right: 15px;
+    }
+    h1 {
+        font-family: $font_bold;
+        font-weight: 600;
+        padding-bottom: 10px;
+        padding-top: 15px;
+
+        background-color: $h1_background;
+        &.activity {
+          background-color: $h1_background_activity;
+        }
+        &.event {
+          background-color: $h1_background_event;
+        }
+        &.todo {
+          background-color: $h1_background_todo;
+        }
+        &.equipment {
+          background-color: $h1_background_equipment;
+        }
+        &.staff {
+          background-color: $h1_background_staff;
+        }
+    }
+    h2, h3 {
+        border-bottom   : 2px solid $main_c5;
+        padding-bottom  : 5px ;
+        padding-top: 10px;
+        font-family: $font_bold;
+        font-weight: 600;
+        font-size: x-large;
+
+        background-color: $h2_background;
+        &.activity {
+          background-color: $h2_background_activity;
+          border-color: $activity_c8;
+        }
+        &.event {
+          background-color: $h2_background_event;
+          border-color: $event_c8;
+        }
+        &.todo {
+          background-color: $h2_background_todo;
+          border-color: $todo_c8;
+        }
+        &.equipment {
+          background-color: $h2_background_equipment;
+          border-color: $equipment_c8;
+        }
+        &.staff {
+          background-color: $h2_background_staff;
+          border-color: $staff_c8;
+        }
+    }
+    h3 {
+        background-color: $h3_background;
+        color: $main_c6;
+        &.activity {
+          background-color: $h3_background_activity;
+          color: $activity_c7;
+        }
+        &.event {
+          background-color: $h3_background_event;
+          color: $event_c7;
+        }
+        &.todo {
+          background-color: $h3_background_todo;
+          color: $todo_c7;
+        }
+        &.equipment {
+          background-color: $h3_background_equipment;
+          color: $equipment_c7;
+        }
+        &.staff {
+          background-color: $h3_background_staff;
+          color: $staff_c7;
+        }
+    }
     a {
         color: $main_bold_color;
 
@@ -37,26 +135,17 @@ main {
             color : $main_bold_color;
         }
     }
-    h1 {
+
-        border-bottom   : 7px solid $second_bold_color;
+    .text {
-        padding-bottom  : 5px ;
+      padding: 15px;
-        font-family: $font_bold;
-        font-weight: 600;
-    }
-    h2 {
-        border-bottom   : 2px solid $main_bold_color;
-        color: $main_bold_color;
-        padding-bottom  : 5px ;
-        font-family: $font_bold;
-        font-weight: 600;
     }
 }
 
 /*ASIDE*/
 aside {
-    background-color:$second_soft_color;
+    background-color:$aside-background;
     color: white;
-    margin-top:0px;
+    margin-top: 0px;
     padding: 0px!important;
 
     a {
@@ -68,14 +157,16 @@ aside {
             color : $main_soft_color;
         }
     }
+
     code {
-        color: white;
+        color: $main_c7;
-        background-color: $second_bold_color;
+        background-color: $main_c3;
     }
+
     .heading {
         padding: 8px 15px;
-	font-size: 32px;
+      	font-size: 32px;
-	line-height: 1.3;
+      	line-height: 1.3;
         text-align:center;
 
         &.inverted {
@@ -102,6 +193,7 @@ aside {
             border-bottom-style: solid;
         }
     }
+
     .text {
         padding: 15px;
 
@@ -116,6 +208,7 @@ aside {
 @media (min-width: 768px) {
     main {
         margin-top:20px;
+        border-style: dashed;
     }
     aside {
         margin-top:20px;
@@ -141,27 +234,77 @@ code {
 }
 
 .module-list {
+    margin-top: 10px;
+    margin-bottom: 10px;
     display: flex;
     align-items: stretch;
     flex-wrap: wrap;
 }
 
 a.module {
-    background-color: $second_bold_color;
-    color: $second_white_color;
     padding: 20px 40px;
     margin: 5px;
-    border-bottom-color: $main_soft_color;
     border-bottom-style: solid;
     font-size: large;
     display: block;
 
+    border-bottom-color: $main_c7;
+    background-color: $main_c3;
+    color: $main_c7;
+
+
+    &.activity {
+      border-bottom-color: $activity_c8;
+      background-color: $activity_c3;
+      color: $activity_c8;
+    }
+
+    &.event {
+      border-bottom-color: $event_c8;
+      background-color: $event_c3;
+      color: $event_c8;
+    }
+
+    &.todo {
+      border-bottom-color: $todo_c8;
+      background-color: $todo_c3;
+      color: $todo_c8;
+    }
+
+    &.equipment {
+      border-bottom-color: $equipment_c8;
+      background-color: $equipment_c3;
+      color: $equipment_c8;
+    }
+
+    &.staff {
+      border-bottom-color: $staff_c8;
+      background-color: $staff_c3;
+      color: $staff_c8;
+    }
+
     &:hover,
     &:active,
     &:focus {
-        color: $second_white_color;
-        background-color: $second_soft_color;
         text-decoration: none;
+        color: $main_c1;
+        background-color: $main_c7;
+
+        &.activity {
+          background-color: $activity_c7;
+        }
+        &.event {
+          background-color: $event_c7;
+        }
+        &.equipment {
+          background-color: $equipment_c7;
+        }
+        &.todo {
+          background-color: $todo_c7;
+        }
+        &.staff {
+          background-color: $staff_c7;
+        }
     }
 }
 

shared/static/css/variables.scss

@@ -1,29 +0,0 @@
-/* COLORS */
-$main_bold_color: #FF6969;
-$main_soft_color: #FF9191;
-$main_white_color: #FFEBEB;
-
-$second_bold_color: #FFB363;
-$second_soft_color: #FFC282;
-$second_white_color: #FFF5EB;
-
-$third_bold_color: #48B0C7;
-$third_soft_color: #8FD4E3;
-$third_white_color: #DCEAED;
-
-
-$btn-font-color: white;
-$btn-bg-base: $main_bold_color;
-$btn-bg-special: $main_soft_color;
-$btn-border: $main_bold_color;
-$underline-brand: $second_soft_color;
-
-$yes_color: #55C487;
-$no_color: #E36268;
-$dunno_color: #5599C4;
-
-/* FONTS */
-$font_brand:'Lily Script One', cursive;
-$font_nav:'Work Sans', cursive;
-$font_bold:'Capriola', sans-serif;
-$font_normal:'Saira Semi Condensed', sans-serif;

shared/static/js/api-models.js

@@ -0,0 +1,36 @@
+/* Backbone models for the API */
+"use strict";
+var GE_API = new Object();
+
+GE_API.rootUrl = "/api/";
+
+GE_API.Event = Backbone.Model.extend({
+    rootUrl: GE_API.rootUrl + "event/",
+});
+
+GE_API.Events = Backbone.Collection.extend({
+    model: GE_API.Event,
+    url: GE_API.rootUrl + "event/"
+});
+
+GE_API.Place = Backbone.Model.extend({
+    rootUrl: function() {
+        if (this.get("event")) {
+            return GE_API.rootUrl + "event/" + this.get("event").id + "/place/";
+        } else {
+            return GE_API.rootUrl + "place/";
+        }
+    }
+});
+
+GE_API.Places = Backbone.Collection.extend({
+    url: function() {
+        if (this.event) {
+            return GE_API.rootUrl + "event/" + this.event + "/place/";
+        } else { 
+            return GE_API.rootUrl + "place/";
+        }
+    }
+});
+
+GE_API.Places = Backbone.Collection.

shared/static/new_css/global.css

@@ -0,0 +1,763 @@
+@charset "UTF-8";
+/*NE PAS MODIFIER LE FICHIER .CSS, MAIS PLUTÔT LE
+ FICHIER .SCSS */
+/* LEGACY COLORS*/
+/* COLORS */
+/* Header */
+/* Général */
+/* Le reste */
+/* Titres */
+/* FONTS */
+/* line 2, ../sass/_messages.scss */
+.message-info {
+  color: #31708f;
+  background-color: #d9edf7;
+  border-color: #bce8f1;
+}
+
+/* line 7, ../sass/_messages.scss */
+.message-success {
+  color: #3c763d;
+  background-color: #dff0d8;
+  border-color: #d6e9c6;
+}
+
+/* line 12, ../sass/_messages.scss */
+.message-warning {
+  color: #8a6d3b;
+  background-color: #fcf8e3;
+  border-color: #faebcc;
+}
+
+/* line 17, ../sass/_messages.scss */
+.message-error {
+  color: #a94442;
+  background-color: #f2dede;
+  border-color: #ebccd1;
+}
+
+/* line 22, ../sass/_messages.scss */
+.alert {
+  margin-bottom: 0;
+}
+
+/* line 2, ../sass/_header.scss */
+.strong-banner {
+  padding-top: 20px;
+  padding-bottom: 10px;
+  background-color: #375362;
+  color: white;
+}
+
+/* line 10, ../sass/_header.scss */
+.navbar-inverse {
+  background-color: #375362;
+  background-color: transparent;
+  border-style: none;
+}
+/* line 15, ../sass/_header.scss */
+.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:focus, .navbar-inverse .navbar-nav > .open > a:hover {
+  color: #fff;
+  background-color: #5D8CA6;
+}
+
+/* line 24, ../sass/_header.scss */
+.navbar-collapse {
+  border-top: 0px solid transparent;
+  padding: 0px;
+  /* only < 768px*/
+  background-color: #5D8CA6;
+  padding-left: 25px;
+  margin-left: -15px;
+  margin-right: -15px;
+}
+@media (min-width: 768px) {
+  /* line 24, ../sass/_header.scss */
+  .navbar-collapse {
+    background-color: transparent;
+    padding-left: 0px;
+    margin-left: 0px;
+    margin-right: 0px;
+  }
+}
+
+/* line 43, ../sass/_header.scss */
+.navbar-nav {
+  width: 100%;
+}
+@media (min-width: 768px) {
+  /* line 43, ../sass/_header.scss */
+  .navbar-nav {
+    float: right;
+    width: auto;
+  }
+}
+
+/* line 51, ../sass/_header.scss */
+.navbar-inverse {
+  /* BRAND */
+  /* ICONE */
+  /* LINKS */
+}
+/* line 54, ../sass/_header.scss */
+.navbar-inverse .navbar-brand, .navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus {
+  color: white;
+  font-family: "Lily Script One", cursive;
+  font-size: xx-large;
+  border-bottom: 5px solid #FF5C79;
+}
+/* line 65, ../sass/_header.scss */
+.navbar-inverse .navbar-toggle, .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
+  background-color: #FFB363;
+  border-color: #FFB363;
+}
+/* line 71, ../sass/_header.scss */
+.navbar-inverse .navbar-toggle .icon-bar {
+  background-color: #FFF5EB;
+}
+/* line 78, ../sass/_header.scss */
+.navbar-inverse .navbar-nav > li > a, .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
+  font-family: "Work Sans", cursive;
+  font-size: large;
+  color: #FFB363;
+  background: transparent;
+}
+@media (min-width: 768px) {
+  /* line 78, ../sass/_header.scss */
+  .navbar-inverse .navbar-nav > li > a, .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
+    color: #FFF5EB;
+  }
+}
+
+/* line 108, ../sass/_forms.scss */
+.btn-primary {
+  /**
+   * This mixins allows defining color-related properties of buttons.
+   *
+   * It sets the following properties:
+   *   color: $color, except for disabled-like buttons.
+   *   border-color: $border.
+   *   background-color: Depending on button state:
+   *     - Default, disabled:
+   *         $background-base
+   *     - Hovered, focused, actived, responsible of an opened dropdown:
+   *         (one is sufficent)
+   *         $background-special
+   *
+   * ## Bootstrap compatibility
+   *
+   * This mixin can be used to replace colors behaviors of Bootstrap buttons.
+   * Indeed, this mixin aims to replace each definition done by the
+   * 'button-variant' Bootstrap mixin.
+   *
+   */
+  color: white;
+  background-color: #FF6969;
+  border-color: #FF6969;
+  /**
+   * This mixin applies content if the button is in at least one of the
+   * following states:
+   *
+   * - hovered,
+   * - focused,
+   * - actived,
+   * - is responsible of an opened dropdown.
+   *
+   * Where possible, state is checked from class attribute and
+   * :pseudo-classes.
+   *
+   * ## Bootstrap compatibility
+   *
+   * If content defines 'color', 'background-color' and 'border', it is safe
+   * to use this mixin with Bootstrap buttons as it will overrides all
+   * Bootstrap color defaults of the previous cases.
+   * To be precise, this covers all special important-like cases of the
+   * Bootstrap mixin 'button-variant' (except the 'disabled' case).
+   *
+   */
+}
+/* line 10, ../sass/_forms.scss */
+.btn-primary:focus, .btn-primary.focus, .btn-primary:hover {
+  color: white;
+  background-color: #FF9191;
+  border-color: #FF6969;
+}
+/* line 3, ../sass/_forms.scss */
+.btn-primary:active, .btn-primary.active {
+  color: white;
+  background-color: #FF9191;
+  border-color: #FF6969;
+}
+/* line 10, ../sass/_forms.scss */
+.btn-primary:active:focus, .btn-primary:active.focus, .btn-primary:active:hover, .btn-primary.active:focus, .btn-primary.active.focus, .btn-primary.active:hover {
+  color: white;
+  background-color: #FF9191;
+  border-color: #FF6969;
+}
+/* line 26, ../sass/_forms.scss */
+.open > .btn-primary.dropdown-toggle {
+  color: white;
+  background-color: #FF9191;
+  border-color: #FF6969;
+}
+/* line 10, ../sass/_forms.scss */
+.open > .btn-primary.dropdown-toggle:focus, .open > .btn-primary.dropdown-toggle.focus, .open > .btn-primary.dropdown-toggle:hover {
+  color: white;
+  background-color: #FF9191;
+  border-color: #FF6969;
+}
+/* line 10, ../sass/_forms.scss */
+.btn-primary.disabled:focus, .btn-primary.disabled.focus, .btn-primary.disabled:hover, .btn-primary[disabled]:focus, .btn-primary[disabled].focus, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary.focus, fieldset[disabled] .btn-primary:hover {
+  background-color: #FF6969;
+  border-color: #FF6969;
+}
+/* line 102, ../sass/_forms.scss */
+.btn-primary .badge {
+  color: #FF6969;
+  background-color: white;
+}
+
+/* line 113, ../sass/_forms.scss */
+form#filter_form .form-group {
+  padding-right: 20px;
+}
+/* line 117, ../sass/_forms.scss */
+form#filter_form ul.form-control {
+  background-color: transparent;
+  border: none;
+  box-shadow: none;
+}
+
+/* line 2, ../sass/_tree.scss */
+.tree {
+  font-size: large;
+}
+/* line 4, ../sass/_tree.scss */
+.tree ul, .tree li {
+  position: relative;
+}
+/* line 8, ../sass/_tree.scss */
+.tree ul {
+  list-style: none;
+  padding-left: 32px;
+}
+/* line 13, ../sass/_tree.scss */
+.tree li::before,
+.tree li::after {
+  content: "";
+  position: absolute;
+  left: -12px;
+}
+/* line 19, ../sass/_tree.scss */
+.tree li::before {
+  border-top: 3px solid #FFC282;
+  top: 9px;
+  width: 8px;
+  height: 0;
+}
+/* line 25, ../sass/_tree.scss */
+.tree li::after {
+  border-left: 3px solid #FFC282;
+  height: 100%;
+  width: 0px;
+  top: 2px;
+}
+/* line 31, ../sass/_tree.scss */
+.tree ul > li:last-child::after {
+  height: 8px;
+}
+
+/* line 4, ../sass/_filters.scss */
+#filter_form .form-group .col-md-3, #filter_form .form-group .col-md-9 {
+  float: none;
+}
+/* line 7, ../sass/_filters.scss */
+#filter_form .form-group ul.form-control {
+  padding-left: 15px;
+  list-style: none;
+  height: auto;
+}
+/* line 12, ../sass/_filters.scss */
+#filter_form .form-group ul.form-control a.selected {
+  text-decoration: underline;
+  color: #c40000;
+}
+
+/* line 18, ../sass/_dashed-shadows.scss */
+.dashed-shadow {
+  position: relative;
+  top: 8px;
+  left: 8px;
+  display: inline-block;
+  color: #ba9186;
+}
+
+/* line 25, ../sass/_dashed-shadows.scss */
+.dashed-shadow:before {
+  content: " ";
+  display: block;
+  position: absolute;
+  top: -8px;
+  left: -8px;
+  bottom: -2px;
+  right: -2px;
+  z-index: 1;
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIxMi41JSIgc3RvcC1jb2xvcj0iI2U4ZTNjNyIvPjxzdG9wIG9mZnNldD0iMTIuNSUiIHN0b3AtY29sb3I9IiNlOGUzYzciIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIzNy41JSIgc3RvcC1jb2xvcj0iI2U4ZTNjNyIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjM3LjUlIiBzdG9wLWNvbG9yPSIjZThlM2M3Ii8+PHN0b3Agb2Zmc2V0PSI2Mi41JSIgc3RvcC1jb2xvcj0iI2U4ZTNjNyIvPjxzdG9wIG9mZnNldD0iNjIuNSUiIHN0b3AtY29sb3I9IiNlOGUzYzciIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSI4Ny41JSIgc3RvcC1jb2xvcj0iI2U4ZTNjNyIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9Ijg3LjUlIiBzdG9wLWNvbG9yPSIjZThlM2M3Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
+  background-size: 100%;
+  background-image: -moz-linear-gradient(45deg, #e8e3c7 12.5%, rgba(232, 227, 199, 0) 12.5%, rgba(232, 227, 199, 0) 37.5%, #e8e3c7 37.5%, #e8e3c7 62.5%, rgba(232, 227, 199, 0) 62.5%, rgba(232, 227, 199, 0) 87.5%, #e8e3c7 87.5%);
+  background-image: -webkit-linear-gradient(45deg, #e8e3c7 12.5%, rgba(232, 227, 199, 0) 12.5%, rgba(232, 227, 199, 0) 37.5%, #e8e3c7 37.5%, #e8e3c7 62.5%, rgba(232, 227, 199, 0) 62.5%, rgba(232, 227, 199, 0) 87.5%, #e8e3c7 87.5%);
+  background-image: linear-gradient(45deg, #e8e3c7 12.5%, rgba(232, 227, 199, 0) 12.5%, rgba(232, 227, 199, 0) 37.5%, #e8e3c7 37.5%, #e8e3c7 62.5%, rgba(232, 227, 199, 0) 62.5%, rgba(232, 227, 199, 0) 87.5%, #e8e3c7 87.5%);
+  background-size: 6px 6px;
+}
+
+/* line 54, ../sass/_dashed-shadows.scss */
+.dashed-shadow:hover:before {
+  animation: dash-animation 30s infinite linear;
+}
+
+/* line 58, ../sass/_dashed-shadows.scss */
+.dashed-shadow:after {
+  z-index: 2;
+  content: attr(data-text);
+  position: absolute;
+  left: -8px;
+  top: -8px;
+  color: #b85b3f;
+  text-shadow: 3px 3px #e8e3c7;
+}
+
+/* MISE EN FORME GÉNÉRALE */
+/* line 12, ../sass/global.scss */
+html {
+  height: 100%;
+  background-color: #FFFBEF;
+}
+
+/* line 17, ../sass/global.scss */
+body {
+  font-family: "Saira Semi Condensed", sans-serif;
+  font-size: medium;
+}
+
+/* line 22, ../sass/global.scss */
+#principal {
+  background-color: #FFFBEF;
+}
+
+/*MAIN*/
+/* line 27, ../sass/global.scss */
+main {
+  background-color: #FFFBEF;
+  border-width: 2px;
+  border-color: #375362;
+  border-style: none;
+  border-collapse: collapse;
+  display: table-cell;
+  margin-top: 0px;
+  padding: 0px;
+}
+/* line 37, ../sass/global.scss */
+main .fuid, main h1, main h2, main h3 {
+  margin-left: -15px;
+  margin-right: -15px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+/* line 43, ../sass/global.scss */
+main h1, main h2, main h3 {
+  margin-top: -2px;
+  margin-bottom: -2px;
+  margin-left: -17px;
+  margin-right: -17px;
+  color: white;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+/* line 52, ../sass/global.scss */
+main h1 {
+  font-family: "Capriola", sans-serif;
+  font-weight: 600;
+  padding-bottom: 10px;
+  padding-top: 15px;
+  background-color: #4F778C;
+}
+/* line 59, ../sass/global.scss */
+main h1.activity {
+  background-color: #4FADB8;
+}
+/* line 62, ../sass/global.scss */
+main h1.event {
+  background-color: #3488A6;
+}
+/* line 65, ../sass/global.scss */
+main h1.todo {
+  background-color: #F19F5D;
+}
+/* line 68, ../sass/global.scss */
+main h1.equipment {
+  background-color: #E75571;
+}
+/* line 71, ../sass/global.scss */
+main h1.staff {
+  background-color: #3BAD89;
+}
+/* line 75, ../sass/global.scss */
+main h2, main h3 {
+  border-bottom: 2px solid #5D8CA6;
+  padding-bottom: 5px;
+  padding-top: 10px;
+  font-family: "Capriola", sans-serif;
+  font-weight: 600;
+  font-size: x-large;
+  background-color: #BDD2DE;
+}
+/* line 84, ../sass/global.scss */
+main h2.activity, main h3.activity {
+  background-color: #5ED1DC;
+  border-color: #4FADB8;
+}
+/* line 88, ../sass/global.scss */
+main h2.event, main h3.event {
+  background-color: #3999BA;
+  border-color: #3488A6;
+}
+/* line 92, ../sass/global.scss */
+main h2.todo, main h3.todo {
+  background-color: #FF9C4D;
+  border-color: #F19F5D;
+}
+/* line 96, ../sass/global.scss */
+main h2.equipment, main h3.equipment {
+  background-color: #FF5C79;
+  border-color: #E75571;
+}
+/* line 100, ../sass/global.scss */
+main h2.staff, main h3.staff {
+  background-color: #42C2A2;
+  border-color: #3BAD89;
+}
+/* line 105, ../sass/global.scss */
+main h3 {
+  background-color: #F0FAFF;
+  color: #4F778C;
+}
+/* line 108, ../sass/global.scss */
+main h3.activity {
+  background-color: #F0FAFF;
+  color: #5ED1DC;
+}
+/* line 112, ../sass/global.scss */
+main h3.event {
+  background-color: #F0FAFF;
+  color: #3999BA;
+}
+/* line 116, ../sass/global.scss */
+main h3.todo {
+  background-color: #F0FAFF;
+  color: #FF9C4D;
+}
+/* line 120, ../sass/global.scss */
+main h3.equipment {
+  background-color: #F0FAFF;
+  color: #FF5C79;
+}
+/* line 124, ../sass/global.scss */
+main h3.staff {
+  background-color: #F0FAFF;
+  color: #42C2A2;
+}
+/* line 129, ../sass/global.scss */
+main a {
+  color: #FF6969;
+}
+/* line 132, ../sass/global.scss */
+main a:hover, main a:active, main a:focus {
+  color: #FF6969;
+}
+/* line 139, ../sass/global.scss */
+main .text {
+  padding: 15px;
+}
+
+/*ASIDE*/
+/* line 145, ../sass/global.scss */
+aside {
+  background-color: #375362;
+  color: white;
+  margin-top: 0px;
+  padding: 0px !important;
+}
+/* line 151, ../sass/global.scss */
+aside a {
+  color: #FF9191;
+}
+/* line 154, ../sass/global.scss */
+aside a:hover, aside a:active, aside a:focus {
+  color: #FF9191;
+}
+/* line 161, ../sass/global.scss */
+aside code {
+  color: #375362;
+  background-color: #BDD2DE;
+}
+/* line 166, ../sass/global.scss */
+aside .heading {
+  padding: 8px 15px;
+  font-size: 32px;
+  line-height: 1.3;
+  text-align: center;
+}
+/* line 172, ../sass/global.scss */
+aside .heading.inverted {
+  background-color: #FFF5EB;
+  color: black;
+}
+/* line 177, ../sass/global.scss */
+aside .heading.small {
+  font-size: 25px;
+}
+/* line 180, ../sass/global.scss */
+aside .heading.small .sub {
+  font-size: 0.7em;
+  font-weight: normal;
+}
+/* line 186, ../sass/global.scss */
+aside .heading .sub {
+  font-size: 0.7em;
+  font-weight: normal;
+}
+/* line 191, ../sass/global.scss */
+aside .heading.separator {
+  border-bottom-color: #FF9191;
+  border-bottom-style: solid;
+}
+/* line 197, ../sass/global.scss */
+aside .text {
+  padding: 15px;
+}
+/* line 200, ../sass/global.scss */
+aside .text.inverted {
+  background-color: #FFF5EB;
+  color: black;
+}
+
+@media (min-width: 768px) {
+  /* line 209, ../sass/global.scss */
+  main {
+    margin-top: 20px;
+    border-style: dashed;
+  }
+
+  /* line 213, ../sass/global.scss */
+  aside {
+    margin-top: 20px;
+  }
+}
+/* line 218, ../sass/global.scss */
+hr {
+  border-top: 1px solid #FFB363;
+}
+
+/* line 223, ../sass/global.scss */
+span.vsep {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+/* line 228, ../sass/global.scss */
+div.tag-list {
+  margin-top: 20px;
+}
+
+/* line 232, ../sass/global.scss */
+code {
+  font-size: small;
+}
+
+/* line 236, ../sass/global.scss */
+.module-list {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: stretch;
+  flex-wrap: wrap;
+}
+
+/* line 244, ../sass/global.scss */
+a.module {
+  padding: 20px 40px;
+  margin: 5px;
+  border-bottom-style: solid;
+  font-size: large;
+  display: block;
+  border-bottom-color: #375362;
+  background-color: #BDD2DE;
+  color: #375362;
+}
+/* line 256, ../sass/global.scss */
+a.module.activity {
+  border-bottom-color: #4FADB8;
+  background-color: #CAE4E7;
+  color: #4FADB8;
+}
+/* line 262, ../sass/global.scss */
+a.module.event {
+  border-bottom-color: #3488A6;
+  background-color: #AAD5E2;
+  color: #3488A6;
+}
+/* line 268, ../sass/global.scss */
+a.module.todo {
+  border-bottom-color: #F19F5D;
+  background-color: #FFDEBC;
+  color: #F19F5D;
+}
+/* line 274, ../sass/global.scss */
+a.module.equipment {
+  border-bottom-color: #E75571;
+  background-color: #FECAD6;
+  color: #E75571;
+}
+/* line 280, ../sass/global.scss */
+a.module.staff {
+  border-bottom-color: #3BAD89;
+  background-color: #A9E1D7;
+  color: #3BAD89;
+}
+/* line 286, ../sass/global.scss */
+a.module:hover, a.module:active, a.module:focus {
+  text-decoration: none;
+  color: #F0FAFF;
+  background-color: #375362;
+}
+/* line 293, ../sass/global.scss */
+a.module:hover.activity, a.module:active.activity, a.module:focus.activity {
+  background-color: #5ED1DC;
+}
+/* line 296, ../sass/global.scss */
+a.module:hover.event, a.module:active.event, a.module:focus.event {
+  background-color: #3999BA;
+}
+/* line 299, ../sass/global.scss */
+a.module:hover.equipment, a.module:active.equipment, a.module:focus.equipment {
+  background-color: #FF5C79;
+}
+/* line 302, ../sass/global.scss */
+a.module:hover.todo, a.module:active.todo, a.module:focus.todo {
+  background-color: #FF9C4D;
+}
+/* line 305, ../sass/global.scss */
+a.module:hover.staff, a.module:active.staff, a.module:focus.staff {
+  background-color: #42C2A2;
+}
+
+/* line 311, ../sass/global.scss */
+.collapsible {
+  background-color: #777;
+  color: white;
+  cursor: pointer;
+  padding: 18px;
+  width: 100%;
+  border: none;
+  text-align: left;
+  outline: none;
+  font-size: 15px;
+}
+/* line 322, ../sass/global.scss */
+.collapsible:after {
+  content: '\002B';
+  color: white;
+  font-weight: bold;
+  float: right;
+  margin-left: 5px;
+}
+/* line 330, ../sass/global.scss */
+.collapsible:hover {
+  background-color: #555;
+}
+/* line 334, ../sass/global.scss */
+.collapsible h3 {
+  margin-top: 0px;
+  margin-bottom: 0px;
+  display: inline-block;
+}
+
+/* line 341, ../sass/global.scss */
+.active {
+  background-color: #555;
+}
+/* line 344, ../sass/global.scss */
+.active:after {
+  content: "\2212";
+}
+
+/* line 348, ../sass/global.scss */
+.content {
+  padding: 8px 18px;
+  display: none;
+  background-color: #f1f1f1;
+}
+/* line 353, ../sass/global.scss */
+.content.fluid {
+  padding: 0px 0px;
+  background-color: transparent;
+}
+/* line 358, ../sass/global.scss */
+.content h4 {
+  font-size: x-large;
+  font-weight: bold;
+  display: inline-block;
+  margin: 0px 0px;
+}
+
+/* line 367, ../sass/global.scss */
+.planning .activity {
+  padding: 8px 18px;
+  padding-top: 8px;
+  padding-bottom: 12px;
+  border-left: none;
+  border-right: 6px solid #FF9191;
+}
+/* line 375, ../sass/global.scss */
+.planning .activity.inverted {
+  border-left: 6px solid #FF9191;
+  border-right: none;
+}
+/* line 380, ../sass/global.scss */
+.planning .activity .activity-title {
+  font-size: large;
+}
+
+/* line 387, ../sass/global.scss */
+.glyphicon.yes {
+  color: #55C487 !important;
+}
+/* line 390, ../sass/global.scss */
+.glyphicon.no {
+  color: #E36268 !important;
+}
+/* line 393, ../sass/global.scss */
+.glyphicon.dunno {
+  color: #5599C4 !important;
+}
+
+/* line 398, ../sass/global.scss */
+.sending-request {
+  position: relative;
+}
+/* line 401, ../sass/global.scss */
+.sending-request:after {
+  content: "Chargement...";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  opacity: 0.8;
+  color: #777;
+  text-align: center;
+  box-sizing: border-box;
+  z-index: 5;
+  top: 0;
+  left: 0;
+  padding: 8%;
+}

shared/static/new_css/global.scss

@@ -0,0 +1,416 @@
+/*NE PAS MODIFIER LE FICHIER .CSS, MAIS PLUTÔT LE
+ FICHIER .SCSS */
+@import '_variables';
+@import '_messages';
+@import '_header';
+@import '_forms';
+@import '_tree';
+@import '_filters';
+//i@import '_dashed-shadows';
+
+/* MISE EN FORME GÉNÉRALE */
+html {
+    height  : 100% ;
+    background-color: $html-background;
+}
+
+body {
+    font-family: $font_normal;
+    font-size: medium;
+}
+
+#principal {
+    background-color: $html-background;
+}
+
+/*MAIN*/
+main {
+    background-color:$content-background;
+    border-width: 2px;
+    border-color: $content-border;
+    border-style: none;
+    border-collapse: collapse;
+    display: table-cell;
+    margin-top:0px;
+    padding: 0px;
+
+    .fuid, h1, h2, h3 {
+      margin-left: -15px;
+      margin-right: -15px;
+      margin-top: 0px;
+      margin-bottom: 0px;
+    }
+    h1, h2, h3 {
+      margin-top: -2px;
+      margin-bottom: -2px;
+      margin-left: -17px;
+      margin-right: -17px;
+      color: white;
+      padding-left: 15px;
+      padding-right: 15px;
+    }
+    h1 {
+        font-family: $font_bold;
+        font-weight: 600;
+        padding-bottom: 10px;
+        padding-top: 15px;
+
+        background-color: $h1_background;
+        &.activity {
+          background-color: $h1_background_activity;
+        }
+        &.event {
+          background-color: $h1_background_event;
+        }
+        &.todo {
+          background-color: $h1_background_todo;
+        }
+        &.equipment {
+          background-color: $h1_background_equipment;
+        }
+        &.staff {
+          background-color: $h1_background_staff;
+        }
+    }
+    h2, h3 {
+        border-bottom   : 2px solid $main_c5;
+        padding-bottom  : 5px ;
+        padding-top: 10px;
+        font-family: $font_bold;
+        font-weight: 600;
+        font-size: x-large;
+
+        background-color: $h2_background;
+        &.activity {
+          background-color: $h2_background_activity;
+          border-color: $activity_c8;
+        }
+        &.event {
+          background-color: $h2_background_event;
+          border-color: $event_c8;
+        }
+        &.todo {
+          background-color: $h2_background_todo;
+          border-color: $todo_c8;
+        }
+        &.equipment {
+          background-color: $h2_background_equipment;
+          border-color: $equipment_c8;
+        }
+        &.staff {
+          background-color: $h2_background_staff;
+          border-color: $staff_c8;
+        }
+    }
+    h3 {
+        background-color: $h3_background;
+        color: $main_c6;
+        &.activity {
+          background-color: $h3_background_activity;
+          color: $activity_c7;
+        }
+        &.event {
+          background-color: $h3_background_event;
+          color: $event_c7;
+        }
+        &.todo {
+          background-color: $h3_background_todo;
+          color: $todo_c7;
+        }
+        &.equipment {
+          background-color: $h3_background_equipment;
+          color: $equipment_c7;
+        }
+        &.staff {
+          background-color: $h3_background_staff;
+          color: $staff_c7;
+        }
+    }
+    a {
+        color: $main_bold_color;
+
+        &:hover,
+        &:active,
+        &:focus {
+            color : $main_bold_color;
+        }
+    }
+
+    .text {
+      padding: 15px;
+    }
+}
+
+/*ASIDE*/
+aside {
+    background-color:$aside-background;
+    color: white;
+    margin-top: 0px;
+    padding: 0px!important;
+
+    a {
+        color: $main_soft_color;
+
+        &:hover,
+        &:active,
+        &:focus {
+            color : $main_soft_color;
+        }
+    }
+
+    code {
+        color: $main_c7;
+        background-color: $main_c3;
+    }
+
+    .heading {
+        padding: 8px 15px;
+      	font-size: 32px;
+      	line-height: 1.3;
+        text-align:center;
+
+        &.inverted {
+            background-color:$second_white_color;
+            color:black;
+        }
+
+        &.small {
+            font-size: 25px;
+
+            .sub {
+                font-size: 0.7em;
+                font-weight: normal;
+            }
+        }
+
+        .sub {
+            font-size: 0.7em;
+            font-weight: normal;
+        }
+
+        &.separator {
+            border-bottom-color: $main_soft_color;
+            border-bottom-style: solid;
+        }
+    }
+
+    .text {
+        padding: 15px;
+
+        &.inverted {
+            background-color:$second_white_color;
+            color:black;
+        }
+
+    }
+}
+
+@media (min-width: 768px) {
+    main {
+        margin-top:20px;
+        border-style: dashed;
+    }
+    aside {
+        margin-top:20px;
+    }
+}
+
+hr {
+  border-top : 1px solid $second_bold_color ;
+}
+
+
+span.vsep {
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+div.tag-list {
+    margin-top: 20px;
+}
+
+code {
+    font-size: small;
+}
+
+.module-list {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    display: flex;
+    align-items: stretch;
+    flex-wrap: wrap;
+}
+
+a.module {
+    padding: 20px 40px;
+    margin: 5px;
+    border-bottom-style: solid;
+    font-size: large;
+    display: block;
+
+    border-bottom-color: $main_c7;
+    background-color: $main_c3;
+    color: $main_c7;
+
+
+    &.activity {
+      border-bottom-color: $activity_c8;
+      background-color: $activity_c3;
+      color: $activity_c8;
+    }
+
+    &.event {
+      border-bottom-color: $event_c8;
+      background-color: $event_c3;
+      color: $event_c8;
+    }
+
+    &.todo {
+      border-bottom-color: $todo_c8;
+      background-color: $todo_c3;
+      color: $todo_c8;
+    }
+
+    &.equipment {
+      border-bottom-color: $equipment_c8;
+      background-color: $equipment_c3;
+      color: $equipment_c8;
+    }
+
+    &.staff {
+      border-bottom-color: $staff_c8;
+      background-color: $staff_c3;
+      color: $staff_c8;
+    }
+
+    &:hover,
+    &:active,
+    &:focus {
+        text-decoration: none;
+        color: $main_c1;
+        background-color: $main_c7;
+
+        &.activity {
+          background-color: $activity_c7;
+        }
+        &.event {
+          background-color: $event_c7;
+        }
+        &.equipment {
+          background-color: $equipment_c7;
+        }
+        &.todo {
+          background-color: $todo_c7;
+        }
+        &.staff {
+          background-color: $staff_c7;
+        }
+    }
+}
+
+.collapsible {
+    background-color: #777;
+    color: white;
+    cursor: pointer;
+    padding: 18px;
+    width: 100%;
+    border: none;
+    text-align: left;
+    outline: none;
+    font-size: 15px;
+
+    &:after {
+        content: '\002B';
+        color: white;
+        font-weight: bold;
+        float: right;
+        margin-left: 5px;
+    }
+
+    &:hover {
+        background-color: #555;
+    }
+
+    h3 {
+        margin-top: 0px;
+        margin-bottom: 0px;
+        display: inline-block;
+    }
+}
+
+.active {
+  background-color: #555;
+
+    &:after {
+        content: "\2212";
+    }
+}
+.content {
+    padding: 8px 18px;
+    display : none;
+    background-color: #f1f1f1;
+
+    &.fluid {
+        padding: 0px 0px;
+        background-color: transparent;
+    }
+
+    h4 {
+        font-size: x-large;
+        font-weight: bold;
+        display: inline-block;
+        margin: 0px 0px;
+    }
+}
+
+.planning {
+    .activity {
+        padding: 8px 18px;
+        padding-top: 8px;
+        padding-bottom: 12px;
+
+        border-left: none;
+        border-right: 6px solid $main_soft_color;
+
+        &.inverted {
+            border-left: 6px solid $main_soft_color;
+            border-right: none;
+        }
+
+        .activity-title {
+            font-size: large;
+        }
+    }
+}
+
+.glyphicon {
+    &.yes {
+        color:$yes_color!important;
+    }
+    &.no {
+        color:$no_color!important;
+    }
+    &.dunno {
+        color:$dunno_color!important;
+    }
+}
+
+.sending-request {
+    position: relative;
+
+    &:after {
+        content: "Chargement...";
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: #fff;
+        opacity: 0.8;
+        color: #777;
+        text-align: center;
+        box-sizing: border-box;
+        z-index: 5;
+        top: 0;
+        left: 0;
+        padding: 8%;
+    }
+}

shared/static/new_css/ie.css

@@ -0,0 +1,5 @@
+/* Welcome to Compass. Use this file to write IE specific override styles.
+ * Import this file using the following HTML or equivalent:
+ * <!--[if IE]>
+ *   <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
+ * <![endif]--> */

shared/static/new_css/print.css

@@ -0,0 +1,3 @@
+/* Welcome to Compass. Use this file to define print styles.
+ * Import this file using the following HTML or equivalent:
+ * <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> */

shared/static/new_css/screen.css

@@ -0,0 +1,68 @@
+/* Welcome to Compass.
+ * In this file you should write your main styles. (or centralize your imports)
+ * Import this file using the following HTML or equivalent:
+ * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
+/* line 5, ../../../../../.gem/ruby/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+}
+
+/* line 22, ../../../../../.gem/ruby/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+html {
+  line-height: 1;
+}
+
+/* line 24, ../../../../../.gem/ruby/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+ol, ul {
+  list-style: none;
+}
+
+/* line 26, ../../../../../.gem/ruby/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* line 28, ../../../../../.gem/ruby/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+caption, th, td {
+  text-align: left;
+  font-weight: normal;
+  vertical-align: middle;
+}
+
+/* line 30, ../../../../../.gem/ruby/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+q, blockquote {
+  quotes: none;
+}
+/* line 103, ../../../../../.gem/ruby/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+q:before, q:after, blockquote:before, blockquote:after {
+  content: "";
+  content: none;
+}
+
+/* line 32, ../../../../../.gem/ruby/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+a img {
+  border: none;
+}
+
+/* line 116, ../../../../../.gem/ruby/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
+  display: block;
+}

shared/static/sass/_dashed-shadows.scss

@@ -0,0 +1,66 @@
+@import "compass/css3";
+
+//Variables here:
+//(alongside with commented suggestions)
+$foreground-color:#b85b3f;//black;
+$background-color:#e8e3c7;//white
+$shadow-color:#ba9186;//$foreground-color;
+$distance:8px;
+$cut-distance:3px;//$distance/4;
+$strips-size:6px; //10px
+$strips-ratio:50%;//70%
+$strips-angle:45deg;//90deg;
+
+//cray stuff yo. be sure to try (if you please)
+$animate:false;//true
+$fixed:false;//true
+
+.dashed-shadow{
+  position:relative;
+  top:$distance;
+  left:$distance;
+  display:inline-block;
+  color:$shadow-color;
+}
+.dashed-shadow:before{
+  content:" ";
+  display:block;
+
+  position:absolute;
+  $bleeding-horizontal:10px;
+  $bleeding-vertical:0px;
+  top:-$bleeding-vertical - $distance;
+  left:-$bleeding-vertical - $distance;
+  bottom:-$bleeding-horizontal + $distance;
+  right:-$bleeding-horizontal + $distance;
+  z-index:1;
+  $color:$background-color;
+  $size:$strips-ratio/2;
+  $halfSize:$size/2;
+  $p1:$halfSize;
+  $p2:50%-$halfSize;
+  $p3:50%+$halfSize;
+  $p4:100%-$halfSize;
+  $transparent:transparentize($color,1);
+  @include background-image(linear-gradient($strips-angle,$color $p1, $transparent $p1, $transparent $p2,$color $p2, $color $p3, $transparent $p3, $transparent $p4, $color $p4));
+  background-size:$strips-size $strips-size;
+  @if($animate){
+    animation:dash-animation 30s infinite linear;
+  }
+  @if($fixed){
+    background-attachment:fixed;
+  }
+}
+.dashed-shadow:hover:before{
+  animation:dash-animation 30s infinite linear;
+}
+
+.dashed-shadow:after{
+  z-index:2;
+  content:attr(data-text);
+  position:absolute;
+  left:-$distance;
+  top:-$distance;
+  color:$foreground-color;
+  text-shadow:$cut-distance $cut-distance $background-color;
+}

shared/static/sass/_filters.scss

@@ -0,0 +1,18 @@
+ // main: global.scss
+#filter_form {
+    .form-group {
+        .col-md-3, .col-md-9 {
+            float: none;
+        }
+        ul.form-control {
+            padding-left: 15px;
+            list-style: none;
+            height: auto;
+
+            a.selected {
+                text-decoration: underline;
+                color: darken($main_soft_color, 40%);
+            }
+        }
+    }
+}

shared/static/sass/_forms.scss

@@ -0,0 +1,122 @@
+ // main: global.scss
+@mixin active {
+    &:active,
+    &.active {
+        @content;
+    }
+}
+
+@mixin hover-focus {
+    &:focus,
+    &.focus,
+    &:hover {
+        @content;
+    }
+}
+
+@mixin disabled {
+    &.disabled,
+    &[disabled],
+    fieldset[disabled] & {
+        @content;
+    }
+}
+
+@mixin dropdown-open {
+    .open > &.dropdown-toggle { @content }
+}
+
+@mixin btn-special {
+    /**
+     * This mixin applies content if the button is in at least one of the
+     * following states:
+     *
+     * - hovered,
+     * - focused,
+     * - actived,
+     * - is responsible of an opened dropdown.
+     *
+     * Where possible, state is checked from class attribute and
+     * :pseudo-classes.
+     *
+     * ## Bootstrap compatibility
+     *
+     * If content defines 'color', 'background-color' and 'border', it is safe
+     * to use this mixin with Bootstrap buttons as it will overrides all
+     * Bootstrap color defaults of the previous cases.
+     * To be precise, this covers all special important-like cases of the
+     * Bootstrap mixin 'button-variant' (except the 'disabled' case).
+     *
+     */
+    @include hover-focus { @content }
+
+    @include active {
+        @content;
+        @include hover-focus { @content }
+    }
+
+    @include dropdown-open {
+        @content;
+        @include hover-focus { @content }
+    }
+}
+
+@mixin button-variant-2modes($color, $background-base, $background-special, $border) {
+    /**
+     * This mixins allows defining color-related properties of buttons.
+     *
+     * It sets the following properties:
+     *   color: $color, except for disabled-like buttons.
+     *   border-color: $border.
+     *   background-color: Depending on button state:
+     *     - Default, disabled:
+     *         $background-base
+     *     - Hovered, focused, actived, responsible of an opened dropdown:
+     *         (one is sufficent)
+     *         $background-special
+     *
+     * ## Bootstrap compatibility
+     *
+     * This mixin can be used to replace colors behaviors of Bootstrap buttons.
+     * Indeed, this mixin aims to replace each definition done by the
+     * 'button-variant' Bootstrap mixin.
+     *
+     */
+    color: $color;
+    background-color: $background-base;
+    border-color: $border;
+
+    @include btn-special {
+        color: $color;
+        background-color: $background-special;
+        border-color: $border;
+    }
+
+    @include disabled {
+        @include hover-focus {
+            background-color: $background-base;
+            border-color: $border;
+        }
+    }
+
+    .badge {
+        color: $background-base;
+        background-color: $color;
+    }
+}
+
+.btn-primary {
+    @include button-variant-2modes($btn-font-color, $btn-bg-base, $btn-bg-special, $btn-border);
+}
+
+form#filter_form {
+    .form-group {
+        padding-right:20px;
+    }
+
+    ul.form-control {
+        background-color: transparent;
+        border: none;
+        box-shadow: none;
+    }
+}

shared/static/sass/_header.scss

@@ -0,0 +1,91 @@
+ // main: global.scss
+.strong-banner {
+  padding-top       : 20px;
+  padding-bottom    : 10px ;
+  background-color  : $header-background;
+  color: $header-color;
+}
+
+
+.navbar-inverse {
+  background-color  : $header-background;
+  background-color : transparent ;
+  border-style	   : none ;
+    .navbar-nav {
+        & > .open > a,
+        & > .open > a:focus,
+        & > .open > a:hover {
+            color: #fff;
+            background-color: $header-second-backgroud;
+        }
+    }
+}
+
+.navbar-collapse {
+    border-top: 0px solid transparent ;
+    padding : 0px ;
+
+    /* only < 768px*/
+    background-color  : $header-second-backgroud;
+    padding-left: 25px;
+    margin-left: -15px;
+    margin-right: -15px;
+
+    @media (min-width: 768px) {
+        background-color  : transparent;
+        padding-left: 0px;
+        margin-left: 0px;
+        margin-right: 0px;
+    }
+}
+
+
+.navbar-nav {
+    width: 100%;
+    @media (min-width: 768px) {
+        float : right ;
+        width: auto;
+    }
+}
+
+.navbar-inverse {
+    /* BRAND */
+    .navbar-brand {
+        &,
+        &:hover,
+        &:focus {
+            color: white;
+            font-family: $font_brand;
+            font-size: xx-large;
+            border-bottom: 5px solid $underline-brand;
+        }
+    }
+    /* ICONE */
+    .navbar-toggle {
+        &,
+        &:hover,
+        &:focus {
+            background-color: $second_bold_color;
+            border-color: $second_bold_color;
+        }
+        .icon-bar {
+            background-color: $second_white_color;
+        }
+    }
+    /* LINKS */
+    .navbar-nav {
+        & > li > a {
+            &,
+            &:hover,
+            &:focus {
+                font-family: $font_nav;
+                font-size: large;
+                color: $second_bold_color;
+                background: transparent;
+                @media (min-width: 768px) {
+                    color: $second_white_color;
+                }
+            }
+        }
+    }
+}

shared/static/sass/_messages.scss

@@ -0,0 +1,24 @@
+ // main: global.scss
+.message-info {
+    color           : #31708f;
+    background-color: #d9edf7;
+    border-color    : #bce8f1;
+}
+.message-success {
+    color           : #3c763d;
+    background-color: #dff0d8;
+    border-color    : #d6e9c6;
+}
+.message-warning {
+    color           : #8a6d3b;
+    background-color: #fcf8e3;
+    border-color    : #faebcc;
+}
+.message-error {
+    color           : #a94442;
+    background-color: #f2dede;
+    border-color    : #ebccd1;
+}
+.alert {
+    margin-bottom: 0;
+}

shared/static/sass/_tree.scss

@@ -0,0 +1,38 @@
+ // main: global.scss
+.tree {
+    font-size:large;
+    ul, li {
+        position: relative;
+    }
+
+    ul {
+        list-style: none;
+        padding-left: 32px;
+    }
+
+    li::before,
+    li::after {
+        content: "";
+        position: absolute;
+        left: -12px;
+    }
+    li::before {
+        border-top: 3px solid $second_soft_color;
+        top: 9px;
+        width: 8px;
+        height: 0;
+    }
+    li::after {
+        border-left: 3px solid $second_soft_color;
+        height: 100%;
+        width: 0px;
+        top: 2px;
+    }
+    ul > li:last-child::after {
+        height: 8px;
+    }
+
+    .category_node {
+
+    }
+}

shared/static/sass/_variables.scss

@@ -0,0 +1,99 @@
+ // main: global.scss
+$main_c7: #375362;
+$main_c6: #4F778C;
+$main_c5: #5D8CA6;
+$main_c3: #BDD2DE;
+$main_c1: #F0FAFF;
+
+$neutral_c2 : #F2EDDC;
+$neutral_c1: #FFFBEF;
+
+$activity_c8: #4FADB8;
+$activity_c7: #5ED1DC;
+$activity_c3: #CAE4E7;
+
+$event_c8: #3488A6;
+$event_c7: #3999BA;
+$event_c3: #AAD5E2;
+
+$todo_c8: #F19F5D;
+$todo_c7: #FF9C4D;
+$todo_c3: #FFDEBC;
+
+$equipment_c8: #E75571;
+$equipment_c7: #FF5C79;
+$equipment_c3: #FECAD6;
+
+$staff_c8: #3BAD89;
+$staff_c7: #42C2A2;
+$staff_c3: #A9E1D7;
+
+/* LEGACY COLORS*/
+$main_bold_color: #FF6969;
+$main_soft_color: #FF9191;
+$main_white_color: #FFEBEB;
+
+$second_bold_color: #FFB363;
+$second_soft_color: #FFC282;
+$second_white_color: #FFF5EB;
+
+$third_bold_color: #48B0C7;
+$third_soft_color: #8FD4E3;
+$third_white_color: #DCEAED;
+
+/* COLORS */
+/* Header */
+$header-background: $main_c7;
+$header-second-backgroud: $main_c5;
+$header-color: white;
+$underline-brand: $equipment_c7;
+
+/* Général */
+$html-background: $neutral_c1;
+$content-background: $neutral_c1;
+$content-border: $main_c7;
+$aside-background: $main_c7;
+$aside-inverted-background: $main_c5;
+
+$title_border: $main_c7;
+
+/* Le reste */
+$btn-font-color: white;
+$btn-bg-base: $main_bold_color;
+$btn-bg-special: $main_soft_color;
+$btn-border: $main_bold_color;
+
+$yes_color: #55C487;
+$no_color: #E36268;
+$dunno_color: #5599C4;
+
+/* Titres */
+$h1_background: $main_c6;
+$h2_background: $main_c3;
+$h3_background: $main_c1;
+
+$h1_background_activity: $activity_c8;
+$h2_background_activity: $activity_c7;
+$h3_background_activity: $main_c1;
+
+$h1_background_event: $event_c8;
+$h2_background_event: $event_c7;
+$h3_background_event: $main_c1;
+
+$h1_background_todo: $todo_c8;
+$h2_background_todo: $todo_c7;
+$h3_background_todo: $main_c1;
+
+$h1_background_equipment: $equipment_c8;
+$h2_background_equipment: $equipment_c7;
+$h3_background_equipment: $main_c1;
+
+$h1_background_staff: $staff_c8;
+$h2_background_staff: $staff_c7;
+$h3_background_staff: $main_c1;
+
+/* FONTS */
+$font_brand:'Lily Script One', cursive;
+$font_nav:'Work Sans', cursive;
+$font_bold:'Capriola', sans-serif;
+$font_normal:'Saira Semi Condensed', sans-serif;

shared/static/sass/global.scss

@@ -0,0 +1,416 @@
+/*NE PAS MODIFIER LE FICHIER .CSS, MAIS PLUTÔT LE
+ FICHIER .SCSS */
+@import '_variables';
+@import '_messages';
+@import '_header';
+@import '_forms';
+@import '_tree';
+@import '_filters';
+@import '_dashed-shadows';
+
+/* MISE EN FORME GÉNÉRALE */
+html {
+    height  : 100% ;
+    background-color: $html-background;
+}
+
+body {
+    font-family: $font_normal;
+    font-size: medium;
+}
+
+#principal {
+    background-color: $html-background;
+}
+
+/*MAIN*/
+main {
+    background-color:$content-background;
+    border-width: 2px;
+    border-color: $content-border;
+    border-style: none;
+    border-collapse: collapse;
+    display: table-cell;
+    margin-top:0px;
+    padding: 0px;
+
+    .fuid, h1, h2, h3 {
+      margin-left: -15px;
+      margin-right: -15px;
+      margin-top: 0px;
+      margin-bottom: 0px;
+    }
+    h1, h2, h3 {
+      margin-top: -2px;
+      margin-bottom: -2px;
+      margin-left: -17px;
+      margin-right: -17px;
+      color: white;
+      padding-left: 15px;
+      padding-right: 15px;
+    }
+    h1 {
+        font-family: $font_bold;
+        font-weight: 600;
+        padding-bottom: 10px;
+        padding-top: 15px;
+
+        background-color: $h1_background;
+        &.activity {
+          background-color: $h1_background_activity;
+        }
+        &.event {
+          background-color: $h1_background_event;
+        }
+        &.todo {
+          background-color: $h1_background_todo;
+        }
+        &.equipment {
+          background-color: $h1_background_equipment;
+        }
+        &.staff {
+          background-color: $h1_background_staff;
+        }
+    }
+    h2, h3 {
+        border-bottom   : 2px solid $main_c5;
+        padding-bottom  : 5px ;
+        padding-top: 10px;
+        font-family: $font_bold;
+        font-weight: 600;
+        font-size: x-large;
+
+        background-color: $h2_background;
+        &.activity {
+          background-color: $h2_background_activity;
+          border-color: $activity_c8;
+        }
+        &.event {
+          background-color: $h2_background_event;
+          border-color: $event_c8;
+        }
+        &.todo {
+          background-color: $h2_background_todo;
+          border-color: $todo_c8;
+        }
+        &.equipment {
+          background-color: $h2_background_equipment;
+          border-color: $equipment_c8;
+        }
+        &.staff {
+          background-color: $h2_background_staff;
+          border-color: $staff_c8;
+        }
+    }
+    h3 {
+        background-color: $h3_background;
+        color: $main_c6;
+        &.activity {
+          background-color: $h3_background_activity;
+          color: $activity_c7;
+        }
+        &.event {
+          background-color: $h3_background_event;
+          color: $event_c7;
+        }
+        &.todo {
+          background-color: $h3_background_todo;
+          color: $todo_c7;
+        }
+        &.equipment {
+          background-color: $h3_background_equipment;
+          color: $equipment_c7;
+        }
+        &.staff {
+          background-color: $h3_background_staff;
+          color: $staff_c7;
+        }
+    }
+    a {
+        color: $main_bold_color;
+
+        &:hover,
+        &:active,
+        &:focus {
+            color : $main_bold_color;
+        }
+    }
+
+    .text {
+      padding: 15px;
+    }
+}
+
+/*ASIDE*/
+aside {
+    background-color:$aside-background;
+    color: white;
+    margin-top: 0px;
+    padding: 0px!important;
+
+    a {
+        color: $main_soft_color;
+
+        &:hover,
+        &:active,
+        &:focus {
+            color : $main_soft_color;
+        }
+    }
+
+    code {
+        color: $main_c7;
+        background-color: $main_c3;
+    }
+
+    .heading {
+        padding: 8px 15px;
+      	font-size: 32px;
+      	line-height: 1.3;
+        text-align:center;
+
+        &.inverted {
+            background-color:$second_white_color;
+            color:black;
+        }
+
+        &.small {
+            font-size: 25px;
+
+            .sub {
+                font-size: 0.7em;
+                font-weight: normal;
+            }
+        }
+
+        .sub {
+            font-size: 0.7em;
+            font-weight: normal;
+        }
+
+        &.separator {
+            border-bottom-color: $main_soft_color;
+            border-bottom-style: solid;
+        }
+    }
+
+    .text {
+        padding: 15px;
+
+        &.inverted {
+            background-color:$second_white_color;
+            color:black;
+        }
+
+    }
+}
+
+@media (min-width: 768px) {
+    main {
+        margin-top:20px;
+        border-style: dashed;
+    }
+    aside {
+        margin-top:20px;
+    }
+}
+
+hr {
+  border-top : 1px solid $second_bold_color ;
+}
+
+
+span.vsep {
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+div.tag-list {
+    margin-top: 20px;
+}
+
+code {
+    font-size: small;
+}
+
+.module-list {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    display: flex;
+    align-items: stretch;
+    flex-wrap: wrap;
+}
+
+a.module {
+    padding: 20px 40px;
+    margin: 5px;
+    border-bottom-style: solid;
+    font-size: large;
+    display: block;
+
+    border-bottom-color: $main_c7;
+    background-color: $main_c3;
+    color: $main_c7;
+
+
+    &.activity {
+      border-bottom-color: $activity_c8;
+      background-color: $activity_c3;
+      color: $activity_c8;
+    }
+
+    &.event {
+      border-bottom-color: $event_c8;
+      background-color: $event_c3;
+      color: $event_c8;
+    }
+
+    &.todo {
+      border-bottom-color: $todo_c8;
+      background-color: $todo_c3;
+      color: $todo_c8;
+    }
+
+    &.equipment {
+      border-bottom-color: $equipment_c8;
+      background-color: $equipment_c3;
+      color: $equipment_c8;
+    }
+
+    &.staff {
+      border-bottom-color: $staff_c8;
+      background-color: $staff_c3;
+      color: $staff_c8;
+    }
+
+    &:hover,
+    &:active,
+    &:focus {
+        text-decoration: none;
+        color: $main_c1;
+        background-color: $main_c7;
+
+        &.activity {
+          background-color: $activity_c7;
+        }
+        &.event {
+          background-color: $event_c7;
+        }
+        &.equipment {
+          background-color: $equipment_c7;
+        }
+        &.todo {
+          background-color: $todo_c7;
+        }
+        &.staff {
+          background-color: $staff_c7;
+        }
+    }
+}
+
+.collapsible {
+    background-color: #777;
+    color: white;
+    cursor: pointer;
+    padding: 18px;
+    width: 100%;
+    border: none;
+    text-align: left;
+    outline: none;
+    font-size: 15px;
+
+    &:after {
+        content: '\002B';
+        color: white;
+        font-weight: bold;
+        float: right;
+        margin-left: 5px;
+    }
+
+    &:hover {
+        background-color: #555;
+    }
+
+    h3 {
+        margin-top: 0px;
+        margin-bottom: 0px;
+        display: inline-block;
+    }
+}
+
+.active {
+  background-color: #555;
+
+    &:after {
+        content: "\2212";
+    }
+}
+.content {
+    padding: 8px 18px;
+    display : none;
+    background-color: #f1f1f1;
+
+    &.fluid {
+        padding: 0px 0px;
+        background-color: transparent;
+    }
+
+    h4 {
+        font-size: x-large;
+        font-weight: bold;
+        display: inline-block;
+        margin: 0px 0px;
+    }
+}
+
+.planning {
+    .activity {
+        padding: 8px 18px;
+        padding-top: 8px;
+        padding-bottom: 12px;
+
+        border-left: none;
+        border-right: 6px solid $main_soft_color;
+
+        &.inverted {
+            border-left: 6px solid $main_soft_color;
+            border-right: none;
+        }
+
+        .activity-title {
+            font-size: large;
+        }
+    }
+}
+
+.glyphicon {
+    &.yes {
+        color:$yes_color!important;
+    }
+    &.no {
+        color:$no_color!important;
+    }
+    &.dunno {
+        color:$dunno_color!important;
+    }
+}
+
+.sending-request {
+    position: relative;
+
+    &:after {
+        content: "Chargement...";
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: #fff;
+        opacity: 0.8;
+        color: #777;
+        text-align: center;
+        box-sizing: border-box;
+        z-index: 5;
+        top: 0;
+        left: 0;
+        padding: 8%;
+    }
+}

shared/static/sass/ie.scss

@@ -0,0 +1,5 @@
+/* Welcome to Compass. Use this file to write IE specific override styles.
+ * Import this file using the following HTML or equivalent:
+ * <!--[if IE]>
+ *   <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
+ * <![endif]--> */

shared/static/sass/print.scss

@@ -0,0 +1,3 @@
+/* Welcome to Compass. Use this file to define print styles.
+ * Import this file using the following HTML or equivalent:
+ * <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> */

shared/static/sass/screen.scss

@@ -0,0 +1,6 @@
+/* Welcome to Compass.
+ * In this file you should write your main styles. (or centralize your imports)
+ * Import this file using the following HTML or equivalent:
+ * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
+
+@import "compass/reset";

shared/templates/shared/base.html

@@ -32,6 +32,7 @@
   </header>
 
   <div id="principal">
+    {% block principal %}
     <div class="container">
 
       {% if messages %}
@@ -68,6 +69,7 @@
       </div>
     
     </div><!-- /.container -->
+    {% endblock %}
   </div><!-- /#principal -->
 
   <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

shared/templates/shared/fluid.html

@@ -0,0 +1,31 @@
+{% extends "shared/base.html" %}
+{% load i18n %}
+{% block principal %}
+<div class="container-fluid">
+    {% if messages %}
+    <div class="row">
+    {% for message in messages %}
+    <div class="alert message-{{ message.tags }} alter-dismissible fade in" role="alert">
+        <button type="button" class="close" data-dismiss="alert" aria-label="{% trans "Close" %}">
+        <span aria-hidden="true">×</span>
+        </button>
+        <strong>
+        {% if message.level == DEFAULT_MESSAGE_LEVELS.DEBUG %}{% trans "DEBUG" %}&#8239;:
+        {% elif message.level == DEFAULT_MESSAGE_LEVELS.INFO %}{% trans "Info"%}&#8239;:
+        {% elif message.level == DEFAULT_MESSAGE_LEVELS.SUCCESS %}{% trans "Succès"%}&#8239;:
+        {% elif message.level == DEFAULT_MESSAGE_LEVELS.WARNING %}{% trans "Attention" %}&#8239;:
+        {% elif message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}{% trans "Erreur" %}&#8239;:
+        {% endif %}
+        </strong>
+        {{ message }}
+    </div>
+    {% endfor %}
+    </div>
+    {% endif %}
+
+    <div class="row">
+        {% block content %}{% endblock %}
+    </div>
+
+</div><!-- /.container -->
+{% endblock %}

shared/templates/shared/home.html

@@ -7,11 +7,11 @@
     <h1>Bienvenue sur Poulpe !</h1>
     <h2>Modules</h2>
     <div class="module-list">
-        <a href="{% url 'equipment:home' %}" class="module">
+        <a href="{% url 'equipment:home' %}" class="module equipment">
             <span class="glyphicon glyphicon-list-alt"></span>
             Inventaire
         </a>
-        <a href="{% url 'equipment:home' %}" class="module">
+        <a href="{% url 'equipment:home' %}" class="module event">
             <span class="glyphicon glyphicon-calendar"></span>
             Évènements
         </a>
@@ -22,10 +22,10 @@
         </a>
         {% endif %}
     </div>
-    <h2>Sur le feu</h2>
+    <h2 class="event">Sur le feu</h2>
     <div class="module-list">
         {% for event in events %}
-        <a href="{% url 'event:event' event.slug %}" class="module">
+        <a href="{% url 'event:event' event.slug %}" class="module event">
             <span class="glyphicon glyphicon-calendar"></span>
             {{ event }}
         </a>
@@ -40,13 +40,13 @@
                 <ul>
                     <li>La gestion du matériel (uniquement via l'interface d'administration)</li>
                     <li>Connexion via CAS</li>
+                    <li>Création/gestion d'évènements</li>
+                    <li>Gestion des permanences</li>
                 </ul>
                 </p>
                 <p>Dans la liste des choses qui sont partiellement ou totalement à implémenter :
                 <ul>
-                    <li>Création/gestion d'évènements</li>
                     <li>Affichage d'un agenda</li>
-                    <li>Gestion des permanences</li>
                     <li>Affectation du matériel à des évènements</li>
                     <li>Gestion de matériel spéfique à un évènement</li>
                     <li>Gestion des salles</li>