switched to css grid

This commit is contained in:
iou1name 2019-09-11 13:06:14 -04:00
parent 77e8fd2c8b
commit 646f660227
2 changed files with 4 additions and 16 deletions

View File

@ -4,14 +4,13 @@ body {
} }
img { img {
max-width:100%; max-height: 30vh;
max-height:100%;
} }
#globalContainer { #globalContainer {
display: flex;
flex-direction: column;
height: 100vh; height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
} }
#titleContainer { #titleContainer {
@ -19,11 +18,7 @@ img {
} }
#navigationContainer { #navigationContainer {
flex: auto;
overflow: auto;
display: flex; display: flex;
flex-direction: row;
height: 100%;
border-top: 2px solid #ccc; border-top: 2px solid #ccc;
border-bottom: 2px solid #ccc; border-bottom: 2px solid #ccc;
} }
@ -34,22 +29,15 @@ img {
} }
#playerContainer { #playerContainer {
height: 30vh;
flex: 0 0 auto;
display: flex; display: flex;
flex-direction: row;
justify-content: center; justify-content: center;
} }
#albumCover { #albumCover {
padding-right: 1em; padding-right: 1em;
padding-left: 1em;
padding-bottom: 3px;
box-sizing: border-box;
} }
#playerControls { #playerControls {
text-align: center; text-align: center;
padding-right: 0.5em;
padding-bottom: 0.5em; padding-bottom: 0.5em;
} }

View File

@ -30,7 +30,7 @@
</div> </div>
</div> </div>
<div id="playerContainer"> <div id="playerContainer">
<span id="albumCover"><img src=""/></span> <span id="albumCover"><img src=""></span>
<span id="playerControls"> <span id="playerControls">
<h4><span id="nowPlayingArtist"></span> - <span id="nowPlayingAlbum"></span></h4> <h4><span id="nowPlayingArtist"></span> - <span id="nowPlayingAlbum"></span></h4>
<h3 id="nowPlayingTitle"></h3> <h3 id="nowPlayingTitle"></h3>