mirror of
https://github.com/aunetx/deezer-linux.git
synced 2025-07-23 21:55:04 +02:00
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
This commit is contained in:
Aurélien Hamy
parent
f8c1544f66
commit
9a71d22a3c
2
Makefile
2
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"
|
||||
|
||||
@ -1,35 +1,104 @@
|
||||
From 46f790ebaf646c5cd0e34c2aa72196e033e0646d Mon Sep 17 00:00:00 2001
|
||||
From: josselinonduty <contact@josselinonduty.fr>
|
||||
Date: Wed, 14 May 2025 17:15:31 +0900
|
||||
From cd751a34fc5116acd6fbcd83246212d002241bf3 Mon Sep 17 00:00:00 2001
|
||||
From: Aurélien Hamy <me@aunetx.dev>
|
||||
Date: Wed, 21 May 2025 22:06:05 +0200
|
||||
Subject: [PATCH] feat: improve responsiveness on small devices
|
||||
|
||||
Based on patch by josselinonduty <contact@josselinonduty.fr>
|
||||
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 @@
|
||||
<meta charset="utf-8" />
|
||||
<title>Deezer</title>
|
||||
<script defer="defer" src="./renderer.js"></script>
|
||||
+ <style>
|
||||
+ body {
|
||||
+ overflow-x: auto !important;
|
||||
+ }
|
||||
+
|
||||
+ #page_topbar {
|
||||
+ min-width: 0px !important;
|
||||
+ }
|
||||
+
|
||||
+ .naboo {
|
||||
+ min-width: auto !important;
|
||||
+ }
|
||||
+
|
||||
+ .page-main {
|
||||
+ min-width: auto !important;
|
||||
+ }
|
||||
+
|
||||
+ /* this removes an unuseful margin that breaks on low width */
|
||||
+ @media screen and (max-width: 850px) {
|
||||
+ .carousel {
|
||||
+ margin-right: -24px !important;
|
||||
+ }
|
||||
+ }
|
||||
+
|
||||
+ /* this prevents the content from overflowing */
|
||||
+ @media screen and (max-width: 808px) {
|
||||
+ .container > div:first-child {
|
||||
+ width: 100% !important;
|
||||
+ }
|
||||
+ }
|
||||
+
|
||||
+ /* this makes the track list responsive */
|
||||
+ @media screen and (max-width: 950px) {
|
||||
+ .page-player .player-full {
|
||||
+ min-width: auto !important;
|
||||
+ }
|
||||
+
|
||||
+ .page-player .player-queuelist .player-container {
|
||||
+ margin: 32px 2% 0 !important;
|
||||
+ }
|
||||
+
|
||||
+ .page-player .queuelist-cover {
|
||||
+ width: 180px !important;
|
||||
+ margin-right: 2% !important;
|
||||
+ }
|
||||
+ }
|
||||
+
|
||||
+ /* this hides the unuseful cover in track list for small screens */
|
||||
+ @media screen and (max-width: 750px) {
|
||||
+ .page-player .queuelist-cover {
|
||||
+ display: none !important;
|
||||
+ }
|
||||
+ }
|
||||
+
|
||||
+ /* this makes the bottom player bar responsive */
|
||||
+ @media screen and (max-width: 800px) {
|
||||
+ #page_player > div:first-child {
|
||||
+ min-width: auto !important;
|
||||
+ }
|
||||
+
|
||||
+ /* icon and name */
|
||||
+ #page_player > div:first-child > div:first-child {
|
||||
+ width: calc(49% - 52px) !important;
|
||||
+ }
|
||||
+
|
||||
+ /* player controls */
|
||||
+ #page_player > div:first-child > div:nth-child(2) {
|
||||
+ padding-inline-start: unset !important;
|
||||
+ padding-inline-end: unset !important;
|
||||
+ width: calc(49% - 52px) !important;
|
||||
+ }
|
||||
+
|
||||
+ /* queue, volume and audio quality */
|
||||
+ #page_player > div:first-child > div:last-child {
|
||||
+ width: auto !important;
|
||||
+ }
|
||||
+ }
|
||||
+ </style>
|
||||
</head>
|
||||
<body class="electron">
|
||||
<div id="dzr-app"></div>
|
||||
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
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user