diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/app.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/app.scss index df6558866..519fbcffb 100644 --- a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/app.scss +++ b/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"; diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/bootstrap-custom/bootstrap-custom-index.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/bootstrap-custom/bootstrap-custom-index.scss index defc8fbd2..dfb707c0b 100644 --- a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/bootstrap-custom/bootstrap-custom-index.scss +++ b/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"; diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/bootstrap-custom/form-control/form-control.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/bootstrap-custom/form-control/form-control.scss index 5b8ecebe9..275cb9715 100644 --- a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/bootstrap-custom/form-control/form-control.scss +++ b/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 { diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/bootstrap-custom/form/form.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/bootstrap-custom/form/form.scss deleted file mode 100644 index 3e287d958..000000000 --- a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/bootstrap-custom/form/form.scss +++ /dev/null @@ -1,35 +0,0 @@ -@import "../../colors-signifly.scss"; - -.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; - -webkit-mask-image: url("../../../node_modules/bootstrap-icons/icons/x.svg"); - mask-image: url("../../../node_modules/bootstrap-icons/icons/x.svg"); - } -} diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/custom/autocomplete-deluxe.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/custom/autocomplete-deluxe.scss new file mode 100644 index 000000000..f70de7a0b --- /dev/null +++ b/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"); + } +} diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/custom/block.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/custom/block.scss index 01d060a58..6f912c2e6 100644 --- a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/custom/block.scss +++ b/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} { diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/custom/comment-icon.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/custom/comment-icon.scss index e84740773..44c8816d0 100644 --- a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/custom/comment-icon.scss +++ b/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; + } + } } diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/custom/custom-index.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/custom/custom-index.scss index ec699e551..89ca0e05c 100644 --- a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/custom/custom-index.scss +++ b/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"; diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/custom/forms.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/custom/forms.scss deleted file mode 100644 index da6e83af2..000000000 --- a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/custom/forms.scss +++ /dev/null @@ -1,39 +0,0 @@ -/* -This file is created to revert some of the "changes" to the form-control -that the "original" forms.scss style sheet changed. - -See os2loop_theme/assets/forms.scss for original functionality - */ - -div.autocomplete-deluxe-multiple, -div.autocomplete-deluxe-container { - padding: 0; - border: none; - @extend .w-100; - @extend .d-block; - @extend .form-group; - - input.autocomplete-deluxe-form-single, - input.autocomplete-deluxe-multiple { - margin-left: 0; - @extend .w-100; - @extend .d-block; - @extend .form-control; - } -} - -input.form-autocomplete { - &.ui-autocomplete-loading { - &.no-background-image { - background-image: none; - } - } -} - -div.autocomplete-deluxe-throbber { - &.autocomplete-deluxe-closed, - &.autocomplete-deluxe-open { - display: none; - background: none; - } -} diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/custom/search-result-item.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/custom/search-result-item.scss index e7495b402..34c96d85c 100644 --- a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/custom/search-result-item.scss +++ b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/custom/search-result-item.scss @@ -6,4 +6,3 @@ text-decoration: none; } } - diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/custom/user-form.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/custom/user-form.scss new file mode 100644 index 000000000..cd965d861 --- /dev/null +++ b/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; + } +} diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/form.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/form.scss deleted file mode 100644 index b0c726388..000000000 --- a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/form.scss +++ /dev/null @@ -1,39 +0,0 @@ -.form-check { - label { - @extend .form-check-label; - } -} - -#edit-account { - background: lighten($danger, 40%); - padding: 1em; - margin-bottom: 1em; -} - -div.autocomplete-deluxe-multiple, -div.autocomplete-deluxe-container { - @extend .w-100; - @extend .d-block; - - background: none; - border-color: #aaaaaa; - padding: 5px; - - input.autocomplete-deluxe-form-single, - input.autocomplete-deluxe-multiple { - height: 2em; - background: none; - box-shadow: none; - } -} - -.autocomplete-deluxe-item { - margin-top: 0.6em; - margin-bottom: 0.4em; -} - -.autocomplete-deluxe-throbber { - position: absolute; - top: 25%; - right: 0; -} diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/os2loop_theme.theme b/web/profiles/custom/os2loop/themes/os2loop_theme/os2loop_theme.theme index cf467bef8..f3bb07c83 100644 --- a/web/profiles/custom/os2loop/themes/os2loop_theme/os2loop_theme.theme +++ b/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; } } } diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/templates/form/input--textfield.html.twig b/web/profiles/custom/os2loop/themes/os2loop_theme/templates/form/input--textfield.html.twig index d9eae403a..7f0e0bab9 100644 --- a/web/profiles/custom/os2loop/themes/os2loop_theme/templates/form/input--textfield.html.twig +++ b/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 %} +