Jerry/cyp
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

respo

Browse source
This commit is contained in:
Ondrej Zara 2019-04-15 09:13:39 +02:00
parent a3d0dc49d4
commit 8331a0d3a3
2 changed files with 29 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
app/app.css
View file

@ -148,6 +148,7 @@ nav ul li.active {
opacity: 0.5; opacity: 0.5;
} }
#player .art { #player .art {
margin-right: 0;
height: 96px; height: 96px;
} }
#player .art img, #player .art img,
@ -160,6 +161,7 @@ nav ul li.active {
} }
#player .info { #player .info {
flex-grow: 1; flex-grow: 1;
padding-left: var(--icon-spacing);
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -173,6 +175,7 @@ nav ul li.active {
} }
#player [type=range] { #player [type=range] {
margin: 0; margin: 0;
min-width: 0;
} }
#player .timeline { #player .timeline {
display: flex; display: flex;
@ -225,6 +228,16 @@ nav ul li.active {
#player .misc .icon { #player .misc .icon {
width: 32px; width: 32px;
} }
@media (max-width: 519px) {
#player {
flex-wrap: wrap;
justify-content: space-between;
}
#player .info {
order: 1;
height: 96px;
}
}
.component { .component {
height: 100%; height: 100%;
display: flex; display: flex;

17
app/css/player.less
View file

@ -7,6 +7,7 @@
&:not([data-flags~=random]) .random, &:not([data-flags~=repeat]) .repeat { opacity: 0.5; } &:not([data-flags~=random]) .random, &:not([data-flags~=repeat]) .repeat { opacity: 0.5; }
.art { .art {
margin-right: 0;
@size: 96px; @size: 96px;
height: @size; height: @size;
img, .icon { img, .icon {
@ -22,6 +23,7 @@
.info { .info {
flex-grow: 1; flex-grow: 1;
padding-left: var(--icon-spacing);
overflow: hidden; overflow: hidden;
.flex-column; .flex-column;
justify-content: space-around; justify-content: space-around;
@ -29,7 +31,10 @@
.title, .subtitle { .long-line; } .title, .subtitle { .long-line; }
[type=range] { margin: 0; } [type=range] {
margin: 0;
min-width: 0; // fails to shrink otherwise
}
.timeline { .timeline {
.flex-row; .flex-row;
@ -81,4 +86,14 @@
justify-content: space-around; justify-content: space-around;
.icon { width: 32px; } .icon { width: 32px; }
} }
@media (max-width: 519px) {
flex-wrap: wrap;
justify-content: space-between;
.info {
order: 1;
height: 96px;
}
}
} }