From b976247bb706bd6bd7e425a188ddce08621d098c Mon Sep 17 00:00:00 2001 From: Andreas Engelmark Date: Mon, 28 Feb 2022 16:33:43 +0200 Subject: [PATCH 1/2] Fix linting --- .../os2loop_theme/assets/signifly-custom/layout/title.scss | 2 +- .../assets/signifly-custom/search/filter-types.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/layout/title.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/layout/title.scss index 856407d51..649162bae 100644 --- a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/layout/title.scss +++ b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/layout/title.scss @@ -95,7 +95,7 @@ $content-types: "collection", "document", "post", "question"; .badge-primary { @extend .ml-30; - + font-size: $font-size-base; padding: 6px 12px; } diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/search/filter-types.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/search/filter-types.scss index 27fc35302..a3965aea5 100644 --- a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/search/filter-types.scss +++ b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/search/filter-types.scss @@ -9,6 +9,6 @@ div#searchFilterCollapseFacets { > .btn { background-color: $loop-white; - } + } } } From 7d43028cd1e84b432d386cc9da5201c71537bc1b Mon Sep 17 00:00:00 2001 From: Andreas Engelmark Date: Mon, 28 Feb 2022 22:00:04 +0200 Subject: [PATCH 2/2] Add styling for contact list --- .../bootstrap-custom/variables/variables.scss | 8 +++ .../assets/signifly-custom/custom-index.scss | 3 + .../assets/signifly-custom/layout/user.scss | 9 ++- .../assets/signifly-custom/views/contact.scss | 48 +++++++++++++++ .../assets/signifly-variables/variables.scss | 1 + .../user--card-display.html.twig | 60 ++++++++++++------- .../templates/layout/page.html.twig | 10 +++- ...views-view--contact-list--page-1.html.twig | 5 +- ...nformatted--contact-list--page-1.html.twig | 6 +- 9 files changed, 119 insertions(+), 31 deletions(-) create mode 100644 web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/views/contact.scss diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/bootstrap-custom/variables/variables.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/bootstrap-custom/variables/variables.scss index 41b6d707a..a53af4128 100644 --- a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/bootstrap-custom/variables/variables.scss +++ b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/bootstrap-custom/variables/variables.scss @@ -67,3 +67,11 @@ $pagination-disabled-color: $loop-green-200; // Forms $input-color: $body-color; $form-group-margin-bottom: 20px; + +// Card +$card-bg: $gray-100; + +$card-border-color: transparent; +$card-border-radius: $border-radius-lg; + +$card-spacer-x: 20px; diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/custom-index.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/custom-index.scss index d443aa925..30c1da142 100644 --- a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/custom-index.scss +++ b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/custom-index.scss @@ -18,6 +18,9 @@ @import "forms/user-form.scss"; @import "forms/node-os2loop-question-form.scss"; +// views +@import "views/contact.scss"; + // search @import "search/filter-types.scss"; @import "search/search-input.scss"; diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/layout/user.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/layout/user.scss index d8bc8e248..4c573098d 100644 --- a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/layout/user.scss +++ b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/layout/user.scss @@ -31,14 +31,17 @@ color: inherit; margin: 0; - font-size: $font-size-base; - font-weight: $badge-font-weight; - + span { margin-top: 7px; } } + :not(.h5) > a, + :not(.h5) > p { + font-size: $font-size-base; + font-weight: $badge-font-weight; + } + a:hover { text-decoration: inherit; color: inherit; diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/views/contact.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/views/contact.scss new file mode 100644 index 000000000..58e7d6463 --- /dev/null +++ b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/views/contact.scss @@ -0,0 +1,48 @@ +.views-view-contact { + .search { + .form-group { + @extend .mb-0; + } + + .form-item-combine { + @extend .flex-grow-1; + } + + .btn { + @extend .ml-20; + + box-sizing: border-box; + + height: 48px; + width: 72px; + } + } + + .user-name { + margin-bottom: 3px; + } + + .card-body { + .user-image { + @extend .mr-40; + + width: $user-image-card-size; + height: $user-image-card-size; + + font-size: 40px; + + img { + min-width: $user-image-card-size; + min-height: $user-image-card-size; + } + } + } + + .user-card:not(:first-of-type) + .user-card { + @extend .mt-30; + } + + .user-contact-information + .user-contact-information { + @extend .mt-10; + } +} diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-variables/variables.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-variables/variables.scss index 27d01042d..fe1697b29 100644 --- a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-variables/variables.scss +++ b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-variables/variables.scss @@ -4,6 +4,7 @@ $user-contact-icon-size: 20px; $user-contact-icon-spacer: 22px; $user-image-size: 30px; +$user-image-card-size: 120px; $user-image-profile-size: 150px; $icon-size: 30px; diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/templates/content-entities/user--card-display.html.twig b/web/profiles/custom/os2loop/themes/os2loop_theme/templates/content-entities/user--card-display.html.twig index a899f2004..4b1222f29 100644 --- a/web/profiles/custom/os2loop/themes/os2loop_theme/templates/content-entities/user--card-display.html.twig +++ b/web/profiles/custom/os2loop/themes/os2loop_theme/templates/content-entities/user--card-display.html.twig @@ -19,30 +19,46 @@ */ #} +{% set show_location = user.os2loop_user_place.value or user.os2loop_user_address.value or user.os2loop_user_city.value %} +{% set initials = (user.os2loop_user_given_name.value|first ~ user.os2loop_user_family_name.value|first)|upper %} +{% set street_address = ((user.os2loop_user_address.value is not empty ? user.os2loop_user_address.value : '') ~ ', ' ~ (user.os2loop_user_postal_code.value is not empty ? user.os2loop_user_postal_code.value : '') ~ (user.os2loop_user_city.value is not empty ? ' ' ~ user.os2loop_user_city.value : ''))|trim(', ', 'left') %} +
-

- - {{ user.os2loop_user_given_name.value }} {{ user.os2loop_user_family_name.value }} - -

-
-
-
- {% if user.os2loop_user_image.value is not empty %} -
- {{ content.os2loop_user_image }} -
- {% else %} - - {% endif %} +
+
+ {{ user.os2loop_user_image.value is not empty ? content.os2loop_user_image : initials }} +
+ diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/templates/layout/page.html.twig b/web/profiles/custom/os2loop/themes/os2loop_theme/templates/layout/page.html.twig index d29d01a45..bcb8f6b9d 100644 --- a/web/profiles/custom/os2loop/themes/os2loop_theme/templates/layout/page.html.twig +++ b/web/profiles/custom/os2loop/themes/os2loop_theme/templates/layout/page.html.twig @@ -44,13 +44,19 @@ */ #} +{# TODO: shouldn't use page title this way #} +{% if page['#title'] == 'user' %} + {% set page_class = 'block primary-gray' %} +{% elseif page['#title'] == 'Kontaktliste' %} + {% set page_class = 'block primary-white' %} +{% endif %} + {{ page.header }} {#
#}
{# link is in html.html.twig #} - {# TODO: shouldn't use page title this way #} -
+
{{ page.content }}
{# /.layout-content #} diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/templates/views/views-view--contact-list--page-1.html.twig b/web/profiles/custom/os2loop/themes/os2loop_theme/templates/views/views-view--contact-list--page-1.html.twig index e51199599..5685c1db3 100644 --- a/web/profiles/custom/os2loop/themes/os2loop_theme/templates/views/views-view--contact-list--page-1.html.twig +++ b/web/profiles/custom/os2loop/themes/os2loop_theme/templates/views/views-view--contact-list--page-1.html.twig @@ -38,12 +38,13 @@ empty ? 'js-view-empty' ] %} + {{ title_prefix }} {{ title }} {{ title_suffix }} -
-
+
+
{{ exposed }} {{ attachment_before }} diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/templates/views/views-view-unformatted--contact-list--page-1.html.twig b/web/profiles/custom/os2loop/themes/os2loop_theme/templates/views/views-view-unformatted--contact-list--page-1.html.twig index ac24ad86a..be21d87ba 100644 --- a/web/profiles/custom/os2loop/themes/os2loop_theme/templates/views/views-view-unformatted--contact-list--page-1.html.twig +++ b/web/profiles/custom/os2loop/themes/os2loop_theme/templates/views/views-view-unformatted--contact-list--page-1.html.twig @@ -20,10 +20,12 @@ {% for row in rows %} {% set row_classes = [ - 'col-lg-6 mb-3 d-flex' + 'col-lg-6', + 'd-flex', + 'user-card' ] %} -
+
{{- row.content -}}