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

Robert Hitt's avatar
Robert Hitt committed
4 5
<!-- CSS for page -->
<style>
6 7 8
  a.share:link {
    color: #000000;
  }
David Haynes's avatar
David Haynes committed
9

10 11 12
  a.share:visited {
    color: #000000;
  }
David Haynes's avatar
David Haynes committed
13

14 15 16
  a.share:hover {
    color: #000000;
  }
David Haynes's avatar
David Haynes committed
17

18 19 20
  a.share {
    text-decoration: none;
  }
David Haynes's avatar
David Haynes committed
21

22 23 24
  a.button:link {
    color: #FFF;
  }
David Haynes's avatar
David Haynes committed
25

26 27 28
  a.button:visited {
    color: #FFF;
  }
David Haynes's avatar
David Haynes committed
29

30 31 32
  a.button:hover {
    color: #FFF;
  }
David Haynes's avatar
David Haynes committed
33

34 35 36
  legend {
    font-size: inherit;
  }
David Haynes's avatar
David Haynes committed
37

38 39 40 41 42 43
  #button-container {
    padding-bottom: 4px;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 4px;
  }
David Haynes's avatar
David Haynes committed
44 45 46 47 48 49 50 51

  #copy-button- {
      {
      url.short
    }
  }

    {
52 53 54 55
    border: none;
    background-color: #eeeeee;
    padding-bottom: 3px;
  }
David Haynes's avatar
David Haynes committed
56 57 58 59 60 61 62 63

  #copy-button- {
      {
      url.short
    }
  }

  :focus {
64 65
    outline: none;
  }
David Haynes's avatar
David Haynes committed
66 67 68 69 70 71 72 73

  #clipboard-icon- {
      {
      url.short
    }
  }

    {
74 75
    font-size: 14px;
  }
David Haynes's avatar
David Haynes committed
76 77 78 79 80 81 82 83

  #link- {
      {
      url.short
    }
  }

  :visited {
84 85
    color: #006633;
  }
David Haynes's avatar
David Haynes committed
86

87 88 89 90
  .tooltip-inner {
    white-space: nowrap;
    max-width: none;
  }
David Haynes's avatar
David Haynes committed
91
</style>
Robert Hitt's avatar
Robert Hitt committed
92

David Haynes's avatar
David Haynes committed
93
<!-- each link_box is a container of a bunch of elements -->
94
<div class="container">
95 96 97 98 99 100 101 102
  <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">
David Haynes's avatar
David Haynes committed
103 104
          <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">
105 106
            <i id="clipboard-icon-{{url.short}}" class="fa fa-clipboard fa-1g" aria-hidden="true"></i>
          </button>
107
        </div>
108 109 110 111 112 113
      </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>
David Haynes's avatar
David Haynes committed
114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135
      <br /> {% if url.owner == request.user.registereduser and request.user.registereduser.approved
      == True %}
      <strong>Clicks:</strong> {{url.clicks}}
      <br />
      <br />

      <strong>Social Media Clicks:</strong> {{url.socialclicks}}
      <br />

      <strong>Expires:</strong> {{url.expires|default_if_none:"Never"}}
      <br></br>

      <!-- 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>
136
    </div>
David Haynes's avatar
David Haynes committed
137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166
    <!-- 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 %} {% 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>

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

      <!-- 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 %}
167

David Haynes's avatar
David Haynes committed
168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186
    </div>
  </div>

  <!--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>
187 188
        </div>
      </div>
189
    </div>
David Haynes's avatar
David Haynes committed
190
  </div>
191
  <br></br>
192
</div>
193

Robert Hitt's avatar
Robert Hitt committed
194 195
<!-- script for copying text an displaying a tooltip -->
<script>
196 197 198 199 200 201 202 203 204
  // <!-- 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
205

206
  $('#copy-button-{{url.short}}').tooltip({
Robert Hitt's avatar
Robert Hitt committed
207 208
    trigger: 'hover',
    placement: 'bottom'
209
  });
Robert Hitt's avatar
Robert Hitt committed
210

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

215
  clipboard.on('success', function (e) {
Robert Hitt's avatar
Robert Hitt committed
216 217
    e.clearSelection();
    $('#copy-button-{{url.short}}').attr('data-original-title', 'Copied!').tooltip('show');
218
  });
David Haynes's avatar
David Haynes committed
219
</script>