diff --git a/src/app/core/components/header/header.component.html b/src/app/core/components/header/header.component.html index 0ba10ea93..f73896f19 100644 --- a/src/app/core/components/header/header.component.html +++ b/src/app/core/components/header/header.component.html @@ -1 +1,2 @@ + {{ authButtonText() }} diff --git a/src/app/core/components/header/header.component.scss b/src/app/core/components/header/header.component.scss index c6eaa224e..42cacb134 100644 --- a/src/app/core/components/header/header.component.scss +++ b/src/app/core/components/header/header.component.scss @@ -3,8 +3,12 @@ :host { position: absolute; height: 4.5rem; - padding-right: 1.5rem; + padding: 0 1.7rem; width: 100%; - @include mix.flex-center-right; + @include mix.flex-center-between; gap: 1rem; + + a { + border-radius: 0.42rem; + } } diff --git a/src/app/core/components/header/header.component.ts b/src/app/core/components/header/header.component.ts index cc0a73d47..ec7ea6762 100644 --- a/src/app/core/components/header/header.component.ts +++ b/src/app/core/components/header/header.component.ts @@ -4,15 +4,15 @@ import { computed, inject, } from '@angular/core'; -import { Button } from 'primeng/button'; import { Router, RouterLink } from '@angular/router'; import { toSignal } from '@angular/core/rxjs-interop'; import { map } from 'rxjs'; +import { BreadcrumbComponent } from '@core/components/breadcrumb/breadcrumb.component'; @Component({ standalone: true, selector: 'osf-header', - imports: [Button, RouterLink], + imports: [RouterLink, BreadcrumbComponent], templateUrl: './header.component.html', styleUrl: './header.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/src/app/core/components/root/root.component.scss b/src/app/core/components/root/root.component.scss index 8a8d87b5e..156368f90 100644 --- a/src/app/core/components/root/root.component.scss +++ b/src/app/core/components/root/root.component.scss @@ -14,7 +14,7 @@ flex: 1; overflow-y: auto; margin: 6px; - background-color: white; + background-color: var.$bg-blue-3; border-radius: 1rem; .content { @@ -34,8 +34,8 @@ width: 100%; height: 100%; flex: 1; - background-color: white; overflow-y: auto; + background-color: var.$bg-blue-3; .content { position: relative; diff --git a/src/app/core/components/settings-header/settings-header.component.html b/src/app/core/components/settings-header/settings-header.component.html deleted file mode 100644 index 44f642b8b..000000000 --- a/src/app/core/components/settings-header/settings-header.component.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/app/core/components/settings-header/settings-header.component.scss b/src/app/core/components/settings-header/settings-header.component.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/app/core/components/settings-header/settings-header.component.ts b/src/app/core/components/settings-header/settings-header.component.ts deleted file mode 100644 index 9ce46fe36..000000000 --- a/src/app/core/components/settings-header/settings-header.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; -import { BreadcrumbComponent } from '@core/components/breadcrumb/breadcrumb.component'; - -@Component({ - selector: 'osf-settings-header', - imports: [BreadcrumbComponent], - templateUrl: './settings-header.component.html', - styleUrl: './settings-header.component.scss', -}) -export class SettingsHeaderComponent {} diff --git a/src/app/features/home/home.component.html b/src/app/features/home/home.component.html index f7b5bbb05..253b6e8a1 100644 --- a/src/app/features/home/home.component.html +++ b/src/app/features/home/home.component.html @@ -8,114 +8,121 @@ -
- dashboard - Dashboard - Create New Project -
-
-

- Go to My Projects to organize your work or - search OSF -

+
+ -
- - -
+
+

+ Go to My Projects to organize your work or + search OSF +

- - - - Title - Contributors - - Modified - - - - - - {{ project.title }} - {{ getContributorsList(project) }} - {{ project.dateModified | date: "MMM d, y, h:mm a" }} - - - -
+
+ + +
-
- -
-

Discover Public Projects

+ + + + + Title + + + Contributors + + Modified + + + + + + + {{ project.title }} + {{ getContributorsList(project) }} + {{ project.dateModified | date: "MMM d, y, h:mm a" }} + + +
-
-
-
-

New And Noteworthy

- @for (block of noteworthy; track block.title) { -
-

{{ block.title }}

-
-

{{ block.authors }}

-
- } +
+ +
+

Discover Public Projects

+
-
-

Most Popular

- @for (block of mostPopular; track block.title) { -
-

{{ block.title }}

-
-

{{ block.authors }}

-
- } + +
+
+

New And Noteworthy

+ @for (block of noteworthy; track block.title) { +
+

{{ block.title }}

+
+

{{ block.authors }}

+
+ } +
+
+

Most Popular

+ @for (block of mostPopular; track block.title) { +
+

{{ block.title }}

+
+

{{ block.authors }}

+
+ } +
-
-
-
-
-

Browse the latest research

-

- Check out the latest preprints hosted on OSF covering a variety of - research areas -

+
+
+
+

Browse the latest research

+

+ Check out the latest preprints hosted on OSF covering a variety of + research areas +

+
+
-
-
-
-
-
-

Hosting a conference or meeting?

-

- Use the OSF for Meetings service to provide a central location for - conference submissions -

+
+
+
+

Hosting a conference or meeting?

+

+ Use the OSF for Meetings service to provide a central location for + conference submissions +

+
+
-
-
+
diff --git a/src/app/features/home/home.component.scss b/src/app/features/home/home.component.scss index 46fdb565f..6d518ae28 100644 --- a/src/app/features/home/home.component.scss +++ b/src/app/features/home/home.component.scss @@ -10,22 +10,8 @@ :host { @include flex-container(column); - .dashboard-header { - @include flex-container(row, start); - width: 100%; - padding: 7.14rem 1.71rem 3.43rem 1.71rem; - background: var.$gradient-1; - - .dashboard-title { - font-size: 1.71rem; - color: var.$dark-blue-1; - font-weight: 700; - margin-left: 0.86rem; - } - - p-button { - margin-left: auto; - } + .home-container { + margin-top: 4.5rem; } .quick-search-container { @@ -207,4 +193,8 @@ align-self: center; } } + + .portrait { + margin-top: 0; + } } diff --git a/src/app/features/home/home.component.ts b/src/app/features/home/home.component.ts index f4d89fad5..1062e7df4 100644 --- a/src/app/features/home/home.component.ts +++ b/src/app/features/home/home.component.ts @@ -1,11 +1,14 @@ -import { Component, computed, signal } from '@angular/core'; +import { Component, computed, inject, signal } from '@angular/core'; import { InputTextModule } from 'primeng/inputtext'; import { FormsModule } from '@angular/forms'; import { TableModule } from 'primeng/table'; import { Project } from '@osf/features/home/models/project.entity'; -import { DatePipe, NgOptimizedImage } from '@angular/common'; +import { DatePipe } from '@angular/common'; import { RouterLink } from '@angular/router'; import { Button } from 'primeng/button'; +import { SubHeaderComponent } from '@shared/components/sub-header/sub-header.component'; +import { IS_PORTRAIT, IS_XSMALL } from '@shared/utils/breakpoints.tokens'; +import { toSignal } from '@angular/core/rxjs-interop'; @Component({ selector: 'osf-home', @@ -15,14 +18,18 @@ import { Button } from 'primeng/button'; FormsModule, TableModule, DatePipe, - NgOptimizedImage, RouterLink, Button, + SubHeaderComponent, ], templateUrl: './home.component.html', styleUrl: './home.component.scss', }) export class HomeComponent { + #isPortrait$ = inject(IS_PORTRAIT); + #isXSmall$ = inject(IS_XSMALL); + isPortrait = toSignal(this.#isPortrait$); + isXSmall = toSignal(this.#isXSmall$); projects: Project[] = [ { id: '1', diff --git a/src/app/features/privacy-policy/privacy-policy.component.scss b/src/app/features/privacy-policy/privacy-policy.component.scss index 27dcaa04f..13b641f03 100644 --- a/src/app/features/privacy-policy/privacy-policy.component.scss +++ b/src/app/features/privacy-policy/privacy-policy.component.scss @@ -1,34 +1,38 @@ @use "assets/styles/variables" as var; -.container { - margin-top: 4.5rem; - padding: 1.7rem; - color: var.$dark-blue-1; +:host { + background-color: white; - h1 { - margin-bottom: 3.4rem; - } + .container { + margin-top: 4.5rem; + padding: 1.7rem; + color: var.$dark-blue-1; - h2 { - margin-bottom: 0.9rem; - } + h1 { + margin-bottom: 3.4rem; + } - h4 { - font-size: 1rem; - font-weight: 400; - } + h2 { + margin-bottom: 0.9rem; + } - ul, - p { - margin-bottom: 1.7rem; - } + h4 { + font-size: 1rem; + font-weight: 400; + } - li { - margin-left: 1.7rem; - list-style: initial; - } + ul, + p { + margin-bottom: 1.7rem; + } + + li { + margin-left: 1.7rem; + list-style: initial; + } - a { - font-weight: 700; + a { + font-weight: 700; + } } } diff --git a/src/app/features/settings/profile-settings/profile-settings.component.html b/src/app/features/settings/profile-settings/profile-settings.component.html index 0cc443e06..aa13f4579 100644 --- a/src/app/features/settings/profile-settings/profile-settings.component.html +++ b/src/app/features/settings/profile-settings/profile-settings.component.html @@ -1 +1,5 @@ -

profile-settings works!

+ diff --git a/src/app/features/settings/profile-settings/profile-settings.component.ts b/src/app/features/settings/profile-settings/profile-settings.component.ts index 8169ed395..ed4fdece4 100644 --- a/src/app/features/settings/profile-settings/profile-settings.component.ts +++ b/src/app/features/settings/profile-settings/profile-settings.component.ts @@ -1,8 +1,9 @@ import { Component } from '@angular/core'; +import { SubHeaderComponent } from '@shared/components/sub-header/sub-header.component'; @Component({ selector: 'osf-profile-settings', - imports: [], + imports: [SubHeaderComponent], templateUrl: './profile-settings.component.html', styleUrl: './profile-settings.component.scss', }) diff --git a/src/app/features/settings/settings-container.component.html b/src/app/features/settings/settings-container.component.html index c0ae60e9d..67e7bd4cd 100644 --- a/src/app/features/settings/settings-container.component.html +++ b/src/app/features/settings/settings-container.component.html @@ -1,3 +1 @@ - - diff --git a/src/app/features/settings/settings-container.component.scss b/src/app/features/settings/settings-container.component.scss index e69de29bb..28d91b04b 100644 --- a/src/app/features/settings/settings-container.component.scss +++ b/src/app/features/settings/settings-container.component.scss @@ -0,0 +1,3 @@ +:host { + margin-top: 4.5rem; +} diff --git a/src/app/features/settings/settings-container.component.ts b/src/app/features/settings/settings-container.component.ts index 48a3feccb..ee731c455 100644 --- a/src/app/features/settings/settings-container.component.ts +++ b/src/app/features/settings/settings-container.component.ts @@ -1,10 +1,9 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; -import { SettingsHeaderComponent } from '@core/components/settings-header/settings-header.component'; @Component({ selector: 'osf-settings-container', - imports: [RouterOutlet, SettingsHeaderComponent], + imports: [RouterOutlet], templateUrl: './settings-container.component.html', styleUrl: './settings-container.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/src/app/features/terms-of-use/terms-of-use.component.scss b/src/app/features/terms-of-use/terms-of-use.component.scss index d652e6423..50383d58c 100644 --- a/src/app/features/terms-of-use/terms-of-use.component.scss +++ b/src/app/features/terms-of-use/terms-of-use.component.scss @@ -1,23 +1,27 @@ @use "assets/styles/variables" as var; -.container { - margin-top: 4.5rem; - padding: 1.7rem; - color: var.$dark-blue-1; +:host { + background-color: white; - h1 { - margin-bottom: 3.4rem; - } + .container { + margin-top: 4.5rem; + padding: 1.7rem; + color: var.$dark-blue-1; - h2 { - margin-bottom: 0.9rem; - } + h1 { + margin-bottom: 3.4rem; + } - p { - margin-bottom: 1.7rem; - } + h2 { + margin-bottom: 0.9rem; + } + + p { + margin-bottom: 1.7rem; + } - a { - font-weight: 700; + a { + font-weight: 700; + } } } diff --git a/src/app/shared/components/sub-header/sub-header.component.html b/src/app/shared/components/sub-header/sub-header.component.html new file mode 100644 index 000000000..4f85ff86b --- /dev/null +++ b/src/app/shared/components/sub-header/sub-header.component.html @@ -0,0 +1,12 @@ +
+ +

{{ title() }}

+ @if (showButton()) { +
+ +
+ } +
diff --git a/src/app/shared/components/sub-header/sub-header.component.scss b/src/app/shared/components/sub-header/sub-header.component.scss new file mode 100644 index 000000000..df1a06cde --- /dev/null +++ b/src/app/shared/components/sub-header/sub-header.component.scss @@ -0,0 +1,22 @@ +@use "assets/styles/mixins" as mix; +@use "assets/styles/variables" as var; + +:host { + width: 100%; + + .sub-header { + @include mix.flex-align-center; + gap: 0.7rem; + padding: 2.5rem 1.7rem 3rem 1.7rem; + width: 100%; + + i { + font-size: 2.6rem; + color: var.$dark-blue-1; + } + + .btn-container { + margin-left: auto; + } + } +} diff --git a/src/app/core/components/settings-header/settings-header.component.spec.ts b/src/app/shared/components/sub-header/sub-header.component.spec.ts similarity index 50% rename from src/app/core/components/settings-header/settings-header.component.spec.ts rename to src/app/shared/components/sub-header/sub-header.component.spec.ts index d46a1acd2..e9014a0ee 100644 --- a/src/app/core/components/settings-header/settings-header.component.spec.ts +++ b/src/app/shared/components/sub-header/sub-header.component.spec.ts @@ -1,17 +1,17 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { SettingsHeaderComponent } from './settings-header.component'; +import { SubHeaderComponent } from './sub-header.component'; -describe('SettingsHeaderComponent', () => { - let component: SettingsHeaderComponent; - let fixture: ComponentFixture; +describe('SubHeaderComponent', () => { + let component: SubHeaderComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [SettingsHeaderComponent], + imports: [SubHeaderComponent], }).compileComponents(); - fixture = TestBed.createComponent(SettingsHeaderComponent); + fixture = TestBed.createComponent(SubHeaderComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/app/shared/components/sub-header/sub-header.component.ts b/src/app/shared/components/sub-header/sub-header.component.ts new file mode 100644 index 000000000..e5038415a --- /dev/null +++ b/src/app/shared/components/sub-header/sub-header.component.ts @@ -0,0 +1,16 @@ +import { Component, input, output } from '@angular/core'; +import { Button } from 'primeng/button'; + +@Component({ + selector: 'osf-sub-header', + imports: [Button], + templateUrl: './sub-header.component.html', + styleUrl: './sub-header.component.scss', +}) +export class SubHeaderComponent { + showButton = input(false); + buttonLabel = input(''); + title = input(''); + icon = input(''); + buttonClick = output(); +} diff --git a/src/assets/styles/overrides/button.scss b/src/assets/styles/overrides/button.scss index 79e0d4476..49b9e98ef 100644 --- a/src/assets/styles/overrides/button.scss +++ b/src/assets/styles/overrides/button.scss @@ -8,6 +8,7 @@ background-color: var.$pr-blue-1; color: var.$white; text-decoration: none; + font-weight: 700; .p-button-label { font-weight: 700;