Player, Player Card synchronization #756
Conversation
|
Old: New: Note that the new stuff is the marquee and so doesn't fit, but does scroll The intended fix was the font size of the home page player cards on smaller screens, synchronizing the marquee to the player page as well (cutting down on total number of components, removing text wrapping that increases page height) was just a bonus |
SteveMicroNova
force-pushed
the
PlayerFontSizeFix
branch
from
7f60c6b
to
53721b2
Compare
SteveMicroNova
force-pushed
the
PlayerFontSizeFix
branch
from
cc5924f
to
06802cc
Compare
| <Grid | ||
| container | ||
| direction="row" | ||
| justifyContent="center" | ||
| alignItems="center" | ||
| > | ||
| <Grid item xs={4} md={3}> | ||
| { !is_streamer && ( | ||
| <div className="zones"> | ||
| <ZonesBadge sourceId={sourceId} onClick={openZones} /> | ||
| </div> | ||
| )} | ||
| { is_streamer && ( | ||
| <div className="streamer-outputs"> | ||
| <StreamerOutputBadge sourceId={sourceId} /> | ||
| </div> | ||
| )} | ||
| </Grid> | ||
| <Grid item xs={4} md={6}> {/* Spacer */} </Grid> | ||
| <Grid item xs={4} md={3}> | ||
| <SongInfo sourceId={sourceId}/> | ||
| </Grid> | ||
|
|
||
| </Grid> |
There was a problem hiding this comment.
I've added support for the MUI Grid component, which is a fast way of implementing CSS grid formatting support. It has built in breakpoints (xs, sm, md, lg, xl) for different screen sizes, then you identify what relative size you want everything to be, interpreted as a percentage of adding all the same breakpoints up together
I always have my breakpoints add up to 12 as that's the tutorial on the MUI website, though that's arbitrary. In this case, at the xs breakpoint everything is sized at 4/12 (33%) and at md and larger it's sized [3/12, 6/12, 3/12] [25%, 50%, 25%]
The primary reason I went to grid formatting is this:
Old:
New:
Wanting everything to have a properly preset area rather than the metadata taking up double the width of the widest portion (or whatever it was actually doing) due to how the inherent Marquee styling works
There was a problem hiding this comment.
I've since changed these particular breakpoints a little, but the underlying explanation is still good for those who wish to know how the Grid breakpoints work
CHANGELOG.md
Outdated
| @@ -12,6 +12,7 @@ | |||
| * Make update available badge show up on both Settings page and the menu bar | |||
| * Fix stream icons | |||
| * Make it clearer when a stream needs a zone added on the home screen | |||
| * Enforce breakpoint styling to ensure that the UI looks the same between mobile, desktop, tablet viewports | |||
There was a problem hiding this comment.
can you rebase this PR and put this under a Next Release heading?
Chrome, Firefox, and mobile safari yes |
SteveMicroNova
force-pushed
the
PlayerFontSizeFix
branch
from
4ec424e
to
f06073d
Compare
Add documentation Add breakpoint spacing to player card, player page to ensure consistent styling at all screen sizes and metadata lengths Update CHANGELOG Smooth out breakpoints on player page Smooth playercard breakpoints Update Changelog
SteveMicroNova
force-pushed
the
PlayerFontSizeFix
branch
from
f06073d
to
d47fd70
Compare
What does this change intend to accomplish?
Adds marquee to player page, getting rid of font scaling issue Ryan and I found while I was showing off #747 related to using the same .scss file for both SongInfo and SongInfoMarquee
I've added the marquee to the player page, and as such SongInfoMarquee has fully replaced the original SongInfo and taken its name
I've also added MUI Grid support to the player card and player page as a fast method of using CSS grid styling to ensure that metadata always starts and ends in the same spots, rather than being a dynamically sized mess (see images below)
Checklist
./scripts/test