}
.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;
}
.grid-item {
cursor: pointer;
- border:2px;
- border-style:none;
- border-color:black;
+ border:1px solid #cccccc;
border-radius: 5px;
margin:20px;
height: 200px;
padding: 7px;
- box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.75);
transition-property: box-shadow, background-color;
transition-duration: .2s;
}
.grid-item:hover {
- box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
+ box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.45);
transition-property: box-shadow;
transition-duration: .2s;
}
.selected_node {
- box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
- background-color: #CCECD7;
+ box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.45);
+ background-color: #fff;
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;
+ border: 1px solid #ccc;
}
.disabled_node:hover {
- box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.75);
}
.cleared_node {
<input name="filter_field" id="filter_field" type="hidden"/>
<div id="grid_wrapper" class="grid_wrapper">
{% for object_class, object_list in filter_objects %}
-<div class="class_grid_wrapper">
- <div style="display:inline-block;margin:auto">
- <h4>{{object_class}}</h4>
- </div>
- <div id="{{object_class}}" class="object_class_wrapper">
- {% for obj in object_list %}
- <div id="object_parent">
- <div id="{{ obj.id|default:'not_provided' }}" class="grid-item">
- <p class="grid-item-header">{{obj.name}}</p>
- <p class="grid-item-description">{{obj.description}}</p>
- <button type="button" class="btn btn-success grid-item-select-btn" onclick="processClick('{{obj.id}}', {% if obj.multiple %}true{% else %}false{% endif %});">{% if obj.multiple %}Add{% else %}Select{% endif %}</button>
+ <div class="class_grid_wrapper">
+ <div style="display:inline-block;margin:auto">
+ <h4>{{object_class}}</h4>
+ </div>
+ <div id="{{object_class}}" class="object_class_wrapper">
+ {% for obj in object_list %}
+ <div id="{{ obj.id|default:'not_provided' }}" class="grid-item">
+ <p class="grid-item-header">{{obj.name}}</p>
+ <p class="grid-item-description">{{obj.description}}</p>
+ <button type="button" class="btn btn-success grid-item-select-btn" onclick="processClick(
+ '{{obj.id}}',
+ {% if obj.multiple %}true
+ {% else %}false
+ {% endif %});">{% if obj.multiple %}Add{% else %}Select{% endif %}</button>
+ </div>
+ <input type="hidden" name="{{obj.id}}_selected" value="false"/>
+ {% endfor %}
</div>
- <input type="hidden" name="{{obj.id}}_selected" value="false"/>
- </div>
- {% endfor %}
- </div>
</div>
{% endfor %}
</div>
//clears grey background of everything
}
- toCheck = [];
- toCheck.push(root);
+ toCheck = [root];
while(toCheck.length > 0){
node = toCheck.pop();
if(node['selected']) {
select(node);
- }
- else {
+ } else {
clear(node);
}
process(node);
inputs = []
-function restrictchars(input)
-{
- if( input.validity.patternMismatch )
- {
+function restrictchars(input){
+ if( input.validity.patternMismatch ){
input.setCustomValidity("Only alphanumeric characters (a-z, A-Z, 0-9), underscore(_), and hyphen (-) are allowed");
input.reportValidity();
}
-
input.value = input.value.replace(/([^A-Za-z0-9-_.])+/g, "");
-
checkunique(input);
}
var node = document.getElementById(nodeId);
var value = {}
value[nodeId] = node.parentNode.getElementsByTagName("input")[0].value;
- result[node.parentNode.parentNode.id] = {};
- result[node.parentNode.parentNode.id][nodeId] = value;
+ result[node.parentNode.id] = {};
+ result[node.parentNode.id][nodeId] = value;
}
}
function updateObjectResult(parentElem){
- node_type = document.getElementById(parentElem.class).parentNode.parentNode.id;
+ node_type = document.getElementById(parentElem.class).parentNode.id;
input = {};
inputs = parentElem.getElementsByTagName("input");
for(var i in inputs){
for(nodeId in filter_items) {
element = document.getElementById(nodeId);
node = filter_items[nodeId];
- result[element.parentNode.parentNode.id] = {}
+ result[element.parentNode.id] = {}
}
initialized = true;
}