Skip to content

GitLab

go
go
Commit 8c33f886 authored by David Haynes's avatar David Haynes 🙆
Browse files
Options

Merge branch '114-link-box-mobile-fix' into '2.2-dev' 

Refactor link_box to make better use of bootstrap

See merge request !97
parents 000c41c7 10253b1b
Pipeline #1313 passed with stages
      in 3 minutes and 21 seconds
      Hide whitespace changes
      Inline Side-by-side
      Showing with 171 additions and 161 deletions
      go/go/templates/link_box.html
      View file @ 8c33f886
      ......@@ -6,196 +6,206 @@
      <!-- 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;
      }
      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;
      }
      </style>
      <!-- each link_box is a container of a bunch of elements -->
      <div class="container">
      <!-- essentially the left side of the link_box -->
      <div class="col-md-8">
      <!-- what is the address? -->
      <h3>Go Address:</h3>
      <div id="link-container-{{url.short}}" 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>
      </div>
      <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>
      </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>
      <!-- what are some details about the address? -->
      <h3>Address Details:</h3>
      <strong>Target URL:</strong>
      <strong>QR Code Uses:</strong> {{url.qrclicks}}
      <br />
      <a href="{{url.target}}" target="_blank">{{url.target}}</a>
      <strong>Social Media Clicks:</strong> {{url.socialclicks}}
      <br />
      {% if url.owner == request.user.registereduser and request.user.registereduser.approved == True %}
      <strong>Clicks:</strong> {{url.clicks}}
      <br />
      <strong>Expires:</strong> {{url.expires|default_if_none:"Never"}}
      <br></br>
      <strong>QR Code Uses:</strong> {{url.qrclicks}}
      <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>
      </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}}
      <br />
      <!-- 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>
      <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
      <!-- 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>
      <!-- Edit Button -->
      <a href="{{domain}}edit/{{url.short}}" class="button btn btn-info btn-sm">
      <i class="fa fa-cog fa-lg"></i> Edit
      <!-- 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 %}
      <!--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>
      </div>
      {% endif %}
      <br></br>
      <!-- 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>
      <!-- essentially the right side of the box -->
      <div class="col-md-4">
      <!-- some goofy code to use the qr lib and show the image -->
      {% 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 %}
      <!-- 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 %}
      <!-- 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 %}
      <!--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>
      </div>
      {% else %}
      {% endif %}
      <br></br>
      </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>
      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',
      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');
      });
      });
      clipboard.on('success', function(e) {
      clipboard.on('success', function (e) {
      e.clearSelection();
      $('#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