PandoraControls Width #698
Conversation
|
Chrome and Firefox are good, as well as my phone (mobile safari) and all of the default emulatable screen sizes for mobile devices in Chrome |
SteveMicroNova
force-pushed
the
PandoraControlWidth
branch
from
46642bb
to
a3b7896
Compare
| {/* There are many sub-divs classed player-inner here because formatting was strange otherwise */} | ||
| <div className="player-inner"> | ||
| <img src={img_url} className="player-album-art" /> | ||
| </div> | ||
| <div className="player-inner"> | ||
| <SongInfo | ||
| sourceId={selectedSourceId} | ||
| artistClassName="player-info-title" | ||
| albumClassName="player-info-album" | ||
| trackClassName="player-info-track" | ||
| /> | ||
| </div> | ||
| <div className="player-inner"> |
There was a problem hiding this comment.
I added more divs so that I could divorce metadata length, album art, and controls from eachother because otherwise the widest one screwed at least one of the others up (generally the controls screwing the metadata up and pushing it leftwards for whatever reason)
There was a problem hiding this comment.
Un-divided album art from metadata, kept separation between controls and the others
There was a problem hiding this comment.
Re-divided those because album art doesn't scale down on sufficiently tiny screens, but still kept text in line with its leftmost side
|
Needs more testing with long metadata due to the div change before I'm willing to merge this |
SteveMicroNova
force-pushed
the
PandoraControlWidth
branch
from
f24c7ab
to
dabdd14
Compare
SteveMicroNova
force-pushed
the
PandoraControlWidth
branch
2 times, most recently
from
3f14ae9
to
126622f
Compare
web/src/pages/Player/Player.jsx
Outdated
| <SongInfo | ||
| sourceId={selectedSourceId} | ||
| artistClassName="player-info-title" | ||
| albumClassName="player-info-album" | ||
| trackClassName="player-info-track" | ||
| /> | ||
| </div> | ||
| <div className="player-inner"> |
There was a problem hiding this comment.
you open a div here but don't close it?
There was a problem hiding this comment.
<div className="player-inner">
<img src={img_url} className="player-album-art" />
</div>
<div className="player-inner">
<SongInfo
sourceId={selectedSourceId}
artistClassName="player-info-title"
albumClassName="player-info-album"
trackClassName="player-info-track"
/>
</div>
<div className="player-inner">
<MediaControl selectedSource={selectedSourceId} />
</div>
I close a preexisting div and open a new one, inheriting the original ones closing tag
There was a problem hiding this comment.
can you fix the indentation then?
SteveMicroNova
force-pushed
the
PandoraControlWidth
branch
from
9f7c7c1
to
6d7240d
Compare
| } | ||
| } |
There was a problem hiding this comment.
is this correct? if it isn't the indentation needs to be corrected
There was a problem hiding this comment.
Only problem was a tabindex, fixed in recent commit
Divide MediaControl into its own div so the automatic fit-content width of the shared div stops forcing metadata off the page Update CHANGELOG Add more divs Add responsive CSS Readjust scaling of player page elements Improve scalability Update CHANGELOG Fix for horizontal scroll bar Fix tab indent on div open and close Fix tabindex in MediaControl.scss
SteveMicroNova
force-pushed
the
PandoraControlWidth
branch
from
d56d8a7
to
29eb816
Compare
What does this change intend to accomplish?
I pushed an update without testing for UX design on multiple platforms, causing the new Pandora Controls to flow off the screen on mobile
This fixes that by making the buttons smaller