Merge "Make host entries prettier on Define Hardware step"

diff --combined dashboard/src/templates/dashboard/multiple_select_filter_widget.html
index 8b09ec1,a0cc15d..628fd95
--- 1/dashboard/src/templates/dashboard/multiple_select_filter_widget.html
--- 2/dashboard/src/templates/dashboard/multiple_select_filter_widget.html
+++ b/dashboard/src/templates/dashboard/multiple_select_filter_widget.html
@@@ -6,16 -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;
@@@ -71,6 -67,45 +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">
@@@ -309,9 -344,14 +348,14 @@@ function add_item_prepopulate(node, pre
      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");
@@@ -334,14 -374,12 +378,12 @@@
      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;
  }