From 337220021940e76e3319eb5bc86c59c9b34060e4 Mon Sep 17 00:00:00 2001
From: grisel-davy <grisel-davy@litl.adm.auro.re>
Date: Wed, 30 Dec 2020 12:17:45 +0100
Subject: [PATCH] Refactor display and add copy button

---
 litl/templates/base.html    |  1 +
 litl/templates/display.html | 47 ++++++++++++++++++++++++++++++++++---
 2 files changed, 45 insertions(+), 3 deletions(-)
diff --git a/litl/templates/base.html b/litl/templates/base.html
index 320d292..0327dd0 100644
--- 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>
 
diff --git a/litl/templates/display.html b/litl/templates/display.html
index 479148b..e4f6eb6 100644
--- 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 %}
