Refactor display and add copy button
This commit is contained in:
parent
6d9b9b9ac9
commit
3372200219
2 changed files with 45 additions and 3 deletions
|
@ -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>
|
||||
|
||||
|
|
|
@ -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 %}
|
||||
|
|
Loading…
Reference in a new issue