Fixed css issues

assets/sass/_page_image_detail.sass

@@ -11,30 +11,33 @@
       background: #333333
       border-radius: 4px
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4)
-      display: flex
-      flex-direction: row
-      #url-field
-        background: none
-        color: #fff
-        border: none
-        flex-shrink: 1
-        display: block
-        flex-grow: 1
-        width: 0
-        margin: 8px
-        text-overflow: ellipsis
-      #copy-url
-        display: block
-        background: #FFC107
-        padding: 4px 16px
-        border-radius: 2px
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)
-        border: none
-        font-family: 'Lato', sans-serif
-        font-size: 10pt
-        line-height: 24px
-        margin: 8px
-        cursor: pointer
+      p
+        color: #ffffff
+      div
+        display: flex
+        flex-direction: row
+        input
+          background: none
+          color: #fff
+          border: none
+          flex-shrink: 1
+          display: block
+          flex-grow: 1
+          width: 0
+          margin: 8px
+          text-overflow: ellipsis
+        button.copy
+          display: block
+          background: #FFC107
+          padding: 4px 16px
+          border-radius: 2px
+          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)
+          border: none
+          font-family: 'Lato', sans-serif
+          font-size: 10pt
+          line-height: 24px
+          margin: 8px
+          cursor: pointer
     .actions
       background: #333333
       border-radius: 4px

templates/image_detail.html

@@ -34,20 +34,32 @@
             </form>
         </div>
     {{end}}
-
         <div class="url">
-            <input id="url-field" type="text" value="https://i.k8r.eu/{{.Image.Id}}">
-            <button id="copy-url">Copy</button>
+            <p>Detail Page</p>
+            <div>
+                <input id="url_full" type="text" value="https://i.k8r.eu/i/{{.Image.Id}}">
+                <button class="copy" data-target="#url_full">Copy</button>
+            </div>
+        </div>
+        <div class="url">
+            <p>Direct Link</p>
+            <div>
+                <input id="url_direct" type="text" value="https://i.k8r.eu/{{.Image.Id}}">
+                <button class="copy" data-target="#url_direct">Copy</button>
+            </div>
         </div>
     </div>
 </div>
 <script>
-    const urlCopyButton = document.getElementById("copy-url");
-    const urlField = document.getElementById("url-field");
-    urlCopyButton.addEventListener("click", () => {
-        urlField.select();
-        document.execCommand("Copy");
-    })
+    Array.prototype.slice.call(document.querySelectorAll("button.copy[data-target]")).forEach((button) => {
+        const target = document.querySelector(button.dataset["target"]);
+        if (target) {
+            button.addEventListener("click", () => {
+                target.select();
+                document.execCommand("Copy");
+            })
+        }
+    });
 </script>
 {{if .IsMine}}
 <script>