Verified Commit b99b7371 authored by David Haynes's avatar David Haynes 🙆
Browse files

Refactor link_box to make better use of bootstrap

- rework the css that I wrote a year ago to look nicer
- remove some of the "hacky" solutions that I wrote

Closes #114
parent 21564865
Pipeline #1310 passed with stage
in 1 minute and 43 seconds
...@@ -6,196 +6,206 @@ ...@@ -6,196 +6,206 @@
<!-- CSS for page --> <!-- CSS for page -->
<style> <style>
a.share:link {color:#000000;} a.share:link {
a.share:visited {color:#000000;} color: #000000;
a.share:hover {color:#000000;} }
a.share {text-decoration:none;}
a.share:visited {
a.button:link {color:#FFF;} color: #000000;
a.button:visited {color:#FFF;} }
a.button:hover {color:#FFF;}
a.share:hover {
legend { color: #000000;
font-size: inherit; }
}
a.share {
#button-container { text-decoration: none;
padding-bottom: 4px; }
padding-left: 6px;
padding-right: 6px; a.button:link {
padding-top: 4px; color: #FFF;
} }
#copy-button-{{url.short}} { a.button:visited {
border: none; color: #FFF;
background-color: #eeeeee; }
padding-bottom: 3px;
} a.button:hover {
color: #FFF;
#copy-button-{{url.short}}:focus { }
outline: none;
} legend {
font-size: inherit;
#clipboard-icon-{{url.short}} { }
font-size: 14px;
} #button-container {
padding-bottom: 4px;
#link-{{url.short}}:visited { padding-left: 6px;
color: #006633; padding-right: 6px;
} padding-top: 4px;
}
#link-container-{{url.short}} {
width: 400px; #copy-button-{{url.short}} {
} border: none;
background-color: #eeeeee;
.tooltip-inner { padding-bottom: 3px;
white-space: nowrap; }
max-width: none;
} #copy-button-{{url.short}}:focus {
outline: none;
}
#clipboard-icon-{{url.short}} {
font-size: 14px;
}
#link-{{url.short}}:visited {
color: #006633;
}
.tooltip-inner {
white-space: nowrap;
max-width: none;
}
</style> </style>
<!-- each link_box is a container of a bunch of elements --> <!-- each link_box is a container of a bunch of elements -->
<div class="container"> <div class="container">
<div class="row">
<!-- essentially the left side of the link_box --> <!-- left -->
<div class="col-md-8"> <div class="col-md-6">
<!-- what is the address? --> <!-- what is the address? -->
<h3>Go Address:</h3> <h3>Go Address:</h3>
<div id="link-container-{{url.short}}" class="input-group"> <div class="input-group">
<a id="link-{{url.short}}" class="form-control" href="{{domain}}{{url.short}}" target="_blank"> <a id="link-{{url.short}}" class="form-control" href="{{domain}}{{url.short}}" target="_blank">{{domain}}{{url.short}}</a>
{{domain}}{{url.short}} <div id="button-container" class="input-group-addon">
</a> <button id="copy-button-{{url.short}}" type="button" class="button btn btn-default btn-xs fa" role="button" data-clipboard-target="#link-{{url.short}}" title="Copy to Clipboard">
<div id="button-container" class="input-group-addon"> <i id="clipboard-icon-{{url.short}}" class="fa fa-clipboard fa-1g" aria-hidden="true"></i>
<button id="copy-button-{{url.short}}" type="button" class="button btn btn-default btn-xs fa" role="button" </button>
data-clipboard-target="#link-{{url.short}}" title="Copy to Clipboard">
<i id="clipboard-icon-{{url.short}}" class="fa fa-clipboard fa-1g" aria-hidden="true"></i>
</button>
</div>
</div> </div>
</div>
<!-- what are some details about the address? -->
<h3>Address Details:</h3>
<strong>Target URL:</strong>
<a href="{{url.target}}" target="_blank">{{url.target}}</a>
<br />
{% if url.owner == request.user.registereduser and request.user.registereduser.approved == True %}
<strong>Clicks:</strong> {{url.clicks}}
<br />
<br></br> <strong>QR Code Uses:</strong> {{url.qrclicks}}
<!-- what are some details about the address? -->
<h3>Address Details:</h3>
<strong>Target URL:</strong>
<br /> <br />
<a href="{{url.target}}" target="_blank">{{url.target}}</a> <strong>Social Media Clicks:</strong> {{url.socialclicks}}
<br /> <br />
{% if url.owner == request.user.registereduser and request.user.registereduser.approved == True %} <strong>Expires:</strong> {{url.expires|default_if_none:"Never"}}
<strong>Clicks:</strong> {{url.clicks}} <br></br>
<br />
<strong>QR Code Uses:</strong> {{url.qrclicks}} <!-- Delete Button -->
<br /> <a class="button btn btn-danger btn-sm" data-target="#deletionModal-{{url.short}}"
data-toggle="modal">
<i class="fa fa-trash-o fa-lg"></i> Delete
</a>
<!-- Edit Button -->
<a href="{{domain}}edit/{{url.short}}" class="button btn btn-info btn-sm">
<i class="fa fa-cog fa-lg"></i> Edit
</a>
</div>
<!-- right -->
<div class="col-md-6">
<h3>Share Address:</h3>
<!-- define the Go URL as `the_url` -->
{% with domain|add:url.short as the_url %}
<!-- some goofy code to use the qr lib and show the image -->
{% with the_url|add:"?qr" as qr_url%}
{% qr_from_text qr_url 's' %}
{% endwith %}
{% with the_url|add:"?social" as social_url %}
<!-- twitter -->
<a class="share" href="https://twitter.com/share?url={{ social_url }}" target="_blank" title="Share via Twitter">
<i class="fa fa-twitter-square fa-3x"></i>
</a>
<strong>Social Media Clicks:</strong> {{url.socialclicks}} <!-- facebook -->
<br /> <a class="share" href="https://www.facebook.com/share.php?u={{ social_url }}" target="_blank" title="Share via Facebook">
<i class="fa fa-facebook-square fa-3x"></i>
</a>
<strong>Expires:</strong> {{url.expires|default_if_none:"Never"}} <!-- g+ -->
<br></br> <a class="share" href="https://plus.google.com/share?url={{ social_url }}" target="_blank" title="Share via Google+">
<i class="fa fa-google-plus-square fa-3x"></i>
<!-- Delete Button -->
<a class="button btn btn-danger btn-sm" data-target="#deletionModal-{{url.short}}" data-toggle="modal">
<i class="fa fa-trash-o fa-lg"></i> Delete
</a> </a>
<!-- Edit Button --> <!-- linkedin -->
<a href="{{domain}}edit/{{url.short}}" class="button btn btn-info btn-sm"> <a class="share" href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{ social_url }}&amp;ro=false&amp;summary=&amp;source=" target="_blank" title="Share via LinkedIn">
<i class="fa fa-cog fa-lg"></i> Edit <i class="fa fa-linkedin-square fa-3x"></i>
</a> </a>
{% endwith %}
<!--Define Delete Modal--> <!-- list out qr downloads -->
<div id="deletionModal-{{url.short}}" class="modal fade" role="dialog" tabindex="-1"> {% with the_url|add:"?qr" as qr_url %}
<div class="modal-dialog"> <!-- spacing matters with <pre>, ignore the ugliness -->
<!-- Modal content--> <pre><strong>QR Downloads:</strong>
<div class="modal-content" style="background-color:#f5f5f5; border-radius: 7px"> <a href="https://chart.googleapis.com/chart?cht=qr&chs=268x268&chl={{ qr_url }}" target="_blank">Small (268x268)</a>
<div class="modal-header" style="text-align:center;"> <a href="https://chart.googleapis.com/chart?cht=qr&chs=383x383&chl={{ qr_url }}" target="_blank">Medium (383x383)</a>
<h4 class="modal-title text-center" <a href="https://chart.googleapis.com/chart?cht=qr&chs=547x547&chl={{ qr_url }}" target="_blank">Large (547x547)</a></pre>
style="font-weight:bold; font-size: 21px !important;"> {% endwith %}
Are you sure you would like to delete this link?</h4> {% endwith %}
<h6 style="font-weight:500; margin-top: 0px; margin-bottom: 0px;"> </div>
Deleting a link is permanent and can not be undone!</h6>
</div>
<div class="modal-body" style="padding-bottom: 80px">
<a type="button" class="btn btn-success btn-lg" style="border-width: 0px;float:left; width:49%; background-color: #A9B0AD; color: #ffffff; border-radius: 4px;" data-dismiss="modal">Cancel</a>
<a type="button" class="btn btn-danger btn-lg" href="{{domain}}delete/{{url.short}}" style="border-width: 0px; float:right; width:49%;background-color: #AC1D37; color: #ffffff; border-radius: 4px;">Delete</a>
</div>
</div>
</div>
</div>
{% endif %}
<br></br>
</div> </div>
<!-- essentially the right side of the box --> <!--Define Delete Modal-->
<div class="col-md-4"> <div id="deletionModal-{{url.short}}" class="modal fade" role="dialog" tabindex="-1">
<!-- some goofy code to use the qr lib and show the image --> <div class="modal-dialog">
{% with domain|add:url.short as the_url %} <!-- Modal content-->
{% with the_url|add:"?qr" as qr_url%} <div class="modal-content" style="background-color:#f5f5f5; border-radius: 7px">
{% qr_from_text qr_url 's' %} <div class="modal-header" style="text-align:center;">
{% endwith %} <h4 class="modal-title text-center" style="font-weight:bold; font-size: 21px !important;">
Are you sure you would like to delete this link?</h4>
{% with the_url|add:"?social" as social_url %} <h6 style="font-weight:500; margin-top: 0px; margin-bottom: 0px;">
<!-- twitter --> Deleting a link is permanent and can not be undone!</h6>
<a class="share" href="https://twitter.com/share?url={{ social_url }}" target="_blank" title="Share via Twitter"> </div>
<i class="fa fa-twitter-square fa-3x"></i> <div class="modal-body" style="padding-bottom: 80px">
</a> <a type="button" class="btn btn-success btn-lg" style="border-width: 0px;float:left; width:49%; background-color: #A9B0AD; color: #ffffff; border-radius: 4px;"
data-dismiss="modal">Cancel</a>
<!-- facebook --> <a type="button" class="btn btn-danger btn-lg" href="{{domain}}delete/{{url.short}}"
<a class="share" href="https://www.facebook.com/share.php?u={{ social_url }}" target="_blank" title="Share via Facebook"> style="border-width: 0px; float:right; width:49%;background-color: #AC1D37; color: #ffffff; border-radius: 4px;">Delete</a>
<i class="fa fa-facebook-square fa-3x"></i> </div>
</a> </div>
</div>
<!-- g+ -->
<a class="share" href="https://plus.google.com/share?url={{ social_url }}" target="_blank" title="Share via Google+">
<i class="fa fa-google-plus-square fa-3x"></i>
</a>
<!-- linkedin -->
<a class="share" href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{ social_url }}&amp;ro=false&amp;summary=&amp;source=" target="_blank" title="Share via LinkedIn">
<i class="fa fa-linkedin-square fa-3x"></i>
</a>
{% endwith %}
<!-- list out qr downloads -->
{% with the_url|add:"?qr" as qr_url %}
<!-- spacing matters with <pre>, ignore the ugliness -->
<pre><strong>QR Downloads:</strong>
<a href="https://chart.googleapis.com/chart?cht=qr&chs=268x268&chl={{ qr_url }}" target="_blank">Small (268x268)</a>
<a href="https://chart.googleapis.com/chart?cht=qr&chs=383x383&chl={{ qr_url }}" target="_blank">Medium (383x383)</a>
<a href="https://chart.googleapis.com/chart?cht=qr&chs=547x547&chl={{ qr_url }}" target="_blank">Large (547x547)</a></pre>
{% endwith %}
{% endwith %}
</div> </div>
{% else %}
{% endif %}
<br></br>
</div> </div>
<!-- some inline js for the clipboard hoving text -->
<script>
$(function() {
var option = {
'trigger': 'hover'
};
$('[data-toggle="popover"]').popover(option)
})
</script>
<!-- script for copying text an displaying a tooltip --> <!-- script for copying text an displaying a tooltip -->
<script> <script>
var clipboard = new Clipboard('#copy-button-{{url.short}}'); // <!-- some inline js for the clipboard hoving text -->
$(function () {
var option = {
'trigger': 'hover'
};
$('[data-toggle="popover"]').popover(option)
})
var clipboard = new Clipboard('#copy-button-{{url.short}}');
$('#copy-button-{{url.short}}').tooltip({ $('#copy-button-{{url.short}}').tooltip({
trigger: 'hover', trigger: 'hover',
placement: 'bottom' placement: 'bottom'
}); });
$('#copy-button-{{url.short}}').on('hidden.bs.tooltip', function () { $('#copy-button-{{url.short}}').on('hidden.bs.tooltip', function () {
$('#copy-button-{{url.short}}').attr('data-original-title', 'Copy to Clipboard'); $('#copy-button-{{url.short}}').attr('data-original-title', 'Copy to Clipboard');
}); });
clipboard.on('success', function(e) { clipboard.on('success', function (e) {
e.clearSelection(); e.clearSelection();
$('#copy-button-{{url.short}}').attr('data-original-title', 'Copied!').tooltip('show'); $('#copy-button-{{url.short}}').attr('data-original-title', 'Copied!').tooltip('show');
}); });
</script> </script>
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment