Refactor display and add copy button

This commit is contained in:
grisel-davy 2020-12-30 12:17:45 +01:00
parent 6d9b9b9ac9
commit 3372200219
2 changed files with 45 additions and 3 deletions

View file

@ -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>

View file

@ -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 %}