Improve font-sizes for Playlist text cover

moode-player · Aug 2, 2024 · 87f27ba · 87f27ba
1 parent c01c30b
commit 87f27ba
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/www/css/panels.css b/www/css/panels.css
@@ -41,6 +41,7 @@ body {
 	--thumbcols: 0px;
 	--thumbimagesize: 0px;
 	--thumbmargin: 0px;
+	--thumbtextcoverfontsize: 1.35rem;
 	--coverback: '';
 	--config_modal_btn_bg: rgba(64,64,64,0.08);
 	--npicon: url('');
@@ -754,7 +755,12 @@ body.cv .timeline-thm input[type='range']::-webkit-slider-thumb {background-imag
 .busy-spinner-btn-rx svg {stroke:var(--adapttext);height:1rem;width:1rem;}
 #tagview-text-cover {position:relative;font-size:1.8rem;line-height:1.1em;height:calc(20vw - 1rem);width:calc(20vw - 1rem);background:rgba(64,64,64,.2);box-shadow: 0px 0px .2em rgba(0,0,0,0.2);word-break:break-word;}
 .plview-text-cover-div {margin:0 .5em;}
-.plview-text-cover {position:relative;font-size:1.35em;line-height:1.1em;top:calc(6vw - 1rem);width:100%;left:var(--thumbmargin);text-align:center;}
+.plview-text-cover {position:relative;
+	font-size:var(--thumbtextcoverfontsize);
+	top:1rem;
+	width:100%;
+	left:var(--thumbmargin);
+	text-align:center;}
 #station-path {text-align:center;}
 #track-info-text {text-align:left;}
 .no-tagview-covers {padding-top:.4em;padding-bottom:.4em;}

diff --git a/www/js/playerlib.js b/www/js/playerlib.js
@@ -4654,9 +4654,23 @@ function getThumbHW() {
 	var divM = Math.round(2 * convertRem(1.5)); // 1.5rem l/r margin for div
 	var columnW = parseInt(($(window).width() - (2 * GLOBAL.sbw) - divM) / cols);
 	UI.thumbHW = columnW - (divM / 2);
-	$("body").get(0).style.setProperty("--thumbimagesize", UI.thumbHW + 'px');
-	$("body").get(0).style.setProperty("--thumbmargin", ((columnW - UI.thumbHW) / 2) + 'px');
-	$("body").get(0).style.setProperty("--thumbcols", columnW + 'px');
+	$('body').get(0).style.setProperty('--thumbimagesize', UI.thumbHW + 'px');
+	$('body').get(0).style.setProperty('--thumbmargin', ((columnW - UI.thumbHW) / 2) + 'px');
+	$('body').get(0).style.setProperty('--thumbcols', columnW + 'px');
+    // Mobile:  2, 3, 4 cols
+    // Desktop: 6, 7, >=8 cols
+    if (cols == 2) {
+        var fontSize = '1.5rem';
+    } else if (cols == 3) {
+        var fontSize = '1.25rem';
+    } else if (cols == 4 || cols >= 8) {
+        var fontSize = '1rem';
+    } else if (cols == 6) {
+        var fontSize = '1.35rem';
+    } else if (cols = 7) {
+        var fontSize = '1.15rem';
+    }
+    $('body').get(0).style.setProperty('--thumbtextcoverfontsize', fontSize);
 }
 
 function convertRem(value) {