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

styling

Browse source
This commit is contained in:
Ondrej Zara 2020-03-10 15:25:43 +01:00
parent 479cb3fd3c
commit 0b008659c7
No known key found for this signature in database
GPG key ID: B0A5751E616840C5
11 changed files with 58 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/css/cyp.less
View file

@ -39,6 +39,7 @@ button {
.flex-row;
display: inline-flex;
flex-shrink: 0;
background-color: transparent;
padding: 0;

10
app/css/elements/app.less
View file

@ -2,13 +2,15 @@ cyp-app {
.flex-column;
box-sizing: border-box;
margin: 0 auto;
max-width: 800px;
height: 100vh;
font-family: lato, sans-serif;
line-height: 1.25;
background-color: var(--bg);
color: var(--fg);
text-shadow: var(--text-shadow);
max-width: 800px;
margin: 0 auto;
overflow: hidden;
height: 100vh;
white-space: nowrap;
}

4
app/css/elements/menu.less
View file

@ -18,8 +18,8 @@ cyp-menu, cyp-commands {
cyp-menu button {
flex: 1 0 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-top: var(--border-width) solid transparent;
border-bottom: var(--border-width) solid transparent;
.icon {
margin-right: var(--icon-spacing);

2
app/css/elements/player.less
View file

@ -34,7 +34,7 @@ cyp-player {
margin: 0;
}
.title, .subtitle { .no-wrap; }
.title, .subtitle { .ellipsis; }
}
.timeline {

2
app/css/elements/song.less
View file

@ -16,6 +16,6 @@ cyp-song {
margin: 0;
}
// h2, div { .long-line; } FIXME vyresit zalamovani/vypustku
h2, div { .ellipsis; } // FIXME vyresit zalamovani/vypustku
}
}

2
app/css/icons.less
View file

@ -1,6 +1,6 @@
.icon {
width: 24px;
flex-shrink: 0;
// flex-shrink: 0;
path, polygon, circle {
&:not([fill]) {

12
app/css/mixins.less
View file

@ -9,8 +9,7 @@
flex-direction: column;
}
.no-wrap {
white-space: nowrap;
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
}
@ -24,7 +23,7 @@
*/
.selectable {
border-left: 4px solid transparent;
border-left: var(--border-width) solid transparent;
cursor: pointer;
&.selected {
@ -35,9 +34,12 @@
.item {
.flex-row;
.selectable;
padding: 8px 4px;
padding: 8px;
padding-left: calc(8px - var(--border-width));
&:nth-child(odd) { // FIXME nutno poresit lepe s ohledem na search
background-color: var(--bg-alt);
}
}
button .icon { width: 32px; }
}

1
app/css/variables.less
View file

@ -6,6 +6,7 @@ cyp-app {
--primary: rgb(var(--primary-raw));
--spacing: 8px;
--box-shadow: 0 0 3px #000;
--border-width: 4px;
}
.light() {

50
app/cyp.css
View file

@ -41,6 +41,7 @@ button {
flex-direction: row;
align-items: center;
display: inline-flex;
flex-shrink: 0;
background-color: transparent;
padding: 0;
border: none;
@ -75,7 +76,6 @@ select {
}
.icon {
width: 24px;
flex-shrink: 0;
}
.icon path:not([fill]),
.icon polygon:not([fill]),
@ -95,8 +95,7 @@ select {
.flex-column:not([hidden]) {
display: flex;
}
.no-wrap {
white-space: nowrap;
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
}
@ -108,7 +107,7 @@ select {
}
*/
.selectable {
border-left: 4px solid transparent;
border-left: var(--border-width) solid transparent;
cursor: pointer;
}
.selectable.selected {
@ -117,9 +116,10 @@ select {
.item {
flex-direction: row;
align-items: center;
border-left: 4px solid transparent;
border-left: var(--border-width) solid transparent;
cursor: pointer;
padding: 8px 4px;
padding: 8px;
padding-left: calc(8px - var(--border-width));
}
.item:not([hidden]) {
display: flex;
@ -130,6 +130,9 @@ select {
.item:nth-child(odd) {
background-color: var(--bg-alt);
}
.item button .icon {
width: 32px;
}
.component header {
flex-direction: row;
align-items: center;
@ -376,6 +379,7 @@ cyp-app {
--primary: rgb(var(--primary-raw));
--spacing: 8px;
--box-shadow: 0 0 3px #000;
--border-width: 4px;
}
cyp-app[theme=light] {
--fg: #333;
@ -422,15 +426,15 @@ cyp-app[color=limegreen] {
cyp-app {
flex-direction: column;
box-sizing: border-box;
margin: 0 auto;
max-width: 800px;
height: 100vh;
font-family: lato, sans-serif;
line-height: 1.25;
background-color: var(--bg);
color: var(--fg);
text-shadow: var(--text-shadow);
max-width: 800px;
margin: 0 auto;
overflow: hidden;
height: 100vh;
white-space: nowrap;
}
cyp-app:not([hidden]) {
display: flex;
@ -468,8 +472,8 @@ cyp-commands button:not([hidden]) {
}
cyp-menu button {
flex: 1 0 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-top: var(--border-width) solid transparent;
border-bottom: var(--border-width) solid transparent;
}
cyp-menu button .icon {
margin-right: var(--icon-spacing);
@ -501,9 +505,10 @@ cyp-commands button.last {
cyp-song {
flex-direction: row;
align-items: center;
border-left: 4px solid transparent;
border-left: var(--border-width) solid transparent;
cursor: pointer;
padding: 8px 4px;
padding: 8px;
padding-left: calc(8px - var(--border-width));
}
cyp-song:not([hidden]) {
display: flex;
@ -514,6 +519,9 @@ cyp-song.selected {
cyp-song:nth-child(odd) {
background-color: var(--bg-alt);
}
cyp-song button .icon {
width: 32px;
}
cyp-song .info {
flex-grow: 1;
overflow: hidden;
@ -527,6 +535,11 @@ cyp-song .info h2 {
font-size: var(--font-size-large);
margin: 0;
}
cyp-song .info h2,
cyp-song .info div {
overflow: hidden;
text-overflow: ellipsis;
}
cyp-player {
flex-direction: row;
align-items: center;
@ -574,7 +587,6 @@ cyp-player .info h2 {
}
cyp-player .info .title,
cyp-player .info .subtitle {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@ -826,9 +838,10 @@ x-range:not([disabled]) .-thumb:hover {
cyp-playlist {
flex-direction: row;
align-items: center;
border-left: 4px solid transparent;
border-left: var(--border-width) solid transparent;
cursor: pointer;
padding: 8px 4px;
padding: 8px;
padding-left: calc(8px - var(--border-width));
}
cyp-playlist:not([hidden]) {
display: flex;
@ -839,6 +852,9 @@ cyp-playlist.selected {
cyp-playlist:nth-child(odd) {
background-color: var(--bg-alt);
}
cyp-playlist button .icon {
width: 32px;
}
cyp-playlist:nth-child(odd) {
background-color: var(--bg-alt);
}

9
app/js/elements/song.js
View file

@ -16,10 +16,11 @@ export default class Song extends Item {
html.node("h2", {}, lines.shift(), info);
lines.length && html.node("div", {}, lines.shift(), info);
/*
playButton(TYPE_ID, id, node);
*/
}
html.button({icon:"play"}, "", this).addEventListener("click", async e => {
e.stopPropagation(); // do not select
await this._mpd.command(`playid ${this.data["Id"]}`);
});
}
}
customElements.define("cyp-song", Song);

40
app/js/ui.js
View file

@ -90,32 +90,6 @@ function playButton(type, what, parent) {
return button;
}
function deleteButton(type, id, parent) {
let title;
switch (type) {
case TYPE_ID: title = "Delete from queue"; break;
case TYPE_PLAYLIST: title = "Delete playlist"; break;
}
let button = html.button({icon:"close", title}, "", parent);
button.addEventListener("click", async e => {
switch (type) {
case TYPE_ID:
await mpd.command(`deleteid ${id}`);
pubsub.publish("queue-change");
return;
case TYPE_PLAYLIST:
let ok = confirm(`Really delete playlist '${id}'?`);
if (!ok) { return; }
await mpd.command(`rm "${mpd.escape(id)}"`);
pubsub.publish("playlists-change");
return;
}
});
return button;
}
function addButton(type, what, parent) {
let button = html.button({icon:"plus", title:"Add to queue"}, "", parent);
button.addEventListener("click", async e => {
@ -177,17 +151,3 @@ export function group(ctx, label, urlOrFilter, parent) {
return node;
}
export function playlist(name, parent) {
let node = html.node("li", {}, "", parent);
let info = html.node("span", {className:"info"}, "", node);
html.icon("playlist-music", info)
html.node("h2", {}, name, info);
playButton(TYPE_PLAYLIST, name, node);
addButton(TYPE_PLAYLIST, name, node);
deleteButton(TYPE_PLAYLIST, name, node);
return node;
}