danvics/telegram-files
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

💄 feat: Optimize mobile style.

Browse source
This commit is contained in:
jarvis2f 2024-12-25 18:52:56 +08:00
parent d47ed3f5fe
commit 32578bc9c3
3 changed files with 10 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
web/src/components/file-card.tsx
View file

@ -55,8 +55,9 @@ export function FileCard({ file }: FileCardProps) {
<div className="flex-1">
<h3 className="mb-1 font-medium">{file.name}</h3>
<div className="mb-2 text-sm text-muted-foreground">
{prettyBytes(file.size)} • {file.type} • {file.downloadStatus}
<div className="mb-2 flex justify-between items-center text-sm text-muted-foreground">
<span>{prettyBytes(file.size)} • {file.type}</span>
<span>{file.downloadStatus}</span>
</div>
<div className="mb-2 w-full overflow-hidden">
<FileProgress file={file} />

2
web/src/components/file-control.tsx
View file

@ -28,7 +28,7 @@ export default function FileControl({ file }: { file: TelegramFile }) {
{starting ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
<ArrowDown className="h-4 w-4 stroke-1" />
<ArrowDown className="h-4 w-4" />
)}
</Button>
</TooltipTrigger>

8
web/src/components/file-progress.tsx
View file

@ -21,7 +21,11 @@ export default function FileProgress({ file }: { file: TelegramFile }) {
return file.downloadStatus === "completed" ? 100 : 0;
}, [file.downloadStatus, file.downloadedSize, file.size, downloadProgress]);
if (file.downloadStatus === "idle" || file.downloadStatus === "completed" || file.size === 0) {
if (
file.downloadStatus === "idle" ||
file.downloadStatus === "completed" ||
file.size === 0
) {
return null;
}
@ -35,7 +39,7 @@ export default function FileProgress({ file }: { file: TelegramFile }) {
</span>
</div>
)}
<div className="flex min-w-32 items-center gap-1 bg-gray-100 px-1">
<div className="hidden min-w-32 items-center gap-1 bg-gray-100 px-1 md:flex">
<Zap className="h-3 w-3" />
<span className="text-nowrap text-xs">
{file.downloadStatus === "downloading"