UI tweaks
This commit is contained in:
+22
-37
@@ -12,12 +12,12 @@ export default function Documents() {
|
||||
const [cachedFiles, setCachedFiles] = useState<Set<string>>(new Set());
|
||||
|
||||
const docs = [
|
||||
{ title: 'Turistkarta', icon: <Map size={24} />, file: '/files/Turistkarta - Kullaberg.pdf', size: '2.51 MB' },
|
||||
{ title: 'Orienteringskarta', icon: <MapPlus size={24} />, file: '/files/Orienteringskarta - Kullaberg.pdf', size: '3.74 MB' },
|
||||
{ title: 'Badplatser att besöka', icon: <WavesLadder size={24} />, file: '/files/Badplatser på Kullaberg.pdf', size: '1.88 MB' },
|
||||
{ title: 'Vandringsrutter', icon: <MapPinned size={24} />, file: '/files/Vandringsrutter.pdf', size: '4.42 MB' },
|
||||
{ title: 'Underlag för guidediplomering', icon: <BookCopy size={24} />, file: '/files/Underlag för guidediplomering.pdf', size: '3.18 MB' },
|
||||
{ title: 'Destinationskunskap Kullahalvön', icon: <BookCopy size={24} />, file: '/files/Destinationskunskap.pdf', size: '1.97 MB' }
|
||||
{ title: 'Turistkarta', icon: <Map size={20} />, file: '/files/Turistkarta - Kullaberg.pdf', size: '2.51 MB' },
|
||||
{ title: 'Orienteringskarta', icon: <MapPlus size={20} />, file: '/files/Orienteringskarta - Kullaberg.pdf', size: '3.74 MB' },
|
||||
{ title: 'Badplatser att besöka', icon: <WavesLadder size={20} />, file: '/files/Badplatser på Kullaberg.pdf', size: '1.88 MB' },
|
||||
{ title: 'Vandringsrutter', icon: <MapPinned size={20} />, file: '/files/Vandringsrutter.pdf', size: '4.42 MB' },
|
||||
{ title: 'Underlag för guidediplomering', icon: <BookCopy size={20} />, file: '/files/Underlag för guidediplomering.pdf', size: '3.18 MB' },
|
||||
{ title: 'Destinationskunskap Kullahalvön', icon: <BookCopy size={20} />, file: '/files/Destinationskunskap.pdf', size: '1.97 MB' }
|
||||
];
|
||||
|
||||
const links = [
|
||||
@@ -67,23 +67,13 @@ export default function Documents() {
|
||||
const handleSyncAll = async () => {
|
||||
setSyncStatus('syncing');
|
||||
for (const doc of docs) {
|
||||
try {
|
||||
await fetch(doc.file);
|
||||
} catch (error) {
|
||||
console.error("Kunde inte ladda ner:", doc.file);
|
||||
}
|
||||
try { await fetch(doc.file); } catch (error) { console.error("Kunde inte ladda ner:", doc.file); }
|
||||
}
|
||||
await checkCacheStatus();
|
||||
setSyncStatus('done');
|
||||
};
|
||||
|
||||
if (!isHydrated) {
|
||||
return (
|
||||
<div className="flex justify-center py-20">
|
||||
<Loader2 className="animate-spin text-slate-teal" size={40} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (!isHydrated) return <div className="flex justify-center py-20"><Loader2 className="animate-spin text-slate-teal" size={40} /></div>;
|
||||
|
||||
return (
|
||||
<div className="space-y-8 animate-fade-in w-full">
|
||||
@@ -98,7 +88,7 @@ export default function Documents() {
|
||||
|
||||
<div className="flex flex-col gap-2 items-start md:items-end">
|
||||
{isOffline && (
|
||||
<div className="bg-goldenrod/10 text-goldenrod border border-goldenrod/20 px-3 py-1.5 rounded-full flex items-center text-xs font-black uppercase tracking-tighter">
|
||||
<div className="bg-goldenrod/10 text-goldenrod border border-goldenrod/20 px-3 py-1.5 rounded-full flex items-center text-xs font-black uppercase tracking-widest">
|
||||
<WifiOff size={14} className="mr-2" /> Offline-läge
|
||||
</div>
|
||||
)}
|
||||
@@ -124,40 +114,35 @@ export default function Documents() {
|
||||
|
||||
<section>
|
||||
<h2 className="text-sm font-black text-ebony/50 uppercase tracking-widest mb-4">Nedladdningar</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
{docs.map((doc, idx) => {
|
||||
const isCached = cachedFiles.has(doc.file);
|
||||
|
||||
return (
|
||||
<a key={idx} href={doc.file} target="_blank" rel="noopener noreferrer"
|
||||
className={`group flex items-center justify-between p-5 rounded-2xl border transition-all duration-300 ${isOffline && !isCached ? 'opacity-50 grayscale cursor-not-allowed pointer-events-none bg-white/20 border-transparent' : 'bg-white/60 border-white hover:-translate-y-1 hover:shadow-xl hover:shadow-moss/10 backdrop-blur-sm'}`}
|
||||
className={`group flex items-center justify-between p-4 rounded-2xl border transition-colors ${isOffline && !isCached ? 'opacity-50 grayscale cursor-not-allowed pointer-events-none border-transparent bg-eggshell/50' : 'bg-white/50 hover:bg-white border-slate-teal/10'}`}
|
||||
>
|
||||
<div className="flex items-center text-slate-teal">
|
||||
{/* FIX: Keep the original icon, but change the background to green when cached */}
|
||||
<div className={`p-3 rounded-xl mr-4 text-eggshell shadow-inner shrink-0 transition-colors ${isCached ? 'bg-moss' : 'bg-linear-to-br from-seafoam to-slate-teal'}`}>
|
||||
<div className={`p-2.5 rounded-xl mr-3 text-eggshell shrink-0 transition-colors ${isCached ? 'bg-moss' : 'bg-slate-teal'}`}>
|
||||
{doc.icon}
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-bold text-sm leading-tight">{doc.title}</span>
|
||||
<div className="flex flex-wrap items-center gap-2 mt-1.5">
|
||||
<span className="text-[10px] font-bold text-moss bg-moss/10 px-2 py-0.5 rounded-md uppercase tracking-wider border border-moss/10">
|
||||
<span className="font-bold text-sm leading-tight text-ebony">{doc.title}</span>
|
||||
<div className="flex flex-wrap items-center gap-2 mt-1">
|
||||
<span className="text-[10px] font-bold text-moss bg-moss/10 px-2 py-0.5 rounded uppercase tracking-wider">
|
||||
{doc.size}
|
||||
</span>
|
||||
|
||||
{isCached && (
|
||||
<span className="flex items-center gap-1 text-[10px] font-bold text-moss bg-moss/10 px-2 py-0.5 rounded-md uppercase tracking-wider">
|
||||
<Archive size={12} /> Nedladdad
|
||||
<span className="flex items-center gap-1 text-[10px] font-bold text-moss bg-moss/10 px-2 py-0.5 rounded uppercase tracking-wider">
|
||||
<Archive size={10} /> Nedladdad
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* FIX: Swap the Download icon for a Check icon when it is already saved on the phone */}
|
||||
{isCached ? (
|
||||
<CheckCircle size={20} className="text-moss shrink-0 ml-2" />
|
||||
<CheckCircle size={18} className="text-moss shrink-0 ml-2" />
|
||||
) : (
|
||||
<Download size={20} className="text-slate-teal/50 group-hover:text-slate-teal transition-colors shrink-0 ml-2" />
|
||||
<Download size={18} className="text-slate-teal/50 group-hover:text-slate-teal transition-colors shrink-0 ml-2" />
|
||||
)}
|
||||
</a>
|
||||
);
|
||||
@@ -169,13 +154,13 @@ export default function Documents() {
|
||||
<h2 className="text-sm font-black text-ebony/50 uppercase tracking-widest mb-4">
|
||||
{isOffline ? "Användbara Länkar (Kräver anslutning)" : "Användbara Länkar"}
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
{links.map((link, idx) => (
|
||||
<a key={idx} href={isOffline ? '#' : link.url} target={isOffline ? '_self' : '_blank'} rel="noopener noreferrer"
|
||||
className={`group flex items-center justify-between p-5 rounded-2xl border transition-all duration-300 ${isOffline ? 'opacity-40 grayscale cursor-not-allowed pointer-events-none bg-white/20 border-transparent' : 'bg-white/60 border-white hover:-translate-y-1 hover:shadow-xl hover:shadow-moss/10 backdrop-blur-sm'}`}
|
||||
className={`group flex items-center justify-between p-4 rounded-2xl border transition-colors ${isOffline ? 'opacity-40 grayscale cursor-not-allowed pointer-events-none bg-eggshell/50 border-transparent' : 'bg-white/50 hover:bg-white border-slate-teal/10'}`}
|
||||
>
|
||||
<span className="font-bold text-slate-teal text-sm leading-tight pr-4">{link.title}</span>
|
||||
<div className={`rounded-full p-2 transition-colors shrink-0 ${isOffline ? 'bg-ebony/5' : 'bg-eggshell group-hover:bg-seafoam'}`}>
|
||||
<div className={`rounded-full p-2 transition-colors shrink-0 ${isOffline ? 'bg-transparent' : 'bg-white group-hover:bg-seafoam'}`}>
|
||||
<ExternalLink size={16} className={isOffline ? 'text-ebony/40' : 'text-slate-teal group-hover:text-eggshell'} />
|
||||
</div>
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user