Fix/media queries

src/app/features/home/pages/home-logged-out/home-logged-out.component.html

@@ -7,7 +7,6 @@ <h3 [innerHTML]="'home.loggedOut.hero.subtitle' | translate"></h3>
         <p-button
           [label]="'home.loggedOut.hero.signUp' | translate"
           severity="success"
-          class="wide-button"
           [class.btn-full-width]="isXSmall() || isSmall() || isMedium()"
         />
       </div>

src/app/features/my-profile/my-profile.component.html

@@ -1,30 +1,30 @@
-<div class="user-info xl:mt-6">
-  <div class="name-container wide-button">
+<div class="py-5 px-3 md:p-5 xl:p-4 xl:mt-6">
+  <div class="flex align-items-center">
     <h1>{{ currentUser()?.fullName }}</h1>
 
-    @if (!isMobile()) {
-      <p-button label="Edit Profile" class="ml-auto" (click)="toProfileSettings()"></p-button>
+    @if (isMedium()) {
+      <p-button class="ml-auto" [label]="'myProfile.editProfile' | translate" (click)="toProfileSettings()"></p-button>
     }
   </div>
 
-  <div class="description-container">
-    <div class="title-date-wrapper wide-button">
-      <h3>
+  <div class="flex flex-column gap-4 mt-4 md:gap-5 xl:flex-row xl:justify-content-between">
+    <div class="flex flex-column gap-3 xl:gap-4">
+      <p class="font-bold">
         {{ currentUser()?.employment?.[0]?.title }},
         {{ currentUser()?.employment?.[0]?.institution }}
-      </h3>
+      </p>
 
-      <h3 class="font-normal">Member since: {{ currentUser()?.dateRegistered | date: 'MMM d, yyyy' }}</h3>
+      <p class="font-normal">Member since: {{ currentUser()?.dateRegistered | date: 'MMM d, yyyy' }}</p>
     </div>
 
-    <div class="data-wrapper">
-      <div class="user-fields-wrapper">
+    <div class="flex flex-column gap-4">
+      <div class="flex flex-column gap-3 md:flex-row xl:gap-4">
         @if (currentUser()?.social?.orcid) {
           <div class="flex flex-row align-items-center gap-2">
             <img ngSrc="assets/icons/colored/orchid.svg" width="16" height="16" alt="orcid" />
-            <a class="font-bold" [href]="'https://orcid.org/' + currentUser()?.social?.orcid"
-              >https://orcid.org/{{ currentUser()?.social?.orcid }}</a
-            >
+            <a class="font-bold" [href]="'https://orcid.org/' + currentUser()?.social?.orcid">
+              https://orcid.org/{{ currentUser()?.social?.orcid }}
+            </a>
           </div>
         }
 
@@ -34,7 +34,7 @@ <h3 class="font-normal">Member since: {{ currentUser()?.dateRegistered | date: '
         </div>
       </div>
 
-      <div class="user-fields-wrapper">
+      <div class="flex flex-column gap-3 md:flex-row xl:gap-4">
         <div class="flex flex-row align-items-center gap-2">
           <i class="osf-icon-institution"></i>
           <h3 class="font-bold">
@@ -50,7 +50,7 @@ <h3 class="font-bold">
         </div>
       </div>
 
-      <div class="flex flex-wrap gap-3 align-items-center">
+      <div class="flex flex-wrap align-items-center gap-3">
         @if (currentUser()?.social?.github) {
           <a class="cursor-pointer" [href]="currentUser()?.social?.github">
             <img ngSrc="assets/icons/socials/github2.svg" width="24" height="24" alt="github" />
@@ -103,9 +103,13 @@ <h3 class="font-bold">
         }
       </div>
 
-      @if (isMobile()) {
+      @if (!isMedium()) {
         <div class="btn-full-width">
-          <p-button label="Edit Profile" class="ml-auto" (click)="toProfileSettings()"></p-button>
+          <p-button
+            class="ml-auto"
+            [label]="'myProfile.editProfile' | translate"
+            (click)="toProfileSettings()"
+          ></p-button>
         </div>
       }
     </div>

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;
-      }
-    }
-  }
-}

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);
   }
 }

src/app/features/settings/profile-settings/components/education/education.component.html

@@ -3,7 +3,7 @@
   <div formArrayName="educations" class="flex flex-column row-gap-4">
     @if (haveEducations) {
       @for (education of educations.controls; track education.value; let index = $index) {
-        <div [formGroupName]="index" class="flex flex-column border-1 border-round-lg p-4 name-container row-gap-4">
+        <div [formGroupName]="index" class="flex flex-column border-1 border-round-lg p-4 grey-border-color row-gap-4">
           <div class="flex flex-row">
             <h2>
               {{ 'settings.profileSettings.education.title' | translate: { index: index + 1 } }}

src/app/features/settings/profile-settings/components/employment/employment.component.html

@@ -4,7 +4,7 @@
   <div formArrayName="positions" class="flex flex-column row-gap-4">
     @if (havePositions) {
       @for (position of positions.controls; track position.value; let index = $index) {
-        <div [formGroupName]="index" class="flex flex-column border-1 border-round-lg p-4 name-container row-gap-4">
+        <div [formGroupName]="index" class="flex flex-column border-1 border-round-lg p-4 grey-border-color row-gap-4">
           <div class="flex flex-row">
             <h2>
               {{ 'settings.profileSettings.employment.title' | translate: { index: index + 1 } }}
@@ -13,7 +13,7 @@ <h2>
               <div class="ml-auto remove-button">
                 <p-button
                   class="ml-auto"
-                  [label]="'settings.profileSettings.employment.remove'"
+                  [label]="'settings.profileSettings.employment.remove' | translate"
                   (click)="removePosition(index)"
                 >
                 </p-button>

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) {
         <div
           [formGroupName]="index"
-          class="flex flex-column border-1 border-round-lg p-3 sm:p-5 name-container row-gap-4"
+          class="flex flex-column border-1 border-round-lg p-3 sm:p-5 grey-border-color row-gap-4"
         >
           <div class="flex flex-row">
             <h2>
@@ -14,7 +14,7 @@ <h2>
               <div class="ml-auto remove-button">
                 <p-button
                   class="ml-auto"
-                  [label]="'settings.profileSettings.social.remove'"
+                  [label]="'settings.profileSettings.social.remove' | translate"
                   (click)="removeLink(index)"
                 >
                 </p-button>

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);
+}

src/index.html

@@ -6,10 +6,8 @@
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-    <meta name="theme-color" content="#1976d2" />
   </head>
   <body>
     <osf-root></osf-root>
-    <noscript>Please enable JavaScript to continue using this application.</noscript>
   </body>
 </html>