src/templates/base/dashboard/host_profile_detail.html

   1 {% extends "base.html" %}
   2 {% load staticfiles %}
   3
   4 {% block extrahead %}
   5     {{block.super}}
   6     <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=yaml"></script>
   7 <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
   8
   9 {% endblock %}
  10
  11 {% block content %}
  12 <script type="text/javascript">
  13     $('.grid').masonry(
  14       {
  15         itemSelector: '.grid-item',
  16         columnWidth: '.grid-sizer',
  17         percentPosition: true
  18       }
  19     );
  20 </script>
  21 <style media="screen">
  22
  23   @media screen and (min-width: 0px) and (max-width: 767px)
  24   {
  25
  26   .grid-item
  27   {
  28     width: 100%;
  29   }
  30 }
  31   @media screen and (min-width: 768px) and (max-width: 1200px) {
  32     .grid-item {
  33       width: 50%;
  34     }
  35
  36   }
  37
  38   @media screen and (min-width: 1201px) and (max-width: 2000px) {
  39     .grid-item {
  40       width: 33%;
  41     }
  42   }
  43   @media screen and (min-width: 2001px) {
  44     .grid-item {
  45       width: 25%;
  46     }
  47
  48   }
  49   .grid-item-content {
  50   height: 100px;
  51   background: #D26;
  52   border: 2px solid hsla(0, 0%, 0%, 0.5);
  53   border-radius: 5px;
  54 }
  55
  56 .grid-item-content--height2 { height: 200px; }
  57 </style>
  58
  59 <div class="container-fluid">
  60   <!-- add extra container element for Masonry -->
  61   <div class="grid">
  62     {% for host in hosts %}
  63     <div class="grid-item col-xs-4">
  64         <p>stub for current PR</p>
  65     </div>
  66     {% endfor %}
  67     </div>
  68 </div>
  69
  70 {% endblock content %}