link_box.html 7.38 KB
Newer Older
David Haynes's avatar
David Haynes committed
1 2
<!-- load in go templatetags -->
{% load go_extras %}
3

David Haynes's avatar
David Haynes committed
4 5
<!-- load in qr code lib -->
{% load qr_tags %}
Chris Reffett's avatar
Chris Reffett committed
6

Robert Hitt's avatar
Robert Hitt committed
7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
<!-- CSS for page -->
<style>
    a.share:link {color:#000000;}     
    a.share:visited {color:#000000;}     
    a.share:hover {color:#000000;}     
    a.share {text-decoration:none;}

    a.button:link {color:#FFF;}
    a.button:visited {color:#FFF;}
    a.button:hover {color:#FFF;}

    legend {
        font-size: inherit;
    }

    #button-container {
        padding-bottom: 4px;
        padding-left: 6px;
        padding-right: 6px;
        padding-top: 4px;
    }

    #copy-button-{{url.short}} {
        border: none;
        background-color: #eeeeee;
        padding-bottom: 3px;
    }

    #copy-button-{{url.short}}:focus {
        outline: none;
    }

    #clipboard-icon-{{url.short}} {
        font-size: 14px;
    }

    #link-{{url.short}}:visited {
        color: #006633;
    }

    #link-container-{{url.short}} {
        width: 400px;
    }

    .tooltip-inner {
        white-space: nowrap;
        max-width: none;
    }
David Haynes's avatar
David Haynes committed
55
</style>
Robert Hitt's avatar
Robert Hitt committed
56

David Haynes's avatar
David Haynes committed
57
<!-- each link_box is a container of a bunch of elements -->
58
<div class="container">
David Haynes's avatar
David Haynes committed
59

David Haynes's avatar
David Haynes committed
60
    <!-- essentially the left side of the link_box -->
61
    <div class="col-md-8">
David Haynes's avatar
David Haynes committed
62
        <!-- what is the address? -->
63
        <h3>Go Address:</h3>
David Haynes's avatar
David Haynes committed
64
        <div id="link-container-{{url.short}}" class="input-group">
65
            <a id="link-{{url.short}}" class="form-control" href="{{domain}}{{url.short}}" target="_blank">
66 67 68
                {{domain}}{{url.short}}
            </a>
            <div id="button-container" class="input-group-addon">
Robert Hitt's avatar
Robert Hitt committed
69
                <button id="copy-button-{{url.short}}" type="button" class="button btn btn-default btn-xs fa" role="button"
70
                        data-clipboard-target="#link-{{url.short}}" title="Copy to Clipboard">
Robert Hitt's avatar
Robert Hitt committed
71
                    <i id="clipboard-icon-{{url.short}}" class="fa fa-clipboard fa-1g" aria-hidden="true"></i>
72 73 74 75
                </button>
            </div>
        </div>

76
        <br></br>
Chris Reffett's avatar
Chris Reffett committed
77

David Haynes's avatar
David Haynes committed
78
        <!-- what are some details about the address? -->
79 80
        <h3>Address Details:</h3>
        <strong>Target URL:</strong>
David Haynes's avatar
David Haynes committed
81
        <br />
David Haynes's avatar
David Haynes committed
82

83
        <a href="{{url.target}}" target="_blank">{{url.target}}</a>
David Haynes's avatar
David Haynes committed
84
        <br />
David Haynes's avatar
David Haynes committed
85

86 87 88
        {% if url.owner == request.user.registereduser and request.user.registereduser.approved == True %}
            <strong>Clicks:</strong> {{url.clicks}}
            <br />
David Haynes's avatar
David Haynes committed
89

90 91
            <strong>QR Code Uses:</strong> {{url.qrclicks}}
            <br />
David Haynes's avatar
David Haynes committed
92

93 94 95 96 97
            <strong>Social Media Clicks:</strong> {{url.socialclicks}}
            <br />

            <strong>Expires:</strong> {{url.expires|default_if_none:"Never"}}
            <br></br>
David Haynes's avatar
David Haynes committed
98
            
Zosman's avatar
Zosman committed
99
            <!-- Delete Button  -->
100
            <a class="button btn btn-danger btn-sm" data-target="#deletionModal-{{url.short}}" data-toggle="modal">
101 102
                <i class="fa fa-trash-o fa-lg"></i> Delete
            </a>
103

David Haynes's avatar
David Haynes committed
104
            <!-- Edit Button -->
105
            <a href="{{domain}}edit/{{url.short}}" class="button btn btn-info btn-sm">
David Haynes's avatar
David Haynes committed
106
                <i class="fa fa-cog fa-lg"></i> Edit
107
            </a>
David Haynes's avatar
David Haynes committed
108

Zosman's avatar
Zosman committed
109
            <!--Define Delete Modal-->
110
            <div id="deletionModal-{{url.short}}" class="modal fade" role="dialog" tabindex="-1">
111
                <div class="modal-dialog">
David Haynes's avatar
David Haynes committed
112 113 114 115 116 117 118
                    <!-- Modal content-->
                    <div class="modal-content" style="background-color:#f5f5f5; border-radius: 7px">
                        <div class="modal-header" style="text-align:center;">
                            <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>
                            <h6 style="font-weight:500; margin-top: 0px; margin-bottom: 0px;">
Robert Hitt's avatar
Robert Hitt committed
119
                            Deleting a link is permanent and can not be undone!</h6>
David Haynes's avatar
David Haynes committed
120 121 122 123 124 125 126 127
                        </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>
128 129 130 131
        {% endif %}
        <br></br>
    </div>

David Haynes's avatar
David Haynes committed
132
    <!-- essentially the right side of the box -->
133
    <div class="col-md-4">
David Haynes's avatar
David Haynes committed
134
        <!-- some goofy code to use the qr lib and show the image -->
135 136 137 138 139 140
        {% with domain|add:url.short as the_url %}
            {% with the_url|add:"?qr" as qr_url%}
              {% qr_from_text qr_url 's' %}
            {% endwith %}

            {% with the_url|add:"?social" as social_url %}
David Haynes's avatar
David Haynes committed
141
                <!-- twitter -->
142
                <a class="share" href="https://twitter.com/share?url={{ social_url }}" target="_blank" title="Share via Twitter">
David Haynes's avatar
David Haynes committed
143 144 145 146
                    <i class="fa fa-twitter-square fa-3x"></i>
                </a>

                <!-- facebook -->
147
                <a class="share" href="https://www.facebook.com/share.php?u={{ social_url }}" target="_blank" title="Share via Facebook">
David Haynes's avatar
David Haynes committed
148 149 150 151 152 153 154 155 156
                    <i class="fa fa-facebook-square fa-3x"></i>
                </a>

                <!-- 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 -->
157
                <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">
158
                <i class="fa fa-linkedin-square fa-3x"></i>
David Haynes's avatar
David Haynes committed
159
                </a>
160 161
            {% endwith %}

David Haynes's avatar
David Haynes committed
162
            <!-- list out qr downloads -->
163
            {% with the_url|add:"?qr" as qr_url %}
David Haynes's avatar
David Haynes committed
164 165
            <!-- spacing matters with <pre>, ignore the ugliness -->
                <pre><strong>QR Downloads:</strong>
Michael Bailey's avatar
Michael Bailey committed
166 167
        <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>
David Haynes's avatar
David Haynes committed
168
        <a href="https://chart.googleapis.com/chart?cht=qr&chs=547x547&chl={{ qr_url }}" target="_blank">Large (547x547)</a></pre>
169 170
            {% endwith %}
        {% endwith %}
171
    </div>
172
</div>
173

David Haynes's avatar
David Haynes committed
174
<!-- some inline js for the clipboard hoving text -->
175
<script>
176 177 178 179 180 181
    $(function() {
        var option = {
            'trigger': 'hover'
        };
        $('[data-toggle="popover"]').popover(option)
    })
182
</script>
Robert Hitt's avatar
Robert Hitt committed
183 184 185 186 187 188 189 190 191 192 193

<!-- script for copying text an displaying a tooltip -->
<script>
var clipboard = new Clipboard('#copy-button-{{url.short}}');

$('#copy-button-{{url.short}}').tooltip({
    trigger: 'hover',
    placement: 'bottom'
});

$('#copy-button-{{url.short}}').on('hidden.bs.tooltip', function () {
Robert Hitt's avatar
Robert Hitt committed
194
    $('#copy-button-{{url.short}}').attr('data-original-title', 'Copy to Clipboard');
Robert Hitt's avatar
Robert Hitt committed
195 196 197 198 199 200 201
});

clipboard.on('success', function(e) {
    e.clearSelection();
    $('#copy-button-{{url.short}}').attr('data-original-title', 'Copied!').tooltip('show');
});
</script>