Extensible two-column layout for deck options #1255
Closed
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
kleinerpirat
commented
Jun 27, 2021
Comment on lines
64
to
67
| <script context="module"> | ||
| import { writable } from "svelte/store"; | ||
| export const lineCount = writable(0); | ||
| </script> |
There was a problem hiding this comment.
Checks failing because Prettier wants this all the way on top, but it's a hacky solution anyway - bound to get replaced.
Had forgotten to revert a change I did to show how it would look with fixed row spans. + Small code style tweak
Should satisfy the format check now.
Overlooked that one.
|
Damien's approach is much simpler and also better, as it is guaranteed not to waste any space. Time to close this one. |
dae
added a commit
that referenced
this pull request
Jun 29, 2021
Alternative approach to #1255 thanks to hkr for the margin fix!
dae
added a commit
that referenced
this pull request
Jun 29, 2021
Alternative approach to #1255 thanks to Hikaru and Henrik for the margin fix!
dae
added a commit
that referenced
this pull request
Jun 29, 2021
Alternative approach to #1255 thanks to Hikaru and Henrik for the margin fix, and Matthias for the initial idea and prototypes!
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.
I had another go at making the deck options responsive for wide screens.
(Previous attempts: #1210, #1212)
The task was to make this idea of mine work with the Svelte components. Here is the CodePen I created as a proof-of-concept.
I tried my best to keep the necessary changes at a minimum and make it extensible.
The grid layout takes effect when viewport width is
>= 992px.How the current approach works
TitledContainerat runtime via amount of contained.rowelementsTitledContainersizes with storelineCountWhy the extra effort with individual row spans?
Left: all elements span 1 row -> Big elements like "Advanced" create a lot of white space
Right: individual row spans reduce that white space significantly
Extra
2rem) for h1 font-size with clamp function, because indefinite scaling with viewport width doesn't make much sense for the two-column layout.I am not really happy with the way I implemented the
lineCountstore to get the total row span of all components. I'm sure @hgiesel knows of multiple better ways to allow child components to change a parent component's variable.The addition to
Container.svelteis a bit dirty, but I found it more elegant than to wrap the options in an extra div withinDeckOptionsPage.svelte. Let me know if I should still go for that second option.Tasks
TitledContainersizes (lineCount) across componentsdiv)One issue is that the correct offsetHeight is not immediately available with onMount, probably due to rendering delay.
I don't have much faith in this getting merged because it feels a bit hacky. But I'd invite you to try it out and perhaps create something along these lines yourself (or guide me in the right direction), if you like the look of it.