diff options
Diffstat (limited to 'src/templates/dashboard')
-rw-r--r-- | src/templates/dashboard/lab_detail.html | 1 | ||||
-rw-r--r-- | src/templates/dashboard/lab_list.html | 103 | ||||
-rw-r--r-- | src/templates/dashboard/multiple_select_filter_widget.html | 60 |
3 files changed, 74 insertions, 90 deletions
diff --git a/src/templates/dashboard/lab_detail.html b/src/templates/dashboard/lab_detail.html index 4c06245..a30ac9e 100644 --- a/src/templates/dashboard/lab_detail.html +++ b/src/templates/dashboard/lab_detail.html @@ -62,7 +62,6 @@ <tr> <td>{{profile.name}}</td> <td>{{profile.description}}</td> - <td>{{profile.labs}}</td> </tr> {% endfor %} </table> diff --git a/src/templates/dashboard/lab_list.html b/src/templates/dashboard/lab_list.html index a86f7f4..c459dd9 100644 --- a/src/templates/dashboard/lab_list.html +++ b/src/templates/dashboard/lab_list.html @@ -1,87 +1,26 @@ {% extends "base.html" %} -{% load staticfiles %} - -{% block extrahead %} - {{block.super}} - <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=yaml"></script> -{% endblock %} - {% block content %} - <style> - .grid-item-container { - padding: 10px; - } - - .grid-item { - cursor: pointer; - border:2px; - border-style:none; - border-color:black; - border-radius: 5px; - padding: 7px; - color: inherit; - - box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.75); - transition-property: box-shadow, background-color; - transition-duration: .2s; - } - - .grid-item-text - { - color: inherit; - text-decoration: none; - } - .grid-item-text:hover - { - color: #121212; - text-decoration: none; - } - - .grid-item:hover { - box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75); - transition-property: box-shadow; - transition-duration: .2s; - - } - - .selected_node { - box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75); - background-color: #CCECD7; - transition-property: background-color; - transition-duration: .2s; - } - - .disabled_node { - cursor: not-allowed; - background-color: #EFEFEF; - box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.75); - transition-property: box-shadow; - transition-duration: .2s; - } - - .disabled_node:hover { - box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.75); - } - - </style> - <div class="container-fluid"> - <div class="row"> - - <div class="listgrid"> - {% for lab in labs %} - <div class="grid-item-container col-lg-2 col-mid-4 col-sm-6"> - - <a href="{{ lab.name }}" class="grid-item-text"> - - <div class="grid-item"> - <h4 class="grid-item-header">{{ lab.name }}</h4> - <p class="grid-item-description">{{ lab.description }}</p> + <h2>Labs</h2> + <div class="card_container"> + {% for lab in labs %} + <div class="detail_card"> + <div> + <h3>{{lab.name}}</h3> + <ul class="list-group"> + <li class="list-group-item">name: {{lab.name}}</li> + <li class="list-group-item">description: {{lab.description}}</li> + <li class="list-group-item">location: {{lab.location}}</li> + {% if lab.status == 0 %} + <li class="list-group-item">status: Up</li> + {% elif lab.status == 100 %} + <li class="list-group-item">status: Down for Maintenance</li> + {% elif lab.status == 200 %} + <li class="list-group-item">status: Down</li> + {% endif %} + </ul> </div> - </a> + <a class="btn btn-primary" href="/lab/{{lab.name}}/">Details</a> </div> - {% endfor %} - </div> + {% endfor %} </div> - </div> - -{% endblock content %} +{% endblock %} diff --git a/src/templates/dashboard/multiple_select_filter_widget.html b/src/templates/dashboard/multiple_select_filter_widget.html index 4e47ce0..628fd95 100644 --- a/src/templates/dashboard/multiple_select_filter_widget.html +++ b/src/templates/dashboard/multiple_select_filter_widget.html @@ -6,12 +6,16 @@ } .class_grid_wrapper { border: 0px; - border-left: 1px; + text-align: center; border-right: 1px; border-style: solid; border-color: grey; - text-align: center; } + +.class_grid_wrapper:last-child { + border-right: none; +} + .grid_wrapper { display: grid; grid-template-columns: 1fr 1fr; @@ -67,6 +71,45 @@ margin-top: 10px; } +#dropdown_wrapper > div > h5 { + margin: 12px; + display: inline-block; + vertical-align: middle; +} + +#dropdown_wrapper > div > button { + padding: 7px; + margin: 2px; + float: right; + width: 80px; +} +#dropdown_wrapper > div > input { + padding: 7px; + margin: 2px; + float: right; + width: 300px; + width: calc(100% - 240px); +} + +#dropdown_wrapper > div { + border:2px; + border-style:none; + border-color:black; + border-radius: 5px; + margin:20px; + padding: 2px; + box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.75); + transition-property: box-shadow, background-color; + transition-duration: .2s; + display: inline-block; + vertical-align: middle; +} + +#dropdown_wrapper { + display: grid; + grid-template-columns: 3fr 5fr; +} + </style> <input name="filter_field" id="filter_field" type="hidden"/> <div id="grid_wrapper" class="grid_wrapper"> @@ -305,9 +348,14 @@ function add_item_prepopulate(node, prepopulate){ div.id = "dropdown_" + dropdown_count; dropdown_count++; var label = document.createElement("H5"); - label.style['display'] = 'inline'; label.appendChild(document.createTextNode(node['name'])); div.appendChild(label); + button = document.createElement("BUTTON"); + button.type = "button"; + button.appendChild(document.createTextNode("Remove")); + button.classList.add("btn-danger"); + button.classList.add("btn"); + div.appendChild(button); for(var i=0; i<node['forms'].length; i++){ form = node['forms'][i]; var input = document.createElement("INPUT"); @@ -330,14 +378,12 @@ function add_item_prepopulate(node, prepopulate){ hiddenInput.name = "class"; hiddenInput.value = node['id']; div.appendChild(hiddenInput); - button = document.createElement("BUTTON"); button.onclick = function(){ remove_dropdown(div.id); } - button.type = "button"; - button.appendChild(document.createTextNode("Remove")); - div.appendChild(button); document.getElementById("dropdown_wrapper").appendChild(div); + var linebreak = document.createElement("BR"); + document.getElementById("dropdown_wrapper").appendChild(linebreak); updateObjectResult(div); return div; } |