SirBlob/TypstDrive
1
0
Fork 0
Code Actions Packages Activity

Layout Styles Update

Browse Source
This commit is contained in:
SirBlob
2026-04-05 00:00:12 -04:00
parent 246f7357a9
commit 29a006ee87
11 changed files with 155 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/Footer.svelte
+17
View File
@@ -0,0 +1,17 @@
<script lang="ts">
import Icon from '@iconify/svelte';
</script>
<footer class="mt-auto py-6 text-center text-sm text-gray-500 dark:text-gray-400 border-t border-gray-200 dark:border-white/10 bg-[var(--theme-bg)] sticky bottom-0 w-full z-10 flex-shrink-0 transition-colors duration-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col justify-center items-center gap-4">
<a
href="https://github.com/SirBlobby/TypstDrive"
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center gap-2 hover:text-gray-900 dark:hover:text-white transition-colors bg-gray-100 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-white/10 px-3 py-1.5 rounded-lg border border-transparent dark:border-white/10"
>
<Icon icon="mdi:github" class="text-xl" />
<span class="font-semibold">GitHub Repository</span>
</a>
</div>
</footer>
src/lib/components/dashboard/FileCard.svelte
+14 -4
View File
@@ -5,14 +5,22 @@
file: any;
deleteFile: (id: string, name: string) => void;
}>();
let isFont = $derived(file.name.endsWith('.ttf') || file.name.endsWith('.otf'));
function handleOpen() {
if (!isFont) {
window.open(`/api/files/${file.id}/data`, '_blank');
}
}
</script>
<div
class="bg-white dark:bg-black/20 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 p-6 flex flex-col hover:shadow-lg hover:border-green-400 dark:hover:border-green-500/50 transition-all duration-200 relative group transform hover:-translate-y-1 cursor-pointer"
class="bg-white dark:bg-black/20 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 p-6 flex flex-col transition-all duration-200 relative group transform hover:-translate-y-1 {isFont ? 'cursor-default' : 'hover:shadow-lg hover:border-green-400 dark:hover:border-green-500/50 cursor-pointer'}"
role="button"
tabindex="0"
onclick={() => window.open(`/api/files/${file.id}/data`, '_blank')}
onkeydown={(e) => e.key === 'Enter' && window.open(`/api/files/${file.id}/data`, '_blank')}
onclick={handleOpen}
onkeydown={(e) => e.key === 'Enter' && handleOpen()}
draggable="true"
ondragstart={(e) => e.dataTransfer?.setData('text/plain', JSON.stringify({ type: 'file', id: file.id }))}
>
@@ -20,8 +28,10 @@
<div class="p-3 bg-green-50 dark:bg-green-500/10 text-green-600 dark:text-green-400 rounded-lg overflow-hidden flex items-center justify-center w-12 h-12">
{#if file.mime_type.startsWith('image/')}
<img src={`/api/files/${file.id}/data`} alt={file.name} class="w-full h-full object-cover rounded" draggable="false" />
{:else if isFont}
<Icon icon="mdi:format-font" class="text-2xl" />
{:else}
<Icon icon="mdi:image-outline" class="text-2xl" />
<Icon icon="mdi:file-outline" class="text-2xl" />
{/if}
</div>
<button aria-label="Delete file" onclick={(e) => { e.stopPropagation(); deleteFile(file.id, file.name); }} class="pointer-events-auto text-gray-400 hover:text-red-500 dark:hover:text-red-400 opacity-0 group-hover:opacity-100 transition-opacity bg-gray-50 hover:bg-red-50 dark:bg-white/5 dark:hover:bg-red-900/20 rounded-full p-2 shadow-sm border border-gray-100 dark:border-white/10">
src/lib/components/dashboard/Navbar.svelte
+1 -1
View File
@@ -11,7 +11,7 @@
}
</script>
<nav class="bg-white/80 dark:bg-black/20 backdrop-blur-md shadow-sm border-b border-gray-200 dark:border-white/10 px-6 py-4 flex justify-between items-center sticky top-0 z-10 transition-colors duration-200">
<nav class="bg-[var(--theme-bg)] shadow-sm border-b border-gray-200 dark:border-white/10 px-6 py-4 flex justify-between items-center sticky top-0 z-10 transition-colors duration-200">
<h1 class="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-3">
<Icon icon="mdi:script-text" class="text-blue-600 dark:text-blue-400 text-3xl" />
TypstDrive