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 2022-11-07 20:30:33 +02:00
parent c6e2b026e6
commit edd46eae58
2 changed files with 50 additions and 42 deletions

View file

@ -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>

View file

@ -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 %}