Lightemerald/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2026-01-30 14:21:04 +00:00
Code Issues Actions 5 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-size: 14px;
font-weight: 700; font-weight: 700;
color: #ffffff; color: #ffffff;
align-self: flex-end;
} }
&__progress-size { &__progress-size {
@@ -277,7 +278,9 @@
&__stat-content { &__stat-content {
display: flex; display: flex;
gap: 2px; justify-content: space-between;
gap: calc(globals.$spacing-unit / 2);
width: 100%;
} }
&__stat-label { &__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 { formatDownloadProgress } from "@renderer/helpers";
import { Downloader, formatBytes, formatBytesToMbps } from "@shared"; import { Downloader, formatBytes, formatBytesToMbps } from "@shared";
import { formatDistance, addMilliseconds } from "date-fns"; import { addMilliseconds } from "date-fns";
import { DOWNLOADER_NAME } from "@renderer/constants"; 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 "./download-group.scss";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
@@ -192,20 +192,15 @@ function HeroDownloadView({
<div className="download-group__hero-progress"> <div className="download-group__hero-progress">
<div className="download-group__progress-row download-group__progress-row--bar"> <div className="download-group__progress-row download-group__progress-row--bar">
<div className="download-group__progress-wrapper"> <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"> <div className="download-group__progress-info-row">
<span className="download-group__progress-size"> <span className="download-group__progress-size">
{isGameDownloading && lastPacket {isGameDownloading && lastPacket
? `${formatBytes(lastPacket.download.bytesDownloaded)} / ${finalDownloadSize}` ? `${formatBytes(lastPacket.download.bytesDownloaded)} / ${finalDownloadSize}`
: `0 B / ${finalDownloadSize}`} : `0 B / ${finalDownloadSize}`}
</span> </span>
<span></span>
</div>
<div className="download-group__progress-info-row">
<span className="download-group__progress-time"> <span className="download-group__progress-time">
{isGameDownloading && {isGameDownloading &&
lastPacket?.timeRemaining && lastPacket?.timeRemaining &&
@@ -213,6 +208,9 @@ function HeroDownloadView({
? calculateETA() ? calculateETA()
: ""} : ""}
</span> </span>
<span className="download-group__progress-percentage">
{formatDownloadProgress(currentProgress)}
</span>
</div> </div>
<div className="download-group__progress-bar"> <div className="download-group__progress-bar">
<div <div
@@ -350,6 +348,8 @@ export function DownloadGroup({
resumeSeeding, resumeSeeding,
} = useDownload(); } = useDownload();
const { formatDistance } = useDate();
const peakSpeedsRef = useRef<Record<string, number>>({}); const peakSpeedsRef = useRef<Record<string, number>>({});
const speedHistoryRef = useRef<Record<string, number[]>>({}); const speedHistoryRef = useRef<Record<string, number[]>>({});
const [dominantColors, setDominantColors] = useState<Record<string, string>>( const [dominantColors, setDominantColors] = useState<Record<string, string>>(