Improved /pasta and /pastalist UX
- adjusted table column widths so buttons dont wrap into next row - added Open button to url pastas so clicking on their keys redirect to their /pasta view, consistent with the rest of the pastas - added copy redirect button to /pasta view of url pastas to make it easier to get the /url endpoint url
This commit is contained in:
Daniel Szabo
parent
c6e2b026e6
commit
edd46eae58
2 changed files with 50 additions and 42 deletions
|
|
@ -1,9 +1,14 @@
|
|||
{% include "header.html" %}
|
||||
<div style="float: left">
|
||||
{% if pasta.content != "No Text Content" %}
|
||||
<button id="copy-text-button" class="copy-text-button" style="margin-right: 0.5rem">
|
||||
<button id="copy-text-button" class="copy-button" style="margin-right: 0.5rem">
|
||||
Copy Text
|
||||
</button>
|
||||
{% if args.public_path.to_string() != "" && pasta.pasta_type == "url" %}
|
||||
<button id="copy-redirect-button" class="copy-button" style="margin-right: 0.5rem">
|
||||
Copy Redirect
|
||||
</button>
|
||||
{%- endif %}
|
||||
<a style="margin-right: 1rem" href="{{ args.public_path }}/raw/{{pasta.id_as_animals()}}">Raw Text
|
||||
Content</a>
|
||||
{%- endif %}
|
||||
|
|
@ -19,7 +24,7 @@
|
|||
<a style="margin-right: 0.5rem"
|
||||
href="{{ args.public_path }}/pasta/{{pasta.id_as_animals()}}"><i>{{pasta.id_as_animals()}}</i></a>
|
||||
{% if args.public_path.to_string() != "" %}
|
||||
<button id="copy-url-button" class="copy-url-button" style="margin-right: 0">
|
||||
<button id="copy-url-button" class="copy-button" style="margin-right: 0">
|
||||
Copy URL
|
||||
</button>
|
||||
{%- endif %}
|
||||
|
|
@ -59,8 +64,10 @@
|
|||
<script>
|
||||
const copyURLBtn = document.getElementById("copy-url-button")
|
||||
const copyTextBtn = document.getElementById("copy-text-button")
|
||||
const copyRedirectBtn = document.getElementById("copy-redirect-button")
|
||||
const content = `{{ pasta.content_escaped() }}`
|
||||
const url = `{{ args.public_path }}/pasta/{{pasta.id_as_animals()}}`
|
||||
const redirect_url = `{{ args.public_path }}/url/{{pasta.id_as_animals()}}`
|
||||
|
||||
copyURLBtn.addEventListener("click", () => {
|
||||
navigator.clipboard.writeText(url)
|
||||
|
|
@ -70,6 +77,17 @@
|
|||
}, 1000)
|
||||
})
|
||||
|
||||
// it will be undefined when the element does not exist on non-url pastas
|
||||
if (copyRedirectBtn) {
|
||||
copyRedirectBtn.addEventListener("click", () => {
|
||||
navigator.clipboard.writeText(redirect_url)
|
||||
copyRedirectBtn.innerHTML = "Copied"
|
||||
setTimeout(() => {
|
||||
copyRedirectBtn.innerHTML = "Copy Redirect"
|
||||
}, 1000)
|
||||
})
|
||||
}
|
||||
|
||||
copyTextBtn.addEventListener("click", () => {
|
||||
navigator.clipboard.writeText(content)
|
||||
copyTextBtn.innerHTML = "Copied"
|
||||
|
|
@ -116,11 +134,11 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
.copy-text-button,
|
||||
.copy-url-button {
|
||||
.copy-button {
|
||||
font-size: small;
|
||||
padding: 4px;
|
||||
width: 6rem;
|
||||
padding-left: 0.8rem;
|
||||
padding-right: 0.8rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,30 +8,24 @@
|
|||
</p>
|
||||
<br>
|
||||
{%- else %}
|
||||
<br>
|
||||
<h3>Pastas</h3>
|
||||
{% if args.pure_html %}
|
||||
<table border="1" style="width: 100%">
|
||||
<table border="1" style="width: 100%; white-space: nowrap;">
|
||||
{% else %}
|
||||
<table style="width: 100%">
|
||||
{% endif %}
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="4">Pastas</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
Key
|
||||
</th>
|
||||
<th>
|
||||
Created
|
||||
</th>
|
||||
<th>
|
||||
Expiration
|
||||
</th>
|
||||
<th>
|
||||
|
||||
</th>
|
||||
</tr>
|
||||
<th style="width: 30%">
|
||||
Key
|
||||
</th>
|
||||
<th style="width: 20%">
|
||||
Created
|
||||
</th>
|
||||
<th style="width: 20%">
|
||||
Expiration
|
||||
</th>
|
||||
<th style="width: 30%">
|
||||
</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for pasta in pastas %}
|
||||
|
|
@ -63,35 +57,30 @@
|
|||
</tbody>
|
||||
</table>
|
||||
<br>
|
||||
<h3>URL Redirects</h3>
|
||||
{% if args.pure_html %}
|
||||
<table border="1" style="width: 100%">
|
||||
{% else %}
|
||||
<table style="width: 100%">
|
||||
{% endif %}
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="4">URL Redirects</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
Key
|
||||
</th>
|
||||
<th>
|
||||
Created
|
||||
</th>
|
||||
<th>
|
||||
Expiration
|
||||
</th>
|
||||
<th>
|
||||
|
||||
</th>
|
||||
</tr>
|
||||
<th style="width: 30%">
|
||||
Key
|
||||
</th>
|
||||
<th style="width: 20%">
|
||||
Created
|
||||
</th>
|
||||
<th style="width: 20%">
|
||||
Expiration
|
||||
</th>
|
||||
<th style="width: 30%">
|
||||
</th>
|
||||
</thead>
|
||||
{% for pasta in pastas %}
|
||||
{% if pasta.pasta_type == "url" && !pasta.private %}
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ args.public_path }}/url/{{pasta.id_as_animals()}}">{{pasta.id_as_animals()}}</a>
|
||||
<a href="{{ args.public_path }}/pasta/{{pasta.id_as_animals()}}">{{pasta.id_as_animals()}}</a>
|
||||
</td>
|
||||
<td>
|
||||
{{pasta.created_as_string()}}
|
||||
|
|
@ -100,6 +89,7 @@
|
|||
{{pasta.expiration_as_string()}}
|
||||
</td>
|
||||
<td>
|
||||
<a style="margin-right:1rem" href="{{ args.public_path }}/url/{{pasta.id_as_animals()}}">Open</a>
|
||||
<a style="margin-right:1rem; cursor: pointer;" id="copy-button"
|
||||
data-url="{{ args.public_path }}/url/{{pasta.id_as_animals()}}">Copy</a>
|
||||
{% if pasta.editable %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue