From ce09855d495904d8582c86658ebd59d462531e4d Mon Sep 17 00:00:00 2001 From: Brian Pilati Date: Fri, 4 Aug 2023 11:24:41 -0600 Subject: [PATCH] Updates for branding --- app/preprints/index/route.ts | 3 ++- app/preprints/index/styles.scss | 26 +++++++++++++------ app/preprints/index/template.hbs | 11 +++++--- app/styles/_branding.scss | 3 +-- app/styles/_preprint.scss | 1 + .../components/branded-header/styles.scss | 1 + .../addon/components/search-page/styles.scss | 2 +- mirage/scenarios/preprints.ts | 3 +++ 8 files changed, 34 insertions(+), 16 deletions(-) diff --git a/app/preprints/index/route.ts b/app/preprints/index/route.ts index ffaebdfcdc..75cc66f511 100644 --- a/app/preprints/index/route.ts +++ b/app/preprints/index/route.ts @@ -18,7 +18,7 @@ export default class Preprints extends Route { try { const provider_id = params.provider_id ? params.provider_id : 'osf'; - const provider = await this.store.findRecord('preprint-provider', provider_id); + const provider = await this.store.findRecord('preprint-provider', provider_id, {include: 'brand'}); this.theme.set('providerType', 'preprint'); this.theme.set('id', provider_id); @@ -37,6 +37,7 @@ export default class Preprints extends Route { provider, taxonomies, brandedProviders, + brand: provider.brand.content, }; } catch (error) { diff --git a/app/preprints/index/styles.scss b/app/preprints/index/styles.scss index c0155983a2..f499dd4fc2 100644 --- a/app/preprints/index/styles.scss +++ b/app/preprints/index/styles.scss @@ -13,10 +13,6 @@ background-color: var(--secondary-color); color: var(--primary-color) !important; - &.osf { - background: url('images/default-brand/bg-dark.jpg'); - } - a:not(:global(.btn)) { color: var(--primary-color); text-decoration: underline; @@ -38,6 +34,20 @@ align-items: center; color: var(--primary-color); + .or-container { + font-size: 21px; + margin-bottom: 20px; + font-weight: 300; + line-height: 1.4; + color: $color-text-white; + + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + .example-container { display: flex; justify-content: center; @@ -83,7 +93,7 @@ /* Preprint providers and become provider */ .preprint-tool-container { - background: url('images/default-brand/bg-dark.jpg'); + background: var(--hero-background-img-url); color: $color-text-white; text-shadow: 0 0 5px #506069; background-size: cover; @@ -142,9 +152,7 @@ .links { color: $color-text-white; text-decoration: underline; - } - } .contact { @@ -156,7 +164,9 @@ h2 { text-transform: capitalize; } - } + .osf-preprint-advisory-container { + background-image: none; + } } diff --git a/app/preprints/index/template.hbs b/app/preprints/index/template.hbs index cdfdfc9fa3..e8f2b79677 100644 --- a/app/preprints/index/template.hbs +++ b/app/preprints/index/template.hbs @@ -1,9 +1,9 @@ {{page-title (t 'preprints.title')}} -
- {{!HEADER}}
-
{{t 'preprints.header.or'}}
+
{{t 'preprints.header.or'}}
+
{{html-safe this.theme.provider.advisoryBoard 'advisory-board'}}
diff --git a/app/styles/_branding.scss b/app/styles/_branding.scss index 1143a5cb24..48d67e835f 100644 --- a/app/styles/_branding.scss +++ b/app/styles/_branding.scss @@ -2,8 +2,7 @@ --primary-color: #{$color-osf-primary}; --secondary-color: #{$color-osf-secondary}; --navbar-logo-img-url: url('images/default-brand/cos-logo-white.svg'); - --hero-logo-registries-img-url: url('images/default-brand/osf-registries-white.png'); - --hero-logo-preprints-img-url: url('images/default-brand/osf-preprints-white.png'); + --hero-logo-img-url: url('images/default-brand/osf-registries-white.png'); --hero-background-img-url: url('images/default-brand/bg-dark.jpg'); } diff --git a/app/styles/_preprint.scss b/app/styles/_preprint.scss index 3b08daf425..bdc1cf7d6c 100644 --- a/app/styles/_preprint.scss +++ b/app/styles/_preprint.scss @@ -1,6 +1,7 @@ // stylelint-disable max-nesting-depth, selector-max-compound-selectors .preprint-advisory-container { + background: var(--hero-background-img-url); background-color: $color-bg-gray-lighter; border-bottom: 1px solid #6d8a98; padding-top: 15px; diff --git a/lib/osf-components/addon/components/branded-header/styles.scss b/lib/osf-components/addon/components/branded-header/styles.scss index 9b5dbf7bad..8b15380e37 100644 --- a/lib/osf-components/addon/components/branded-header/styles.scss +++ b/lib/osf-components/addon/components/branded-header/styles.scss @@ -8,6 +8,7 @@ justify-content: center; align-items: center; color: $color-text-white; + background: var(--hero-background-img-url); .lead { font-size: 21px; diff --git a/lib/osf-components/addon/components/search-page/styles.scss b/lib/osf-components/addon/components/search-page/styles.scss index 1495b22d04..87468346bc 100644 --- a/lib/osf-components/addon/components/search-page/styles.scss +++ b/lib/osf-components/addon/components/search-page/styles.scss @@ -9,7 +9,7 @@ } .provider-logo { - background: var(--hero-logo-registries-img-url) top center no-repeat; + background: var(--hero-logo-img-url) top center no-repeat; background-size: contain; height: 70px; width: 100%; diff --git a/mirage/scenarios/preprints.ts b/mirage/scenarios/preprints.ts index 2240ef1ee4..b44ee6592e 100644 --- a/mirage/scenarios/preprints.ts +++ b/mirage/scenarios/preprints.ts @@ -19,6 +19,8 @@ function buildOSF( const brand = server.create('brand', { primaryColor: '#286090', secondaryColor: '#fff', + heroLogoImage: 'images/default-brand/osf-preprints-white.png', + heroBackgroundImage: 'images/default-brand/bg-dark.jpg', }); const currentUserModerator = server.create('moderator', { id: currentUser.id, user: currentUser, provider: osf }, 'asAdmin'); @@ -49,6 +51,7 @@ function buildThesisCommons( const brand = server.create('brand', { primaryColor: '#721a0e', secondaryColor: '#fec216', + heroBackgroundImage: 'https://singlecolorimage.com/get/fec216/1000x1000', }); const currentUserModerator = server.create('moderator', { id: currentUser.id, user: currentUser, provider: thesisCommons }, 'asAdmin');