From 39fb53c694d570ba6709dffd0a05e38d656e426a Mon Sep 17 00:00:00 2001 From: Kyrylo Petrov Date: Mon, 17 Mar 2025 13:46:26 +0200 Subject: [PATCH 1/3] chore(home): design logged out # Conflicts: # src/app/features/home/home.component.ts # src/app/features/home/logged-out/home-logged-out.component.html # src/app/features/home/logged-out/home-logged-out.component.ts --- src/app/features/home/home.component.scss | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/app/features/home/home.component.scss b/src/app/features/home/home.component.scss index 4b9f8550b..910c43d03 100644 --- a/src/app/features/home/home.component.scss +++ b/src/app/features/home/home.component.scss @@ -29,6 +29,25 @@ } } + .dashboard-header { + display: flex; + justify-content: 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; + } + } + .quick-search-container { background: white; padding: 1.71rem; From b770ccf62ff2d8d792a3069dc498b17b6b14cd8a Mon Sep 17 00:00:00 2001 From: Kyrylo Petrov Date: Thu, 20 Mar 2025 12:14:49 +0200 Subject: [PATCH 2/3] chore(home-page): responsivness (logged out) --- src/app/features/home/home.component.html | 2 +- src/app/features/home/home.component.ts | 11 +- .../home/logged-out/{slides.ts => data.ts} | 55 ++ .../logged-out/home-logged-out.component.html | 578 +++++++++++------- .../logged-out/home-logged-out.component.scss | 464 ++++++++++---- .../logged-out/home-logged-out.component.ts | 20 +- .../sub-header/sub-header.component.html | 4 +- .../sub-header/sub-header.component.ts | 4 +- src/app/shared/utils/breakpoints.tokens.ts | 4 +- src/assets/styles/overrides/carousel.scss | 8 + 10 files changed, 773 insertions(+), 377 deletions(-) rename src/app/features/home/logged-out/{slides.ts => data.ts} (52%) diff --git a/src/app/features/home/home.component.html b/src/app/features/home/home.component.html index d2c5ab332..fc2219772 100644 --- a/src/app/features/home/home.component.html +++ b/src/app/features/home/home.component.html @@ -11,7 +11,7 @@
-
-

There’s a better way to manage your research

-

- OSF is a free, open platform to support your research and enable - collaboration -

- +
+
+
+

There’s a better way to manage your research

+

+ OSF is a free, open platform to support your research and enable + collaboration +

+ +
+
+ better-research +
+
+ +
+
+

Discover Public Research

+

+ Discover projects, data, materials, and collaborators on OSF that might + be helpful to your own research +

+
+ +
+ + +
-
- better-research + +
+

How OSF Supports your research

+
+
+
+
+ search icon + search icon +
+
+

Search And Discover

+

+ Find papers, data, and materials to inspire your next research + project. Search public projects to build on the work of others and + find new collaborators +

+
+
+ +
+
+ search icon + search icon +
+
+

Design Your Study

+

+ Start a project and add collaborators, giving them access to + protocols and other research materials. Built-in version control + tracks the evolution of your study +

+
+
+ +
+
+ search icon + search icon +
+
+

Collect and Analyze Data

+

+ Store data, code, and other materials in OSF Storage, or connect + your Dropbox or other third-party account. Every file gets a + unique, persistent URL for citing and sharing +

+
+
+ +
+
+ search icon +
+
+

Publish Your Reports

+

+ Share papers in OSF Preprints or a community-based preprint + provider, so others can find and cite your work. Track impact with + metrics like downloads and view counts +

+
+
+
+
+ +
+
+ +
+ +
-
-
-
-

Discover Public Research

-

- Discover projects, data, materials, and collaborators on OSF that might be - helpful to your own research -

+
+

What others are saying

-
- - +
+ + +
+
+ search icon +
+
+

{{ slide.title }}

+
+

{{ slide.author }}

+

{{ slide.facility }}

+
+
+ +
+ +
-
-
-

How OSF Supports your research

-
-
-
-
- search icon - search icon +

+ OSF integrations make your workflow more efficient +

+ + @if (isMedium() || isWeb()) { +
+
+
+

Authentication

+
+
+

Discovery

+
+
+

References

-
-

Search And Discover

-

- Find papers, data, and materials to inspire your next research - project. Search public projects to build on the work of others and - find new collaborators -

+
+

Storage

-
-
+
+
search icon search icon
-
-

Design Your Study

-

- Start a project and add collaborators, giving them access to - protocols and other research materials. Built-in version control - tracks the evolution of your study -

-
-
-
-
+
search icon search icon
-
-

Collect and Analyze Data

-

- Store data, code, and other materials in OSF Storage, or connect - your Dropbox or other third-party account. Every file gets a unique, - persistent URL for citing and sharing -

-
-
-
-
+
search icon + zotero
-
-

Publish Your Reports

-

- Share papers in OSF Preprints or a community-based preprint - provider, so others can find and cite your work. Track impact with - metrics like downloads and view counts -

-
-
-
-
- -
-
- -
- -
-
- -
-

What others are saying

-
-
- - -
-
+
search icon + google-drive -
-
-

{{ slide.title }}

-
-

{{ slide.author }}

-

{{ slide.facility }}

-
-
- - -
- -

- OSF integrations make your workflow more efficient -

- -
-
-
-

Authentication

-
-

Discovery

-
-
-

References

-
-
-

Storage

-
-
+ } @else if (isSmall()) { +
+
+

Authentication

+ incommon + sso +
-
-
- incommon - sso -
+
+

Discovery

+ google-scholar + orcid +
-
- google-scholar - orcid -
+
+

References

+ mendeley + zotero +
-
- mendeley - zotero +
+

Storage

+ gropbox + google-drive +
- -
- gropbox - google-drive + } @else { +
+ + +
+

{{ icon.title }}

+ search icon + search icon +
+ +
-
-
+ } +
diff --git a/src/app/features/home/logged-out/home-logged-out.component.scss b/src/app/features/home/logged-out/home-logged-out.component.scss index 718b6d4b8..1129fd04f 100644 --- a/src/app/features/home/logged-out/home-logged-out.component.scss +++ b/src/app/features/home/logged-out/home-logged-out.component.scss @@ -1,203 +1,411 @@ @use "assets/styles/variables" as var; :host { - display: flex; - flex-direction: column; - background: var.$white; - padding-top: 7.14rem; - - h3 { - font-weight: 400; - margin-top: 0.86rem; - } - - span { - color: var.$pr-blue-1; - } - - .better-way-container { - margin: 0.49rem 0 4.2rem 0.12rem; + .home-container { display: flex; - justify-content: center; - align-items: center; + flex-direction: column; + background: var.$white; - .text-container { - display: flex; - flex-direction: column; - padding-top: 0.63rem; - width: 40.29rem; + h3 { + font-weight: 400; + margin-top: 0.86rem; + } + + span { + color: var.$pr-blue-1; } - .image-container { + .better-way-container { + margin: 8.5rem 2.5rem 8.5rem 2.5rem; display: flex; justify-content: center; + align-items: center; - img { - width: 42.07rem; - height: 26.86rem; + .text-container { + display: flex; + flex-direction: column; + padding-top: 0.63rem; + width: 40.29rem; } - } - } - .discover-research-container { - width: 100%; - background: var.$gradient-1; - display: flex; - flex-direction: column; - align-items: center; - padding: 8.57rem 1.71rem 8.57rem 1.71rem; - row-gap: 3.43rem; + .image-container { + display: flex; + justify-content: center; + + img { + width: 42.07rem; + height: 26.86rem; + } + } + } - .text-container { + .discover-research-container { + width: 100%; + background: var.$gradient-1; display: flex; flex-direction: column; align-items: center; - } - } + padding: 8.57rem 1.71rem 8.57rem 1.71rem; + row-gap: 3.43rem; - .supports-container { - display: flex; - flex-direction: column; - align-items: center; - padding: 4.57rem 1.71rem 8.57rem 1.71rem; - row-gap: 3.43rem; + .text-container { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + } + } - .content-container { + .supports-container { display: flex; + flex-direction: column; + align-items: center; + padding: 4.57rem 1.71rem 8.57rem 1.71rem; + row-gap: 3.43rem; - .left-bar { - width: 50%; + .content-container { display: flex; - flex-direction: column; - row-gap: 1.71rem; - padding-right: 3.57rem; - .info-section { + .left-bar { + width: 50%; display: flex; + flex-direction: column; + row-gap: 1.71rem; + padding-right: 3.57rem; - .icons-wrapper { + .info-section { display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - padding-left: 0.86rem; - padding-right: 0.86rem; - } - .text-wrapper { - display: flex; - flex-direction: column; - row-gap: 0.43rem; - padding-top: 0.86rem; - - h3 { - margin-top: 0; - line-height: 1.71rem; - font-weight: 400; - text-transform: none; + .icons-wrapper { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + padding-left: 0.86rem; + padding-right: 0.86rem; + } + + .text-wrapper { + display: flex; + flex-direction: column; + row-gap: 0.43rem; + padding-top: 0.86rem; + + h3 { + margin-top: 0; + line-height: 1.71rem; + font-weight: 400; + text-transform: none; + } } } } + + .right-bar { + display: flex; + justify-content: center; + align-items: center; + width: 50%; + + iframe { + width: 38.36rem; + height: 21.57rem; + border: none; + } + } } - .right-bar { + .learn-more-container { + display: flex; + justify-content: center; + } + } + + .others-saying-container { + display: flex; + flex-direction: column; + align-items: center; + padding-bottom: 2.86rem; + } + + .carousel-container { + width: 100%; + padding-bottom: 8.57rem; + flex: 0; + + .slide { + position: relative; + background: var.$bg-blue-3; + height: 28.57rem; display: flex; justify-content: center; align-items: center; - width: 50%; - iframe { - width: 38.36rem; - height: 21.57rem; - border: none; + .user-image { + height: 26.57rem; + align-self: end; + } + + .quote-icon { + width: 2.57rem; + } + + .content-container { + display: flex; + flex-direction: column; + .text-container { + padding-left: 3.43rem; + width: 32.79rem; + + .title-container { + margin-bottom: 3.43rem; + } + + .author { + font-weight: 600; + } + } } } } - .learn-more-container { - display: flex; - justify-content: center; + .integrations-title { + text-align: center; } - } - .others-saying-container { - display: flex; - flex-direction: column; - align-items: center; - padding-bottom: 2.86rem; - } + .integrations-main { + display: flex; + flex-direction: column; + padding-top: 3.43rem; + padding-bottom: 8.57rem; + row-gap: 1.71rem; - .carousel-container { - width: 100%; - padding-bottom: 8.57rem; - flex: 0; + .integrations-container { + display: flex; + justify-content: space-between; - .slide { - position: relative; - background: var.$bg-blue-3; - height: 28.57rem; - display: flex; - justify-content: center; + .integrations-bundle { + display: flex; + flex-direction: column; + align-items: center; + row-gap: 1.71rem; + width: 25%; + } + + .integrations-bundle-border { + display: flex; + flex-direction: column; + align-items: center; + row-gap: 1.71rem; + width: 25%; + border-right: 1px solid var.$grey-2; + } + } + } + } + + .tablet { + .better-way-container { + flex-direction: column; align-items: center; - .user-image { - height: 26.57rem; - align-self: end; + p-button { + width: 55%; } - .quote-icon { - width: 2.57rem; + .text-container { + align-items: center; + margin-bottom: 4.2rem; } + } + + .supports-container { + padding: 4.2rem 2.5rem 8.5rem 2.5rem; .content-container { - display: flex; flex-direction: column; - .text-container { - padding-left: 3.43rem; - width: 32.79rem; + align-items: center; + + .left-bar { + width: 100%; + padding: 0 4.8rem 3.4rem 4.8rem; + } - .title-container { - margin-bottom: 3.43rem; + .right-bar { + width: 100%; + padding: 0 4.8rem 0 4.8rem; + iframe { + width: 100%; + aspect-ratio: 1.77 / 1; } + } + } + } + + .carousel-container { + .slide { + max-width: 100vw; + padding-left: 2.5rem; - .author { - font-weight: 600; + .content-container { + .text-container { + padding-left: 3.43rem; + width: 40vw; } } } } } - .integrations-title { - text-align: center; - } + .small { + .better-way-container { + flex-direction: column; + align-items: center; - .integrations-main { - display: flex; - flex-direction: column; - padding-top: 3.43rem; - padding-bottom: 8.57rem; - row-gap: 1.71rem; + p-button { + width: 55%; + } - .integrations-container { - display: flex; - justify-content: space-between; + .text-container { + align-items: center; + margin-bottom: 4.2rem; + } + } + + .supports-container { + padding: 4.2rem 2.5rem 8.5rem 2.5rem; + + .content-container { + flex-direction: column; + align-items: center; + + .left-bar { + width: 100%; + padding: 0 4.8rem 3.4rem 4.8rem; + } + + .right-bar { + width: 100%; + padding: 0 4.8rem 3.4rem 4.8rem; + iframe { + width: 100%; + aspect-ratio: 1.77 / 1; + } + } + } + } + + .carousel-container { + .slide { + justify-content: center; + padding: 2.5rem 8rem 2.5rem 8rem; + height: 100%; + + .user-image { + display: none; + } + + .content-container { + .text-container { + padding-left: 3.43rem; + width: 100%; + } + } + } + } + + .integrations-main-small { + padding: 4.2rem 0 8.5rem 0; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; .integrations-bundle { display: flex; + flex-direction: column; + row-gap: 1.7rem; + align-items: center; + } + } + } + + .mobile { + .better-way-container { + flex-direction: column; + align-items: center; + + p-button { + width: 75%; + } + + .text-container { + width: 100%; + text-align: center; + align-items: center; + margin-bottom: 4.2rem; + } + + img { + width: 100%; + } + } + + .supports-container { + padding: 4.2rem 2.5rem 8.5rem 2.5rem; + + .content-container { flex-direction: column; align-items: center; - row-gap: 1.71rem; - width: 25%; + + .left-bar { + width: 100%; + padding: 0 0 3.4rem 0; + + .info-section { + .icons-wrapper { + padding: 0 1rem 0 0; + } + } + } + + .right-bar { + width: 100%; + iframe { + width: 100%; + aspect-ratio: 1.77 / 1; + } + } } + } + + .carousel-container { + .slide { + justify-content: center; + padding: 2.5rem 1.1rem 2.5rem 1.1rem; + height: 100%; + + .user-image { + display: none; + } + + .content-container { + .text-container { + padding-left: 3.43rem; + width: 100%; + } + } + } + } + + .integrations-main-mobile { + padding-bottom: 4.2rem; - .integrations-bundle-border { + .slide { display: flex; flex-direction: column; align-items: center; - row-gap: 1.71rem; - width: 25%; - border-right: 1px solid var.$grey-2; + row-gap: 2rem; + width: 100%; } } } diff --git a/src/app/features/home/logged-out/home-logged-out.component.ts b/src/app/features/home/logged-out/home-logged-out.component.ts index dc3559bbe..adf989b89 100644 --- a/src/app/features/home/logged-out/home-logged-out.component.ts +++ b/src/app/features/home/logged-out/home-logged-out.component.ts @@ -1,10 +1,17 @@ -import { Component, signal } from '@angular/core'; +import { Component, inject, signal } from '@angular/core'; import { CarouselModule } from 'primeng/carousel'; import { FormsModule } from '@angular/forms'; import { Button } from 'primeng/button'; import { InputText } from 'primeng/inputtext'; import { NgOptimizedImage } from '@angular/common'; -import { slides } from './slides'; +import { slides, integrationIcons } from './data'; +import { + IS_MEDIUM, + IS_SMALL, + IS_WEB, + IS_XSMALL, +} from '@shared/utils/breakpoints.tokens'; +import { toSignal } from '@angular/core/rxjs-interop'; @Component({ selector: 'osf-home-logged-out', @@ -15,6 +22,15 @@ import { slides } from './slides'; }) export class HomeLoggedOutComponent { searchValue = signal(''); + #isWeb$ = inject(IS_WEB); + #isMedium$ = inject(IS_MEDIUM); + #isSmall$ = inject(IS_SMALL); + #isXSmall$ = inject(IS_XSMALL); + isWeb = toSignal(this.#isWeb$); + isMedium = toSignal(this.#isMedium$); + isXSmall = toSignal(this.#isXSmall$); + isSmall = toSignal(this.#isSmall$); + icons = integrationIcons; slides = slides; } diff --git a/src/app/shared/components/sub-header/sub-header.component.html b/src/app/shared/components/sub-header/sub-header.component.html index 214a943f8..6efbdd61c 100644 --- a/src/app/shared/components/sub-header/sub-header.component.html +++ b/src/app/shared/components/sub-header/sub-header.component.html @@ -1,10 +1,10 @@ -
+

{{ title() }}

@if (showButton()) { -
+
(''); icon = input(''); buttonClick = output(); - #isMobile$ = inject(IS_XSMALL); - isMobile = toSignal(this.#isMobile$); + #isXSmall$ = inject(IS_XSMALL); + isXSmall = toSignal(this.#isXSmall$); } diff --git a/src/app/shared/utils/breakpoints.tokens.ts b/src/app/shared/utils/breakpoints.tokens.ts index 75b7076ea..f16020cb8 100644 --- a/src/app/shared/utils/breakpoints.tokens.ts +++ b/src/app/shared/utils/breakpoints.tokens.ts @@ -17,6 +17,8 @@ function createBreakpointToken( } export const IS_PORTRAIT = createBreakpointToken('(orientation: portrait)'); -export const IS_WEB = createBreakpointToken(Breakpoints.Web); +export const IS_WEB = createBreakpointToken('(min-width: 1280px)'); export const IS_TABLET = createBreakpointToken(Breakpoints.Tablet); export const IS_XSMALL = createBreakpointToken(Breakpoints.XSmall); +export const IS_SMALL = createBreakpointToken(Breakpoints.Small); +export const IS_MEDIUM = createBreakpointToken(Breakpoints.Medium); diff --git a/src/assets/styles/overrides/carousel.scss b/src/assets/styles/overrides/carousel.scss index 1cc36eb2a..0ace65d1a 100644 --- a/src/assets/styles/overrides/carousel.scss +++ b/src/assets/styles/overrides/carousel.scss @@ -14,5 +14,13 @@ .p-carousel-indicator-button { background: var.$grey-2; + width: 1.1rem; + height: 1.1rem; + border-radius: 50%; + } + + .p-carousel-indicator-list { + margin-top: 1.7rem; + column-gap: 1.7rem; } } From be0f929cb1a201fa54a2dfdfe1cf3bc36659891d Mon Sep 17 00:00:00 2001 From: Kyrylo Petrov Date: Thu, 20 Mar 2025 12:50:28 +0200 Subject: [PATCH 3/3] fix(home-page): minor fixes --- src/app/features/home/home.component.ts | 6 ++---- .../home/logged-out/home-logged-out.component.ts | 12 ++++-------- src/app/shared/utils/breakpoint-queries.enum.ts | 4 ++++ src/app/shared/utils/breakpoints.tokens.ts | 5 +++-- 4 files changed, 13 insertions(+), 14 deletions(-) create mode 100644 src/app/shared/utils/breakpoint-queries.enum.ts diff --git a/src/app/features/home/home.component.ts b/src/app/features/home/home.component.ts index fee2c2571..ad6b124ad 100644 --- a/src/app/features/home/home.component.ts +++ b/src/app/features/home/home.component.ts @@ -27,10 +27,8 @@ import { noteworthy, mostPopular, projects } from '@osf/features/home/data'; styleUrl: './home.component.scss', }) export class HomeComponent { - #isMedium$ = inject(IS_MEDIUM); - #isMobile$ = inject(IS_XSMALL); - isMedium = toSignal(this.#isMedium$); - isMobile = toSignal(this.#isMobile$); + isMedium = toSignal(inject(IS_MEDIUM)); + isMobile = toSignal(inject(IS_XSMALL)); projects: Project[] = projects; noteworthy = noteworthy; mostPopular = mostPopular; diff --git a/src/app/features/home/logged-out/home-logged-out.component.ts b/src/app/features/home/logged-out/home-logged-out.component.ts index adf989b89..9e5ac3f83 100644 --- a/src/app/features/home/logged-out/home-logged-out.component.ts +++ b/src/app/features/home/logged-out/home-logged-out.component.ts @@ -22,14 +22,10 @@ import { toSignal } from '@angular/core/rxjs-interop'; }) export class HomeLoggedOutComponent { searchValue = signal(''); - #isWeb$ = inject(IS_WEB); - #isMedium$ = inject(IS_MEDIUM); - #isSmall$ = inject(IS_SMALL); - #isXSmall$ = inject(IS_XSMALL); - isWeb = toSignal(this.#isWeb$); - isMedium = toSignal(this.#isMedium$); - isXSmall = toSignal(this.#isXSmall$); - isSmall = toSignal(this.#isSmall$); + isWeb = toSignal(inject(IS_WEB)); + isMedium = toSignal(inject(IS_MEDIUM)); + isSmall = toSignal(inject(IS_SMALL)); + isXSmall = toSignal(inject(IS_XSMALL)); icons = integrationIcons; slides = slides; diff --git a/src/app/shared/utils/breakpoint-queries.enum.ts b/src/app/shared/utils/breakpoint-queries.enum.ts new file mode 100644 index 000000000..5ded17bdd --- /dev/null +++ b/src/app/shared/utils/breakpoint-queries.enum.ts @@ -0,0 +1,4 @@ +export enum BreakpointQueries { + Desktop = '(min-width: 1280px)', + Portrait = '(orientation: portrait)', +} diff --git a/src/app/shared/utils/breakpoints.tokens.ts b/src/app/shared/utils/breakpoints.tokens.ts index f16020cb8..b2403f774 100644 --- a/src/app/shared/utils/breakpoints.tokens.ts +++ b/src/app/shared/utils/breakpoints.tokens.ts @@ -1,6 +1,7 @@ import { inject, InjectionToken } from '@angular/core'; import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout'; import { Observable, map } from 'rxjs'; +import { BreakpointQueries } from '@shared/utils/breakpoint-queries.enum'; function createBreakpointToken( query: string, @@ -16,8 +17,8 @@ function createBreakpointToken( }); } -export const IS_PORTRAIT = createBreakpointToken('(orientation: portrait)'); -export const IS_WEB = createBreakpointToken('(min-width: 1280px)'); +export const IS_PORTRAIT = createBreakpointToken(BreakpointQueries.Portrait); +export const IS_WEB = createBreakpointToken(BreakpointQueries.Desktop); export const IS_TABLET = createBreakpointToken(Breakpoints.Tablet); export const IS_XSMALL = createBreakpointToken(Breakpoints.XSmall); export const IS_SMALL = createBreakpointToken(Breakpoints.Small);