Refactor display and add copy button

3 years ago · 3372200219
parent 6d9b9b9ac9
commit 3372200219
2 changed files with 45 additions and 3 deletions
--- a/litl/templates/base.html
+++ b/litl/templates/base.html
@ -7,6 +7,7 @@
 <html>
    <head>
        <link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}"/>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <body>

--- a/litl/templates/display.html
+++ b/litl/templates/display.html
@ -1,7 +1,48 @@
 {% extends 'base.html' %}

 {% block content %}
-Slug : {{slug.slug}}
-Destination: {{slug.destination}}
-Date: {{slug.date}}
+<div class="container text-center">
+<div class="container">
+    <h2>{{slug.destination}}</h2>
+</div>
+
+<h2><p class="fa fa-arrow-down" style="color:grey;"></p></h2>
+<div class="container">
+    <h3><p id="shorten">litl.auro.re/{{slug.slug}}</p></h3>
+</div>
+<button type="button" onclick="copy()" class="btn btn-dark">COPY <i class="fa fa-copy"></i></button>
+</div>
+
+<script>
+function copy(){
+    // code from:
+    // https://actualwizard.com/how-to-copy-text-to-the-clipboard-with-html-and-javascript
+     var textToCopy = document.getElementById("shorten");
+     var currentRange;
+     if(document.getSelection().rangeCount > 0)
+     {
+          currentRange = document.getSelection().getRangeAt(0);
+          window.getSelection().removeRange(currentRange);
+     }
+     else
+     {
+          currentRange = false;
+     }
+
+     var CopyRange = document.createRange();
+     CopyRange.selectNode(textToCopy);
+     window.getSelection().addRange(CopyRange);
+     document.execCommand("copy");
+
+     //remove our selection range
+     window.getSelection().removeRange(CopyRange);
+
+     //return the old selection range
+     if(currentRange)
+     {
+          window.getSelection().addRange(currentRange);
+     }
+}
+</script>
+
 {% endblock %}