diff --git a/blocks/ecc-dashboard/ecc-dashboard.css b/blocks/ecc-dashboard/ecc-dashboard.css index 5eabd195..9d0307eb 100644 --- a/blocks/ecc-dashboard/ecc-dashboard.css +++ b/blocks/ecc-dashboard/ecc-dashboard.css @@ -1,8 +1,9 @@ .ecc-dashboard { + box-sizing: border-box; font-family: var(--body-font-family); - padding: 40px; - width: var(--grid-container-width); + width: 100%; margin: auto; + padding-bottom: 40px; } .ecc-dashboard.no-events .no-events-area { @@ -12,12 +13,25 @@ align-items: center; } +.ecc-dashboard .dashboard-header-container { + background-image: url('/img/header-background.jpg'); + position: fixed; + width: 100%; + z-index: 1; + +} + .ecc-dashboard .dashboard-header { + margin: auto; + padding: 88px 20px 40px 20px; display: flex; flex-direction: column; gap: 16px; justify-content: space-between; - align-items: flex-start; + align-items: center; + width: var(--grid-container-width); + box-sizing: border-box; + color: var(--color-white); } .ecc-dashboard .dashboard-header-text { @@ -50,6 +64,9 @@ .ecc-dashboard .dashboard-table-container { max-width: 100%; overflow: auto; + margin: auto; + width: var(--grid-container-width); + padding-top: 172px; } .ecc-dashboard table { diff --git a/blocks/ecc-dashboard/ecc-dashboard.js b/blocks/ecc-dashboard/ecc-dashboard.js index 1078cc4b..4386d6a1 100644 --- a/blocks/ecc-dashboard/ecc-dashboard.js +++ b/blocks/ecc-dashboard/ecc-dashboard.js @@ -1,5 +1,5 @@ import { getLibs } from '../../scripts/utils.js'; -import { getIcon, buildNoAccessScreen } from '../../utils/utils.js'; +import { getIcon } from '../../utils/utils.js'; const { createTag } = await import(`${getLibs()}/utils/utils.js`); @@ -219,6 +219,7 @@ function decoratePagination(props) { } function buildDashboardHeader(props) { + const dashboardHeaderContainer = createTag('div', { class: 'dashboard-header-container' }); const dashboardHeader = createTag('div', { class: 'dashboard-header' }); const textContainer = createTag('div', { class: 'dashboard-header-text' }); const actionsContainer = createTag('div', { class: 'dashboard-actions-container' }); @@ -230,8 +231,9 @@ function buildDashboardHeader(props) { createTag('a', { class: 'con-button blue', href: props.createFormUrl }, 'Create new event', { parent: actionsContainer }); searchInput.addEventListener('input', () => filterData(props, searchInput.value)); + dashboardHeaderContainer.append(dashboardHeader); dashboardHeader.append(textContainer, actionsContainer); - props.el.prepend(dashboardHeader); + props.el.prepend(dashboardHeaderContainer); } function buildDashboardTable(props) { @@ -304,6 +306,17 @@ async function getConfig(el) { return config; } +function buildNoAccessScreen(el) { + el.classList.add('no-access'); + + const h1 = createTag('h1', {}, 'You do not have sufficient access to view.'); + const area = createTag('div', { class: 'no-access-area' }); + const noAccessDescription = createTag('p', {}, 'An Adobe corporate account is required to access this feature.'); + + el.append(h1, area); + area.append(getIcon('browser-access-forbidden-lg'), noAccessDescription); +} + function buildNoEventScreen(el, props) { el.classList.add('no-events'); @@ -318,6 +331,8 @@ function buildNoEventScreen(el, props) { } async function buildDashboard(el, config) { + document.body.querySelector('header').classList.add('dashboard-page'); + const props = { el, currentPage: 1, @@ -360,7 +375,7 @@ export default async function init(el) { if (profile) { if (profile.noProfile || profile.account_type !== 'type3') { - buildNoAccessScreen(el); + buildNoAccessScreen(el, config); } else { buildDashboard(el, config); } @@ -371,7 +386,7 @@ export default async function init(el) { if (!profile) { const unsubscribe = window.bm8tr.subscribe('imsProfile', ({ newValue }) => { if (newValue?.noProfile || newValue.account_type !== 'type3') { - buildNoAccessScreen(el); + buildNoAccessScreen(el, config); } else { buildDashboard(el, config); } diff --git a/blocks/form-handler/form-handler.css b/blocks/form-handler/form-handler.css index d914fefd..d574b424 100644 --- a/blocks/form-handler/form-handler.css +++ b/blocks/form-handler/form-handler.css @@ -12,6 +12,10 @@ justify-content: center; } +.form-handler .form-handler-ctas-panel a { + font-size: var(--type-body-s-size); +} + .form-handler .side-menu ul { padding: 0; } @@ -207,10 +211,6 @@ border-right: 2px solid var(--color-black); } -.form-handler .form-handler-ctas-panel a { - font-size: var(--type-body-s-size); -} - .form-handler .form-handler-ctas-panel a.disabled { pointer-events: none; opacity: 0.5; diff --git a/img/header-background.jpg b/img/header-background.jpg new file mode 100644 index 00000000..72efee04 Binary files /dev/null and b/img/header-background.jpg differ diff --git a/styles/styles.css b/styles/styles.css index 3c8f2bc0..ae558d3e 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -12,6 +12,31 @@ --color-red: #EB1000; } +body header { + background: url('/img/header-background.jpg'); + color: var(--color-white); +} + +/* stylelint-disable-next-line selector-class-pattern */ +body header .feds-signIn { + color: var(--color-white); +} + +body header.dashboard-page { + position: fixed; + background: transparent; + width: 100%; +} + +body header .feds-topnav-wrapper { + background: transparent; + border-bottom: none; +} + +body header.dashboard-page .feds-topnav-wrapper .feds-topnav { + border-bottom: 1px var(--color-white) solid; +} + main a.con-button.no-event { user-select: none; pointer-events: none;