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"> <div className="flex-1">
<h3 className="mb-1 font-medium">{file.name}</h3> <h3 className="mb-1 font-medium">{file.name}</h3>
<div className="mb-2 text-sm text-muted-foreground"> <div className="mb-2 flex justify-between items-center text-sm text-muted-foreground">
{prettyBytes(file.size)} • {file.type} • {file.downloadStatus} <span>{prettyBytes(file.size)} • {file.type}</span>
<span>{file.downloadStatus}</span>
</div> </div>
<div className="mb-2 w-full overflow-hidden"> <div className="mb-2 w-full overflow-hidden">
<FileProgress file={file} /> <FileProgress file={file} />

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

@ -28,7 +28,7 @@ export default function FileControl({ file }: { file: TelegramFile }) {
{starting ? ( {starting ? (
<Loader2 className="h-4 w-4 animate-spin" /> <Loader2 className="h-4 w-4 animate-spin" />
) : ( ) : (
<ArrowDown className="h-4 w-4 stroke-1" /> <ArrowDown className="h-4 w-4" />
)} )}
</Button> </Button>
</TooltipTrigger> </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; return file.downloadStatus === "completed" ? 100 : 0;
}, [file.downloadStatus, file.downloadedSize, file.size, downloadProgress]); }, [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; return null;
} }
@ -35,7 +39,7 @@ export default function FileProgress({ file }: { file: TelegramFile }) {
</span> </span>
</div> </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" /> <Zap className="h-3 w-3" />
<span className="text-nowrap text-xs"> <span className="text-nowrap text-xs">
{file.downloadStatus === "downloading" {file.downloadStatus === "downloading"