Fix allauth-ens version, lol

↑ Merci Erkan lol super message de commit
add storage to equipment
2020-05-06 23:09:31 +02:00 · 2019-03-18 14:01:44 +01:00 · 2018-11-26 18:38:24 +01:00 · 2018-11-26 18:37:52 +01:00 · 2018-11-26 18:35:09 +01:00 · 2018-11-26 16:06:31 +01:00
58 changed files with 6754 additions and 502 deletions
--- a/equipment/admin.py
+++ b/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', {
-            'fields': ('category', 'full_category_p'),
+        ('Attributs', {
+            '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)
--- a/equipment/migrations/0015_auto_20190318_1245.py
+++ b/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'),
+        ),
+    ]
--- a/equipment/migrations/0016_auto_20190318_1247.py
+++ b/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'},
+        ),
+    ]
--- a/equipment/models.py
+++ b/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"),
--- a/equipment/templates/equipment/home.html
+++ b/equipment/templates/equipment/home.html
@ -4,21 +4,27 @@
 {% block title %}{% trans "Matériel" %}{% endblock %}

 {% block content %}
-    <h1>{% trans "Inventaire" %}</h1>
-    <a href="{% url 'equipment:list' %}" class="module">
-        <span class="glyphicon glyphicon-list-alt"></span>
-        {% trans "Tout le matériel" %}
-    </a>
-    <h2>{% trans "Liste par Propriétaire" %}</h2>
+    <h1 class="equipment">{% trans "Inventaire" %}</h1>
+    <div class="module-list">
+      <a href="{% url 'equipment:list' %}" class="module equipment">
+          <span class="glyphicon glyphicon-list-alt"></span>
+          {% trans "Tout le matériel" %}
+      </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 %}
--- a/equipment/templates/equipment/list.html
+++ b/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 %}
--- a/event/static/css/calendar.css
+++ b/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;
+}
--- a/event/static/css/tipso.css
+++ b/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;
+}
--- a/event/static/js/calendar.js
+++ b/event/static/js/calendar.js
--- a/event/static/js/interval_coloration.js
+++ b/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;
+                }
+            }
+        }
+    }
+}
--- a/event/static/js/tipso.min.js
+++ b/event/static/js/tipso.min.js
--- a/event/templates/event/calendar.html
+++ b/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 %}
--- a/event/templates/event/event.html
+++ b/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 %}
--- a/event/templatetags/event_tags.py
+++ b/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"
--- a/event/urls.py
+++ b/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/$',
--- a/event/views.py
+++ b/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'
--- a/poulpe/settings/common.py
+++ b/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'
+
--- a/requirements.txt
+++ b/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
--- a/shared/static/config.rb
+++ b/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
--- a/shared/static/css/.sass-cache/702601a8b7490c5ef78bf7afc3c3f2736c608d56/forms.scssc
+++ b/shared/static/css/.sass-cache/702601a8b7490c5ef78bf7afc3c3f2736c608d56/forms.scssc
--- a/shared/static/css/.sass-cache/702601a8b7490c5ef78bf7afc3c3f2736c608d56/global.scssc
+++ b/shared/static/css/.sass-cache/702601a8b7490c5ef78bf7afc3c3f2736c608d56/global.scssc
--- a/shared/static/css/.sass-cache/702601a8b7490c5ef78bf7afc3c3f2736c608d56/header.scssc
+++ b/shared/static/css/.sass-cache/702601a8b7490c5ef78bf7afc3c3f2736c608d56/header.scssc
--- a/shared/static/css/.sass-cache/702601a8b7490c5ef78bf7afc3c3f2736c608d56/messages.scssc
+++ b/shared/static/css/.sass-cache/702601a8b7490c5ef78bf7afc3c3f2736c608d56/messages.scssc
--- a/shared/static/css/.sass-cache/702601a8b7490c5ef78bf7afc3c3f2736c608d56/tree.scssc
+++ b/shared/static/css/.sass-cache/702601a8b7490c5ef78bf7afc3c3f2736c608d56/tree.scssc
--- a/shared/static/css/.sass-cache/702601a8b7490c5ef78bf7afc3c3f2736c608d56/variables.scssc
+++ b/shared/static/css/.sass-cache/702601a8b7490c5ef78bf7afc3c3f2736c608d56/variables.scssc
--- a/shared/static/css/_dashed-shadows.scss
+++ b/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;
+}
--- a/shared/static/css/_filters.scss
+++ b/shared/static/css/_filters.scss
@ -1,3 +1,4 @@
+ // main: global.scss
 #filter_form {
    .form-group {
        .col-md-3, .col-md-9 {
--- a/shared/static/css/_forms.scss
+++ b/shared/static/css/_forms.scss
@ -1,3 +1,4 @@
+ // main: global.scss
@mixin active {
    &:active,
    &.active {
--- a/shared/static/css/_header.scss
+++ b/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;
-  color: $second_bold_color;
+  background-color  : $header-background;
+  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;
--- a/shared/static/css/_messages.scss
+++ b/shared/static/css/_messages.scss
@ -1,3 +1,4 @@
+ // main: global.scss
 .message-info {
    color           : #31708f;
    background-color: #d9edf7;
--- a/shared/static/css/_tree.scss
+++ b/shared/static/css/_tree.scss
@ -1,3 +1,4 @@
+ // main: global.scss
 .tree {
    font-size:large;
    ul, li {
@ -35,6 +36,3 @@

    }
 }
-
-
-
--- a/shared/static/css/_variables.scss
+++ b/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;
--- a/shared/static/css/global.css
+++ b/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 */
--- a/shared/static/css/global.css
+++ b/shared/static/css/global.css
@ -0,0 +1 @@
+global.min.css
--- a/shared/static/css/global.css.map
+++ b/shared/static/css/global.css.map
--- a/shared/static/css/global.min.css
+++ b/shared/static/css/global.min.css
--- a/shared/static/css/global.scss
+++ b/shared/static/css/global.scss
@ -1,16 +1,17 @@
 /*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 '_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: $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;
-        padding-bottom  : 5px ;
-        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;
+
+    .text {
+      padding: 15px;
    }
 }

 /*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;
-        background-color: $second_bold_color;
+        color: $main_c7;
+        background-color: $main_c3;
    }
+
    .heading {
        padding: 8px 15px;
-	font-size: 32px;
-	line-height: 1.3;
+      	font-size: 32px;
+      	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;
+        }
    }
 }

--- a/shared/static/css/variables.scss
+++ b/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;
--- a/shared/static/js/api-models.js
+++ b/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.
--- a/shared/static/js/backbone-relational.js
+++ b/shared/static/js/backbone-relational.js
--- a/shared/static/new_css/global.css
+++ b/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%;
+}
--- a/shared/static/new_css/global.scss
+++ b/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%;
+    }
+}
--- a/shared/static/new_css/ie.css
+++ b/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]--> */
--- a/shared/static/new_css/print.css
+++ b/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" /> */
--- a/shared/static/new_css/screen.css
+++ b/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;
+}
--- a/shared/static/sass/_dashed-shadows.scss
+++ b/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;
+}
--- a/shared/static/sass/_filters.scss
+++ b/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%);
+            }
+        }
+    }
+}
--- a/shared/static/sass/_forms.scss
+++ b/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;
+    }
+}
--- a/shared/static/sass/_header.scss
+++ b/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;
+                }
+            }
+        }
+    }
+}
--- a/shared/static/sass/_messages.scss
+++ b/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;
+}
--- a/shared/static/sass/_tree.scss
+++ b/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 {
+
+    }
+}
--- a/shared/static/sass/_variables.scss
+++ b/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;
--- a/shared/static/sass/global.scss
+++ b/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%;
+    }
+}
--- a/shared/static/sass/ie.scss
+++ b/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]--> */
--- a/shared/static/sass/print.scss
+++ b/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" /> */
--- a/shared/static/sass/screen.scss
+++ b/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";
--- a/shared/templates/shared/base.html
+++ b/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 -->
--- a/shared/templates/shared/fluid.html
+++ b/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 %}
--- a/shared/templates/shared/home.html
+++ b/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>
Author	SHA1	Message	Date
Martin Pépin	368285c92d	Fix allauth-ens version, lol ↑ Merci Erkan lol super message de commit	2020-05-06 23:09:31 +02:00
Erkan Narmanli	177ecdc541	add storage to equipment	2019-03-18 14:01:44 +01:00
Daru13	2a0113412a	Comment out the previously used event sorting method.	2018-11-26 18:38:24 +01:00
Daru13	b43422dc50	Make grouping by location an option, and set grid rows of event nodes. Event nodes used to only be sorted. This commit explictly set their CSS grid rows.	2018-11-26 18:37:52 +01:00
Daru13	cd771c5ba5	Do not intersect an event with anotoher event it immediately follows. This is required so that an event E1 ending at time T and an event E2 starting at time T _can_ be assigned the same color (i.e. they _can_ appear on the same row).	2018-11-26 18:35:09 +01:00
Daru13	51251c0a8f	Add a new event sorting algorithm (using interval graph coloring). Note: this only sort the event nodes in a particular, "optimal" order; but it does not explicitly set the grid row of each node. Therefore, the result is likely to spread on many more rows than what could be expected.	2018-11-26 16:06:31 +01:00
Daru13	c4e70840ad	Add a button to switch between calendar display modes. It switches between: * displaying all events; * only displaying events the user subscribed to. Note that the button has not been included in the calendar library/files (yet?). Its code should be moved somewhere else at a later time.	2018-11-25 16:08:43 +01:00
Daru13	81eb6bebac	Allow to only display events the user subscribed to.	2018-11-25 16:05:00 +01:00
Qwann	9e7937d7d9	hotfix : héritage de has_perm	2018-11-24 17:07:46 +01:00
Qwann	40a9ce6531	mes perms	2018-11-24 16:53:54 +01:00
Daru13	6cc04e3792	Make events for which the user is enroled more distinguishable.	2018-11-24 06:01:00 +01:00
Daru13	ad02830521	Display a tooltip when an event content cannot be fully displayed. This is intended to make it easy to have a glimpse at the content of an event, when its width is not sufficient for its content to be displayed (without overflowing its parent). It uses an external jQuery library to display tooltips: named _tipso_ (https://github.com/object505/tipso).	2018-11-24 05:59:13 +01:00
Daru13	aa06036968	Add the actual links to each event detailed page (in the detail popup). Note that the URL format is passed to the calendar as a parameter (in the page template). It is currently hard-coded, but should be generated by Django instead!	2018-11-24 03:52:09 +01:00
Daru13	3c848fe47c	Improve event detail popup positionning (no above-positionning yet). The popup is horizontally aligned with the click location, and vertically close to event (slightly on top of it, from below). If the click occurs too much on the left or the right side of the screen, the horizontal position is shifted accordingly, so that it is never displayed outside of the screen. Note, however, that the small arrow supposed to point the related event is not shifted as well as of now (not as straightforward since it is a CSS pseudo-element). This commit also removes the ability to display the popup _above_ the event in case the click occurs too close to the bottom of the screen. This feature should be reintroduced by a later commit once it will have been fixed :).	2018-11-24 03:37:40 +01:00
Daru13	a0d158ca77	Add a clearer error message when the attempt to (un)enrol fails. The error message returned by jQuery only contained "Error". This commit replaces it by a hard-coded, more descriptive error message in French.	2018-11-24 03:32:07 +01:00
Daru13	ab4338aa84	Rename the label of the event detail popup location field to "Lieu".	2018-11-24 03:29:38 +01:00
Daru13	a2a14cb84c	Add dedicated classes to first/last (daily) time slots.	2018-11-24 03:28:25 +01:00
Daru13	ff5c0845bc	Remove some useless, commented CSS properties.	2018-11-24 03:26:37 +01:00
Daru13	a029987159	Add some margin to the description and tags (in the event detail popup).	2018-11-24 03:26:10 +01:00
Daru13	72617946eb	Fix the event detail popup table alignment (now centered).	2018-11-24 03:25:13 +01:00
Daru13	7a1e6c0be3	Prevent event detail popup dimension updates due to <h3> hovering.	2018-11-24 03:24:41 +01:00
Daru13	7217bd1862	Set new width constraints for the event detail popup.	2018-11-24 03:23:14 +01:00
Daru13	362c7400eb	Improve the look of the first/last hour slots (for each day).	2018-11-24 03:22:33 +01:00
Daru13	a192765b03	Better align the time slot hours.	2018-11-24 03:21:19 +01:00
Daru13	49e147e620	Make the whole calendar inherit the font family from its parent.	2018-11-24 03:20:52 +01:00
Daru13	5e9423c858	Fix the wrong font size of weveral calendar elements.	2018-11-24 03:19:57 +01:00
Daru13	eb8f82f6c4	Display the calendar in full height (w/ scroll).	2018-11-24 03:18:01 +01:00
Daru13	41b640a1ea	Ensure time slot and event grids have the same number of columns.	2018-11-24 03:14:18 +01:00
Daru13	b2dabd1dc4	Fix event positionning in the grid.	2018-11-24 03:09:19 +01:00
Qwann	504044b1cf	hotfix: inheritance in calendar	2018-11-23 15:33:04 +01:00
Qwann	bd84b46476	Merge branch 'Qwann/calendar' of git.eleves.ens.fr:klub-dev-ens/GestionEvenementiel into Qwann/calendar	2018-11-22 22:55:30 +01:00
Qwann	c30f588bed	Merge branch 'master' of git.eleves.ens.fr:klub-dev-ens/GestionEvenementiel into Qwann/calendar	2018-11-22 22:55:17 +01:00
Daru13	74eaf82575	Fix the structure of the HTML of the generated events.	2018-11-22 22:43:18 +01:00
Daru13	12534ff2da	Update the start and end date of the calendar (displayed era).	2018-11-22 22:42:31 +01:00
Daru13	2699573913	Fix the title of the event (used to be the event id).	2018-11-22 22:42:09 +01:00
Daru13	7a7254f3da	Put the event title on its own line (in the detail popup).	2018-11-22 22:36:23 +01:00
Daru13	5da4c7050c	Updates the perm counter on perm area update.	2018-11-22 22:34:45 +01:00
Daru13	555fa8fb7c	Adds effective enrol/unerol POST request on related button click.	2018-11-22 22:34:09 +01:00
Qwann	1865054c29	waaaa, maintenant on peut genre se connecter	2018-11-22 13:24:59 +01:00
Evarin	3ebb89c1c6	Calendrier accessible et presque fonctionnel	2018-11-22 00:39:12 +01:00
Evarin	350836aeb2	Revert to old_css	2018-11-21 19:46:41 +01:00
Daru13	d08a39307f	Initial addition of the visual calendar (day view only). This is the first step to include a visual calendar to Poulpe, only including a "day view" as of now (i.e. events hour-by-hour from one date to another). More views may be added at a later time. It is NOT WORKING YET! The CSS has been broken on this branch, and will have to be fixed before the calendar can work: * the CSS of the calendar needs to be adapted to the environment and design of Poulpe; * add actual links to enroll/un-enroll to an activity (cf. `Event` class in `calendar.js`); * other small tweaks :)? Finally, this view is likely to require the addition of start and end date change, so that an user can browse events over several days (cf. `setStartDate` and `setEndDate` methods of `Calendar` class in `calendar.js`). Note that this code should be better re-written (e.g. in Typescript, split between files, using more/better design patterns) at a later time. It should nonetheless be easy to fix it and use it right now (see above requirements for this).	2018-11-19 23:57:42 +01:00
Daru13	d3e1943021	Merge branch 'Evarin/enrol-json' into Qwann/calendar	2018-11-19 22:32:58 +01:00
Qwann	abdd893309	dos not work	2018-10-12 18:04:27 +02:00
Qwann	1042b9f9e4	partial commit	2018-10-12 17:15:55 +02:00
Qwann	7ebee733c5	css no finished	2018-10-04 21:10:30 +02:00