Feat: configurable coverimagesize

htdocs/css/mympd.css

@@ -1,17 +1,20 @@
+:root {
+    --mympd-coverimagesize: 240px;
+}
+
 html {
   position: relative;
   min-height: 100%;
 }
 
 body {
-  margin-bottom: 60px;
   padding-top: 50px;
   padding-bottom: 50px;
   background-color: #888;
 }
 
 main {
-  padding-top: 20px;
+  padding-top: 10px;
 }
 
 footer {
@@ -23,6 +26,10 @@ button {
   overflow: hidden;
 }
 
+.cardBodyPlayback {
+  padding-bottom:0px;
+}
+
 #BrowseBreadrumb {
   overflow: auto;
   white-space: nowrap;
@@ -65,17 +72,19 @@ small {
   border: 1px solid black;
   border-radius: 5px;
   overflow: hidden;
-  width: 240px;
-  height: 240px;
+  width: var(--mympd-coverimagesize);
+  max-width:100%;
+  height: var(--mympd-coverimagesize);
   background-color: #eee;
   float: left;
-  margin-right: 20px;
-  margin-bottom: 20px;
+  margin-right: 1.25rem;
+  margin-bottom: 1.25rem;
 }
 
 .album-desc {
   min-width: 240px;
   float: left;
+  padding-bottom:1.25rem;
 }
 
 .hide {
@@ -196,8 +205,8 @@ small {
 a.card-img-left {
   overflow: hidden;
   display: block;
-  width: 250px;
-  height: 250px;
+  width: var(--mympd-coverimagesize);
+  height: var(--mympd-coverimagesize);
   border-radius: 5px;
   background-size: cover;
   background-image: url(/assets/coverimage-loading.png);  
@@ -327,5 +336,6 @@ ol#searchCrumb {
 }
 
 .nodropdown::after {
-   content: none;
-}
+  content: none;
+}
+

htdocs/index.html

@@ -92,7 +92,7 @@
           <button title="Like song" id="btnVoteUp" data-href='{"cmd": "voteSong", "options": [2]}' class="btn btn-sm btn-light material-icons">thumb_up</button>
         </div>
       </div>
-      <div class="card-body">
+      <div class="card-body cardBodyPlayback">
         <div class="album-cover featCoverimage" id="currentCover"></div>
         <div class="album-desc">
           <h2 id="currentTitle" data-href='{"cmd": "clickTitle", "options": []}'></h2>

htdocs/js/mympd.js

@@ -1200,6 +1200,8 @@ function parseSettings(obj) {
     toggleBtn('btnnotifyPage', settings.notificationPage);
 
     var features = ["featStickers", "featSmartpls", "featPlaylists", "featTags", "featLocalplayer", "featSyscmds", "featCoverimage", "featAdvsearch"];
+
+    document.documentElement.style.setProperty('--mympd-coverimagesize', settings.coverimagesize + "px");
     
     for (var j = 0; j < features.length; j++) {
         var Els = document.getElementsByClassName(features[j]);