mirror of
https://github.com/aunetx/deezer-linux.git
synced 2025-08-15 06:38:13 +02:00
127 lines
3.7 KiB
Diff
127 lines
3.7 KiB
Diff
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.
|
|
---
|
|
build/index.html | 83 ++++++++++++++++++++++++++++++++++++++++++++++++
|
|
build/main.js | 4 +--
|
|
2 files changed, 85 insertions(+), 2 deletions(-)
|
|
|
|
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 22b50ff..99935cb 100644
|
|
--- a/build/main.js
|
|
+++ b/build/main.js
|
|
@@ -3169,8 +3169,8 @@
|
|
},
|
|
windowOptions = {
|
|
title: "Deezer Desktop",
|
|
- minWidth: 990,
|
|
- minHeight: 600,
|
|
+ minWidth: 450,
|
|
+ minHeight: 450,
|
|
icon: external_electron_namespaceObject.nativeImage.createFromPath(
|
|
getAppIcon(external_electron_namespaceObject.app)
|
|
),
|
|
--
|
|
2.49.0
|
|
|