css: style for acked notifications in notifications cell (#78314)

setup.py

@@ -1,5 +1,6 @@
 #! /usr/bin/env python
 
+import functools
 import glob
 import os
 import subprocess
@@ -41,6 +42,27 @@ class eo_sdist(sdist):
         if os.path.exists('VERSION'):
             os.remove('VERSION')
 
+    def local_findall(self, dir=os.curdir):
+        # override default file search to allow for duplicates (as some themes have
+        # multiple variants that are just symlinks)
+        files = [
+            os.path.join(base, file) for base, dirs, files in os.walk(dir, followlinks=True) for file in files
+        ]
+        if dir == os.curdir:
+            make_rel = functools.partial(os.path.relpath, start=dir)
+            files = map(make_rel, files)
+        self.filelist.allfiles = list(filter(os.path.isfile, files))
+
+    def get_file_list(self):
+        self.filelist.findall = self.local_findall
+        super().get_file_list()
+
+    def copy_file(self, *args, **kwargs):
+        # do not allow hardlinking as hardlinks would get inserted as is in
+        # the tarball, and would not extract properly.
+        kwargs.pop('link', None)
+        super().copy_file(*args, **kwargs)
+
 
 def get_version():
     '''Use the VERSION, if absent generates a version with git describe, if not

static/includes/_layout.scss

@@ -34,6 +34,12 @@ html, body {
 	min-height: 100vh;
 }
 
+@if variable-exists(primary-color) {
+	html {
+		--primary-color: #{$primary-color};
+	}
+}
+
 div#page {
 	display: flex;
 	min-height: 100vh;
@@ -238,11 +244,6 @@ div#main-content {
 }
 
 body.pk-mini-page {
-	@if variable-exists(primary-color) {
-		--primary-color: #{$primary-color};
-	} @else {
-		--primary-color: #ccc;
-	}
 	margin: 0;
 	padding: 0;
 	background: #F2F2F2;
@@ -260,34 +261,4 @@ body.pk-mini-page {
 	.pk-mini-page--content {
 		padding: 1em
 	}
-	.loader {
-		margin: 2em auto;
-		width: 40px;
-		height: 30px;
-		aspect-ratio: 1;
-		--c: linear-gradient(var(--primary-color) 0 0);
-		--r1: radial-gradient(farthest-side at bottom, var(--primary-color) 93%, var(--primary-color));
-		--r2: radial-gradient(farthest-side at top   , var(--primary-color) 93%, var(--primary-color));
-		background: var(--c), var(--r1), var(--r2), var(--c), var(--r1), var(--r2), var(--c), var(--r1), var(--r2);
-		background-repeat: no-repeat;
-		animation: l2 1s infinite alternate;
-	}
-	@keyframes l2 {
-		0%,25% {
-			background-size: 8px 0, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px;
-			background-position: 0 50%, 0 calc(50% - 2px), 0 calc(50% + 2px), 50% 50%, 50% calc(50% - 2px), 50% calc(50% + 2px), 100% 50%, 100% calc(50% - 2px), 100% calc(50% + 2px);
-		}
-		50% {
-			background-size: 8px 100%, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px;
-			background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%, 50% calc(50% - 2px), 50% calc(50% + 2px), 100% 50%, 100% calc(50% - 2px), 100% calc(50% + 2px);
-		}
-		75% {
-			background-size: 8px 100%, 8px 4px, 8px 4px, 8px 100%, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px;
-			background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%, 50% calc(0% - 2px), 50% calc(100% + 2px), 100% 50%, 100% calc(50% - 2px), 100% calc(50% + 2px);
-		}
-		95%,100% {
-			background-size: 8px 100%, 8px 4px,  8px 4px, 8px 100%, 8px 4px, 8px 4px, 8px 100%, 8px 4px, 8px 4px;
-			background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%, 50% calc(0% - 2px), 50% calc(100% + 2px), 100% 50%, 100% calc(0% - 2px), 100% calc(100% + 2px);
-		}
-	}
 }

static/includes/_misc.scss

@@ -847,3 +847,35 @@ div.leaflet-bottom, div.leaflet-top {
 .leaflet-attribution-flag {
 	display: none !important;
 }
+
+.loader {
+	--loader-color: var(--primary-color, black);
+	margin: 2em auto;
+	width: 40px;
+	height: 30px;
+	aspect-ratio: 1;
+	--c: linear-gradient(var(--loader-color) 0 0);
+	--r1: radial-gradient(farthest-side at bottom, var(--loader-color) 93%, var(--loader-color));
+	--r2: radial-gradient(farthest-side at top   , var(--loader-color) 93%, var(--loader-color));
+	background: var(--c), var(--r1), var(--r2), var(--c), var(--r1), var(--r2), var(--c), var(--r1), var(--r2);
+	background-repeat: no-repeat;
+	animation: l2 1s infinite alternate;
+}
+@keyframes l2 {
+	0%,25% {
+		background-size: 8px 0, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px;
+		background-position: 0 50%, 0 calc(50% - 2px), 0 calc(50% + 2px), 50% 50%, 50% calc(50% - 2px), 50% calc(50% + 2px), 100% 50%, 100% calc(50% - 2px), 100% calc(50% + 2px);
+	}
+	50% {
+		background-size: 8px 100%, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px;
+		background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%, 50% calc(50% - 2px), 50% calc(50% + 2px), 100% 50%, 100% calc(50% - 2px), 100% calc(50% + 2px);
+	}
+	75% {
+		background-size: 8px 100%, 8px 4px, 8px 4px, 8px 100%, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px;
+		background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%, 50% calc(0% - 2px), 50% calc(100% + 2px), 100% 50%, 100% calc(50% - 2px), 100% calc(50% + 2px);
+	}
+	95%,100% {
+		background-size: 8px 100%, 8px 4px,  8px 4px, 8px 100%, 8px 4px, 8px 4px, 8px 100%, 8px 4px, 8px 4px;
+		background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%, 50% calc(0% - 2px), 50% calc(100% + 2px), 100% 50%, 100% calc(0% - 2px), 100% calc(100% + 2px);
+	}
+}

static/includes/wcs/_bulk.scss

@@ -541,6 +541,9 @@ div.file-upload-widget {
 		}
 		div.widget-message {
 			padding-top: 20px;
+			p {
+				margin: 0;
+			}
 			&::before {
 				pointer-events: none;
 				font-family: FontAwesome;

static/landes-cd40/config.json

@@ -134,6 +134,12 @@
               "url": "{{ passerelle_url }}proxy/transmlph/request/api_publik.php?sub={{ user_nameid }}",
               "cache_duration": 5,
               "log_errors": false
+            },
+            {
+              "key": "aiden",
+              "url": "{{ passerelle_url }}mgdis/aiden/demands/NameID={{ user|user_id_for_service:\"mgdis\" }}",
+              "cache_duration": 5,
+              "log_errors": false
             }
           ]
         }

static/manche/_custom.scss

@@ -0,0 +1,260 @@
+div#header {
+	@media($min-desktop-viewport) {
+		padding-left: 0;
+	}
+}
+
+#top {
+	display: grid;
+	grid-template-columns: auto 1fr auto;
+	align-items: center;
+	gap: $space-medium;
+	@media($max-mobile-viewport) {
+		padding: $space-small 0;
+		grid-template-columns: 1fr auto;
+		grid-template-rows: auto auto;
+	}
+}
+
+#logo.has-logo {
+	@media($max-mobile-viewport) {
+		padding-left: 0;
+	}
+
+	a::before {
+		margin-right: 0;
+	}
+}
+
+#toplinks {
+	position: static;
+	@media($max-mobile-viewport) {
+		max-width: unset;
+		grid-area: 2 / 1 / 3 / 3;
+
+		.toplinks{
+			&--list {
+				display: flex;
+				justify-content: space-around;
+				gap: $space-large;
+			}
+
+			&--item {
+				text-align: center;
+			}
+		}
+	}
+}
+
+nav.site-nav {
+	@media($max-mobile-viewport) {
+		grid-area: 1 / 2 / 2 / 3;
+	}
+}
+
+.gru-nav-wrapper {
+	@media($max-mobile-viewport) {
+		margin-top: 0;
+	}
+}
+
+div.gru-nav {
+	.menu {
+		margin: 0;
+		@media($min-desktop-viewport) {
+			padding-left: $space-xlarge;
+		}
+
+		&--link {
+			border-right: 1px solid $blue-dark;
+			padding: 0 $space-large !important;
+			@media($max-mobile-viewport) {
+				margin: $space-medium 0;
+			}
+		}
+
+		&--label {
+			text-transform: uppercase;
+			font-weight: 900 !important;
+
+			&:hover {
+				text-decoration: underline;
+			}
+
+		}
+	}
+	
+	.gru-nav-button {
+		top: $space-medium;
+		right: $space-medium;
+		left: auto;
+		border-radius: 100%;
+		border: 9px solid transparent;
+
+		&.toggled {
+			background: $yellow;
+
+			& .icon-bar {
+				background: $blue-dark;
+			}
+		}
+
+		@media($max-mobile-viewport) {
+			+ ul {
+				width: 100vw;
+			}
+		}
+	}
+
+	.submenu {
+		@media($min-desktop-viewport) {
+			border: 1px solid white;
+		}
+
+		&--link {
+			@media($max-mobile-viewport) {
+				padding: $space-small 3rem;
+			}
+		}
+
+
+		&--label {
+			color: white;
+			&:hover {
+				color: $yellow;
+				text-decoration: underline;
+			}
+		}
+	}
+}
+
+%title {
+	background-image: linear-gradient(#{$yellow}, #{$yellow});
+	background-size: 60px 7px;
+	background-position: 0 100%;
+	background-repeat: no-repeat;
+	margin: $space-small 0;
+
+	@media ($max-mobile-viewport) {
+		font-size: $fz-3;
+	}
+}
+
+%button {
+	background: var(--background);
+	color: var(--color);
+	box-shadow: none;
+	font-weight: 700;
+	overflow: clip;
+	position: relative;
+	z-index: 1;
+	transition: 0;
+	padding: $space-large $space-xlarge;
+
+	&:hover {
+		box-shadow: none;
+		background: $button-background;
+	}
+
+	&::before {
+		top: 0;
+		left: 0;
+		width: 0;
+		height: 100%;
+		z-index: -1;
+		position: absolute;
+		background: var(--hover-background);
+		content: "";
+		transition: .2s ease;
+	}
+
+	&:hover::before {
+		width: 100%;
+	}
+}
+
+.pk-button-cancel {
+	&, #footer-wrapper & {
+		@extend %button;
+		background: $blue-dark;
+		color: white;
+		border: 1px solid white;
+	}
+}
+
+.form-content {
+	&--title {
+		background: transparent;
+		font-size: $fz-1;
+
+		@media($max-mobile-viewport) {
+			font-size: $fz-2;
+		}
+
+		color: $blue-dark;
+		font-weight: 900;
+		padding-top: 1rem;
+	}
+}
+
+.field {
+	&--label {
+		font-weight: 700;
+		color: $blue-dark;
+	}
+}
+
+.wcs-steps {
+	border-radius: 5px;
+	padding: $space-large;
+	box-shadow: 0 0 16px 0 rgba(0,0,0,.33)
+}
+
+input, textarea, .godo--editor, select, div.select2-container, span.select2-container {
+	border-bottom: 1px solid $blue-dark;
+}
+
+.select2-results {
+	border: 1px solid $blue-dark;
+}
+
+#footer {
+	padding: 3rem 0;
+
+	div.cell {
+		@media($max-mobile-viewport) {
+			display: flex;
+			justify-content: center;
+		}
+	}
+
+	.menu {
+		display: flex;
+		flex-direction: column;
+
+		&--label {
+			display: flex;
+			align-items: center;
+			text-transform: uppercase;
+			font-weight: 700;
+
+			&:hover {
+				color: $yellow;
+				text-decoration: underline;
+			}
+
+			&::before {
+				content: '\f054'; // chevron-right
+				font-family: FontAwesome;
+				color: $yellow;
+				font-weight: normal;
+				margin-right: 0.5em;
+				font-size: 0.7rem;
+			}
+
+			&:hover::before {
+				text-decoration: none;
+			}
+		}
+	}
+}

static/manche/_vars.scss

@@ -0,0 +1,79 @@
+@import '../includes/fonts/raleway';
+
+$blue: #496BAE;
+$blue-dark: #0B1E4D;
+$yellow: #FFCA60;
+$beige: #EEEBE8;
+
+$font-family: Raleway, sans-serif;
+
+$scale: 1rem;
+
+$space-small: 5px;
+$space-medium: 10px;
+$space-large: 18px;
+$space-xlarge: 35px;
+
+// Typo
+$fz-1: 55 / 16 * $scale;
+$fz-2: 36 / 16 * $scale;
+$fz-3: 28 / 16 * $scale;
+$font-size: 18 / 16 * $scale;
+$fz-small: 14 / 16 * $scale;
+
+$title-color: $blue;
+$title-font-size: $fz-2;
+$title-transform: uppercase;
+$title-weight: 700;
+$title-padding: $space-small 0;
+
+// Layout
+$width: 1140px;
+
+// Header
+$header-background-color: $yellow;
+$header-full-width-background: true;
+$header-logo-size: 200px 50px;
+
+$toplinks-style: none;
+
+$responsive-menu: left-to-right;
+$nav-active-color: $blue-dark;
+$nav-background: $yellow;
+$nav-item-background: transparent;
+$nav-item-selected-background: transparent;
+$nav-menu-color: $blue-dark;
+$nav-submenu-background: $blue-dark;
+$nav-mobile-menu-background: $blue-dark;
+$nav-mobile-menu-item-color: white;
+$nav-mobile-menu-item-hover-color: $yellow;
+$nav-button-color: $yellow;
+$nav-button-bar-height: 4px;
+$nav-after-image: false;
+
+
+// Widgets
+$widget-focus-outline: 2px solid $blue;
+$widget-border: 0;
+
+$button-background: $yellow;
+$button-color: $blue-dark;
+$button-hover-background: $blue;
+$button-hover-color: white;
+$button-border: 0;
+$button-border-radius: 2.375rem;
+$buttons-order: previous, cancel (grow), submit;
+$cancel-button-style: ".pk-button-cancel";
+
+// cells
+$cell-border: none;
+
+// w.c.s
+$wcs-steps-background: $beige;
+
+// Step
+$wcs-step-color: $blue-dark;
+$wcs-step-current-color: $blue;
+
+// Footer
+$footer-background: $blue-dark;

static/manche/config.json

@@ -0,0 +1,17 @@
+{
+  "label": "Manche",
+  "variables": {
+    "theme_color": "#0b1e4d",
+    "email_header_asset": "emails:logo"
+  },
+  "settings": {
+    "combo": {
+      "COMBO_ASSET_SLOTS.update": {
+        "header:background": { "label": "Têtière : fond" },
+        "header:logo": { "label": "Têtière : logo" },
+        "emails:logo": { "label": "Courriels : logo" }
+      }
+    }
+  }
+}
+

static/manche/style.scss

@@ -0,0 +1,5 @@
+@charset "UTF-8";
+
+@import 'vars';
+@import '../includes/publik';
+@import 'custom';

static/nanterre-2023/_custom.scss

@@ -148,22 +148,9 @@ label {
 //
 //	Layout
 //
-// add edge-gutter
-.page-width,
-.header-width,
-.nav-width,
-.footer-width,
-div#header {
-	@if $theme-edge-gutter {
-		--edge-gutter: #{$theme-edge-gutter};
-		box-sizing: content-box;
-		padding-left: var(--edge-gutter,);
-		padding-right: var(--edge-gutter);
-		width: auto !important;
-		@media ($max-mobile-viewport) {
-			--edge-gutter: 1em;
-		}
-	}
+
+.nav-width {
+	--edge-gutter: 0;
 }
 @media ($max-mobile-viewport) {
 	.central-content #sidebar {
@@ -394,7 +381,7 @@ div#main-content-wrapper {
 	@media ($min-desktop-viewport) {
 		min-height: 15rem;
 		background-color: $gray-light;
-		border-left-width: Max(#{$theme-edge-gutter)}, calc(50vw - var(--ref-width) / 2));
+		border-left-width: Max(#{$edge-gutter)}, calc(50vw - var(--ref-width) / 2));
 		border-left-color: $red;
 		border-left-style: solid;
 		padding-left: 0;

static/nanterre-2023/_vars.scss

@@ -19,7 +19,8 @@ $fz-xsmall: 12em / $base-font;
 $title-ff: Inter, sans-serif;
 
 // Layout
-$theme-edge-gutter: 2rem;
+$edge-gutter: 2rem;
+$edge-gutter-mobile: 1em;
 $central-content-top: 2rem;
 
 // Core vars

static/strasbourg-2018/_custom.scss

@@ -1407,6 +1407,9 @@ div#rub_service div.file-upload-widget {
 		}
 		div.widget-message {
 			padding-top: 30px;
+			p {
+				margin: 0;
+			}
 			&::before {
 				pointer-events: none;
 				content: "\f016";  // file-o

static/toodego/_custom.scss

@@ -907,7 +907,7 @@ div.wcs-tracking-code-input {
 	.gru-content #sidebar div.cell {
 		margin-right: 0;
 	}
-	.has-pwa-navigation footer {
+	footer {
 		margin-bottom: $mobile-navigation-height;
 	}
 	#footer-wrapper {

static/toulouse-2022/_json_cells.scss

@@ -3,7 +3,8 @@
 	&--item-name,
 	&--item-unit,
 	&--item-location,
-	&--item-date {
+	&--item-date,
+	&--item-no-capacity {
 		font-size: 90%;
 		margin-left: 10px;
 
@@ -23,6 +24,7 @@
 	&--item-name::before { content: "\f007"; }
 	&--item-location::before { content: "\f041"; }
 	&--item-date::before { content: "\f133"; }
+	&--item-no-capacity::before { content: "\f254"; color: $color-warning;}
 }
 
 .theme-basket {

static/toulouse-2022/backoffice.scss

@@ -8,6 +8,7 @@ $min-desktop-viewport: "min-width: #{$mobile-limit + 1}";
 $title-color: #161c2a;
 $title-font-size: 200%;
 $very-small-limit: 560px;
+$color-warning: #eb7500;
 
 .cancel-button {}
 .cell-items-pagination {}

templates/registration/password_reset_form.html

@@ -23,7 +23,7 @@
       </p>
     {% endif %}
 
-    <form method="post" class="pk-mark-optional-fields">
+    <form method="post" class="{% if not is_phone_authn_active %}pk-mark-optional-fields{% else %}pk-hide-requisiteness{% endif %}">
       {% csrf_token %}
       {{ form|with_template }}
       <button class="submit-button">{% trans 'Submit' %}</button>

templates/variants/alpes-maritimes-2022/authentic2/login_password_registration_form.html

@@ -1,4 +1,5 @@
 {% extends "authentic2/login_password_registration_form.html" %}
 
 {% block registration-block-title %}
+  <h2>Via courriel ou numéro de téléphone</h2>
 {% endblock %}

templates/variants/landes-cd40/combo/json/department-demands.html

@@ -2,12 +2,12 @@
   <h2 class="cell--title">{{ title }}</h2>
 {% endif %}
 
-{% if json.err and extranet.err and transmlph.err %}
+{% if json.err and extranet.err and transmlph.err and aiden.err %}
   <div class="cell--body">
     <p class="empty-message">Informations indisponibles.</p>
   </div>
 {% else %}
-  {% with json.data|add:extranet.data|add:transmlph.data as data %}
+  {% with json.data|add:extranet.data|add:transmlph.data|add:aiden.data as data %}
     {% if data %}
       <div class="links-list current-forms list-of-forms">
         <ul>

templates/variants/manche/theme.html

@@ -0,0 +1,12 @@
+{% extends 'theme.html' %}
+
+{# move nav #}
+{% block header-content %}
+  {% block nav %}{% endblock %}
+  {% block top-links %}{% endblock %}
+{% endblock %}
+
+{% block after-header %}
+{% endblock %}
+
+

templates/variants/toodego/combo/json/silo-a-verre.html

@@ -10,7 +10,10 @@
     </div>
     <div class="tile-content">
       <div class="adresse">
-        {{ silo.properties.voie }} {% if silo.properties.observation and silo.properties.observation != 'None' %}({{ silo.properties.observation }}){% endif %}<br>
+        {% firstof silo.properties.adresse silo.properties.voie %}
+        {% if silo.properties.observation_localisante %}({{ silo.properties.observation_localisante }}){% endif %}
+        {% if silo.properties.observation and silo.properties.observation != 'None' %}({{ silo.properties.observation }}){% endif %}
+        <br>
         {{ silo.properties.commune }}
       </div>
     </div>

templates/variants/toulouse-2022/combo/parsifal/catalogue.html

@@ -43,6 +43,11 @@
             <div class="theme-activities--item-type">{{ item.criterias.type.data|get:item.criterias.type.order.0 }}</div>
             <div class="theme-activities--item-location">{{ item.place.text }}</div>
             <div class="theme-activities--item-date">Du {{ item.unit.dateStart|date:"d/m/Y" }} au {{ item.unit.dateEnd|date:"d/m/Y" }}</div>
+            {% if item.place.capacityInfo.controlOK == False %}
+              <div class="theme-activities--item-no-capacity">
+                Plus de place, mais vous pouvez vous inscrire en liste d'attente
+              </div>
+            {% endif %}
           </div>
           <div class="theme-activities--item-details">
             <p class"theme-activities--item-description">{{ item.activity.activityPortail.blocNoteList.0.note }}</p>
@@ -54,7 +59,13 @@
               {% endfor %}.
             </p>
           </div>
-          <a class="pk-button" href="{{ eservices_url }}inscription-loisirs/tryauth?activity_id={{ item.activity.id }}&unit_id={{ item.unit.id }}&place_id={{ item.place.id }}&catalogue=Oui&cancelurl={{ portal_url }}mes-activites/">Inscription</a>
+          <a class="pk-button" href="{{ eservices_url }}{% if is_portal_agent %}backoffice/submission/{% endif %}inscription-loisirs/{% if not is_portal_agent %}tryauth{% endif %}?activity_id={{ item.activity.id }}&unit_id={{ item.unit.id }}&place_id={{ item.place.id }}&resume={{ resume }}{{ item.text }} // Du {{ item.unit.dateStart|date:"d/m/Y" }} au {{ item.unit.dateEnd|date:"d/m/Y" }}&catalogue=Oui{% if item.place.capacityInfo.controlOK == False %}&liste_attente=Oui{% endif %}{% if is_portal_agent %}&backoffice={{ foyer_id }}&cancelurl={{ portal_agent_url }}foyer/{{ foyer_id }}/page-activite/{% else %}&cancelurl={{ portal_url }}mes-activites/{% endif %}">
+            {% if item.place.capacityInfo.controlOK == False %}
+              Liste d'attente
+            {% else %}
+              Inscription
+            {% endif %}
+          </a>
         </div>
       {% endfor %}
       <div class="theme-activities--pagination">
@@ -77,6 +88,7 @@
         const $paginationPrev = $cell.find('.theme-activities--pagination-prev')
         const $paginationNext = $cell.find('.theme-activities--pagination-next')
         const paginateBy = {{ pagination|default:4 }};
+        const queryParams = (new URL(document.location)).searchParams;
 
         function updatePagination(step) {
           const items = $cell.find('.theme-activities--item.filtered')
@@ -100,7 +112,6 @@
         $paginationNext.click(() => updatePagination(1))
         updatePagination(0)
 
-        $cell.find('select[data-criteria]').each((_, elem) => $(elem).select2())
         $cell.find('select[data-criteria]').on('change', evt => {
           let selectedCriterias = []
 
@@ -134,6 +145,16 @@
           updatePagination(0)
         })
 
+        $cell.find('select[data-criteria]').each((_, element) => {
+          const $element = $(element)
+          $element.select2()
+          const criteriaValues = queryParams.get(element.dataset.criteria)
+          if (criteriaValues !== null) {
+            $element.val(criteriaValues.split(','))
+            $element.trigger('change')
+          }
+        })
+
         $cell.find('.theme-activities--item-label').on('click', evt => {
           $(evt.target).closest('.theme-activities--item').toggleClass('collapsed')
         })