diff --git a/src/renderer/less/bootstrap.less b/src/renderer/less/bootstrap.less index 870d5e81..a392294e 100644 --- a/src/renderer/less/bootstrap.less +++ b/src/renderer/less/bootstrap.less @@ -845,6 +845,7 @@ padding : 0.5rem 1rem; background-color: rgba(0, 0, 0, 0.03); border-top : 1px solid rgba(0, 0, 0, 0.125); + text-align : center; } .card-footer:last-child { diff --git a/src/renderer/less/elements.less b/src/renderer/less/elements.less index 6fcd72b2..4411cccc 100644 --- a/src/renderer/less/elements.less +++ b/src/renderer/less/elements.less @@ -291,8 +291,10 @@ /* queue item */ .cd-queue-item { - border-bottom: 1px solid rgb(200 200 200 / 10%); - padding: 8px; + border-bottom: 0px solid rgb(200 200 200 / 10%); + padding: 1px; + padding-bottom: 9px; + padding-top: 9px; .row, .col { @@ -301,8 +303,8 @@ } .artwork { - width: 32px; - height: 32px; + width: 42px; + height: 42px; flex: 0 0 auto; } @@ -320,18 +322,46 @@ } .queue-info { + justify-content: center; display: flex; flex-direction: column; + flex-grow: 1; .queue-title { font-size: 14px; } .queue-subtitle { - font-size: 13px; - opacity: 0.85; + font-size: 0.7em; + opacity: 0.7; } } + + .queue-duration-info { + display: flex; + flex-grow: 0; + } + + .queue-duration { + font-size: 14px; + justify-content: center; + min-width: 60px; + height: 100%; + } + + .queue-explicit-icon { + display: flex; + width: 24px; + padding: 0px; + } + + .explicit-icon { + background-image: url("./assets/explicit.svg"); + height: 12px; + width: 36px; + filter: contrast(0); + background-repeat: no-repeat; + } } /* horizontal media scroller */ diff --git a/src/renderer/less/pages.less b/src/renderer/less/pages.less index 2fb5739e..d8648b8e 100644 --- a/src/renderer/less/pages.less +++ b/src/renderer/less/pages.less @@ -667,8 +667,6 @@ .nameEdit { font-weight : 700; font-size : 1.6rem; - margin-bottom: 6px; - margin-right : 6px; flex-shrink : unset; background : transparent; border : 0px; @@ -676,6 +674,16 @@ font-family : inherit; } + .descriptionEdit { + font-size : 14px; + flex-shrink : unset; + background : transparent; + border : 0px; + color : inherit; + font-family : inherit; + width : 60vw; + } + .playlist-artist { font-size : 20px; margin-bottom: 6px; diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js index 0f97ac99..21bac1eb 100644 --- a/src/renderer/main/vueapp.js +++ b/src/renderer/main/vueapp.js @@ -1350,6 +1350,21 @@ const app = new Vue({ self.refreshPlaylists(false, false) }) }, + async editPlaylistDescription(id, name = app.getLz('term.newPlaylist')) { + let self = this + this.mk.api.v3.music( + `/v1/me/library/playlists/${id}`, {}, { + fetchOptions: { + method: "PATCH", + body: JSON.stringify({ + attributes: { description: name } + }) + } + } + ).then(res => { + self.refreshPlaylists(false, false) + }) + }, copyToClipboard(str) { // if (navigator.userAgent.includes('Darwin') || navigator.appVersion.indexOf("Mac") != -1) { // this.darwinShare(str) diff --git a/src/renderer/views/components/queue.ejs b/src/renderer/views/components/queue.ejs index 597f6b6f..1b7274f9 100644 --- a/src/renderer/views/components/queue.ejs +++ b/src/renderer/views/components/queue.ejs @@ -2,7 +2,8 @@