refactor: 1135 slim footer #1308
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,72 @@ | ||
| @use '$styles/veda-ui-theme-vars.scss' as themeVars; | ||
|
|
||
| #logo-container { | ||
snmln marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| display: flex; | ||
| font-family: themeVars.$veda-uswds-basefont-sans; | ||
| gap: themeVars.$veda-uswds-spacing-105; | ||
|
|
||
| #logo-container-link { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: themeVars.$veda-uswds-spacing-105; | ||
| font-weight: themeVars.$veda-uswds-fontweight-bold; | ||
| font-size: themeVars.$veda-uswds-fontsize-lg; | ||
| } | ||
|
|
||
| #nasa-logo-pos { | ||
| opacity: 1; | ||
| transform: translate(0, -100%); | ||
| /* TODO: Fix the svg to not require any styles! | ||
| * - set opacity to 1 in svg and fix translation | ||
| */ | ||
| } | ||
|
|
||
| // @media (width <= themeVars.$veda-uswds-spacing-desktop) { | ||
| // #nasa-logo-pos { | ||
| // display: none; | ||
| // } | ||
| // } | ||
|
|
||
| svg { | ||
| height: 2.75rem; | ||
| width: auto; | ||
| } | ||
| } | ||
| .footer-text { | ||
| color: white; | ||
| align-self: center; | ||
| display: flex; | ||
| font-size: themeVars.$veda-uswds-fontsize-sm; | ||
| font-weight: themeVars.$veda-uswds-fontweight-regular; | ||
| gap: themeVars.$veda-uswds-spacing-105; | ||
| } | ||
|
|
||
| #return-to-top-container { | ||
| padding: themeVars.$veda-uswds-padding-4 themeVars.$veda-uswds-padding-5; | ||
| } | ||
| #footer_primary_container { | ||
| padding: themeVars.$veda-uswds-padding-4 themeVars.$veda-uswds-padding-5; | ||
| background-color: themeVars.$veda-uswds-color-base-lightest; | ||
| } | ||
|
|
||
| .usa-footer__secondary-section { | ||
| background-color: themeVars.$veda-uswds-color-base-darkest; | ||
| padding: themeVars.$veda-uswds-padding-4 themeVars.$veda-uswds-padding-5; | ||
| & > .grid-container { | ||
| max-width: 100%; | ||
| padding: 0; | ||
| //NEED to determine how to remove 64rem max-width on grid-container | ||
|
||
| } | ||
| } | ||
| .usa-footer__primary-section { | ||
| background-color: themeVars.$veda-uswds-color-base-lightest; | ||
| } | ||
|
|
||
| #mail_icon { | ||
| top: 50%; | ||
| transform: translateY(-50%); | ||
| } | ||
|
|
||
| .usa-footer__address > .grid-row { | ||
| justify-content: flex-end; | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,14 @@ | ||
| import { | ||
| getString, | ||
| getNavItemsFromVedaConfig, | ||
| getFooterItemsFromVedaConfig | ||
| } from 'veda'; | ||
| import { | ||
| InternalNavLink, | ||
| ExternalNavLink, | ||
| ActionNavItem, | ||
| DropdownNavLink, | ||
| NavItemType | ||
| } from '$components/common/page-header/types'; | ||
|
|
||
| import { | ||
|
|
@@ -22,6 +26,7 @@ let defaultMainNavItems: ( | |
| )[] = [ | ||
| { | ||
| id: 'data-catalog', | ||
|
|
||
| title: 'Data Catalog', | ||
| to: DATASETS_PATH, | ||
| type: NavItemType.INTERNAL_LINK | ||
|
|
@@ -64,6 +69,51 @@ let defaultSubNavItems: ( | |
| } | ||
| ]; | ||
|
|
||
| const defaultFooterSettings = { | ||
| secondarySection: { | ||
| title: 'email test', | ||
| to: '/data-catalog', | ||
| type: 'Email' | ||
| }, | ||
| returnToTop: true | ||
| }; | ||
|
|
||
| const defaultFooterPrimaryContactItems = [ | ||
|
Member
There was a problem hiding this comment. do we want the footer items to be different from the header? In my understanding, it was just a repetition of the main nav items - which would mean we should use the same configuration that we base the header on.
Collaborator
Author
There was a problem hiding this comment. As I was working through this, this question came up and I think we should discuss further. My thoughts are that we can and should model the footer materials after the header data model. But the instances are going to request for individualized configurability of the footer so they can customize past the header navigation. What are your thoughts?
Member
There was a problem hiding this comment. This sounds like a good case for YAGNI - let's wait for that request to come in first :)
Collaborator
Author
There was a problem hiding this comment. I would agree but I am concerned that this configurability potentially falls under this AC from the main ticket:
|
||
| { | ||
| title: 'News and Events', | ||
| to: '/data-catalog', | ||
| type: 'internalLink' | ||
| }, | ||
| { | ||
| title: 'About', | ||
| to: '/data-catalog', | ||
| type: 'internalLink' | ||
| }, | ||
| { | ||
| title: 'Contact Us', | ||
| to: '/data-catalog', | ||
| type: 'internalLink' | ||
| } | ||
| ]; | ||
|
|
||
| const defaultFooterPrimaryNavItems = [ | ||
| { | ||
| title: 'Stories', | ||
| to: '/data-catalog', | ||
| type: 'internalLink' | ||
| }, | ||
| { | ||
| title: 'Topics', | ||
| to: '/data-catalog', | ||
| type: 'internalLink' | ||
| }, | ||
| { | ||
| title: 'Data Toolkit', | ||
| to: '/data-catalog', | ||
| type: 'internalLink' | ||
| } | ||
| ]; | ||
|
|
||
| if (process.env.GOOGLE_FORM !== undefined) { | ||
| defaultSubNavItems = [ | ||
| ...defaultSubNavItems, | ||
|
|
@@ -80,5 +130,19 @@ const mainNavItems = | |
| getNavItemsFromVedaConfig()?.mainNavItems ?? defaultMainNavItems; | ||
| const subNavItems = | ||
| getNavItemsFromVedaConfig()?.subNavItems ?? defaultSubNavItems; | ||
| const footerSettings = | ||
| getFooterItemsFromVedaConfig()?.footerSettings ?? defaultFooterSettings; | ||
| const footerPrimaryContactItems = | ||
| getFooterItemsFromVedaConfig()?.footerPrimaryContactItems ?? | ||
| defaultFooterPrimaryContactItems; | ||
| const footerPrimaryNavItems = | ||
| getFooterItemsFromVedaConfig()?.footerPrimaryNavItems ?? | ||
| defaultFooterPrimaryNavItems; | ||
|
|
||
| export { | ||
| mainNavItems, | ||
| subNavItems, | ||
| footerSettings, | ||
| footerPrimaryContactItems, | ||
| footerPrimaryNavItems | ||
| }; | ||
Uh oh!
There was an error while loading. Please reload this page.