lucent/lucent-laravel
2
0
Fork 0
Code Issues 14 Pull Requests Releases 1 Activity

filters and sidebar

Browse Source
This commit is contained in:
Alex Lingris
2024-08-15 14:44:53 +03:00
parent 1f3ebafe69
commit f9806f60c9
32 changed files with 584 additions and 456 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/js/svelte/files/Preview.svelte
+52 -35
View File
@@ -28,41 +28,58 @@
fontSize = "13";
}
</script>
<div style="display: flex;align-items: center;gap: 5px;">
{#if record}
{#if record}
{#if record._file.mime.startsWith("image")}
<!-- href={imgurl(record)} -->
<a
href="{channel.lucentUrl}/records/{record.id}"
title={record._file.path}
class="d-flex align-items-center justify-content-center "
style="width:{imageSide}px;height:{imageSide}px"
>
<img
class="rounded w-100"
src={imgurl(record)}
alt={record._file.path}
/>
</a>
{:else}
<a
href="{channel.lucentUrl}/records/{record.id}"
title={record._file.path}
class="btn btn-outline-primary btn-sm d-flex align-items-center justify-content-center"
style="width:{imageSide}px;height:{imageSide}px"
>
<Icon icon="file" width={fileSide} height={fileSide}/>
<span class="ms-2" style="font-size:{fontSize}px"
>.{record._file.path.split(".").pop()}</span
{#if record._file.mime.startsWith("image")}
<!-- href={imgurl(record)} -->
<a
href="{channel.lucentUrl}/records/{record.id}"
title={record._file.path}
style="width:{imageSide}px;height:{imageSide}px"
>
</a>
<img
class="rounded w-100"
src={imgurl(record)}
alt={record._file.path}
/>
</a>
{:else}
<a
href="{channel.lucentUrl}/records/{record.id}"
title={record._file.path}
class="file-preview-small"
style="width:{imageSide}px;height:{imageSide}px"
>
<Icon icon="file" width={fileSide} height={fileSide}/>
<span class="ms-2"
>.{record._file.path.split(".").pop()}</span
>
</a>
{/if}
{/if}
{/if}
{#if showFilename}
<a
href="{channel.lucentUrl}/records/{record.id}"
title={record._file.path}
class="preview-file-filename lx-small-text text-decoration-none"
>{record._file.path}</a
>
{/if}
{#if showFilename}
<a
href="{channel.lucentUrl}/records/{record.id}"
title={record._file.path}
class="preview-file-filename lx-small-text text-decoration-none"
>{record._file.path}</a
>
{/if}
</div>
<style>
img{
border-radius: 12px;
padding: 4px;
}
.file-preview-small{
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
border-radius: 12px;
padding: 4px;
background: var(--background);
}
</style>