diff --git a/assets/sass/_page_image_detail.sass b/assets/sass/_page_image_detail.sass index fc1d9296ed002b810ed669d1fe658f3873294389..822c8268b78897d06adf71a82ab10bcaee22db6a 100644 --- a/assets/sass/_page_image_detail.sass +++ b/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 diff --git a/templates/image_detail.html b/templates/image_detail.html index 455f1c4668990602d7c3d10f88655469297bf6c7..f9622d3f3295e522bbfea17c0103f4f1c3b97482 100644 --- a/templates/image_detail.html +++ b/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>