Fix styling of edit form

web/profiles/custom/os2loop/themes/os2loop_theme/assets/app.scss

@@ -14,7 +14,6 @@
 @import "documents";
 @import "tabs";
 @import "fields";
-@import "form";
 @import "icons";
 @import "search";
 @import "terms";

web/profiles/custom/os2loop/themes/os2loop_theme/assets/bootstrap-custom/bootstrap-custom-index.scss

@@ -6,7 +6,6 @@
 @import "badge/badge.scss";
 @import "button-group/button-group.scss";
 @import "dropdown/dropdown.scss";
-@import "form/form.scss";
 @import "navbar/navbar.scss";
 @import "navbar/nav.scss";
 @import "button/button.scss";

web/profiles/custom/os2loop/themes/os2loop_theme/assets/bootstrap-custom/form-control/form-control.scss

@@ -41,7 +41,7 @@ input {
 	input.form-autocomplete,
 	.form-autocomplete,
 	.form-control {
-		height: 48px;
+		min-height: 48px;
 		padding-left: 15px;
 		padding-right: 15px;
 		&.no-background-image {

web/profiles/custom/os2loop/themes/os2loop_theme/assets/custom/autocomplete-deluxe.scss

@@ -0,0 +1,88 @@
+div.autocomplete-deluxe-multiple,
+div.autocomplete-deluxe-container {
+	@extend .w-100;
+	@extend .d-block;
+	@extend .input-group;
+
+	background: $input-bg;
+	min-height: 48px;
+
+	margin-top: $form-check-input-margin-y;
+	padding: $input-padding-y $input-padding-x;
+
+	box-sizing: border-box;
+	box-shadow: none;
+
+	border: 1px solid transparent;
+	border-radius: $input-border-radius;
+
+	div {
+		@extend .d-flex;
+		@extend .align-items-center;
+	}
+
+	&:focus-within {
+		border: 1px solid $loop-green-400;
+	}
+
+	.form-group {
+		margin-bottom: 0;
+	}
+
+	input.ui-autocomplete-input {
+		&.autocomplete-deluxe-form-single,
+		&.autocomplete-deluxe-multiple {
+			min-height: initial;
+			height: 100%;
+
+			font-size: $font-size-base;
+			color: $body-color;
+
+			padding: 0;
+			margin: 0 15px;
+
+			// TODO: figure out vertical alignment
+			vertical-align: middle;
+		}
+
+		~ div.autocomplete-deluxe-throbber,
+		~ div.autocomplete-deluxe-closed {
+			@extend .d-none;
+		}
+	}
+}
+
+.autocomplete-deluxe-item {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	background-color: $gray-300;
+	color: $gray-600;
+
+	border: none;
+	border-radius: 4px;
+	padding: 6px 8px;
+
+	font-size: $badge-font-size;
+	font-weight: $badge-font-weight;
+	line-height: 1;
+
+	+ .autocomplete-deluxe-item {
+		margin-left: 15px;
+	}
+
+	.autocomplete-deluxe-item-delete {
+		position: static;
+		margin-left: 10px;
+
+		height: $badge-font-size;
+		width: $badge-font-size;
+
+		background-image: none;
+		background-color: $gray-600;
+
+		mask-image: url("~bootstrap-icons/icons/x.svg");
+		-webkit-mask-image: url("~bootstrap-icons/icons/x.svg");
+	}
+}

web/profiles/custom/os2loop/themes/os2loop_theme/assets/custom/custom-index.scss

@@ -1,7 +1,7 @@
 @import "mixins.scss";
 
 @import "block.scss";
-@import "forms.scss";
+@import "autocomplete-deluxe.scss";
 @import "user.scss";
 @import "user-form.scss";
 @import "icons.scss";

web/profiles/custom/os2loop/themes/os2loop_theme/assets/custom/user-form.scss

@@ -7,4 +7,33 @@
 	#edit-account {
 		@extend .d-none;
 	}
+
+	.field-group-fieldset > .fieldset-wrapper {
+		display: inline-flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		align-items: center;
+		width: 100%;
+
+		> div.field--type-string,
+		> div.field--type-string-long,
+		> div.field--type-list-integer,
+		> div.field--type-entity-reference {
+			width: 100%;
+
+			&:not(:only-child) {
+				width: 48%;
+			}
+		}
+	}
+
+	.field--type-entity-reference {
+		@extend .form-group;
+		margin-bottom: 0;
+	}
+
+	.form-submit {
+		display: flex;
+		margin-left: auto;
+	}
 }

web/profiles/custom/os2loop/themes/os2loop_theme/os2loop_theme.theme

@@ -56,9 +56,15 @@ function os2loop_theme_preprocess_block(&$variables) {
   // Set page title for user/[uid] pages.
   if ('page_title_block' == $variables['plugin_id']) {
     $path = \Drupal::routeMatch()->getRouteObject()->getPath();
-    if ('/user/{user}' === $path) {
-      $user = \Drupal::routeMatch()->getParameter('user');
-      $variables['content']['#title'] = $user->os2loop_user_given_name->value . ' ' . $user->os2loop_user_family_name->value;
+
+    switch ($path) {
+      case '/user/{user}':
+        $variables['content']['#title'] = 'Profile';
+        break;
+
+      case '/user/{user}/edit':
+        $variables['content']['#title'] = 'Edit profile';
+        break;
     }
   }
 }

web/profiles/custom/os2loop/themes/os2loop_theme/templates/form/input--textfield.html.twig

@@ -20,12 +20,16 @@
 {# Apparently using hook_form_alter to set the input type to "search" breaks autocompleting #}
 {% if 'search_api_autocomplete' == element['#type'] %}
   {% set attributes = attributes.removeClass('form-text').setAttribute('type', 'search') %}
+  {% set show_search_button = TRUE %}
 {% endif %}
+
 <div>
   <div class="input-group">
     <input{{ attributes.addClass(classes) }}/>
+    {% if show_search_button %}
     <span class="input-group-btn">
       <button class="btn btn-primary btn-lg ml-20" data-search-api-autocomplete-search="os2loop_search_db">{{ 'Search'|t }}</button>
     </span>
+    {% endif %}
   </div>
 </div>