From db5b58dd82ee230c6afc835c942983d387866ee3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Thu, 5 Oct 2023 14:14:04 +0200 Subject: [PATCH] MOBILE-4362 user: Improve user pages look and feel --- .../components/user-avatar/user-avatar.scss | 9 ++- src/core/features/user/pages/about/about.html | 53 +++++++++--------- src/core/features/user/pages/about/about.scss | 51 ++++++++--------- src/core/features/user/pages/about/about.ts | 4 -- .../features/user/pages/profile/profile.html | 8 +-- .../features/user/pages/profile/profile.scss | 31 ++-------- .../features/user/pages/profile/profile.ts | 2 - .../features/user/services/user-helper.ts | 1 + ...usage-of-user-features-view-profile_21.png | Bin 27444 -> 28863 bytes 9 files changed, 66 insertions(+), 93 deletions(-) diff --git a/src/core/components/user-avatar/user-avatar.scss b/src/core/components/user-avatar/user-avatar.scss index cf9c7a7dfd3..d94845afb36 100644 --- a/src/core/components/user-avatar/user-avatar.scss +++ b/src/core/components/user-avatar/user-avatar.scss @@ -4,6 +4,9 @@ position: relative; width: var(--core-avatar-size); height: var(--core-avatar-size); + --contact-status-size: 14px; + --margin-end-on-item: 8px; + --margin-vertical-on-item: 8px; img { border-radius: var(--core-avatar-radius); @@ -53,8 +56,8 @@ position: absolute; right: 0; bottom: 0; - width: 14px; - height: 14px; + width: var(--contact-status-size); + height: var(--contact-status-size); border-radius: 50%; &.online { border: 1px solid white; @@ -92,7 +95,7 @@ } :host-context(ion-item) { - @include margin(6px, 8px, 6px, 0px); + @include margin(var(--margin-vertical-on-item), var(--margin-end-on-item), var(--margin-vertical-on-item), 0px); img { min-width: var(--core-avatar-size); min-height: var(--core-avatar-size); diff --git a/src/core/features/user/pages/about/about.html b/src/core/features/user/pages/about/about.html index 38fd5d14a30..0b1078da504 100644 --- a/src/core/features/user/pages/about/about.html +++ b/src/core/features/user/pages/about/about.html @@ -23,9 +23,6 @@

{{ 'core.user.profile' | translate }}

{{ user.fullname }}

-

- {{ user.address }} -

@@ -43,6 +40,24 @@

{{ user.fullname }}

+ + +

{{ 'core.user.country' | translate}}

+

{{ user.country }}

+ + + + +

{{ 'core.user.city' | translate}}

+

{{ user.city }}

+ + + + +

{{ 'core.timezone' | translate}}

+

{{ user.timezone }}

+ +

{{ 'core.user.phone1' | translate}}

@@ -59,31 +74,9 @@

{{ user.fullname }}

 - - -

{{ 'core.user.city' | translate}}

-

{{ user.city }}

- - - - -

{{ 'core.user.country' | translate}}

-

{{ user.country }}

- - - - -

{{ 'core.timezone' | translate}}

-

{{ user.timezone }}

- - + + - - -

{{ 'core.user.idnumber' | translate }}

-

{{ user.idnumber }}

- -

{{ 'core.user.institution' | translate }}

@@ -96,6 +89,12 @@

{{ user.fullname }}

{{ user.department }}

 + + +

{{ 'core.user.idnumber' | translate }}

+

{{ user.idnumber }}

+ + diff --git a/src/core/features/user/pages/about/about.scss b/src/core/features/user/pages/about/about.scss index 8edaa46ade1..2113f2c005f 100644 --- a/src/core/features/user/pages/about/about.scss +++ b/src/core/features/user/pages/about/about.scss @@ -1,41 +1,36 @@ :host { - .core-user-profile-maininfo::part(native) { flex-direction: column; } - ::ng-deep { - core-user-avatar { - display: block; - --core-avatar-size: var(--core-large-avatar-size); - height: calc(var(--core-avatar-size) + 16px); + core-user-avatar { + --core-avatar-size: var(--core-large-avatar-size); + --contact-status-size: 24px; + --margin-end-on-item: 0px; + --margin-vertical-on-item: 0px; + + .contact-status { + right: calc(50% - 12px - var(--core-avatar-size) / 2) !important; + } - img { - margin: 8px auto; - } + .edit-avatar { + position: absolute; + right: calc(50% - 24px - var(--core-avatar-size) / 2); + bottom: -12px; - .contact-status { - width: 24px !important; - height: 24px !important; - right: calc(50% - 12px - var(--core-avatar-size) / 2) !important; + :host-context([dir="rtl"]) & { + left: 0; + right: unset; } - - .edit-avatar { - position: absolute; - right: calc(50% - 15px - var(--core-avatar-size) / 2); - bottom: -12px; - - :host-context([dir="rtl"]) & { - left: 0; - right: unset; - } - &::part(native) { - border-radius: 50%; - background: var(--ion-item-background); - } + &::part(native) { + border-radius: 50%; + background: var(--ion-item-background); } } } + h2 { + font-size: 24px; + } .core-user-profile-interests { ion-badge { cursor: pointer; @@ -46,7 +41,7 @@ } -:host-context([dir="rtl"]) ::ng-deep core-user-avatar .edit-avatar { +:host-context([dir="rtl"]) core-user-avatar .edit-avatar { left: -24px; right: unset; } diff --git a/src/core/features/user/pages/about/about.ts b/src/core/features/user/pages/about/about.ts index 5960629d36d..8dc38780106 100644 --- a/src/core/features/user/pages/about/about.ts +++ b/src/core/features/user/pages/about/about.ts @@ -26,7 +26,6 @@ import { USER_PROFILE_REFRESHED, USER_PROFILE_SERVER_TIMEZONE, } from '@features/user/services/user'; -import { CoreUserHelper } from '@features/user/services/user-helper'; import { CoreNavigator } from '@services/navigator'; import { CoreIonLoadingElement } from '@classes/ion-loading'; import { CoreSite } from '@classes/site'; @@ -75,7 +74,6 @@ export class CoreUserAboutPage implements OnInit, OnDestroy { } this.user.email = data.user.email; - this.user.address = CoreUserHelper.formatAddress('', data.user.city, data.user.country); }, CoreSites.getCurrentSiteId()); } @@ -118,8 +116,6 @@ export class CoreUserAboutPage implements OnInit, OnDestroy { this.user = user; this.title = user.fullname; - this.user.address = CoreUserHelper.formatAddress('', user.city, user.country); - this.fillTimezone(); await this.checkUserImageUpdated(); diff --git a/src/core/features/user/pages/profile/profile.html b/src/core/features/user/pages/profile/profile.html index a46586e4823..c3c8192d30a 100644 --- a/src/core/features/user/pages/profile/profile.html +++ b/src/core/features/user/pages/profile/profile.html @@ -1,4 +1,4 @@ - + @@ -14,11 +14,11 @@

{{ user?.fullname }}

-