Merge pull request #9 from adobecom/merged-header

Merged header design POC

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 {

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

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;

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;