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:
parent
c6e2b026e6
commit
edd46eae58
2 changed files with 50 additions and 42 deletions
|
@ -1,9 +1,14 @@
|
||||||
{% include "header.html" %}
|
{% include "header.html" %}
|
||||||
<div style="float: left">
|
<div style="float: left">
|
||||||
{% if pasta.content != "No Text Content" %}
|
{% 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
|
Copy Text
|
||||||
</button>
|
</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
|
<a style="margin-right: 1rem" href="{{ args.public_path }}/raw/{{pasta.id_as_animals()}}">Raw Text
|
||||||
Content</a>
|
Content</a>
|
||||||
{%- endif %}
|
{%- endif %}
|
||||||
|
@ -19,7 +24,7 @@
|
||||||
<a style="margin-right: 0.5rem"
|
<a style="margin-right: 0.5rem"
|
||||||
href="{{ args.public_path }}/pasta/{{pasta.id_as_animals()}}"><i>{{pasta.id_as_animals()}}</i></a>
|
href="{{ args.public_path }}/pasta/{{pasta.id_as_animals()}}"><i>{{pasta.id_as_animals()}}</i></a>
|
||||||
{% if args.public_path.to_string() != "" %}
|
{% 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
|
Copy URL
|
||||||
</button>
|
</button>
|
||||||
{%- endif %}
|
{%- endif %}
|
||||||
|
@ -59,8 +64,10 @@
|
||||||
<script>
|
<script>
|
||||||
const copyURLBtn = document.getElementById("copy-url-button")
|
const copyURLBtn = document.getElementById("copy-url-button")
|
||||||
const copyTextBtn = document.getElementById("copy-text-button")
|
const copyTextBtn = document.getElementById("copy-text-button")
|
||||||
|
const copyRedirectBtn = document.getElementById("copy-redirect-button")
|
||||||
const content = `{{ pasta.content_escaped() }}`
|
const content = `{{ pasta.content_escaped() }}`
|
||||||
const url = `{{ args.public_path }}/pasta/{{pasta.id_as_animals()}}`
|
const url = `{{ args.public_path }}/pasta/{{pasta.id_as_animals()}}`
|
||||||
|
const redirect_url = `{{ args.public_path }}/url/{{pasta.id_as_animals()}}`
|
||||||
|
|
||||||
copyURLBtn.addEventListener("click", () => {
|
copyURLBtn.addEventListener("click", () => {
|
||||||
navigator.clipboard.writeText(url)
|
navigator.clipboard.writeText(url)
|
||||||
|
@ -70,6 +77,17 @@
|
||||||
}, 1000)
|
}, 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", () => {
|
copyTextBtn.addEventListener("click", () => {
|
||||||
navigator.clipboard.writeText(content)
|
navigator.clipboard.writeText(content)
|
||||||
copyTextBtn.innerHTML = "Copied"
|
copyTextBtn.innerHTML = "Copied"
|
||||||
|
@ -116,11 +134,11 @@
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.copy-text-button,
|
.copy-button {
|
||||||
.copy-url-button {
|
|
||||||
font-size: small;
|
font-size: small;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
width: 6rem;
|
padding-left: 0.8rem;
|
||||||
|
padding-right: 0.8rem;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
@ -8,30 +8,24 @@
|
||||||
</p>
|
</p>
|
||||||
<br>
|
<br>
|
||||||
{%- else %}
|
{%- else %}
|
||||||
<br>
|
<h3>Pastas</h3>
|
||||||
{% if args.pure_html %}
|
{% if args.pure_html %}
|
||||||
<table border="1" style="width: 100%">
|
<table border="1" style="width: 100%; white-space: nowrap;">
|
||||||
{% else %}
|
{% else %}
|
||||||
<table style="width: 100%">
|
<table style="width: 100%">
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<th style="width: 30%">
|
||||||
<th colspan="4">Pastas</th>
|
Key
|
||||||
</tr>
|
</th>
|
||||||
<tr>
|
<th style="width: 20%">
|
||||||
<th>
|
Created
|
||||||
Key
|
</th>
|
||||||
</th>
|
<th style="width: 20%">
|
||||||
<th>
|
Expiration
|
||||||
Created
|
</th>
|
||||||
</th>
|
<th style="width: 30%">
|
||||||
<th>
|
</th>
|
||||||
Expiration
|
|
||||||
</th>
|
|
||||||
<th>
|
|
||||||
|
|
||||||
</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{% for pasta in pastas %}
|
{% for pasta in pastas %}
|
||||||
|
@ -63,35 +57,30 @@
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<br>
|
<br>
|
||||||
|
<h3>URL Redirects</h3>
|
||||||
{% if args.pure_html %}
|
{% if args.pure_html %}
|
||||||
<table border="1" style="width: 100%">
|
<table border="1" style="width: 100%">
|
||||||
{% else %}
|
{% else %}
|
||||||
<table style="width: 100%">
|
<table style="width: 100%">
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<th style="width: 30%">
|
||||||
<th colspan="4">URL Redirects</th>
|
Key
|
||||||
</tr>
|
</th>
|
||||||
<tr>
|
<th style="width: 20%">
|
||||||
<th>
|
Created
|
||||||
Key
|
</th>
|
||||||
</th>
|
<th style="width: 20%">
|
||||||
<th>
|
Expiration
|
||||||
Created
|
</th>
|
||||||
</th>
|
<th style="width: 30%">
|
||||||
<th>
|
</th>
|
||||||
Expiration
|
|
||||||
</th>
|
|
||||||
<th>
|
|
||||||
|
|
||||||
</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
</thead>
|
||||||
{% for pasta in pastas %}
|
{% for pasta in pastas %}
|
||||||
{% if pasta.pasta_type == "url" && !pasta.private %}
|
{% if pasta.pasta_type == "url" && !pasta.private %}
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<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>
|
||||||
<td>
|
<td>
|
||||||
{{pasta.created_as_string()}}
|
{{pasta.created_as_string()}}
|
||||||
|
@ -100,6 +89,7 @@
|
||||||
{{pasta.expiration_as_string()}}
|
{{pasta.expiration_as_string()}}
|
||||||
</td>
|
</td>
|
||||||
<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"
|
<a style="margin-right:1rem; cursor: pointer;" id="copy-button"
|
||||||
data-url="{{ args.public_path }}/url/{{pasta.id_as_animals()}}">Copy</a>
|
data-url="{{ args.public_path }}/url/{{pasta.id_as_animals()}}">Copy</a>
|
||||||
{% if pasta.editable %}
|
{% if pasta.editable %}
|
||||||
|
|
Loading…
Reference in a new issue