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 08:47:40 +02:00
parent 51c3bd1ea9
commit a3d0dc49d4
4 changed files with 42 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
app/app.css
View file

@ -106,21 +106,31 @@ nav ul {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
} }
nav ul .icon {
display: block;
margin: 4px auto;
}
nav ul li { nav ul li {
text-align: center;
flex: 1 0 0; flex: 1 0 0;
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer; cursor: pointer;
padding: 4px 0 8px 0;
border-top: 4px solid transparent; border-top: 4px solid transparent;
border-bottom: 4px solid transparent; }
nav ul li .icon {
margin-right: 4px;
} }
nav ul li.active { nav ul li.active {
border-top-color: var(--primary); border-top-color: var(--primary);
color: var(--primary); color: var(--primary);
} }
@media (max-width: 480px) {
nav ul li {
flex-direction: row;
justify-content: center;
}
nav ul li span:not([id]) {
display: none;
}
}
#player { #player {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -643,7 +653,7 @@ nav ul li.active {
#yt pre { #yt pre {
flex-grow: 1; flex-grow: 1;
overflow: auto; overflow: auto;
white-space: pre-wrap; white-space: pre;
} }
#yt.pending header { #yt.pending header {
background-image: linear-gradient(var(--primary), var(--primary)); background-image: linear-gradient(var(--primary), var(--primary));

22
app/css/nav.less
View file

@ -4,22 +4,30 @@ nav ul {
list-style: none; list-style: none;
.flex-row; .flex-row;
.icon {
display: block;
margin: 4px auto;
}
li { li {
text-align: center;
flex: 1 0 0; flex: 1 0 0;
.flex-column;
align-items: center;
cursor: pointer; cursor: pointer;
padding: 4px 0 8px 0;
border-top: 4px solid transparent; border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
.icon {
margin-right: 4px;
}
&.active { &.active {
border-top-color: var(--primary); border-top-color: var(--primary);
color: var(--primary); color: var(--primary);
} }
@media (max-width: 480px) {
flex-direction: row;
justify-content: center;
span:not([id]) { display: none; }
}
} }
} }

2
app/css/yt.less
View file

@ -16,7 +16,7 @@
pre { pre {
flex-grow: 1; flex-grow: 1;
overflow: auto; overflow: auto;
white-space: pre-wrap; white-space: pre;
} }
&.pending header { &.pending header {

14
app/index.html
View file

@ -95,14 +95,16 @@
<nav> <nav>
<ul> <ul>
<li data-for="queue" data-icon="music"> <li data-for="queue" data-icon="music">
Queue <div>
<span>Queue</span>
<span id="queue-length"></span> <span id="queue-length"></span>
</div>
</li> </li>
<li data-for="playlists" data-icon="playlist-music">Playlists</li> <li data-for="playlists" data-icon="playlist-music"><span>Playlists</span></li>
<li data-for="library" data-icon="library-music">Library</li> <li data-for="library" data-icon="library-music"><span>Library</span></li>
<li data-for="fs" data-icon="folder">Files</li> <li data-for="fs" data-icon="folder"><span>Files</span></li>
<li data-for="yt" data-icon="download">YouTube</li> <li data-for="yt" data-icon="download"><span>YouTube</span></li>
<li data-for="settings" data-icon="settings">Settings</li> <li data-for="settings" data-icon="settings"><span>Settings</span></li>
</ul> </ul>
</nav> </nav>
</footer> </footer>