From edd46eae58eae1c5a81d626e43c32387a541bceb Mon Sep 17 00:00:00 2001
From: Daniel Szabo <daniel.szabo99@outlook.com>
Date: Mon, 7 Nov 2022 20:30:33 +0200
Subject: [PATCH] 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
---
 templates/pasta.html     | 28 ++++++++++++++----
 templates/pastalist.html | 64 +++++++++++++++++-----------------------
 2 files changed, 50 insertions(+), 42 deletions(-)

diff --git a/templates/pasta.html b/templates/pasta.html
index 47dd01d..360425c 100644
--- a/templates/pasta.html
+++ b/templates/pasta.html
@@ -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>
 
diff --git a/templates/pastalist.html b/templates/pastalist.html
index a1880c1..269059b 100644
--- a/templates/pastalist.html
+++ b/templates/pastalist.html
@@ -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 %}