From b759dae885c1766c38b29a82b020df290fb9ca5c Mon Sep 17 00:00:00 2001
From: Thomas JUND <tjund@entrouvert.com>
Date: Fri, 15 Nov 2019 17:54:30 +0100
Subject: [PATCH] split wcs.scss: isolate nearby-form module (#37704)

---
 Makefile                              |   2 +-
 static/includes/_wcs.scss             | 834 +-------------------------
 static/includes/wcs/_bulk.scss        | 760 +++++++++++++++++++++++
 static/includes/wcs/_nearby-form.scss |  82 +++
 4 files changed, 845 insertions(+), 833 deletions(-)
 create mode 100644 static/includes/wcs/_bulk.scss
 create mode 100644 static/includes/wcs/_nearby-form.scss

diff --git a/Makefile b/Makefile
index 841cc7cb..c6b10107 100644
--- a/Makefile
+++ b/Makefile
@@ -25,7 +25,7 @@ themes.json: $(wildcard static/*/config.json) help/fr/misc-scss.page
 
 %.css: export LC_ALL=C.UTF-8
 .SECONDEXPANSION:
-%.css: %.scss $(wildcard static/includes/*.scss) static/includes/_data_uris.scss static/lille/_data_uris.scss static/lomme/_data_uris.scss static/hellemmes/_data_uris.scss static/toodego/_data_uris.scss $$(wildcard $$(@D)/*.scss)
+%.css: %.scss $(wildcard static/includes/*.scss  static/includes/*/*.scss) static/includes/_data_uris.scss static/lille/_data_uris.scss static/lomme/_data_uris.scss static/hellemmes/_data_uris.scss static/toodego/_data_uris.scss $$(wildcard $$(@D)/*.scss)
 	sassc --sourcemap $< $@
 
 css: $(shell python get_themes.py) static/portal-agent/css/agent-portal.css
diff --git a/static/includes/_wcs.scss b/static/includes/_wcs.scss
index e1d30ccb..32cc755b 100644
--- a/static/includes/_wcs.scss
+++ b/static/includes/_wcs.scss
@@ -1,833 +1,3 @@
 @import 'grid';
-
-// $form-sidebar-position: position of sidebar (tracking code + steps)
-// possible values are: left, right, top
-$form-sidebar-position: left !default;
-
-$responsive-steps: horizontal !default;
-
-// hide a bunch of elements
-div#droite,
-div#services > h3,
-div#steps h2,
-div#sidebox div#links {
-	display: none;
-}
-
-// general layout
-
-div#gauche, div#rub_service {
-	margin-top: 15px;
-}
-
-div#rub_service {
-	background: $body-background;
-}
-
-@if ($form-sidebar-position == top) {
-	div#gauche {
-		text-align: center;
-		div#tracking-code {
-			display: inline-block;
-			min-width: 15rem;
-			a {
-				padding-left: 0;
-			}
-		}
-	}
-} @else {
-	div#gauche {
-		clear: both;
-		width: 18.5%;
-		@if ($form-sidebar-position == left) {
-			float: left;
-		} @else {
-			float: right;
-		}
-	}
-
-	div#gauche + div#rub_service {
-		width: 79.5%;
-		clear: none;
-		@if ($form-sidebar-position == left) {
-			float: right;
-		} @else {
-			float: left;
-		}
-	}
-}
-
-// style homepage blocks
-div#services > ul {
-	@include vendor-prefix('column-count', '2');
-	padding: 0;
-	margin: 0;
-	list-style: none;
-	@media screen and (max-width: $mobile-limit) {
-		@include vendor-prefix('column-count', '1');
-	}
-}
-
-div#services > ul > li {
-	display: inline-block;
-}
-
-div#services ul li li {
-	list-style: none;
-}
-
-div#services > ul > li {
-	margin: 0;
-	margin-bottom: 10px;
-	width: 100%;
-}
-
-div#tracking-code h3,
-div#rub_service h2 {
-	@extend %title;
-}
-
-div.large div#rub_service h3,
-div#rub_service h3 {
-	border: none;
-	text-align: left;
-	border-bottom: 2px solid $title-background;
-}
-
-div#rub_service div.dataview,
-div#rub_service dl#evolutions,
-div#rub_service form {
-	padding: 0.5rem;
-}
-
-div#rub_service div.dataview div.title h3 {
-	font-size: 115%;
-	border: 0;
-}
-
-div#rub_service div.dataview div.subtitle h4 {
-	font-size: 110%;
-}
-
-div#rub_service div.dataview div.field.status {
-	clear: both;
-}
-
-// tracking code
-div#tracking-code {
-	div.tracking-code-part + form {
-		margin-top: 1em;
-	}
-}
-
-div#tracking-code a {
-	font-size: 150%;
-	display: inline-block;
-	padding: 0.3em 0 0 0.3em;
-	color: #444;
-}
-
-div#tracking-code {
-	margin-bottom: 1em;
-}
-
-div#services div.block-custom-text {
-	margin: 1em;
-}
-
-// steps
-div#steps ol {
-	margin: 0;
-	padding: 0;
-	list-style: none;
-	color: #868686;
-
-	& li {
-		border: 0;
-		border-bottom: 1px solid #ccc;
-		margin-bottom: 1.5em;
-		border-radius: $border-radius;
-		padding: 0.7em;
-		letter-spacing: 1px;
-	}
-	& li.current {
-		border: 0;
-		background: $title-background;
-		color: $title-color;
-		& span.label {
-			font-weight: bold;
-		}
-	}
-	& li span.marker {
-		font-size: 250%;
-		display: block;
-	}
-}
-
-
-@if ($form-sidebar-position == top) {
-	div#steps ol {
-		text-align: center;
-		li {
-			display: inline-block;
-			min-width: 7rem;
-			max-width: 11rem;
-			vertical-align: top;
-			border-bottom: none;
-		}
-	}
-}
-
-@if ($responsive-steps == horizontal) {
-@media screen and (max-width: $mobile-limit) {
-	div#gauche {
-		float: none;
-		width: 100%;
-	}
-	div#side {
-		display: flex;
-		flex-direction: column;
-		& > div { flex: 1 0 auto; }
-	}
-	div#tracking-code {
-		font-size: 80%;
-		order: 1;
-		h3 { display: inline-block; }
-		.text-tracking-code-short-text { display: none; }
-	}
-	div#steps {
-		position: static;
-		margin: 0;
-		color: #aaa;
-		white-space: nowrap;
-		overflow: hidden;
-		width: 100%;
-		& ol {
-			list-style: none;
-			padding: 0 0;
-			margin: 0;
-			text-align: left;
-			& li {
-				border: none;
-				display: inline-block;
-				margin: 0;
-				padding: 0 1em 0.7em 0;
-				list-style: none;
-				min-width: auto;
-				border-radius: 0;
-				& span.marker {
-					float: none;
-					display: inline;
-					font-size: 26px;
-					position: static;
-					padding: 2px 9px;
-					font-weight: bold;
-					color: white;
-					text-align: center;
-					background: #ddd;
-					border-radius: $border-radius;
-					border: 1px solid #ddd;
-				}
-			}
-			& li.current {
-				background: inherit;
-				color: inherit;
-				& span.label {
-					font-weight: normal;
-				}
-				& span.marker {
-					background: $title-background;
-					color: $title-color;
-					border-radius: $border-radius;
-				}
-			}
-			& li.step-before .label {
-				display: none;
-			}
-		}
-	}
-}
-}  // @endif ($responsive-steps == horizontal)
-
-@media screen and (max-width: $mobile-limit) {
-	div#gauche + div#rub_service,
-	div#rub_service {
-		width: 100%;
-		margin: 0;
-		float: none;
-	}
-	div#gauche {
-		text-align: left;
-		div#tracking-code a {
-			padding-left: 0.3em;
-		}
-	}
-}
-
-li.required-authentication span {
-	display: none;
-}
-
-li.required-authentication a:after {
-	content: "\f084";
-	font-family: FontAwesome;
-	position: absolute;
-	right: 0.7em;
-	color: #444;
-}
-
-ul#evolutions,
-div.gru-content #disclose-dataview,
-div#receipt-intro {
-	margin: 1em;
-	padding: 0;
-	display: block;
-}
-
-div.qommon-map {
-	height: 280px;
-}
-
-p.use-file-from-fargo span {
-	cursor: pointer;
-	border-bottom: 1px dotted #999;
-}
-
-// journal
-ul#evolutions {
-	list-style: none;
-	padding: 0;
-	margin: 0;
-	position: relative;
-}
-
-#evolutions:after {
-	// the vertical timeline itself
-	content: "";
-	background: #bbb;
-	position: absolute;
-	width: 1px;
-	top: 40px;
-	left: 30px;
-	height: calc(100% - 40px);
-	z-index: 0;
-	border-radius: 3px;
-}
-
-ul#evolutions > li {
-	list-style-image: none;
-	margin: 1em 0 2em 0;
-	z-index: 10;
-	position: relative;
-	li {
-		margin: 1rem 0;
-	}
-}
-
-ul#evolutions > li:after {
-	// li:after, horizontal line, from the timeline to the item
-	content: "";
-	background: #bbb;
-	position: absolute;
-	width: 100px;
-	left: 30px;
-	top: 39px;
-	height: 1px;
-	z-index: -10;
-}
-
-ul#evolutions div.evolution-metadata {
-	width: auto;
-	display: inline-block;
-	background: $body-background;
-	margin-left: 60px;
-	padding: 0.7em;
-	padding-top: 30px;
-	padding-bottom: 0;
-	margin-bottom: 0;
-}
-
-ul#evolutions span.time {
-	display: block;
-	color: #aaa;
-}
-
-ul#evolutions li div.msg span.time {
-	padding-left: 0;
-}
-
-ul#evolutions span.status {
-	font-weight: bold;
-	display: inline-block;
-}
-
-ul#evolutions span.user {
-	display: block;
-	opacity: 0.5;
-}
-
-ul#evolutions span.user span {
-	font-size: 80%;
-}
-
-ul#evolutions li div.msg {
-	padding: 0.7em;
-	padding-top: 0;
-	position: relative;
-	background: $body-background;
-	margin-left: 60px;
-	margin-right: 30px;
-	p.wf-attachment {
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-}
-
-ul#evolutions li.msg-in div.msg {
-}
-
-ul#evolutions li.msg-out div.msg {
-}
-
-ul#evolutions li div.msg div.comment {
-	padding: 0.7em 1em;
-	background: #EEEEEE;
-}
-
-#evolutions .msg-system {
-	margin-bottom: 30px;
-}
-
-ul#evolutions li span.item {
-	// left circle icon
-	box-sizing: border-box;
-	position: absolute;
-	text-align: center;
-	width: 31px;
-	height: 31px;
-	display: block;
-	left:  15px;
-	border-radius: 20px;
-	border: 1px solid #888;
-	top: 24px;
-	background: $button-color !important;
-	box-shadow: 0 0 0px 5px $body-background;
-	&::before {
-		content: "";
-		display: block;
-		width: 7px;
-		height: 7px;
-		background: $primary-color;
-		position: relative;
-		left: 11px;
-		top: 11px;
-		border-radius: 5px;
-	}
-}
-
-div.dataview {
-	div.field {
-		margin-bottom: 0.7em;
-	}
-	span.label {
-		font-weight: bold;
-	}
-	.value {
-		display: block;
-		margin-left: 0.7em;
-	}
-}
-
-form div.errornotice {
-	margin-top: 0;
-}
-
-// classes to be used in forms (legacy, grid system to be preferred)
-div.halfwidth {
-	width: 45%;
-	float: left;
-}
-
-div.widget.halfwidth.right {
-	clear: none;
-	margin-left: 5%;
-}
-
-div.fullwidth {
-	width: 95%;
-}
-
-div.halfwidth,
-div.fullwidth {
-	textarea, select, input {
-		width: 100%;
-	}
-}
-
-div.buttons,
-div.dataview > p,
-div.dataview div.page {
-	clear: both;
-}
-
-form div.page::after,
-div.dataview div.page::after {
-	content: "";
-	display: block;
-	clear: both;
-}
-
-div.form-validation div.page {
-	background: #f0f0f0;
-	padding-left: 0.7em;
-	box-sizing: border-box;
-}
-
-div.form-validation div.page > h3 {
-	padding-top: 0.7em;
-	font-size: 140%;
-}
-
-div#rub_service div.form-validation div.page div h3 {
-	border-bottom-width: 1px;
-}
-
-label.activity {
-	display: block;
-	background: url(/static/img/spinner.gif) no-repeat top right;
-	padding-right: 30px;
-}
-
-span.geoloc-error {
-	padding-left: 0.7em;
-	font-weight: normal;
-	font-size: smaller;
-	float: right;
-	@media screen and (max-width: $mobile-limit) {
-		padding-left: 0;
-		float: none;
-		display: block;
-		z-index: 100;
-		background: red;
-		color: white;
-		text-align: center;
-	}
-}
-
-.fileprogress {
-	border: 1px solid #888;
-}
-
-.fileprogress {
-	.bar {
-		background: $button-background;
-		line-height: 1.5em;
-		padding-left: 0.7em;
-		white-space: nowrap;
-		transition: background linear 0.1s;
-		box-sizing: border-box;
-	}
-	&.upload-error .bar {
-		background: #FF7575;
-		color: black;
-		width: 100% !important;
-		white-space: normal;
-	}
-}
-
-.fileinfo {
-	line-height: 1.5em;
-	height: 100%;
-}
-
-div.fileinfo a.remove {
-	text-indent: 0;
-	background: none;
-	color: transparent;
-	display: inline-block;
-	width: 16px;
-	position: relative;
-	text-indent: -10000px;
-	&::before {
-		font-family: FontAwesome;
-		content: "\f057";  // times-circle
-		color: $button-background;
-		text-indent: 0;
-		position: absolute;
-		top: 0;
-		left: 0;
-	}
-}
-
-div.RankedItemsWidget label input {
-	margin-right: 1em;
-}
-
-div.RadiobuttonsWidget, div.SingleSelectHintWidget,
-div.SingleSelectWidget, div.SingleSelectWidgetWithOther {
-	&.hidden {
-		display: none !important;
-	}
-}
-
-div.CheckboxesWidget div.content ul li.disabled {
-	color: lighten($font-color, 50);
-}
-
-div.RadiobuttonsWidget div.content input[disabled] + span {
-	color: lighten($font-color, 50);
-}
-
-div.file-upload-widget {
-	&:not([class*="grid-"]) {
-		div.file-button {
-			max-width: 500px;
-		}
-	}
-	div.file-button {
-		overflow: hidden;
-		background: $widget-background;
-		margin: 0;
-		box-sizing: border-box;
-		border: $widget-border;
-		border-radius: $widget-border-radius;
-		&:focus-within {
-			border: $widget-focus-border;
-			@if $widget-focus-outline == none {
-				outline: $widget-border;
-				outline-style: dotted;
-			} @else {
-				outline: $widget-focus-outline;
-				outline-offset: $widget-focus-outline-offset;
-			}
-		}
-		height: 150px;
-		position: relative;
-		text-align: center;
-		div.widget.FileWidget {
-			margin-bottom: 0;
-		}
-		input {
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-			opacity: 0.001;
-			margin: 0;
-			font-size: 0;
-			cursor: pointer;
-		}
-		div.upload-done {
-			display: none;
-		}
-		div.click-to-upload {
-			display: block;
-		}
-		div.widget-message {
-			padding-top: 20px;
-			&::before {
-				pointer-events: none;
-				content: "\f016";  // file-o
-				font-family: FontAwesome;
-				font-size: 40px;
-				display: block;
-				padding-top: 20px;
-				padding-bottom: 10px;
-			}
-			&::after {
-				pointer-events: none;
-				content: "\f055";  // plus-circle
-				font-family: FontAwesome;
-				font-size: 20px;
-				display: block;
-				position: absolute;
-				left: calc(50% + 10px);
-				top: 30px;
-				color: $button-background;
-			}
-			&.upload-done::after {
-				content: "\f05d";  // check-circle-o
-			}
-		}
-		&.file-image div.widget-message::before {
-			content: "\f1c5";  // file-image-o
-		}
-	}
-	&.short div.file-button {
-		height: 110px;
-		div.widget-message {
-			padding-top: 0px;
-			&::before {
-				padding-top: 10px;
-			}
-			&::after {
-				top: 5px;
-			}
-		}
-	}
-	&.has-file {
-		div.file-button {
-			div.upload-done {
-				display: block;
-			}
-			div.click-to-upload {
-				display: none;
-			}
-		}
-	}
-	&.widget-readonly {
-		div.file-button {
-			div.widget-message {
-				display: none;
-			}
-			.fileinfo.thumbnail span.filename {
-				display: none;
-			}
-			span.filename {
-				position: absolute;
-				top: 0;
-				left: 0;
-				width: 100%;
-				display: block;
-				padding-top: 30px;
-				&::before {
-					pointer-events: none;
-					content: "\f016";  // file-o
-					font-family: FontAwesome;
-					font-size: 40px;
-					display: block;
-					padding-top: 40px;
-					padding-bottom: 10px;
-				}
-			}
-			img {
-				max-height: 100%;
-				position: relative;
-				z-index: 10;
-			}
-		}
-	}
-	div.fileprogress {
-		position: absolute;
-		border: none;
-		overflow: hidden;
-		width: 100%;
-		left: 0;
-		bottom: 0;
-	}
-}
-
-p.use-file-from-fargo {
-	margin-top: 0;
-}
-
-div.section.foldable {
-	margin-bottom: 1rem;
-	> h2:first-child {
-		&::after {
-			font-family: FontAwesome;
-			content: "\f106";  // angle-up
-			position: absolute;
-			right: 1em;
-		}
-		cursor: pointer;
-		&:focus span.disclose-message,
-		&:hover span.disclose-message {
-			text-decoration: underline;
-		}
-	}
-	span.disclose-message {
-		padding-left: 1ex;
-		font-size: 1rem;
-		display: none;
-	}
-	&.folded {
-		span.disclose-message {
-			display: inline-block;
-			@media screen and (max-width: $mobile-limit) {
-				// never displayed on mobile as the small width
-				// makes clear the relation between title and
-				// open/close bracket.
-				display: none;
-			}
-		}
-		div {
-			display: none;
-		}
-		> h2:first-child::after {
-			content: "\f107";  // angle-down
-		}
-	}
-}
-
-.nearby-forms {
-	margin: 0;
-	padding: 0;
-}
-
-.nearby-form {
-	margin: 5px auto;
-	display: -ms-flexbox;
-	display: flex;
-	-ms-align-items: center;
-	-ms-flex-align: center;
-	align-items: center;
-	-ms-flex-line-pack: center;
-	align-content: center;
-	-ms-flex-pack: space-between;
-	-ms-justify-content: space-between;
-	justify-content: space-between;
-	border: $widget-border;
-	padding: 5px;
-}
-
-.nearby-form--digest, .nearby-form--datetime, .nearby-form--marker-counter {
-	margin: 0 5px;
-}
-
-.nearby-form--digest {
-	width: 60%;
-}
-.nearby-form--datetime {
-	width: 20%;
-	@media screen and (max-width: $mobile-limit) {
-		width: 30%;
-	}
-}
-.nearby-form--marker-counter {
-	background: $button-background;
-	padding: 5px 10px;
-	color: $button-color;
-	min-width: 0.5em;
-	max-width: 1em;
-	border-radius: 3px;
-}
-
-.template-nearby-forms div.leaflet-div-icon {
-	padding: 3px;
-	margin: auto;
-	border-radius: 3px;
-	display: -ms-flexbox;
-	display: flex;
-	a {
-		line-height: 1;
-		margin: auto;
-	}
-}
-
-.signalements-thanks ~ .buttons {
-	.submit-button, .previous-button {
-		display: none;
-	}
-	.cancel-button button {
-		text-indent: -9999px;
-		line-height: 0;
-		&::after {
-			text-indent: 0;
-			line-height: initial;
-			display: block;
-			content: 'Continuer';
-		}
-	}
-}
+@import 'wcs/bulk';
+@import 'wcs/nearby-form'
\ No newline at end of file
diff --git a/static/includes/wcs/_bulk.scss b/static/includes/wcs/_bulk.scss
new file mode 100644
index 00000000..442f999e
--- /dev/null
+++ b/static/includes/wcs/_bulk.scss
@@ -0,0 +1,760 @@
+// $form-sidebar-position: position of sidebar (tracking code + steps)
+// possible values are: left, right, top
+$form-sidebar-position: left !default;
+
+$responsive-steps: horizontal !default;
+
+// hide a bunch of elements
+div#droite,
+div#services > h3,
+div#steps h2,
+div#sidebox div#links {
+	display: none;
+}
+
+// general layout
+
+div#gauche, div#rub_service {
+	margin-top: 15px;
+}
+
+div#rub_service {
+	background: $body-background;
+}
+
+@if ($form-sidebar-position == top) {
+	div#gauche {
+		text-align: center;
+		div#tracking-code {
+			display: inline-block;
+			min-width: 15rem;
+			a {
+				padding-left: 0;
+			}
+		}
+	}
+} @else {
+	div#gauche {
+		clear: both;
+		width: 18.5%;
+		@if ($form-sidebar-position == left) {
+			float: left;
+		} @else {
+			float: right;
+		}
+	}
+
+	div#gauche + div#rub_service {
+		width: 79.5%;
+		clear: none;
+		@if ($form-sidebar-position == left) {
+			float: right;
+		} @else {
+			float: left;
+		}
+	}
+}
+
+// style homepage blocks
+div#services > ul {
+	@include vendor-prefix('column-count', '2');
+	padding: 0;
+	margin: 0;
+	list-style: none;
+	@media screen and (max-width: $mobile-limit) {
+		@include vendor-prefix('column-count', '1');
+	}
+}
+
+div#services > ul > li {
+	display: inline-block;
+}
+
+div#services ul li li {
+	list-style: none;
+}
+
+div#services > ul > li {
+	margin: 0;
+	margin-bottom: 10px;
+	width: 100%;
+}
+
+div#tracking-code h3,
+div#rub_service h2 {
+	@extend %title;
+}
+
+div.large div#rub_service h3,
+div#rub_service h3 {
+	border: none;
+	text-align: left;
+	border-bottom: 2px solid $title-background;
+}
+
+div#rub_service div.dataview,
+div#rub_service dl#evolutions,
+div#rub_service form {
+	padding: 0.5rem;
+}
+
+div#rub_service div.dataview div.title h3 {
+	font-size: 115%;
+	border: 0;
+}
+
+div#rub_service div.dataview div.subtitle h4 {
+	font-size: 110%;
+}
+
+div#rub_service div.dataview div.field.status {
+	clear: both;
+}
+
+// tracking code
+div#tracking-code {
+	div.tracking-code-part + form {
+		margin-top: 1em;
+	}
+}
+
+div#tracking-code a {
+	font-size: 150%;
+	display: inline-block;
+	padding: 0.3em 0 0 0.3em;
+	color: #444;
+}
+
+div#tracking-code {
+	margin-bottom: 1em;
+}
+
+div#services div.block-custom-text {
+	margin: 1em;
+}
+
+// steps
+div#steps ol {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	color: #868686;
+
+	& li {
+		border: 0;
+		border-bottom: 1px solid #ccc;
+		margin-bottom: 1.5em;
+		border-radius: $border-radius;
+		padding: 0.7em;
+		letter-spacing: 1px;
+	}
+	& li.current {
+		border: 0;
+		background: $title-background;
+		color: $title-color;
+		& span.label {
+			font-weight: bold;
+		}
+	}
+	& li span.marker {
+		font-size: 250%;
+		display: block;
+	}
+}
+
+
+@if ($form-sidebar-position == top) {
+	div#steps ol {
+		text-align: center;
+		li {
+			display: inline-block;
+			min-width: 7rem;
+			max-width: 11rem;
+			vertical-align: top;
+			border-bottom: none;
+		}
+	}
+}
+
+@if ($responsive-steps == horizontal) {
+@media screen and (max-width: $mobile-limit) {
+	div#gauche {
+		float: none;
+		width: 100%;
+	}
+	div#side {
+		display: flex;
+		flex-direction: column;
+		& > div { flex: 1 0 auto; }
+	}
+	div#tracking-code {
+		font-size: 80%;
+		order: 1;
+		h3 { display: inline-block; }
+		.text-tracking-code-short-text { display: none; }
+	}
+	div#steps {
+		position: static;
+		margin: 0;
+		color: #aaa;
+		white-space: nowrap;
+		overflow: hidden;
+		width: 100%;
+		& ol {
+			list-style: none;
+			padding: 0 0;
+			margin: 0;
+			text-align: left;
+			& li {
+				border: none;
+				display: inline-block;
+				margin: 0;
+				padding: 0 1em 0.7em 0;
+				list-style: none;
+				min-width: auto;
+				border-radius: 0;
+				& span.marker {
+					float: none;
+					display: inline;
+					font-size: 26px;
+					position: static;
+					padding: 2px 9px;
+					font-weight: bold;
+					color: white;
+					text-align: center;
+					background: #ddd;
+					border-radius: $border-radius;
+					border: 1px solid #ddd;
+				}
+			}
+			& li.current {
+				background: inherit;
+				color: inherit;
+				& span.label {
+					font-weight: normal;
+				}
+				& span.marker {
+					background: $title-background;
+					color: $title-color;
+					border-radius: $border-radius;
+				}
+			}
+			& li.step-before .label {
+				display: none;
+			}
+		}
+	}
+}
+}  // @endif ($responsive-steps == horizontal)
+
+@media screen and (max-width: $mobile-limit) {
+	div#gauche + div#rub_service,
+	div#rub_service {
+		width: 100%;
+		margin: 0;
+		float: none;
+	}
+	div#gauche {
+		text-align: left;
+		div#tracking-code a {
+			padding-left: 0.3em;
+		}
+	}
+}
+
+li.required-authentication span {
+	display: none;
+}
+
+li.required-authentication a:after {
+	content: "\f084";
+	font-family: FontAwesome;
+	position: absolute;
+	right: 0.7em;
+	color: #444;
+}
+
+ul#evolutions,
+div.gru-content #disclose-dataview,
+div#receipt-intro {
+	margin: 1em;
+	padding: 0;
+	display: block;
+}
+
+div.qommon-map {
+	height: 280px;
+}
+
+p.use-file-from-fargo span {
+	cursor: pointer;
+	border-bottom: 1px dotted #999;
+}
+
+// journal
+ul#evolutions {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	position: relative;
+}
+
+#evolutions:after {
+	// the vertical timeline itself
+	content: "";
+	background: #bbb;
+	position: absolute;
+	width: 1px;
+	top: 40px;
+	left: 30px;
+	height: calc(100% - 40px);
+	z-index: 0;
+	border-radius: 3px;
+}
+
+ul#evolutions > li {
+	list-style-image: none;
+	margin: 1em 0 2em 0;
+	z-index: 10;
+	position: relative;
+	li {
+		margin: 1rem 0;
+	}
+}
+
+ul#evolutions > li:after {
+	// li:after, horizontal line, from the timeline to the item
+	content: "";
+	background: #bbb;
+	position: absolute;
+	width: 100px;
+	left: 30px;
+	top: 39px;
+	height: 1px;
+	z-index: -10;
+}
+
+ul#evolutions div.evolution-metadata {
+	width: auto;
+	display: inline-block;
+	background: $body-background;
+	margin-left: 60px;
+	padding: 0.7em;
+	padding-top: 30px;
+	padding-bottom: 0;
+	margin-bottom: 0;
+}
+
+ul#evolutions span.time {
+	display: block;
+	color: #aaa;
+}
+
+ul#evolutions li div.msg span.time {
+	padding-left: 0;
+}
+
+ul#evolutions span.status {
+	font-weight: bold;
+	display: inline-block;
+}
+
+ul#evolutions span.user {
+	display: block;
+	opacity: 0.5;
+}
+
+ul#evolutions span.user span {
+	font-size: 80%;
+}
+
+ul#evolutions li div.msg {
+	padding: 0.7em;
+	padding-top: 0;
+	position: relative;
+	background: $body-background;
+	margin-left: 60px;
+	margin-right: 30px;
+	p.wf-attachment {
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+}
+
+ul#evolutions li.msg-in div.msg {
+}
+
+ul#evolutions li.msg-out div.msg {
+}
+
+ul#evolutions li div.msg div.comment {
+	padding: 0.7em 1em;
+	background: #EEEEEE;
+}
+
+#evolutions .msg-system {
+	margin-bottom: 30px;
+}
+
+ul#evolutions li span.item {
+	// left circle icon
+	box-sizing: border-box;
+	position: absolute;
+	text-align: center;
+	width: 31px;
+	height: 31px;
+	display: block;
+	left:  15px;
+	border-radius: 20px;
+	border: 1px solid #888;
+	top: 24px;
+	background: $button-color !important;
+	box-shadow: 0 0 0px 5px $body-background;
+	&::before {
+		content: "";
+		display: block;
+		width: 7px;
+		height: 7px;
+		background: $primary-color;
+		position: relative;
+		left: 11px;
+		top: 11px;
+		border-radius: 5px;
+	}
+}
+
+div.dataview {
+	div.field {
+		margin-bottom: 0.7em;
+	}
+	span.label {
+		font-weight: bold;
+	}
+	.value {
+		display: block;
+		margin-left: 0.7em;
+	}
+}
+
+form div.errornotice {
+	margin-top: 0;
+}
+
+// classes to be used in forms (legacy, grid system to be preferred)
+div.halfwidth {
+	width: 45%;
+	float: left;
+}
+
+div.widget.halfwidth.right {
+	clear: none;
+	margin-left: 5%;
+}
+
+div.fullwidth {
+	width: 95%;
+}
+
+div.halfwidth,
+div.fullwidth {
+	textarea, select, input {
+		width: 100%;
+	}
+}
+
+div.buttons,
+div.dataview > p,
+div.dataview div.page {
+	clear: both;
+}
+
+form div.page::after,
+div.dataview div.page::after {
+	content: "";
+	display: block;
+	clear: both;
+}
+
+div.form-validation div.page {
+	background: #f0f0f0;
+	padding-left: 0.7em;
+	box-sizing: border-box;
+}
+
+div.form-validation div.page > h3 {
+	padding-top: 0.7em;
+	font-size: 140%;
+}
+
+div#rub_service div.form-validation div.page div h3 {
+	border-bottom-width: 1px;
+}
+
+label.activity {
+	display: block;
+	background: url(/static/img/spinner.gif) no-repeat top right;
+	padding-right: 30px;
+}
+
+span.geoloc-error {
+	padding-left: 0.7em;
+	font-weight: normal;
+	font-size: smaller;
+	float: right;
+	@media screen and (max-width: $mobile-limit) {
+		padding-left: 0;
+		float: none;
+		display: block;
+		z-index: 100;
+		background: red;
+		color: white;
+		text-align: center;
+	}
+}
+
+.fileprogress {
+	border: 1px solid #888;
+}
+
+.fileprogress {
+	.bar {
+		background: $button-background;
+		line-height: 1.5em;
+		padding-left: 0.7em;
+		white-space: nowrap;
+		transition: background linear 0.1s;
+		box-sizing: border-box;
+	}
+	&.upload-error .bar {
+		background: #FF7575;
+		color: black;
+		width: 100% !important;
+		white-space: normal;
+	}
+}
+
+.fileinfo {
+	line-height: 1.5em;
+	height: 100%;
+}
+
+div.fileinfo a.remove {
+	text-indent: 0;
+	background: none;
+	color: transparent;
+	display: inline-block;
+	width: 16px;
+	position: relative;
+	text-indent: -10000px;
+	&::before {
+		font-family: FontAwesome;
+		content: "\f057";  // times-circle
+		color: $button-background;
+		text-indent: 0;
+		position: absolute;
+		top: 0;
+		left: 0;
+	}
+}
+
+div.RankedItemsWidget label input {
+	margin-right: 1em;
+}
+
+div.RadiobuttonsWidget, div.SingleSelectHintWidget,
+div.SingleSelectWidget, div.SingleSelectWidgetWithOther {
+	&.hidden {
+		display: none !important;
+	}
+}
+
+div.CheckboxesWidget div.content ul li.disabled {
+	color: lighten($font-color, 50);
+}
+
+div.RadiobuttonsWidget div.content input[disabled] + span {
+	color: lighten($font-color, 50);
+}
+
+div.file-upload-widget {
+	&:not([class*="grid-"]) {
+		div.file-button {
+			max-width: 500px;
+		}
+	}
+	div.file-button {
+		overflow: hidden;
+		background: $widget-background;
+		margin: 0;
+		box-sizing: border-box;
+		border: $widget-border;
+		border-radius: $widget-border-radius;
+		&:focus-within {
+			border: $widget-focus-border;
+			@if $widget-focus-outline == none {
+				outline: $widget-border;
+				outline-style: dotted;
+			} @else {
+				outline: $widget-focus-outline;
+				outline-offset: $widget-focus-outline-offset;
+			}
+		}
+		height: 150px;
+		position: relative;
+		text-align: center;
+		div.widget.FileWidget {
+			margin-bottom: 0;
+		}
+		input {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			opacity: 0.001;
+			margin: 0;
+			font-size: 0;
+			cursor: pointer;
+		}
+		div.upload-done {
+			display: none;
+		}
+		div.click-to-upload {
+			display: block;
+		}
+		div.widget-message {
+			padding-top: 20px;
+			&::before {
+				pointer-events: none;
+				content: "\f016";  // file-o
+				font-family: FontAwesome;
+				font-size: 40px;
+				display: block;
+				padding-top: 20px;
+				padding-bottom: 10px;
+			}
+			&::after {
+				pointer-events: none;
+				content: "\f055";  // plus-circle
+				font-family: FontAwesome;
+				font-size: 20px;
+				display: block;
+				position: absolute;
+				left: calc(50% + 10px);
+				top: 30px;
+				color: $button-background;
+			}
+			&.upload-done::after {
+				content: "\f05d";  // check-circle-o
+			}
+		}
+		&.file-image div.widget-message::before {
+			content: "\f1c5";  // file-image-o
+		}
+	}
+	&.short div.file-button {
+		height: 110px;
+		div.widget-message {
+			padding-top: 0px;
+			&::before {
+				padding-top: 10px;
+			}
+			&::after {
+				top: 5px;
+			}
+		}
+	}
+	&.has-file {
+		div.file-button {
+			div.upload-done {
+				display: block;
+			}
+			div.click-to-upload {
+				display: none;
+			}
+		}
+	}
+	&.widget-readonly {
+		div.file-button {
+			div.widget-message {
+				display: none;
+			}
+			.fileinfo.thumbnail span.filename {
+				display: none;
+			}
+			span.filename {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				display: block;
+				padding-top: 30px;
+				&::before {
+					pointer-events: none;
+					content: "\f016";  // file-o
+					font-family: FontAwesome;
+					font-size: 40px;
+					display: block;
+					padding-top: 40px;
+					padding-bottom: 10px;
+				}
+			}
+			img {
+				max-height: 100%;
+				position: relative;
+				z-index: 10;
+			}
+		}
+	}
+	div.fileprogress {
+		position: absolute;
+		border: none;
+		overflow: hidden;
+		width: 100%;
+		left: 0;
+		bottom: 0;
+	}
+}
+
+p.use-file-from-fargo {
+	margin-top: 0;
+}
+
+div.section.foldable {
+	margin-bottom: 1rem;
+	> h2:first-child {
+		&::after {
+			font-family: FontAwesome;
+			content: "\f106";  // angle-up
+			position: absolute;
+			right: 1em;
+		}
+		cursor: pointer;
+		&:focus span.disclose-message,
+		&:hover span.disclose-message {
+			text-decoration: underline;
+		}
+	}
+	span.disclose-message {
+		padding-left: 1ex;
+		font-size: 1rem;
+		display: none;
+	}
+	&.folded {
+		span.disclose-message {
+			display: inline-block;
+			@media screen and (max-width: $mobile-limit) {
+				// never displayed on mobile as the small width
+				// makes clear the relation between title and
+				// open/close bracket.
+				display: none;
+			}
+		}
+		div {
+			display: none;
+		}
+		> h2:first-child::after {
+			content: "\f107";  // angle-down
+		}
+	}
+}
diff --git a/static/includes/wcs/_nearby-form.scss b/static/includes/wcs/_nearby-form.scss
new file mode 100644
index 00000000..3bc845ff
--- /dev/null
+++ b/static/includes/wcs/_nearby-form.scss
@@ -0,0 +1,82 @@
+/*
+ *	Nearby form
+ *	
+ *	Ajout de styles à un champ carte pour sélectionner un signalement identique à proximité
+ *
+ *	Template
+ *		quommon/forms/widgets/nearby-forms.html
+ *	JS
+ *		static/js/plus1.js
+ */
+
+ 
+.nearby-forms {
+	margin: 0;
+	padding: 0;
+}
+
+.nearby-form {
+	margin: 5px auto;
+	display: -ms-flexbox;
+	display: flex;
+	-ms-align-items: center;
+	-ms-flex-align: center;
+	align-items: center;
+	-ms-flex-line-pack: center;
+	align-content: center;
+	-ms-flex-pack: space-between;
+	-ms-justify-content: space-between;
+	justify-content: space-between;
+	border: $widget-border;
+	padding: 5px;
+}
+
+.nearby-form--digest, .nearby-form--datetime, .nearby-form--marker-counter {
+	margin: 0 5px;
+}
+
+.nearby-form--digest {
+	width: 60%;
+}
+.nearby-form--datetime {
+	width: 20%;
+	@media screen and (max-width: $mobile-limit) {
+		width: 30%;
+	}
+}
+.nearby-form--marker-counter {
+	background: $button-background;
+	padding: 5px 10px;
+	color: $button-color;
+	min-width: 0.5em;
+	max-width: 1em;
+	border-radius: 3px;
+}
+
+.template-nearby-forms div.leaflet-div-icon {
+	padding: 3px;
+	margin: auto;
+	border-radius: 3px;
+	display: -ms-flexbox;
+	display: flex;
+	a {
+		line-height: 1;
+		margin: auto;
+	}
+}
+
+.signalements-thanks ~ .buttons {
+	.submit-button, .previous-button {
+		display: none;
+	}
+	.cancel-button button {
+		text-indent: -9999px;
+		line-height: 0;
+		&::after {
+			text-indent: 0;
+			line-height: initial;
+			display: block;
+			content: 'Continuer';
+		}
+	}
+}
-- 
2.20.1

