93 lines
3.4 KiB
HTML
93 lines
3.4 KiB
HTML
{% extends "base.htm" %}
|
||
|
||
{% block title %}NanoShare - Files{% endblock %}
|
||
|
||
{% block meta %}
|
||
<meta name="description" content="NanoShare is a lightweight self-hosted file sharing service built on Python Quart.">
|
||
<meta name="keywords" content="NanoShare, file sharing, self-hosted, Python Quart, open source">
|
||
<meta name="robots" content="index, follow" />
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<main class="file-list">
|
||
<section class="card" style="padding: clamp(18px, 2.6vw, 28px);">
|
||
<h2 class="page-title">Files</h2>
|
||
<p class="subtle">Your uploaded files at a glance. Click a filename to open, or use the actions on the right.</p>
|
||
|
||
<div class="table-wrap" role="region" aria-label="Files table" tabindex="0">
|
||
<table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th scope="col">Filename</th>
|
||
<th scope="col">Note (Only Visible to You)</th>
|
||
<th scope="col">Size</th>
|
||
<th scope="col">Uploaded</th>
|
||
<th scope="col">Expires</th>
|
||
<th scope="col" class="cell--right">Actions</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for file in files %}
|
||
<tr>
|
||
<td class="cell--name">
|
||
<a href="{{ url_for('side_main.serve_file', file_id=file.file_id) }}">{{ file.file_name }}</a>
|
||
</td>
|
||
<td>{{ file.note }}</td>
|
||
<td><span class="badge">{{ file.file_size }}</span></td>
|
||
<td><time datetime="{{ file.uploaded_at }}" class="local-time"></time></td>
|
||
<td><time datetime="{{ file.expires_at }}" class="local-time"></time></td>
|
||
<td class="cell--right">
|
||
<div class="actions">
|
||
<button class="icon-btn" title="Info">
|
||
<a href="{{ url_for('side_main.file_info', file_id=file.file_id) }}">ℹ️ <span class="sr-only">Info</span></a>
|
||
</button>
|
||
<button class="icon-btn" title="Edit">
|
||
<a href="{{ url_for('side_main.file_edit', file_id=file.file_id) }}">✏️ <span class="sr-only">Edit</span></a>
|
||
</button>
|
||
<button class="icon-btn" title="Copy link" data-action="copy">📋 <span class="sr-only">Copy</span></button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<script>
|
||
document.addEventListener('click', (e) => {
|
||
const btn = e.target.closest('button[data-action="copy"]');
|
||
if(!btn) return;
|
||
const row = btn.closest('tr');
|
||
const link = row?.querySelector('.cell--name a')?.href;
|
||
if(!link) return;
|
||
navigator.clipboard.writeText(link).then(() => {
|
||
const original = btn.innerHTML;
|
||
btn.innerHTML = '✅';
|
||
setTimeout(() => btn.innerHTML = original, 1200);
|
||
}).catch(() => {
|
||
alert('Could not copy link.');
|
||
});
|
||
});
|
||
|
||
document.querySelectorAll("time.local-time").forEach(timeEl => {
|
||
const datetime = timeEl.getAttribute("datetime");
|
||
if (!datetime) return;
|
||
|
||
const date = new Date(datetime);
|
||
|
||
timeEl.title = date.toISOString();
|
||
timeEl.textContent = date.toLocaleString(undefined, {
|
||
year: "numeric",
|
||
month: "short",
|
||
day: "numeric",
|
||
hour: "2-digit",
|
||
minute: "2-digit",
|
||
second: undefined,
|
||
hour12: false,
|
||
});
|
||
});
|
||
</script>
|
||
{% endblock %}
|