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.
|
||
| 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 | ||
|
Member
There was a problem hiding this comment. why do we need to remove the max-width? This is the desktop breakpoint afaik
Contributor
Author
There was a problem hiding this comment. Correct, the existing footer function when at desktop view expands to the full width of the entire window. With this USWDS max-width in place it only allows for it to stretch to 64rem and leaves pretty large gutters on either side: Example: https://trussworks.github.io/react-uswds/iframe.html?args=&id=components-footer--slim-footer&viewMode=story This might be more of a @faustoperez question. At desktop do we want the large gutter to the left and right of the footer content at desktop or do we want the content to stretch to full width of the screen?
Member
There was a problem hiding this comment. IMO we should follow the header and leave the gutter. If I understand it correctly we wil have a page layout later that will align all the components on a page. |
||
| } | ||
| } | ||
| .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,16 @@ | ||
|
|
||
| import { | ||
| getString, | ||
| getNavItemsFromVedaConfig, | ||
| getFooterItemsFromVedaConfig | ||
| } from 'veda'; | ||
| import { | ||
| InternalNavLink, | ||
| ExternalNavLink, | ||
| ModalNavLink, | ||
| DropdownNavLink, | ||
| NavItemType | ||
|
|
||
| } from '$components/common/page-header/types'; | ||
|
|
||
| import { | ||
|
|
@@ -18,21 +24,25 @@ let defaultMainNavItems: ( | |
| | ExternalNavLink | ||
| | InternalNavLink | ||
| | DropdownNavLink | ||
|
|
||
| | ActionNavItem | ||
| )[] = [ | ||
| { | ||
| id: 'data-catalog', | ||
|
|
||
| title: 'Data Catalog', | ||
| to: DATASETS_PATH, | ||
| type: NavItemType.INTERNAL_LINK | ||
| }, | ||
| { | ||
|
|
||
| id: 'exploration', | ||
| title: 'Exploration', | ||
| to: EXPLORATION_PATH, | ||
| type: NavItemType.INTERNAL_LINK | ||
| }, | ||
| { | ||
|
|
||
| id: 'stories', | ||
| title: getString('stories').other, | ||
| to: STORIES_PATH, | ||
|
|
@@ -54,6 +64,7 @@ let defaultSubNavItems: ( | |
| | ExternalNavLink | ||
| | InternalNavLink | ||
| | DropdownNavLink | ||
|
|
||
| | ActionNavItem | ||
| )[] = [ | ||
| { | ||
|
|
@@ -64,6 +75,53 @@ 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.
Contributor
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 :)
Contributor
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 +138,20 @@ 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.