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;
align-items: center;
}
nav ul .icon {
display: block;
margin: 4px auto;
}
nav ul li {
text-align: center;
flex: 1 0 0;
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
padding: 4px 0 8px 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
nav ul li .icon {
margin-right: 4px;
}
nav ul li.active {
border-top-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 {
display: flex;
flex-direction: row;
@ -643,7 +653,7 @@ nav ul li.active {
#yt pre {
flex-grow: 1;
overflow: auto;
white-space: pre-wrap;
white-space: pre;
}
#yt.pending header {
background-image: linear-gradient(var(--primary), var(--primary));

22
app/css/nav.less
View file

@ -4,22 +4,30 @@ nav ul {
list-style: none;
.flex-row;
.icon {
display: block;
margin: 4px auto;
}
li {
text-align: center;
flex: 1 0 0;
.flex-column;
align-items: center;
cursor: pointer;
padding: 4px 0 8px 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
.icon {
margin-right: 4px;
}
&.active {
border-top-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 {
flex-grow: 1;
overflow: auto;
white-space: pre-wrap;
white-space: pre;
}
&.pending header {

16
app/index.html
View file

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