pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add thead and tbody to every table for svelte 5 compatibility

Browse Source
This commit is contained in:
Wim Brand
2024-11-06 19:12:52 +01:00
parent a6880b528a
commit 83ec1fc516
17 changed files with 1452 additions and 1639 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
svelte/src/filesystem/DetailsWindow.svelte
View File

@@ -122,78 +122,80 @@ let update_chart = async (base, timespan, interval) => {
<Modal bind:visible={visible} title="Details" width={($nav.base.type === "file" ? 1000 : 750) + "px"}>
<table style="width: 100%;">
<tr>
<td>Name</td>
<td>{$nav.base.name}</td>
</tr>
<tr>
<td>Path</td>
<td>{$nav.base.path}</td>
</tr>
<tr>
<td>Created</td>
<td>{formatDate($nav.base.created, true, true, true)}</td>
</tr>
<tr>
<td>Modified</td>
<td>{formatDate($nav.base.modified, true, true, true)}</td>
</tr>
<tr>
<td>Mode</td>
<td>{$nav.base.mode_string}</td>
</tr>
{#if $nav.base.id}
<tbody>
<tr>
<td>Public ID</td>
<td><a href="/d/{$nav.base.id}">{$nav.base.id}</a></td>
</tr>
{/if}
{#if $nav.base.type === "file"}
<tr>
<td>File type</td>
<td>{$nav.base.file_type}</td>
<td>Name</td>
<td>{$nav.base.name}</td>
</tr>
<tr>
<td>File size</td>
<td>{formatDataVolume($nav.base.file_size, 4)} ( {formatThousands($nav.base.file_size)} B )</td>
<td>Path</td>
<td>{$nav.base.path}</td>
</tr>
<tr>
<td>Downloads</td>
<td>{formatThousands(total_downloads)} (unique, counted once per IP)</td>
<td>Created</td>
<td>{formatDate($nav.base.created, true, true, true)}</td>
</tr>
<tr>
<td>Transfer used</td>
<td>Modified</td>
<td>{formatDate($nav.base.modified, true, true, true)}</td>
</tr>
<tr>
<td>Mode</td>
<td>{$nav.base.mode_string}</td>
</tr>
{#if $nav.base.id}
<tr>
<td>Public ID</td>
<td><a href="/d/{$nav.base.id}">{$nav.base.id}</a></td>
</tr>
{/if}
{#if $nav.base.type === "file"}
<tr>
<td>File type</td>
<td>{$nav.base.file_type}</td>
</tr>
<tr>
<td>File size</td>
<td>{formatDataVolume($nav.base.file_size, 4)} ( {formatThousands($nav.base.file_size)} B )</td>
</tr>
<tr>
<td>Downloads</td>
<td>{formatThousands(total_downloads)} (unique, counted once per IP)</td>
</tr>
<tr>
<td>Transfer used</td>
<td>
{formatDataVolume(total_transfer_paid, 4)}
( {formatThousands(total_transfer_paid)} B ),
{(total_transfer_paid/$nav.base.file_size).toFixed(1)}x file size
</td>
</tr>
<tr><td>SHA256 sum</td><td>{$nav.base.sha256_sum}</td></tr>
{/if}
<tr>
<td>Direct link</td>
<td>
{formatDataVolume(total_transfer_paid, 4)}
( {formatThousands(total_transfer_paid)} B ),
{(total_transfer_paid/$nav.base.file_size).toFixed(1)}x file size
<CopyButton text={direct_url}>Copy</CopyButton>
<a href="{direct_url}">{direct_url}</a>
</td>
</tr>
<tr><td>SHA256 sum</td><td>{$nav.base.sha256_sum}</td></tr>
{/if}
<tr>
<td>Direct link</td>
<td>
<CopyButton text={direct_url}>Copy</CopyButton>
<a href="{direct_url}">{direct_url}</a>
</td>
</tr>
{#if share_url !== ""}
<tr>
<td>Sharing link</td>
<td>
<CopyButton text={share_url}>Copy</CopyButton>
<a href="{share_url}">{share_url}</a>
</td>
</tr>
<tr>
<td>Direct sharing link</td>
<td>
<CopyButton text={direct_share_url}>Copy</CopyButton>
<a href="{direct_share_url}">{direct_share_url}</a>
</td>
</tr>
{/if}
{#if share_url !== ""}
<tr>
<td>Sharing link</td>
<td>
<CopyButton text={share_url}>Copy</CopyButton>
<a href="{share_url}">{share_url}</a>
</td>
</tr>
<tr>
<td>Direct sharing link</td>
<td>
<CopyButton text={direct_share_url}>Copy</CopyButton>
<a href="{direct_share_url}">{direct_share_url}</a>
</td>
</tr>
{/if}
</tbody>
</table>
{#if $nav.base.type === "file"}

45
svelte/src/filesystem/SearchView.svelte
View File

@@ -109,36 +109,29 @@ const open_result = index => {
</form>
</div>
<div class="directory center">
<tr>
<td></td>
<td>Name</td>
</tr>
<div class="results center">
{#each search_results as result, index}
<a
href={"/d"+fs_encode_path(result)}
on:click|preventDefault={() => open_result(index)}
class="node"
>
<td>
<img src={fs_thumbnail_url(result, 32, 32)} class="node_icon" alt="icon"/>
</td>
<td class="node_name">
<img src={fs_thumbnail_url(result, 32, 32)} class="node_icon" alt="icon"/>
<span class="node_name">
<!-- Remove the search directory from the result -->
{result.slice($nav.base.path.length+1)}
</td>
</span>
</a>
{/each}
{#if search_results.length === last_limit}
<div class="node">
<td></td>
<td class="node_name">
<div class="node_name" style="text-align: center;">
<button on:click={() => {search(last_limit + 100)}}>
<i class="icon">expand_more</i>
More results
</button>
</td>
</div>
</div>
{/if}
</div>
@@ -164,8 +157,9 @@ const open_result = index => {
flex: 1 1 auto;
}
.directory {
display: table;
.results {
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
margin: 8px auto 16px auto;
@@ -174,17 +168,18 @@ const open_result = index => {
border-collapse: collapse;
border-radius: 8px;
}
.directory > * {
display: table-row;
}
.directory > * > * {
display: table-cell;
.results > * {
display: flex;
flex-direction: row;
}
.node {
display: table-row;
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
text-decoration: none;
color: var(--text-color);
padding: 6px;
padding: 4px;
}
.node:not(:last-child) {
border-bottom: 1px solid var(--separator);
@@ -194,17 +189,15 @@ const open_result = index => {
color: var(--input_text);
text-decoration: none;
}
td {
padding: 4px;
vertical-align: middle;
}
.node_icon {
flex: 0 0 auto;
height: 32px;
width: 32px;
vertical-align: middle;
border-radius: 4px;
}
.node_name {
flex: 1 1 auto;
width: 100%;
overflow: hidden;
line-height: 1.2em;