Merged in feature/BKL-38-EditProfilePage (pull request #18)

Feature/BKL-38 EditProfilePage

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

@@ -33,15 +33,15 @@ input {
 }
 
 .form-group {
-  label {
-    color: $gray-600;
-    // TODO: something about sizing
-  }
+	label {
+		color: $gray-600;
+		// TODO: something about sizing
+	}
 	input.form-control,
 	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/block.scss

@@ -10,20 +10,20 @@ $block-color-map: (
 );
 
 @mixin background-modifiers {
-  @each $name, $color in $block-color-map {
-    &-#{$name} {
-      background-color: $color
-    }
-  }
+	@each $name, $color in $block-color-map {
+		&-#{$name} {
+			background-color: $color;
+		}
+	}
 }
 
 .bg {
-  @include background-modifiers
+	@include background-modifiers;
 }
 
 .block {
 	border-radius: 10px;
-	padding: 30px;
+	padding: 30px !important;
 
 	@each $block, $color in $block-color-map {
 		&.#{$block} {

web/profiles/custom/os2loop/themes/os2loop_theme/assets/custom/comment-icon.scss

@@ -1,12 +1,13 @@
 .subject {
-  &.comment, &.answer {
-    &:before {
-      display: inline-block;
-      content: "";
-      background: url("../svg/comment.svg") no-repeat 0 0;
-      height: 23px;
-      width: 22px;
-      margin-right: 9px;
-    }
-  }
+	&.comment,
+	&.answer {
+		&:before {
+			display: inline-block;
+			content: "";
+			background: url("../svg/comment.svg") no-repeat 0 0;
+			height: 23px;
+			width: 22px;
+			margin-right: 9px;
+		}
+	}
 }

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

@@ -1,8 +1,9 @@
 @import "mixins.scss";
 
 @import "block.scss";
-@import "forms.scss";
+@import "autocomplete-deluxe.scss";
 @import "user.scss";
+@import "user-form.scss";
 @import "icons.scss";
 @import "title.scss";
 @import "btn-file-attachment.scss";

web/profiles/custom/os2loop/themes/os2loop_theme/assets/custom/search-result-item.scss

@@ -6,4 +6,3 @@
 		text-decoration: none;
 	}
 }
-

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

@@ -0,0 +1,39 @@
+.user-form {
+	.form-wrapper {
+		padding: 0;
+	}
+
+	legend,
+	#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>