diff --git a/src/app/features/home/pages/home-logged-out/home-logged-out.component.html b/src/app/features/home/pages/home-logged-out/home-logged-out.component.html index 1c4bd761d..2b22afa06 100644 --- a/src/app/features/home/pages/home-logged-out/home-logged-out.component.html +++ b/src/app/features/home/pages/home-logged-out/home-logged-out.component.html @@ -7,7 +7,6 @@

diff --git a/src/app/features/my-profile/my-profile.component.html b/src/app/features/my-profile/my-profile.component.html index ef63cc46b..81e3cb793 100644 --- a/src/app/features/my-profile/my-profile.component.html +++ b/src/app/features/my-profile/my-profile.component.html @@ -1,30 +1,30 @@ -
-
+
+

{{ currentUser()?.fullName }}

- @if (!isMobile()) { - + @if (isMedium()) { + }
-
-
-

+
+
+

{{ currentUser()?.employment?.[0]?.title }}, {{ currentUser()?.employment?.[0]?.institution }} -

+

-

Member since: {{ currentUser()?.dateRegistered | date: 'MMM d, yyyy' }}

+

Member since: {{ currentUser()?.dateRegistered | date: 'MMM d, yyyy' }}

-
-
+
+
@if (currentUser()?.social?.orcid) {
orcid - https://orcid.org/{{ currentUser()?.social?.orcid }} + + https://orcid.org/{{ currentUser()?.social?.orcid }} +
} @@ -34,7 +34,7 @@

Member since: {{ currentUser()?.dateRegistered | date: '

-
+

@@ -50,7 +50,7 @@

-
+
@if (currentUser()?.social?.github) { github @@ -103,9 +103,13 @@

}

- @if (isMobile()) { + @if (!isMedium()) {
- +
}
diff --git a/src/app/features/my-profile/my-profile.component.scss b/src/app/features/my-profile/my-profile.component.scss index fb9c64740..79da8a897 100644 --- a/src/app/features/my-profile/my-profile.component.scss +++ b/src/app/features/my-profile/my-profile.component.scss @@ -1,48 +1,6 @@ @use "assets/styles/variables" as var; @use "assets/styles/mixins" as mix; -.user-info { - width: 100%; - padding: mix.rem(48px) mix.rem(24px) mix.rem(24px); - - .name-container { - display: flex; - width: 100%; - padding-bottom: 1.7rem; - } - - .description-container { - display: flex; - flex-direction: row; - row-gap: mix.rem(24px); - - .title-date-wrapper { - display: flex; - flex-direction: column; - width: 50%; - row-gap: mix.rem(24px); - } - } - - .data-wrapper { - display: flex; - flex-direction: column; - width: 50%; - row-gap: mix.rem(24px); - - .user-fields-wrapper { - display: flex; - flex-direction: row; - align-items: center; - column-gap: mix.rem(24px); - - .osf-icon-institution { - font-size: mix.rem(16px); - } - } - } -} - .cards { background-color: var.$white; } @@ -51,34 +9,3 @@ border: 1px solid var.$grey-2; border-radius: mix.rem(12px); } - -@media (max-width: 1000px) { - .user-info { - .description-container { - flex-direction: column; - row-gap: 2.5rem; - - .title-date-wrapper { - width: 100%; - } - } - - .data-wrapper { - flex-direction: column; - width: 100%; - row-gap: 2.5rem; - } - } -} - -@media (max-width: var.$breakpoint-sm) { - .user-info { - .data-wrapper { - .user-fields-wrapper { - flex-direction: column; - align-items: start; - row-gap: 1.1rem; - } - } - } -} diff --git a/src/app/features/my-profile/my-profile.component.ts b/src/app/features/my-profile/my-profile.component.ts index cff911aeb..58fd5056a 100644 --- a/src/app/features/my-profile/my-profile.component.ts +++ b/src/app/features/my-profile/my-profile.component.ts @@ -1,20 +1,17 @@ -import { Store } from '@ngxs/store'; +import { createDispatchMap, select } from '@ngxs/store'; import { TranslatePipe } from '@ngx-translate/core'; -import { AccordionModule } from 'primeng/accordion'; import { Button } from 'primeng/button'; import { DatePipe, NgOptimizedImage } from '@angular/common'; -import { ChangeDetectionStrategy, Component, inject, OnDestroy, signal } from '@angular/core'; +import { ChangeDetectionStrategy, Component, inject, OnDestroy } from '@angular/core'; import { toSignal } from '@angular/core/rxjs-interop'; -import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { Router } from '@angular/router'; import { UserSelectors } from '@osf/core/store/user'; import { EducationHistoryComponent, EmploymentHistoryComponent } from '@osf/shared/components'; -import { ResourceTab } from '@osf/shared/enums'; -import { IS_XSMALL } from '@osf/shared/utils'; +import { IS_MEDIUM } from '@osf/shared/utils'; import { ResetFiltersState } from '../search/components/resource-filters/store'; import { ResetSearchState } from '../search/store'; @@ -29,9 +26,6 @@ import { SetIsMyProfile } from './store'; DatePipe, TranslatePipe, NgOptimizedImage, - AccordionModule, - FormsModule, - ReactiveFormsModule, MyProfileSearchComponent, EducationHistoryComponent, EmploymentHistoryComponent, @@ -41,31 +35,23 @@ import { SetIsMyProfile } from './store'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class MyProfileComponent implements OnDestroy { - readonly #store = inject(Store); - readonly #router = inject(Router); - readonly currentUser = this.#store.selectSignal(UserSelectors.getCurrentUser); + private readonly router = inject(Router); - readonly isMobile = toSignal(inject(IS_XSMALL)); - - protected searchValue = signal(''); - protected selectedTab: ResourceTab = ResourceTab.All; - protected readonly ResourceTab = ResourceTab; + readonly isMedium = toSignal(inject(IS_MEDIUM)); + readonly currentUser = select(UserSelectors.getCurrentUser); + readonly actions = createDispatchMap({ + resetFiltersState: ResetFiltersState, + resetSearchState: ResetSearchState, + setIsMyProfile: SetIsMyProfile, + }); toProfileSettings() { - this.#router.navigate(['settings/profile-settings']); - } - - constructor() { - // this.#store.dispatch(new SetIsMyProfile(true)); - // - // effect(() => { - // this.#store.dispatch(new SetCreator(this.currentUser()?.fullName ?? '', this.currentUser()?.iri ?? '')); - // }); + this.router.navigate(['settings/profile-settings']); } ngOnDestroy(): void { - this.#store.dispatch(ResetFiltersState); - this.#store.dispatch(ResetSearchState); - this.#store.dispatch(new SetIsMyProfile(false)); + this.actions.resetFiltersState(); + this.actions.resetSearchState(); + this.actions.setIsMyProfile(false); } } diff --git a/src/app/features/settings/profile-settings/components/education/education.component.html b/src/app/features/settings/profile-settings/components/education/education.component.html index 8abd5aa42..8162ca613 100644 --- a/src/app/features/settings/profile-settings/components/education/education.component.html +++ b/src/app/features/settings/profile-settings/components/education/education.component.html @@ -3,7 +3,7 @@
@if (haveEducations) { @for (education of educations.controls; track education.value; let index = $index) { -
+

{{ 'settings.profileSettings.education.title' | translate: { index: index + 1 } }} diff --git a/src/app/features/settings/profile-settings/components/employment/employment.component.html b/src/app/features/settings/profile-settings/components/employment/employment.component.html index ff562fa1b..6a89525f8 100644 --- a/src/app/features/settings/profile-settings/components/employment/employment.component.html +++ b/src/app/features/settings/profile-settings/components/employment/employment.component.html @@ -4,7 +4,7 @@
@if (havePositions) { @for (position of positions.controls; track position.value; let index = $index) { -
+

{{ 'settings.profileSettings.employment.title' | translate: { index: index + 1 } }} @@ -13,7 +13,7 @@

diff --git a/src/app/features/settings/profile-settings/components/social/social.component.html b/src/app/features/settings/profile-settings/components/social/social.component.html index 8fd37045e..871624140 100644 --- a/src/app/features/settings/profile-settings/components/social/social.component.html +++ b/src/app/features/settings/profile-settings/components/social/social.component.html @@ -4,7 +4,7 @@ @for (link of links.controls; track index; let index = $index) {

@@ -14,7 +14,7 @@

diff --git a/src/assets/styles/_common.scss b/src/assets/styles/_common.scss index 1f43ae817..3d64ceb06 100644 --- a/src/assets/styles/_common.scss +++ b/src/assets/styles/_common.scss @@ -94,3 +94,8 @@ .custom-light-hover:hover:not(:disabled) { filter: opacity(80%); } + +// ------------------------- Universal custom hover state ------------------------- +.grey-border-color { + border-color: var(--grey-2); +} diff --git a/src/index.html b/src/index.html index c7a2695f3..d1409d80a 100644 --- a/src/index.html +++ b/src/index.html @@ -6,10 +6,8 @@ - -