From 6de29186e5cae3221fe875baa2570d12c13bf0b4 Mon Sep 17 00:00:00 2001
From: Nicolas ROCHE <nroche@entrouvert.com>
Date: Fri, 7 May 2021 11:14:39 +0200
Subject: [PATCH] new theme: braine-l-alleud (#53844)

---
 static/braine-l-alleud/_custom.scss           |  25 +++++++
 static/braine-l-alleud/_tiles.scss            |  70 ++++++++++++++++++
 static/braine-l-alleud/_vars.scss             |  20 +++++
 static/braine-l-alleud/config.json            |  24 ++++++
 static/braine-l-alleud/extra.js               |  52 +++++++++++++
 static/braine-l-alleud/img/coeur-plein.png    | Bin 0 -> 1028 bytes
 static/braine-l-alleud/img/coeur-rouge.png    | Bin 0 -> 1035 bytes
 static/braine-l-alleud/img/coeur-vide.png     | Bin 0 -> 1537 bytes
 static/braine-l-alleud/style.scss             |   6 ++
 .../combo/json/activite-favorite.html         |  28 +++++++
 10 files changed, 225 insertions(+)
 create mode 100644 static/braine-l-alleud/_custom.scss
 create mode 100644 static/braine-l-alleud/_tiles.scss
 create mode 100644 static/braine-l-alleud/_vars.scss
 create mode 100644 static/braine-l-alleud/config.json
 create mode 100644 static/braine-l-alleud/extra.js
 create mode 100644 static/braine-l-alleud/img/coeur-plein.png
 create mode 100644 static/braine-l-alleud/img/coeur-rouge.png
 create mode 100644 static/braine-l-alleud/img/coeur-vide.png
 create mode 100644 static/braine-l-alleud/style.scss
 create mode 100644 templates/variants/braine-l-alleud/combo/json/activite-favorite.html

diff --git a/static/braine-l-alleud/_custom.scss b/static/braine-l-alleud/_custom.scss
new file mode 100644
index 00000000..f991ea29
--- /dev/null
+++ b/static/braine-l-alleud/_custom.scss
@@ -0,0 +1,25 @@
+#header #top #logo a {
+	height: 100px;
+	line-height: 100px;
+	color: $primary-color;
+	text-transform: uppercase;
+	font-weight: normal;
+}
+
+#nav-wrapper {
+	background: $nav-background;
+	border-top: 1px solid #EAEAEA;
+	border-bottom: 1px solid #EAEAEA;
+	margin-bottom: 10px;
+	div#nav > ul > li > a {
+		border-radius: $border-radius;
+	}
+}
+
+@media screen and ($max-mobile-viewport) {
+	#header #top #logo a {
+		display: block;
+		height: 75px;
+		overflow: hidden;
+	}
+}
diff --git a/static/braine-l-alleud/_tiles.scss b/static/braine-l-alleud/_tiles.scss
new file mode 100644
index 00000000..fc6b1b60
--- /dev/null
+++ b/static/braine-l-alleud/_tiles.scss
@@ -0,0 +1,70 @@
+
+.dashboard-cell-icons {
+	position: absolute;
+	right: 0rem;
+	top: 0rem;
+	z-index: 100;
+}
+
+.dashboard-cell-icons .add-to-dashboard,
+.dashboard-cell-icons .remove-from-dashboard {
+	display: inline-block;
+	width: 41px;
+	height: 37px;
+	background: none center center no-repeat;
+	background-size: 1rem;
+	&.remove-from-dashboard {
+		background-image: url(img/coeur-rouge.png);
+		&:hover {
+			background-image: url(img/coeur-vide.png);
+		}
+	}
+	&.add-to-dashboard {
+		background-image: url(img/coeur-vide.png);
+		&:hover {
+			background-image: url(img/coeur-rouge.png);
+		}
+	}
+	&.remove-from-dashboard.new, &.add-to-dashboard.new {
+		&::after {
+			content: "";
+			display: block;
+			background-image: url(img/coeur-rouge.png);
+			width: 100%;
+			height: 100%;
+			animation-name: favorite_pulse_animation;
+			animation-duration: 3000ms;
+			animation-iteration-count: 1;
+			animation-timing-function: linear;
+			opacity: 0;
+		}
+	}
+}
+
+@keyframes favorite_pulse_animation {
+	0% { transform: scale(0.5); opacity: 1;}
+	20% { transform: scale(1); }
+	40% { transform: scale(0.5); opacity: 1;}
+	60% { transform: scale(1); }
+	80% { transform: scale(0.5); }
+	100% { opacity: 0; display: black; }
+}
+
+.gru-content .dashboard-cell {
+	border: 0;
+	.cell {
+		margin-left: 0;
+		margin-right: 0;
+	}
+}
+
+.activite-favorite {
+	position: relative;
+	h3 {
+		@extend %title;
+		background: #019D8B;
+	}
+	.activite-favorite-content {
+		margin-left: 1rem;
+	}
+}
diff --git a/static/braine-l-alleud/_vars.scss b/static/braine-l-alleud/_vars.scss
new file mode 100644
index 00000000..d50b8990
--- /dev/null
+++ b/static/braine-l-alleud/_vars.scss
@@ -0,0 +1,20 @@
+$primary-color: #018B9D;
+
+$width: 1160px;
+$font-color: #666;
+$font-size: 0.938em;
+$nav-background: #fafafa;
+$nav-submenu-background: #eee;
+$nav-submenu-color: #333;
+$nav-color: $font-color;
+$nav-active-color: $primary-color;
+$nav-item-selected-color: white;
+$nav-item-hover-color: white;
+$border-radius: 4px;
+$button-background: $primary-color;
+$title-background: $primary-color;
+$title-color: white;
+$nav-mobile-mode: bottom-bar;
+
+$cell-image-position: top;
+$cell-image-padding: none;
diff --git a/static/braine-l-alleud/config.json b/static/braine-l-alleud/config.json
new file mode 100644
index 00000000..e711a9b1
--- /dev/null
+++ b/static/braine-l-alleud/config.json
@@ -0,0 +1,24 @@
+{
+  "label": "Braine l'Alleud",
+  "variables": {
+    "theme_color": "#018B9D"
+  },
+  "settings": {
+    "combo": {
+      "COMBO_ASSET_SLOTS.update": {
+        "header:background": { "label": "Têtière : fond" },
+        "header:logo": { "label": "Têtière : logo" }
+      },
+      "JSON_CELL_TYPES.update": {
+        "activite-favorite": {
+          "url": "https://perso.entrouvert.org/~nroche/contenu.json",
+          "name": "Activité favorite",
+          "cache_duration": 0,
+          "force_async": true,
+          "form": [{"varname": "activite", "type": "string", "label": "Activité"}]
+        }
+      }
+    }
+  }
+}
+
diff --git a/static/braine-l-alleud/extra.js b/static/braine-l-alleud/extra.js
new file mode 100644
index 00000000..18df422e
--- /dev/null
+++ b/static/braine-l-alleud/extra.js
@@ -0,0 +1,52 @@
+$(function() {
+  var $sidebar = $('#sidebar');
+
+  /* add & remove tile */
+  $('div.cell, div#sidebar').delegate('a.remove-from-dashboard', 'click', function(e) {
+    var dashboard = $(this).parents('.dashboardcell');
+    var cell = $(this).parents('.cell')[0];
+    var link = $(this);
+    $.ajax({
+      url: $(this).attr('href'),
+      success: function(data) {
+        if (dashboard.length) {
+          /* if the user is on the dashboard, remove tile from screen */
+          $(cell).hide({
+            duration: 300,
+            complete: function() {
+              $(cell).remove();
+            }
+          });
+        } else {
+          $(link).hide();
+          $(link).parent().find('.cell-added').remove();
+          var $add_to_dashboard = $('<a class="add-to-dashboard new"></a>');
+          $add_to_dashboard.attr('href', data.cell_data.add_url);
+          $add_to_dashboard.appendTo($(link).parent());
+          $(link).remove();
+        }
+      }
+    });
+    e.stopPropagation();
+    return false;
+  });
+  $('div.cell, div#sidebar').delegate('a.add-to-dashboard', 'click', function(e) {
+    var link = $(this);
+    $.ajax({
+      url: $(this).attr('href'),
+      success: function(data) {
+        $(link).hide();
+        var $added_info = $('<span class="cell-added">Ajouté à votre tableau de bord</span>');
+        $added_info.appendTo($(link).parent());
+        setTimeout(function() { $added_info.remove(); }, 3000);
+        var $remove_from_dashboard = $('<a class="remove-from-dashboard new"></a>');
+        $remove_from_dashboard.attr('href', data.cell_data.remove_url);
+        $remove_from_dashboard.appendTo($(link).parent());
+        $(link).remove();
+      }
+    });
+    e.stopPropagation();
+    return false;
+  });
+
+});
diff --git a/static/braine-l-alleud/img/coeur-plein.png b/static/braine-l-alleud/img/coeur-plein.png
new file mode 100644
index 0000000000000000000000000000000000000000..62a76369b1593a5a07c1b6baa03d87cf3e06e6e9
GIT binary patch
diff --git a/static/braine-l-alleud/img/coeur-rouge.png b/static/braine-l-alleud/img/coeur-rouge.png
new file mode 100644
index 0000000000000000000000000000000000000000..81084fed66fc0d8cc3a03a7d316739602b882370
GIT binary patch
diff --git a/static/braine-l-alleud/img/coeur-vide.png b/static/braine-l-alleud/img/coeur-vide.png
new file mode 100644
index 0000000000000000000000000000000000000000..bf13626d111c24dc6ec56ed25c487dd0974dae79
GIT binary patch
diff --git a/static/braine-l-alleud/style.scss b/static/braine-l-alleud/style.scss
new file mode 100644
index 00000000..d3555ec7
--- /dev/null
+++ b/static/braine-l-alleud/style.scss
@@ -0,0 +1,6 @@
+@charset "UTF-8";
+
+@import 'vars';
+@import '../includes/publik';
+@import 'tiles';
+@import 'custom';
diff --git a/templates/variants/braine-l-alleud/combo/json/activite-favorite.html b/templates/variants/braine-l-alleud/combo/json/activite-favorite.html
new file mode 100644
index 00000000..90709ed1
--- /dev/null
+++ b/templates/variants/braine-l-alleud/combo/json/activite-favorite.html
@@ -0,0 +1,28 @@
+{% load dashboard %}
+
+<h3>
+  Activité {{ activite }}
+</h3>
+
+<div class="activite-favorite-content">
+  {% include "combo/dashboard_cell_icons.html" %}
+
+  {% if not in_dashboard %}
+
+  Desciptif de l'activité {{ activite }}
+
+  {% else %}
+
+  Contenu :
+  <ul>
+    {% for content in json.data %}
+    <li>
+      <a href="{{ content.url }}">
+        {{ content.title }}
+      </a>
+    </li>
+    {% endfor %}
+  </ul>
+
+  {% endif %}
+</div>
-- 
2.30.2

