forked from US-GHG-Center/veda-config-ghg
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #158 from NASA-IMPACT/develop
updating earth.gov home page and SLR theme carousels
- Loading branch information
Showing
18 changed files
with
369 additions
and
119 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,22 @@ | ||
| export default [ | ||
| { | ||
| link: 'https://eyes.nasa.gov/apps/earth/#/', | ||
| title: 'Eyes on Earth', | ||
| description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae lorem et neque egestas mollis. Praesent ut porttitor mauris, a sagittis erat", | ||
| image: new URL('../media/seaside-background.jpg', import.meta.url).href, | ||
| imageAlt: 'Example image alt EIC 2024' | ||
| link: 'https://earth.gov/ghgcenter', | ||
| title: 'U.S. Greenhouse Gas Center', | ||
| description: "The U.S. Greenhouse Gas Center (US GHG Center) is a multi-agency effort consolidating greenhouse gas information from observations and models.", | ||
| image: new URL('../media/ghgc-v2.jpg', import.meta.url).href, | ||
| imageAlt: 'Earth with Greenhouse Gas Emissions shaded in red' | ||
| }, | ||
| { | ||
| link: 'https://earth.gov/mobile-climate-mapper/', | ||
| title: 'Card Title 2', | ||
| description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae lorem et neque egestas mollis. Praesent ut porttitor mauris, a sagittis erat', | ||
| image: new URL('../media/swamp.png', import.meta.url).href, | ||
| imageAlt: 'Example image alt EIC 2024' | ||
| link: 'https://earth.gov/sealevel', | ||
| title: 'Global Sea Level Change Portal', | ||
| description: 'The Global Sea Level Change Portal is an international collaboration that offers essential information on current and projected sea level change to inform coastal communities across the globe.', | ||
| image: new URL('../media/global_slr_v2.jpg', import.meta.url).href, | ||
| imageAlt: 'Satellite image of coastline' | ||
| }, | ||
| { | ||
| link: '/stories/agriculture', | ||
| title: 'Internal link to the Agriculture story', | ||
| description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae lorem et neque egestas mollis. Praesent ut porttitor mauris, a sagittis erat', | ||
| image: new URL('../media/hyperwall-image1.png', import.meta.url).href, | ||
| imageAlt: 'Example image alt EIC 2024' | ||
| }] | ||
| link: 'https://earth.gov/sealevel/us/', | ||
| title: 'U.S. Sea Level Change Portal', | ||
| description: 'The U.S. Sea Level Change Portal is a multi-agency effort pairing data visualizations with accessible explanations and science eduction to help communities prepare for challenges that are impacting communities across the coastlines of the United States.', | ||
| image: new URL('../media/us_slr_v2.jpg', import.meta.url).href, | ||
| imageAlt: 'Coastline with crashing waves' | ||
| }] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| import React from '$veda-ui/react'; | ||
| import styled from '$veda-ui/styled-components'; | ||
| import { Button, Icon } from '$veda-ui/@trussworks/react-uswds'; | ||
|
|
||
| import { | ||
| Card, | ||
| CardBody, | ||
| CardFooter, | ||
| } from '$veda-ui/@trussworks/react-uswds'; | ||
|
|
||
|
|
||
| const progressColor = '#1565EF'; | ||
|
|
||
| const ProgressIndicator = styled.div` | ||
| background-color: ${progressColor}; | ||
| width: ${props => props.progressWidth}%; | ||
| transition: ${props => props.noTransition? null: 'width 200ms ease-out'}; | ||
| `; | ||
|
|
||
| function ProgressBar({ selected, shouldProgress, progressDone, progressPercentage }) { | ||
| // If progress is done, 100% - false if something is manually selected | ||
| // If it is in progress, progress Percentage - false if something is manually selected | ||
| // If it is manually selected, 100% | ||
| const progressWidth = progressDone? 100: shouldProgress? progressPercentage: selected? 100: 0; | ||
| const noTransition = (!shouldProgress && !progressDone && progressPercentage === 0)? true : false; | ||
|
|
||
| return <> | ||
| <div className="height-05 bg-base-lighter"> | ||
| <ProgressIndicator className="height-full" progressWidth={progressWidth} noTransition={noTransition} /> | ||
| </div> | ||
| </> | ||
| } | ||
|
|
||
| export function ItemPanel({ item, linkComponent: LinkComponent }) { | ||
| return (<> | ||
|
|
||
| <div className="tablet:margin-top-0 margin-top-2 flex-align-self-stretch"> | ||
| <p className="margin-top-2 margin-bottom-2 flex-align-self-stretch">{item.description}</p> | ||
| <LinkComponent className="display-flex flex-align-center veda-color--link" to={item.link}> | ||
| <Icon.ArrowForward stroke={progressColor} fill={progressColor} /> | ||
| <span className="padding-left-1">Read more</span> | ||
| </LinkComponent> | ||
| </div> | ||
| </>) | ||
| } | ||
|
|
||
| export default function CarouselItem({ item, itemIdx, onTitleClick, shouldProgress, progressDone, progressPercentage, selected, linkComponent: LinkComponent }) { | ||
| return <Card | ||
| gridLayout={{ tablet: { col: 6 } }} | ||
| containerProps={{className:`hover:bg-base-lightest padding-x-1 radius-0 border-0 animation--transition ${(selected || shouldProgress)? 'opacity-100':'opacity-50'}`}}> | ||
| <ProgressBar shouldProgress={shouldProgress} progressDone={progressDone} progressPercentage={progressPercentage}selected={selected} /> | ||
| <CardBody className="padding-left-0 position-relative"> | ||
| <h3 className="tablet:margin-top-1 carousel--title text-bold veda-color--base"> | ||
| {item.title} | ||
| </h3> | ||
| <p className="margin-top-2 flex-align-self-stretch">{item.description}</p> | ||
| <Button | ||
| unstyled={true} | ||
| className="position-absolute top-0 left-0 width-full height-full blocklink" | ||
| onClick={() => { onTitleClick(item); } } | ||
| type="button" | ||
| role="tab" | ||
| aria-label={`Slide ${itemIdx+1}`} | ||
| aria-selected={selected.toString()} | ||
| aria-controls={`carousel-item-${itemIdx+1}`} | ||
| children={undefined} /> | ||
| </CardBody> | ||
| <CardFooter className="padding-left-0 padding-top-1"> | ||
| <LinkComponent className="display-flex flex-align-center veda-color--link" to={item.link}> | ||
| <Icon.ArrowForward stroke={progressColor} fill={progressColor} /> | ||
| <span className="padding-left-1">Read more</span> | ||
| </LinkComponent> | ||
| </CardFooter> | ||
| </Card> | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| /* The classes for css transition group */ | ||
| .imagetransition { | ||
| &-enter { | ||
| opacity: 0.5; | ||
| } | ||
| &-enter-active { | ||
| opacity: 1; | ||
| transition: opacity 400ms ease-in; | ||
| } | ||
| &-exit { | ||
| opacity: 1; | ||
| } | ||
| /* ending EXIT animation */ | ||
| &-exit-active { | ||
| opacity: 0; | ||
| transition: opacity 400ms ease-out; | ||
| } | ||
| } | ||
|
|
||
| .veda-color--link { | ||
| color: var(--veda-color-link); | ||
| } | ||
| .veda-color--base { | ||
| color: var(--veda-color-base); | ||
| } | ||
|
|
||
| .animation--transition { | ||
| transition: opacity 200ms ease-out; | ||
| } | ||
|
|
||
| .carousel { | ||
| &--height { | ||
| height: 500px; | ||
| } | ||
|
|
||
| &--content-image { | ||
| width: 100%; | ||
| height: 100%; | ||
| object-fit: cover; | ||
| } | ||
| &--title { | ||
| font-size: 1.25rem; | ||
| } | ||
| } |
Oops, something went wrong.