dashboard/src/templates/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
  22 <style media="screen">
  23
  24   @media screen and (min-width: 0px) and (max-width: 767px)
  25   {
  26
  27   .grid-item
  28   {
  29     width: 100%;
  30   }
  31 }
  32   @media screen and (min-width: 768px) and (max-width: 1200px) {
  33     .grid-item {
  34       width: 50%;
  35     }
  36
  37   }
  38
  39   @media screen and (min-width: 1201px) and (max-width: 2000px) {
  40     .grid-item {
  41       width: 33%;
  42     }
  43   }
  44   @media screen and (min-width: 2001px) {
  45     .grid-item {
  46       width: 25%;
  47     }
  48
  49   }
  50   .grid-item-content {
  51   height: 100px;
  52   background: #D26;
  53   border: 2px solid hsla(0, 0%, 0%, 0.5);
  54   border-radius: 5px;
  55 }
  56
  57 .grid-item-content--height2 { height: 200px; }
  58 </style>
  59
  60 <div class="container-fluid">
  61   <!-- add extra container element for Masonry -->
  62   <div class="grid">
  63     {% for host in hosts %}
  64     <div class="grid-item col-xs-4">
  65         <p>stub for current PR</p>
  66     </div>
  67     {% endfor %}
  68     </div>
  69 </div>
  70
  71 {% endblock content %}