1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
From 33ed1cce4b8831fc6412ca482d9867a9dff9ffec Mon Sep 17 00:00:00 2001
From: Aurélien Hamy <me@aunetx.dev>
Date: Thu, 22 May 2025 15:50:44 +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.
---
diff --git a/build/index.html b/build/index.html
index 8016bc8..4efcd23 100644
--- a/build/index.html
+++ b/build/index.html
@@ -4,6 +4,89 @@
<meta charset="utf-8" />
<title>Deezer</title>
<script defer="defer" src="./renderer.js"></script>
+ <style>
+ #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 > .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;
+ }
+ }
+
+ /* 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 8642331..f18f8ca 100644
--- a/build/main.js
+++ b/build/main.js
@@ -3031,8 +3031,8 @@
},
windowOptions = {
title: "Deezer Desktop",
- minWidth: 990,
- minHeight: 600,
+ minWidth: 450,
+ minHeight: 450,
icon: external_electron_namespaceObject.nativeImage.createFromPath(
getAppIcon(external_electron_namespaceObject.app),
),
|