diff --git a/src/pug/header.pug b/src/pug/header.pug index 5b0b580d9..242eeab52 100644 --- a/src/pug/header.pug +++ b/src/pug/header.pug @@ -1,23 +1,3 @@ header.pf-c-page__header(role='banner') - .pf-c-page__header-brand.ins-c-page__header-brand--loading - .pf-c-page__header-brand-toggle - button.pf-c-button.pf-m-plain(aria-label='Toggle primary navigation' widget-type='InsightsNavToggle' type='button') - img(src='apps/chrome/assets/images/primary-nav-hamburger-toggle.svg') - a.pf-c-page__header-brand-link(href='#') - img(src='apps/chrome/assets/images/logo.svg' alt='cloud.redhat.com logo') - .pf-c-page__header-tools(widget-type='InsightsToolbar') - .pf-c-page__header-tools-group.pf-m-icons - button.pf-c-button.pf-m-plain(aria-label='Settings' widget-type='SettingsButton' type='button') - img(src='apps/chrome/assets/images/settings-button.svg') - button.pf-c-button.pf-m-plain(aria-label='Overflow FAQ' widget-type='InsightsFAQ' type='button') - img(src='apps/chrome/assets/images/faq-button.svg') - .pf-c-page__header-tools-group - .pf-c-dropdown.pf-u-hidden-on-lg(aria-label='Overflow actions' widget-type='InsightsOverflowActions') - button.pf-c-dropdown__toggle.pf-m-plain(aria-label='Actions' type='button' aria-expanded='false' aria-haspopup='true') - img(src='apps/chrome/assets/images/overflow-actions-sm.svg') - .pf-m-user.pf-m-user-skeleton - .pf-c-dropdown(aria-label='Overflow actions' widget-type='InsightsOverflowActions') - .pf-c-dropdown__toggle.pf-m-plain(aria-expanded='false') - .ins-c-skeleton.ins-c-skeleton__lg.ins-m-dark   - img.pf-c-dropdown__toggle-icon(src='apps/chrome/assets/images/overflow-actions-lg.svg') - img.pf-c-avatar(src='apps/chrome/assets/images/img_avatar.svg' alt='Avatar Image') + include templates/brand-block.pug + include templates/tools-block.pug diff --git a/src/pug/landing-header.pug b/src/pug/landing-header.pug index 9997fe511..0cdb215ca 100644 --- a/src/pug/landing-header.pug +++ b/src/pug/landing-header.pug @@ -1,21 +1,3 @@ header.pf-c-page__header(role='banner') - .pf-c-page__header-brand.ins-c-page__header-brand--loading - .pf-c-page__header-brand-toggle(hidden) - a.pf-c-page__header-brand-link(href='#') - img(src='apps/chrome/assets/images/logo.svg' alt='cloud.redhat.com logo') - .pf-c-page__header-tools(widget-type='InsightsToolbar') - .pf-c-page__header-tools-group.pf-m-icons - button.pf-c-button.pf-m-plain(aria-label='Settings' widget-type='SettingsButton' type='button') - img(src='apps/chrome/assets/images/settings-button.svg') - button.pf-c-button.pf-m-plain(aria-label='Overflow FAQ' widget-type='InsightsFAQ' type='button') - img(src='apps/chrome/assets/images/faq-button.svg') - .pf-c-page__header-tools-group - .pf-c-dropdown.pf-u-hidden-on-lg(aria-label='Overflow actions' widget-type='InsightsOverflowActions') - button.pf-c-dropdown__toggle.pf-m-plain(aria-label='Actions' type='button' aria-expanded='false' aria-haspopup='true') - img(src='apps/chrome/assets/images/overflow-actions-sm.svg') - .pf-m-user.pf-m-user-skeleton - .pf-c-dropdown(aria-label='Overflow actions' widget-type='InsightsOverflowActions') - .pf-c-dropdown__toggle.pf-m-plain(aria-expanded='false') - .ins-c-skeleton.ins-c-skeleton__lg.ins-m-dark   - img.pf-c-dropdown__toggle-icon(src='apps/chrome/assets/images/overflow-actions-lg.svg') - img.pf-c-avatar(src='apps/chrome/assets/images/img_avatar.svg' alt='Avatar Image') + include templates/brand-noHamburger-block.pug + include templates/tools-block.pug diff --git a/src/pug/slices/hamburger-hidden.pug b/src/pug/slices/hamburger-hidden.pug new file mode 100644 index 000000000..c1a3993d5 --- /dev/null +++ b/src/pug/slices/hamburger-hidden.pug @@ -0,0 +1 @@ +.pf-c-page__header-brand-toggle(hidden) diff --git a/src/pug/slices/hamburger.pug b/src/pug/slices/hamburger.pug new file mode 100644 index 000000000..5cae2ad93 --- /dev/null +++ b/src/pug/slices/hamburger.pug @@ -0,0 +1,3 @@ +.pf-c-page__header-brand-toggle + button.pf-c-button.pf-m-plain(aria-label='Toggle primary navigation' widget-type='InsightsNavToggle' type='button') + img(src='apps/chrome/assets/images/primary-nav-hamburger-toggle.svg') diff --git a/src/pug/slices/logo.pug b/src/pug/slices/logo.pug new file mode 100644 index 000000000..1d1004f47 --- /dev/null +++ b/src/pug/slices/logo.pug @@ -0,0 +1,2 @@ +a.pf-c-page__header-brand-link(href='#') + img(src='apps/chrome/assets/images/logo.svg' alt='cloud.redhat.com logo') diff --git a/src/pug/slices/mobileKebab.pug b/src/pug/slices/mobileKebab.pug new file mode 100644 index 000000000..cfed519a3 --- /dev/null +++ b/src/pug/slices/mobileKebab.pug @@ -0,0 +1,3 @@ +.pf-c-dropdown.pf-u-hidden-on-lg(aria-label='Overflow actions' widget-type='InsightsOverflowActions') + button.pf-c-dropdown__toggle.pf-m-plain(aria-label='Actions' type='button' aria-expanded='false' aria-haspopup='true') + img(src='apps/chrome/assets/images/overflow-actions-sm.svg') diff --git a/src/pug/slices/tools.pug b/src/pug/slices/tools.pug new file mode 100644 index 000000000..4d5299217 --- /dev/null +++ b/src/pug/slices/tools.pug @@ -0,0 +1,5 @@ +.pf-c-page__header-tools-group.pf-m-icons + button.pf-c-button.pf-m-plain(aria-label='Settings' widget-type='SettingsButton' type='button') + img(src='apps/chrome/assets/images/settings-button.svg') + button.pf-c-button.pf-m-plain(aria-label='Overflow FAQ' widget-type='InsightsFAQ' type='button') + img(src='apps/chrome/assets/images/faq-button.svg') diff --git a/src/pug/slices/userDropdown.pug b/src/pug/slices/userDropdown.pug new file mode 100644 index 000000000..494636244 --- /dev/null +++ b/src/pug/slices/userDropdown.pug @@ -0,0 +1,9 @@ +.pf-m-user.pf-m-user-skeleton + .pf-c-dropdown(aria-label='Overflow actions' widget-type='InsightsOverflowActions') + button.pf-c-dropdown__toggle.pf-m-plain(aria-expanded='false') + span.pf-c-dropdown__toggle-image + img.pf-c-avatar(src='apps/chrome/assets/images/img_avatar.svg' alt='Avatar Image') + span.pf-c-dropdown__toggle-text + .ins-c-skeleton.ins-c-skeleton__lg.ins-m-dark   + span.pf-c-dropdown__toggle-icon + img.pf-c-dropdown__toggle-icon(src='apps/chrome/assets/images/overflow-actions-lg.svg') diff --git a/src/pug/templates/brand-block.pug b/src/pug/templates/brand-block.pug new file mode 100644 index 000000000..12ae19e97 --- /dev/null +++ b/src/pug/templates/brand-block.pug @@ -0,0 +1,3 @@ +.pf-c-page__header-brand.ins-c-page__header-brand--loading + include ../slices/hamburger.pug + include ../slices/logo.pug diff --git a/src/pug/templates/brand-noHamburger-block.pug b/src/pug/templates/brand-noHamburger-block.pug new file mode 100644 index 000000000..cf1ec63f1 --- /dev/null +++ b/src/pug/templates/brand-noHamburger-block.pug @@ -0,0 +1,3 @@ +.pf-c-page__header-brand.ins-c-page__header-brand--loading + include ../slices/hamburger-hidden.pug + include ../slices/logo.pug diff --git a/src/pug/templates/tools-block.pug b/src/pug/templates/tools-block.pug new file mode 100644 index 000000000..2067c8140 --- /dev/null +++ b/src/pug/templates/tools-block.pug @@ -0,0 +1,5 @@ +.pf-c-page__header-tools(widget-type='InsightsToolbar') + include ../slices/tools.pug + .pf-c-page__header-tools-group + include ../slices/mobileKebab.pug + include ../slices/userDropdown.pug