link_box.html 6.82 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
<!-- CSS for page -->
<style>
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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69
  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;
  }
   
  .tooltip-inner {
    white-space: nowrap;
    max-width: none;
  }
David Haynes's avatar
David Haynes committed
70
</style>
Robert Hitt's avatar
Robert Hitt committed
71

David Haynes's avatar
David Haynes committed
72
<!-- each link_box is a container of a bunch of elements -->
73
<div class="container">
74 75 76 77 78 79 80 81 82 83 84
  <div class="row">
    <!-- left -->
    <div class="col-md-6">
      <!-- what is the address? -->
      <h3>Go Address:</h3>
      <div class="input-group">
        <a id="link-{{url.short}}" class="form-control" href="{{domain}}{{url.short}}" target="_blank">{{domain}}{{url.short}}</a>
        <div id="button-container" class="input-group-addon">
          <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">
            <i id="clipboard-icon-{{url.short}}" class="fa fa-clipboard fa-1g" aria-hidden="true"></i>
          </button>
85
        </div>
86 87 88 89 90 91 92 93 94 95
      </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 />
96

97
        <strong>QR Code Uses:</strong> {{url.qrclicks}}
David Haynes's avatar
David Haynes committed
98
        <br />
David Haynes's avatar
David Haynes committed
99

100
        <strong>Social Media Clicks:</strong> {{url.socialclicks}}
David Haynes's avatar
David Haynes committed
101
        <br />
David Haynes's avatar
David Haynes committed
102

103 104
        <strong>Expires:</strong> {{url.expires|default_if_none:"Never"}}
        <br></br>
David Haynes's avatar
David Haynes committed
105

106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131
        <!-- 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>

        <!-- 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>
David Haynes's avatar
David Haynes committed
132

133 134 135 136
            <!-- facebook -->
            <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>
137

138 139 140
            <!-- 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>
141
            </a>
142

143 144 145
            <!-- 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>
146
            </a>
147
          {% endwith %}
David Haynes's avatar
David Haynes committed
148

149 150 151 152 153 154 155 156 157 158
          <!-- 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>
159 160
    </div>

161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179
    <!--Define Delete Modal-->
    <div id="deletionModal-{{url.short}}" class="modal fade" role="dialog" tabindex="-1">
      <div class="modal-dialog">
        <!-- 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;">
              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>
180
    </div>
181 182 183
  {% else %}
  {% endif %}  
  <br></br>
184
</div>
185

Robert Hitt's avatar
Robert Hitt committed
186 187
<!-- script for copying text an displaying a tooltip -->
<script>
188 189 190 191 192 193 194 195 196
  // <!-- 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}}');
Robert Hitt's avatar
Robert Hitt committed
197

198
  $('#copy-button-{{url.short}}').tooltip({
Robert Hitt's avatar
Robert Hitt committed
199 200
    trigger: 'hover',
    placement: 'bottom'
201
  });
Robert Hitt's avatar
Robert Hitt committed
202

203
  $('#copy-button-{{url.short}}').on('hidden.bs.tooltip', function () {
Robert Hitt's avatar
Robert Hitt committed
204
    $('#copy-button-{{url.short}}').attr('data-original-title', 'Copy to Clipboard');
205
  });
Robert Hitt's avatar
Robert Hitt committed
206

207
  clipboard.on('success', function (e) {
Robert Hitt's avatar
Robert Hitt committed
208 209
    e.clearSelection();
    $('#copy-button-{{url.short}}').attr('data-original-title', 'Copied!').tooltip('show');
210 211
  });
</script>