krispire/spsays-training
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: offline content layout fix

Browse Source
This commit is contained in:
gosangam
2026-07-02 23:25:40 +05:30
parent b6471f9430
commit 4586f1c22c
1 changed files with 39 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(app)/offline-content/page.tsx
+39 -35
View File
@@ -22,7 +22,6 @@ import {
Wifi, Wifi,
WifiOff, WifiOff,
} from "lucide-react"; } from "lucide-react";
import { PageHeader } from "@/components/layout/page-header";
import { import {
listOffline, listOffline,
offlineSupported, offlineSupported,
@@ -104,36 +103,38 @@ export default function OfflineContentPage() {
return ( return (
<> <>
<PageHeader> <header className="border-b border-border bg-card/85 backdrop-blur px-4 sm:px-6 py-5">
<h1 className="text-2xl font-bold text-foreground">Offline library</h1> <div className="max-w-6xl mx-auto">
<p className="mt-1 text-sm text-muted-foreground"> <h1 className="text-2xl font-bold text-foreground">Offline library</h1>
Pages and lectures you&rsquo;ve saved to read or listen to without a <p className="mt-1 text-sm text-muted-foreground">
connection. Stored on this device. Pages and lectures you&rsquo;ve saved to read or listen to without a
</p> connection. Stored on this device.
<div className="mt-3 flex items-center gap-3 text-xs text-muted-foreground"> </p>
<span <div className="mt-3 flex items-center gap-3 text-xs text-muted-foreground">
className={cn( <span
"inline-flex items-center gap-1.5", className={cn(
online ? "text-muted-foreground" : "text-amber-600", "inline-flex items-center gap-1.5",
)} online ? "text-muted-foreground" : "text-amber-600",
> )}
{online ? ( >
<Wifi className="size-3.5" /> {online ? (
) : ( <Wifi className="size-3.5" />
<WifiOff className="size-3.5" /> ) : (
)} <WifiOff className="size-3.5" />
{online ? "Online" : "Offline"} )}
</span> {online ? "Online" : "Offline"}
{usage !== null && (
<span className="inline-flex items-center gap-1.5">
<HardDriveDownload className="size-3.5" />
{formatBytes(usage)} used
</span> </span>
)} {usage !== null && (
<span className="inline-flex items-center gap-1.5">
<HardDriveDownload className="size-3.5" />
{formatBytes(usage)} used
</span>
)}
</div>
</div> </div>
</PageHeader> </header>
<main className="max-w-5xl mx-auto px-4 sm:px-6 py-8"> <main className="max-w-6xl mx-auto px-4 sm:px-6 py-8">
{!supported ? ( {!supported ? (
<p className="py-16 text-center text-sm text-muted-foreground"> <p className="py-16 text-center text-sm text-muted-foreground">
This browser doesn&rsquo;t support offline saving. This browser doesn&rsquo;t support offline saving.
@@ -152,24 +153,27 @@ export default function OfflineContentPage() {
</p> </p>
</div> </div>
) : ( ) : (
<ul className="space-y-2"> <ul className="space-y-2.5">
{items.map((item) => { {items.map((item) => {
const meta = TYPE_META[item.type] ?? TYPE_META.document; const meta = TYPE_META[item.type] ?? TYPE_META.document;
return ( return (
<li <li
key={item.key} key={item.key}
className="flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-3 transition-colors hover:bg-muted/50" className="flex items-start gap-3 rounded-xl border border-border bg-card px-4 py-3.5 sm:px-5 sm:py-4 transition-colors hover:bg-muted/50"
> >
{/* Hard navigation so the SW can serve the cached document offline. */} {/* Hard navigation so the SW can serve the cached document offline. */}
<a href={item.href} className="flex min-w-0 flex-1 items-center gap-3"> <a
<span className="shrink-0 text-muted-foreground"> href={item.href}
className="flex min-w-0 flex-1 items-start gap-3"
>
<span className="mt-0.5 shrink-0 text-muted-foreground">
{meta.icon} {meta.icon}
</span> </span>
<span className="min-w-0"> <span className="min-w-0">
<span className="block truncate font-medium text-foreground"> <span className="line-clamp-2 text-[15px] sm:text-base font-medium text-foreground">
{item.title} {item.title}
</span> </span>
<span className="mt-0.5 flex items-center gap-2 text-xs text-muted-foreground"> <span className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
<span className="rounded bg-muted px-1.5 py-0.5"> <span className="rounded bg-muted px-1.5 py-0.5">
{meta.label} {meta.label}
</span> </span>
@@ -188,7 +192,7 @@ export default function OfflineContentPage() {
onClick={() => remove(item.key)} onClick={() => remove(item.key)}
aria-label={`Remove ${item.title} from offline`} aria-label={`Remove ${item.title} from offline`}
title="Remove from offline" title="Remove from offline"
className="shrink-0 rounded-md p-2 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive" className="-mr-1 mt-0.5 shrink-0 rounded-md p-2 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
> >
<Trash2 className="size-4" /> <Trash2 className="size-4" />
</button> </button>