Test: Datawrapper embed styling #12306
Draft
+328
−144
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
|
Size Change: +133 B (+0.01%) Total Size: 917 kB
ℹ️ View Unchanged
|
emdash-ie
force-pushed
the
datawrapper-embed-styling
branch
from
95656b9
to
0053000
Compare
This is an example of the kind of role-independent styling I would like to do on datawrapper graphics, by matching on the URL of the interactive element.
This is an example of the kind of role-dependent styling I would like to make for datawrapper graphics.
Relative links work well locally in text editors and on github, whereas an absolute link like this can be mildly frustrating when following from a text editor.
This 32px margin collapses with the existing 16px paragraph spacing. What about breakpoints? (Should I be using spacing constants? Probably)
emdash-ie
force-pushed
the
datawrapper-embed-styling
branch
from
0e55a5b
to
8256c53
Compare
|
I took some screenshots of a Datawrapper graphic in CODE with these changes, across the different roles and mobile vs. desktop views: Inline roleDesktop
Mobile
Supporting roleDesktop
Mobile
Showcase roleDesktop
Mobile
Thumbnail roleDesktop
Mobile
Immersive roleDesktop
Mobile
|
This palette colour both matches the hex colour I had manually used, and seems like the most appropriate “border” colour listed in the file. Hopefully it’s a good choice: I must remember to ask in the PR. Also, looking at this has reminded me that I should check how my styling looks in dark mode!
For roles which move the graphics across the border on the side, we’d like to add a bottom border to avoid the odd reappearance of the side border after the graphic.
|
I have added a bottom border in supporting, showcase, and immersive: Supporting roleMobile
Desktop
Showcase roleDesktop
Mobile
Immersive roleDesktop
Mobile
|
These margins were too small: the request from the visuals team is that they be 32px.
emdash-ie
force-pushed
the
datawrapper-embed-styling
branch
from
d683f8f
to
81b0a98
Compare
I’ve added a story with a Datawrapper embed for each role, to have an easy way to look at the styling. I’ve also tweaked the Wrapper used in the InteractiveBlockComponent stories to match that used in the Figure stories. Since the layouts are similar, I think this should be fine?
emdash-ie
force-pushed
the
datawrapper-embed-styling
branch
from
81b0a98
to
cd2f632
Compare
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.
What does this change?
Why?
Screenshots