From 9a71d22a3cebff2038c47156f7be674cd5151251 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aur=C3=A9lien=20Hamy?= Date: Wed, 21 May 2025 22:26:20 +0200 Subject: [PATCH 1/2] Feature: Improve responsiveness This is an improvement over #107, to make the application entirely responsive (up t a certain point, but which should not be encountered even on mobile). Most changes are either very small or only permit a seamless compatibility with low-width displays; the three only "big" changes happening are: - under 800 pixels wide, the bottom playing bar elements see their relative width change a bit, to allow give enough space for the song name and player control, without having a big blank space on the right - under 950 pixels wide, the queue tracks list has less margin, to allow to fit way more of the song names - under 750 pixels wide, the current song's cover and name is hidden from the left of the queue tracks list: this permits to continue fitting the content, and this information is redundant anyway as it is show on the bottom playing bar already --- Makefile | 2 +- patches/10-improve-responsiveness.patch | 97 +++++++++++++++++++++---- 2 files changed, 84 insertions(+), 15 deletions(-) diff --git a/Makefile b/Makefile index 422a04c..3c92291 100644 --- a/Makefile +++ b/Makefile @@ -47,7 +47,7 @@ prepare: clean install_build_deps @echo "07 - Add environment variable to change log level (https://github.com/aunetx/deezer-linux/pull/95)" @echo "08 - Provide additional metadata (https://github.com/aunetx/deezer-linux/pull/95)" @echo "09 - Add Discord Rich Presence (https://github.com/aunetx/deezer-linux/pull/82)" - @echo "10 - Improve responsiveness on small devices (https://github.com/aunetx/deezer-linux/pull/107)" + @echo "10 - Improve responsiveness on small devices (https://github.com/aunetx/deezer-linux/pull/122)" @$(foreach p, $(wildcard ./patches/*), patch -p 1 -d $(APP_DIR) < $(p);) @echo "Append `package-append.json` to the `package.json` of the app" diff --git a/patches/10-improve-responsiveness.patch b/patches/10-improve-responsiveness.patch index 0dcc8cb..16fc164 100644 --- a/patches/10-improve-responsiveness.patch +++ b/patches/10-improve-responsiveness.patch @@ -1,35 +1,104 @@ -From 46f790ebaf646c5cd0e34c2aa72196e033e0646d Mon Sep 17 00:00:00 2001 -From: josselinonduty -Date: Wed, 14 May 2025 17:15:31 +0900 +From cd751a34fc5116acd6fbcd83246212d002241bf3 Mon Sep 17 00:00:00 2001 +From: Aurélien Hamy +Date: Wed, 21 May 2025 22:06:05 +0200 Subject: [PATCH] feat: improve responsiveness on small devices +Based on patch by josselinonduty +Makes it possible to use the application for with a width as low as 550 pixels +without problems, and is usable even below. Should not change anything for +devices larger than 950 pixels, and nearly nothing above 800 pixels wide. --- - build/index.html | 9 +++++++++ - build/main.js | 4 ++-- - 2 files changed, 11 insertions(+), 2 deletions(-) + build/index.html | 74 ++++++++++++++++++++++++++++++++++++++++++++++++ + build/main.js | 4 +-- + 2 files changed, 76 insertions(+), 2 deletions(-) diff --git a/build/index.html b/build/index.html -index 8016bc8..82f692e 100644 +index 8016bc8..9db7678 100644 --- a/build/index.html +++ b/build/index.html -@@ -4,6 +4,15 @@ +@@ -4,6 +4,80 @@ Deezer +
diff --git a/build/main.js b/build/main.js -index ddfc552..136f0e7 100644 +index 22b50ff..99935cb 100644 --- a/build/main.js +++ b/build/main.js @@ -3169,8 +3169,8 @@ @@ -44,5 +113,5 @@ index ddfc552..136f0e7 100644 getAppIcon(external_electron_namespaceObject.app) ), -- -2.43.0 +2.49.0 From d141e6a4885a185e765a2cff2918d995e8eb82fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aur=C3=A9lien=20Hamy?= Date: Thu, 22 May 2025 15:52:25 +0200 Subject: [PATCH 2/2] Make the 784px transition seamless and remove weird margins under 808px --- patches/10-improve-responsiveness.patch | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/patches/10-improve-responsiveness.patch b/patches/10-improve-responsiveness.patch index 16fc164..9b2866e 100644 --- a/patches/10-improve-responsiveness.patch +++ b/patches/10-improve-responsiveness.patch @@ -1,6 +1,6 @@ -From cd751a34fc5116acd6fbcd83246212d002241bf3 Mon Sep 17 00:00:00 2001 +From 33ed1cce4b8831fc6412ca482d9867a9dff9ffec Mon Sep 17 00:00:00 2001 From: Aurélien Hamy -Date: Wed, 21 May 2025 22:06:05 +0200 +Date: Thu, 22 May 2025 15:50:44 +0200 Subject: [PATCH] feat: improve responsiveness on small devices Based on patch by josselinonduty @@ -8,15 +8,15 @@ Makes it possible to use the application for with a width as low as 550 pixels without problems, and is usable even below. Should not change anything for devices larger than 950 pixels, and nearly nothing above 800 pixels wide. --- - build/index.html | 74 ++++++++++++++++++++++++++++++++++++++++++++++++ + build/index.html | 83 ++++++++++++++++++++++++++++++++++++++++++++++++ build/main.js | 4 +-- - 2 files changed, 76 insertions(+), 2 deletions(-) + 2 files changed, 85 insertions(+), 2 deletions(-) diff --git a/build/index.html b/build/index.html -index 8016bc8..9db7678 100644 +index 8016bc8..4efcd23 100644 --- a/build/index.html +++ b/build/index.html -@@ -4,6 +4,80 @@ +@@ -4,6 +4,89 @@ Deezer @@ -42,7 +42,16 @@ index 8016bc8..9db7678 100644 + + /* this prevents the content from overflowing */ + @media screen and (max-width: 808px) { -+ .container > div:first-child { ++ .container > .carousel-wrapper { ++ width: 100% !important; ++ margin: 0px; ++ padding: 0px; ++ } ++ } ++ ++ /* this makes the width transition seamless for carousels */ ++ @media only screen and (max-width: 784px) { ++ .container { + width: 100% !important; + } + }