splash page redesign; #388; #390
Merged
Conversation
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
temp solution for cards is to allow the Cards component to use flexbox instead of bootstrap for a more compact, two-column layout. This will be refactored when we address the design and flexibility of these components in #305, #347. TODO: - might need to unsquash ncov and narratives cards to be able to read them on mobile - allowing page sections to tile horizontally, e.g. groups alongside sars cov 2 as in james' sketch - more testing
allow 2 entire sections to render side-by-side on wider screen sizes.
When sections are displayed side-by-side, it's nice to keep the respective elements (cards, buttons) aligned. To facilitate this I created a `<Section>` component for easier editing of the styles. This should also make for nicer changes for our future selves. One regression here is the removal of `<ScrollableAnchor>` but these can be added in if we want to keep this functionality.
jameshadfield
requested changes
Jul 29, 2021
There was a problem hiding this comment.
Looks really good @eharkins. Given that the five sections are identical, I think we'd benefit from making these a component, if only to make styling adjustments simpler in the short term. I played with this approach as I wanted to improve the aesthetics so that the cards & buttons were always lined up horizontally when the sections were side-by-side. I've added this up as a commit, but please modify as necessary.
Suggested card label changes (for brevity):
- WNV can become "WNV in the Americas"
- DRC Ebola can become "DRC Ebola Sit Rep"
- ncov/open card, replace "public" with "open"
The only non-trivial to-do is the rendering of cards on mobile - the best case here would be to maintain the nextstrain.org behavior, i.e. keep the 2 cards but stack them on top of each other.
non-group cards on the splash still wont go full width on mobile view, not sure why.
We now know of many more community datasets which we should showcase here, however starting with the datasets which were previously on the frontpage is a good start.
jameshadfield
approved these changes
Aug 2, 2021
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
temp solution for cards is to allow the Cards
component to use flexbox instead of bootstrap
for a more compact, two-column layout. This
will be refactored when we address the design
and flexibility of these components in #305, #347.
TODO:
to be able to read them on mobile
e.g. groups alongside sars cov 2 as in james' sketch