Reusable components #347
Draft
Reusable components #347
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
This allows development (via `npm run dev`) of pages which rely on an API call to `/whoami`. As of PR 321 [1] the data from this API are more widely accessible. [1] #321
As we expand the number of pages rendered by gatsby it becomes more important to expose a small number of reusable components which pages can use (see [1] for more). Here we implement the concept of "panels" which are displayed in a flexbox layout. Panels may contain custom content (we expose `<Panel>` for this, or they may display a selection of cards `<PanelWithCards`). The exact breakpoints etc need further work, probably at a time when the other components have been implemented. Note that this commit intentionally includes content which should be removed before release, either by subsequent commits or by ammending this commit: * /testing page * wireframes around components [1] #305
Merged
eharkins
added a commit
that referenced
this pull request
Jul 28, 2021
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
jameshadfield
added a commit
that referenced
this pull request
Aug 1, 2021
Minor CSS tweaks from testing across a range of screen sizes and different mobile devices. There is (minor) issue whereby cards without an image (e.g. representing groups), at small screen sizes where the width is a percentage not a pixel value, will be slightly wider than those with an image. This appears on iPhone 6-8 plus. Note that upcoming work, such as PR 347 (#347) will focus on the scalability and reuse of the Cards components.
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.
Begins an implementation of the components introduced in #305
See /testing for a demonstration