Lightemerald/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2026-01-11 13:56:16 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

style: update download group layout and styling for improved responsiveness

Browse Source
This commit is contained in:
Chubby Granny Chaser
2025-11-30 05:14:26 +00:00
parent bd28b202c4
commit bf8b3ca836
2 changed files with 14 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/renderer/src/pages/downloads/download-group.scss
View File

@@ -216,6 +216,7 @@
font-size: 14px;
font-weight: 700;
color: #ffffff;
align-self: flex-end;
}
&__progress-size {
@@ -277,7 +278,9 @@
&__stat-content {
display: flex;
gap: 2px;
justify-content: space-between;
gap: calc(globals.$spacing-unit / 2);
width: 100%;
}
&__stat-label {

20
src/renderer/src/pages/downloads/download-group.tsx
View File

@@ -4,9 +4,9 @@ import { Badge, Button } from "@renderer/components";
import { formatDownloadProgress } from "@renderer/helpers";
import { Downloader, formatBytes, formatBytesToMbps } from "@shared";
import { formatDistance, addMilliseconds } from "date-fns";
import { addMilliseconds } from "date-fns";
import { DOWNLOADER_NAME } from "@renderer/constants";
import { useAppSelector, useDownload, useLibrary } from "@renderer/hooks";
import { useAppSelector, useDownload, useLibrary, useDate } from "@renderer/hooks";
import "./download-group.scss";
import { useTranslation } from "react-i18next";
@@ -192,20 +192,15 @@ function HeroDownloadView({
<div className="download-group__hero-progress">
<div className="download-group__progress-row download-group__progress-row--bar">
<div className="download-group__progress-wrapper">
<div className="download-group__progress-info-row">
<span className="download-group__progress-status">
{getStatusText(game)}
</span>
<span className="download-group__progress-percentage">
{formatDownloadProgress(currentProgress)}
</span>
</div>
<div className="download-group__progress-info-row">
<span className="download-group__progress-size">
{isGameDownloading && lastPacket
? `${formatBytes(lastPacket.download.bytesDownloaded)} / ${finalDownloadSize}`
: `0 B / ${finalDownloadSize}`}
</span>
<span></span>
</div>
<div className="download-group__progress-info-row">
<span className="download-group__progress-time">
{isGameDownloading &&
lastPacket?.timeRemaining &&
@@ -213,6 +208,9 @@ function HeroDownloadView({
? calculateETA()
: ""}
</span>
<span className="download-group__progress-percentage">
{formatDownloadProgress(currentProgress)}
</span>
</div>
<div className="download-group__progress-bar">
<div
@@ -350,6 +348,8 @@ export function DownloadGroup({
resumeSeeding,
} = useDownload();
const { formatDistance } = useDate();
const peakSpeedsRef = useRef<Record<string, number>>({});
const speedHistoryRef = useRef<Record<string, number[]>>({});
const [dominantColors, setDominantColors] = useState<Record<string, string>>(