From f4539cac2025eb7593d3e8d96c806c329e3a082e Mon Sep 17 00:00:00 2001 From: chme Date: Fri, 1 May 2020 09:29:30 +0200 Subject: [PATCH 1/7] [web-src] Fix wrong sizing of cover artwork on iOS --- web-src/src/mystyles.css | 32 ++++++++++++++++++++++++---- web-src/src/pages/PageNowPlaying.vue | 18 +++++++++------- 2 files changed, 38 insertions(+), 12 deletions(-) diff --git a/web-src/src/mystyles.css b/web-src/src/mystyles.css index a29fa469..1431edce 100644 --- a/web-src/src/mystyles.css +++ b/web-src/src/mystyles.css @@ -122,18 +122,42 @@ section.fd-tabs-section + section.fd-content { overflow: hidden; flex-grow: 1; flex-shrink: 1; + + /* Use flex box to properly size children */ + display: flex; } .fd-cover-image { - height: 100%; + display: flex; + flex-grow: 1; + flex-shrink: 1; + + /* Allow flex item to shrink smaller than its content size: https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size */ + min-width: 0; + min-height: 0; + overflow: hidden; } .fd-cover-image img { - width: 100%; - height: 100%; + /* Use object-fit to properly size the cover artwork: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit */ object-fit: contain; - object-position: bottom; + object-position: center bottom; filter: drop-shadow(0px 0px 1px rgba(0,0,0,.3)) drop-shadow(0px 0px 10px rgba(0,0,0,.3)); + + /* Allow flex item to grow/shrink to fill the whole container size */ + flex-grow: 1; + flex-shrink: 1; + + /* Unset height/width to allow flex sizing */ + height: unset; + width: unset; + max-width: unset; + max-height: unset; + + /* Allow flex item to shrink smaller than its content size: https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size */ + min-width: 0; + min-height: 0; + overflow: hidden; } diff --git a/web-src/src/pages/PageNowPlaying.vue b/web-src/src/pages/PageNowPlaying.vue index 5c1bb757..4f3f921c 100644 --- a/web-src/src/pages/PageNowPlaying.vue +++ b/web-src/src/pages/PageNowPlaying.vue @@ -43,14 +43,16 @@ -
-
-

- You play queue is empty -

-

- Add some tracks by browsing your library -

+
+
+
+

+ Your play queue is empty +

+

+ Add some tracks by browsing your library +

+
From c8a5826e0b1d6d1dede9649e41e81f7bcdf55277 Mon Sep 17 00:00:00 2001 From: chme Date: Fri, 1 May 2020 09:46:43 +0200 Subject: [PATCH 2/7] [web-src] Only show Spotify as artwork source if user is logged in --- web-src/src/pages/SettingsPageArtwork.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web-src/src/pages/SettingsPageArtwork.vue b/web-src/src/pages/SettingsPageArtwork.vue index 5be4c25c..116a43af 100644 --- a/web-src/src/pages/SettingsPageArtwork.vue +++ b/web-src/src/pages/SettingsPageArtwork.vue @@ -15,7 +15,7 @@

In addition to that, you can enable fetching artwork from the following artwork providers:

- + From 4188a54e372616d56596b79b0f9e7ec0e95f150e Mon Sep 17 00:00:00 2001 From: chme Date: Sat, 2 May 2020 08:13:33 +0200 Subject: [PATCH 3/7] [web-src] Fix missing scrollbars in navbar menus --- web-src/src/components/NavbarBottom.vue | 5 ++--- web-src/src/components/NavbarTop.vue | 2 +- web-src/src/mystyles.css | 14 ++++++++++++++ 3 files changed, 17 insertions(+), 4 deletions(-) diff --git a/web-src/src/components/NavbarBottom.vue b/web-src/src/components/NavbarBottom.vue index 2df44559..c0fa82a3 100644 --- a/web-src/src/components/NavbarBottom.vue +++ b/web-src/src/components/NavbarBottom.vue @@ -1,5 +1,5 @@