From ff69969ea8b1d8e5708083f2e75da7534d0ee190 Mon Sep 17 00:00:00 2001
From: Joshua Laymon <joshlaymon@icloud.com>
Date: Fri, 15 Aug 2025 22:51:36 +0000
Subject: [PATCH] Update web/templates/entry_view.html

---
 web/templates/entry_view.html | 102 ++++++++++------------------------
 1 file changed, 30 insertions(+), 72 deletions(-)

diff --git a/web/templates/entry_view.html b/web/templates/entry_view.html
index 647ed11..1518917 100644
--- a/web/templates/entry_view.html
+++ b/web/templates/entry_view.html
@@ -14,33 +14,28 @@
       {% endif %}
     </div>
     <div class="rt-right">
-      <form method="get" action="{% url 'nav_prev' %}" class="inline">
-        <!-- send current zero-based index (position-1); view will subtract 1 -->
+      <form method="get" action="{% url 'nav_prev' %}" class="inline" style="display:inline;">
         <input type="hidden" name="i" value="{{ position|add:'-1' }}">
         <button class="btn btn-lg" {% if position <= 1 %}disabled{% endif %}>‹ Prev</button>
       </form>
-      <form method="get" action="{% url 'nav_next' %}" class="inline">
-        <!-- send current zero-based index (position-1); view will add 1 -->
+
+      <form method="get" action="{% url 'nav_next' %}" class="inline" style="display:inline;">
         <input type="hidden" name="i" value="{{ position|add:'-1' }}">
         <button class="btn btn-lg btn-primary" {% if position >= count %}disabled{% endif %}>Next ›</button>
       </form>
 
-      <!-- Share button (copies Illustration + two spaces + Application) -->
-      <button id="share-btn" class="btn btn-lg btn-primary" type="button" title="Copy to clipboard" style="margin-left:6px;">
-        <span style="display:flex;align-items:center;gap:6px;">
-          <!-- iOS-like share icon (SVG) -->
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
-               viewBox="0 0 16 16" aria-hidden="true" focusable="false" fill="currentColor">
-            <path d="M8 1a.5.5 0 0 1 .5.5V9a.5.5 0 0 1-1 0V1.5A.5.5 0 0 1 8 1z"/>
-            <path d="M5.646 3.646a.5.5 0 0 1 .708 0L8 5.293l1.646-1.647a.5.5 0 0 1 .708.708L8.354 6.354a.5.5 0 0 1-.708 0L5.646 4.354a.5.5 0 0 1 0-.708z"/>
-            <path d="M4.5 6A1.5 1.5 0 0 0 3 7.5v5A1.5 1.5 0 0 0 4.5 14h7A1.5 1.5 0 0 0 13 12.5v-5A1.5 1.5 0 0 0 11.5 6H10a.5.5 0 0 0 0 1h1.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-5a.5.5 0 0 1 .5-.5H6a.5.5 0 0 0 0-1H4.5z"/>
+      <!-- Share Button -->
+      <button id="shareBtn" class="btn btn-lg" title="Share this illustration" style="margin-left:6px;">
+        <span style="display:inline-flex;align-items:center;gap:6px;">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+               viewBox="0 0 16 16">
+            <path d="M11 2a2 2 0 1 1 1.414 3.414l-6.657 3.89a2.005 2.005 0 0 1 0 .392l6.657 3.89A2 2 0 1 1 11 14a2 2 0 0 1-.723-.138l-6.657-3.89a2 2 0 1 1 0-4l6.657-3.89A2 2 0 0 1 11 2z"/>
           </svg>
           Share
         </span>
       </button>
 
       {% if user.is_authenticated and user.is_staff %}
-        <!-- Just the label changed to 'Edit'; link unchanged -->
         <a class="btn btn-outline" href="{% url 'entry_edit' entry.id %}">Edit</a>
         <a class="btn btn-danger" href="{% url 'entry_delete' entry.id %}">Delete</a>
       {% endif %}
@@ -68,7 +63,7 @@
     <!-- ILLUSTRATION -->
     <div class="section">
       <div class="section-label">Illustration</div>
-      <div class="section-body lead-text" id="illustration-text">
+      <div id="illustrationText" class="section-body lead-text">
         {{ entry.illustration|linebreaksbr|default:"—" }}
       </div>
     </div>
@@ -76,7 +71,7 @@
     <!-- APPLICATION -->
     <div class="section">
       <div class="section-label">Application</div>
-      <div class="section-body lead-text" id="application-text">
+      <div id="applicationText" class="section-body lead-text">
         {{ entry.application|linebreaksbr|default:"—" }}
       </div>
     </div>
@@ -142,14 +137,27 @@
 
 </div>
 
-<!-- Toast for copy confirmation -->
-<div id="copy-toast"
-     style="position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
-            background:#333;color:#fff;padding:10px 16px;border-radius:6px;
-            font-size:14px;display:none;z-index:9999;">
+<!-- Toast -->
+<div id="toast" style="visibility:hidden;min-width:200px;margin-left:-100px;background:#333;color:#fff;text-align:center;border-radius:4px;padding:10px;position:fixed;z-index:1;left:50%;bottom:30px;font-size:14px;">
   The Illustration was copied to the clipboard
 </div>
 
+<script>
+document.getElementById("shareBtn").addEventListener("click", function() {
+  const ill = document.getElementById("illustrationText").innerText.trim();
+  const app = document.getElementById("applicationText").innerText.trim();
+  const textToCopy = ill + "  " + app;
+
+  navigator.clipboard.writeText(textToCopy).then(function() {
+    const toast = document.getElementById("toast");
+    toast.style.visibility = "visible";
+    setTimeout(() => { toast.style.visibility = "hidden"; }, 5000);
+  }).catch(function(err) {
+    console.error("Failed to copy: ", err);
+  });
+});
+</script>
+
 <style>
   .subject-pills{
     display:flex;
@@ -166,61 +174,11 @@
     border:1px solid #d7e6f7;
     color:#0f172a;
     text-decoration:none;
-    text-transform: capitalize; /* Capitalize each word */
+    text-transform: capitalize;
   }
   .chip-subject:hover{
     background:#e2effc;
     border-color:#c9def5;
   }
 </style>
-
-<script>
-  // Robust copy to clipboard that works on HTTP and HTTPS
-  (function () {
-    function copyText(text) {
-      // Try modern API first
-      if (navigator.clipboard && window.isSecureContext) {
-        return navigator.clipboard.writeText(text);
-      }
-      // Fallback: temporary textarea
-      return new Promise(function (resolve, reject) {
-        try {
-          var ta = document.createElement('textarea');
-          ta.value = text;
-          // Avoid scrolling to bottom
-          ta.style.position = 'fixed';
-          ta.style.top = '-1000px';
-          ta.style.left = '-1000px';
-          document.body.appendChild(ta);
-          ta.focus();
-          ta.select();
-          var ok = document.execCommand('copy');
-          document.body.removeChild(ta);
-          ok ? resolve() : reject(new Error('execCommand failed'));
-        } catch (e) {
-          reject(e);
-        }
-      });
-    }
-
-    function showToast() {
-      var toast = document.getElementById('copy-toast');
-      if (!toast) return;
-      toast.style.display = 'block';
-      clearTimeout(showToast._t);
-      showToast._t = setTimeout(function(){ toast.style.display = 'none'; }, 5000);
-    }
-
-    var btn = document.getElementById('share-btn');
-    if (!btn) return;
-    btn.addEventListener('click', function () {
-      var ill = (document.getElementById('illustration-text')?.innerText || '').trim();
-      var app = (document.getElementById('application-text')?.innerText || '').trim();
-      var text = ill + '  ' + app; // two spaces
-      copyText(text).then(showToast).catch(function (err) {
-        alert('Failed to copy: ' + err);
-      });
-    });
-  })();
-</script>
 {% endblock %}
\ No newline at end of file