New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Keep date visible on scrollytelling maps #424
Conversation
✅ Deploy Preview for veda-ui ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
016926b
to
696716e
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Functionality-wise, looks good to me 👍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM!
@@ -37,6 +36,8 @@ import { MapLoading } from '$components/common/loading-skeleton'; | |||
import { HintedError } from '$utils/hinted-error'; | |||
import { formatSingleDate } from '$components/common/mapbox/utils'; | |||
import { convertProjectionToMapbox } from '$components/common/mapbox/projection-selector/utils'; | |||
import { useSlidingStickyHeaderProps } from '$components/common/layout-root'; | |||
import { HERO_TRANSITION_DURATION } from '$components/analysis/page-hero-analysis'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe this const should not live under /analytics/
anymore.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fair point
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@nerik Addressed :)
top: 4rem; | ||
${({ topOffset }) => css` | ||
top: ${topOffset}px; | ||
height: calc(100vh - ${topOffset}px); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is that the equivalent of the following?:
top: ${({ topOffset }) => topOffset}px;
height: calc(100vh - ${({ topOffset }) => topOffset}px);
Not saying it's any better, but the styled components doc makes it confusing to me
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yup. Absolutely the same, but I prefer the other approach.
I like that within a styled-component the functions return css. In this way I could extract all that into a separate function if needed. For me this approach also makes it more readable.
Ensures that the date remains visible by changing the scrollytelling block offset when the header is visible #376