Prevent upload list from overflowing and add standalone copy text button
This commit is contained in:
parent
3e5f245121
commit
51da9f4c7c
@ -1,2 +1,2 @@
|
|||||||
@import "layout";
|
@import "layout";
|
||||||
@import "fm";
|
@import "fm";
|
||||||
|
@ -928,6 +928,23 @@ td.actions {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.table-col-grow-cell {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
|
> * {
|
||||||
|
width: 0;
|
||||||
|
flex-grow: 1;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.pagination {
|
.pagination {
|
||||||
ul {
|
ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -12,4 +12,12 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
document.querySelectorAll<HTMLElement>('.copy-button[data-content]').forEach(el => {
|
||||||
|
el.addEventListener('click', () => {
|
||||||
|
navigator.clipboard.writeText(`${el.dataset.content}`)
|
||||||
|
.then(() => console.log('copy success'))
|
||||||
|
.catch(console.error);
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
@ -61,8 +61,7 @@
|
|||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>#</th>
|
<th>#</th>
|
||||||
<th class="table-col-grow">URL</th>
|
<th class="table-col-grow">Name</th>
|
||||||
<th>Name</th>
|
|
||||||
<th>Size</th>
|
<th>Size</th>
|
||||||
<th>Expires at</th>
|
<th>Expires at</th>
|
||||||
<th>Actions</th>
|
<th>Actions</th>
|
||||||
@ -73,19 +72,15 @@
|
|||||||
{% for file in files %}
|
{% for file in files %}
|
||||||
<tr>
|
<tr>
|
||||||
<td>{{ file.id }}</td>
|
<td>{{ file.id }}</td>
|
||||||
<td>
|
<td class="table-col-grow-cell"><a href="{{ file.getURL() }}"><pre>{{ file.real_name }}</pre></a></td>
|
||||||
<div class="copyable-text">
|
|
||||||
<a class="content" href="{{ file.getURL() }}" target="_blank">{{ file.getURL() }}</a>
|
|
||||||
<button class="copy-button"><i data-feather="copy"></i></button>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td><pre>{{ file.real_name }}</pre></td>
|
|
||||||
<td>{{ (file.size / (1024 * 1024)).toFixed(2) }}MB</td>
|
<td>{{ (file.size / (1024 * 1024)).toFixed(2) }}MB</td>
|
||||||
<td>{% if file.expires_at %}{{ file.expires_at.toISOString() }}{% else %}Never{% endif %}</td>
|
<td>{% if file.expires_at %}{{ file.expires_at.toISOString() }}{% else %}Never{% endif %}</td>
|
||||||
<td class="actions">
|
<td class="actions">
|
||||||
{% if file.shouldBeDeleted() %}
|
{% if file.shouldBeDeleted() %}
|
||||||
Pending deletion
|
Pending deletion
|
||||||
{% else %}
|
{% else %}
|
||||||
|
<button class="copy-button" data-content="{{ file.getURL() }}"><i data-feather="copy"></i> <span class="tip">Copy URL</span></button>
|
||||||
|
|
||||||
<form action="{{ route('delete-file-frontend', file.slug) }}" method="post">
|
<form action="{{ route('delete-file-frontend', file.slug) }}" method="post">
|
||||||
{{ macros.csrf(getCsrfToken) }}
|
{{ macros.csrf(getCsrfToken) }}
|
||||||
<button class="button danger"><i data-feather="trash"></i> <span class="tip">Delete</span></button>
|
<button class="button danger"><i data-feather="trash"></i> <span class="tip">Delete</span></button>
|
||||||
@ -95,7 +90,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
{% else %}
|
{% else %}
|
||||||
<tr>
|
<tr>
|
||||||
<td colspan="6" class="center">You haven't uploaded any file yet.</td>
|
<td colspan="5" class="center">You haven't uploaded any file yet.</td>
|
||||||
</tr>
|
</tr>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</tbody>
|
</tbody>
|
||||||
|
Loading…
Reference in New Issue
Block a user