dashboard/src/templates/dashboard/lab_list.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 {% endblock %}
   8
   9 {% block content %}
  10     <style>
  11      .grid-item-container {
  12          padding: 10px;
  13      }
  14
  15          .grid-item {
  16              cursor: pointer;
  17              border:2px;
  18              border-style:none;
  19              border-color:black;
  20              border-radius: 5px;
  21              padding: 7px;
  22              color: inherit;
  23
  24              box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.75);
  25              transition-property: box-shadow, background-color;
  26              transition-duration: .2s;
  27          }
  28
  29      .grid-item-text
  30      {
  31          color: inherit;
  32          text-decoration: none;
  33      }
  34      .grid-item-text:hover
  35      {
  36          color: #121212;
  37          text-decoration: none;
  38      }
  39
  40      .grid-item:hover {
  41          box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
  42          transition-property: box-shadow;
  43          transition-duration: .2s;
  44
  45      }
  46
  47      .selected_node {
  48          box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
  49          background-color: #CCECD7;
  50          transition-property: background-color;
  51          transition-duration: .2s;
  52      }
  53
  54      .disabled_node {
  55          cursor: not-allowed;
  56          background-color: #EFEFEF;
  57          box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.75);
  58          transition-property: box-shadow;
  59          transition-duration: .2s;
  60      }
  61
  62      .disabled_node:hover {
  63          box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.75);
  64      }
  65
  66     </style>
  67     <div class="container-fluid">
  68     <div class="row">
  69
  70     <div class="listgrid">
  71         {% for lab in labs %}
  72         <div class="grid-item-container col-lg-2 col-mid-4 col-sm-6">
  73
  74             <a href="{{ lab.name }}" class="grid-item-text">
  75
  76             <div class="grid-item">
  77             <h4 class="grid-item-header">{{ lab.name }}</h4>
  78             <p class="grid-item-description">{{ lab.description }}</p>
  79             </div>
  80             </a>
  81         </div>
  82         {% endfor %}
  83     </div>
  84     </div>
  85     </div>
  86
  87 {% endblock content %}