Mime select (UI only)

This commit is contained in:
simon987
2018-04-15 13:46:44 -04:00
parent 60bd822025
commit 6c7d01dbcb
11 changed files with 545 additions and 364 deletions

View File

@@ -12,13 +12,19 @@
<script src="/static/js/auto-complete.min.js" type="text/javascript"></script>
<script src="/static/js/ion.rangeSlider.min.js" type="text/javascript"></script>
<link href="/static/css/normalize.css" rel="stylesheet" type="text/css">
<script src="/static/js/lodash.min.js" type="text/javascript"></script>
<script src="/static/js/inspire-tree.min.js" type="text/javascript"></script>
<script src="/static/js/inspire-tree-dom.min.js" type="text/javascript"></script>
{# <link href="/static/css/normalize.css" rel="stylesheet" type="text/css">#}
<link href="/static/css/fontawesome-all.min.css" rel="stylesheet" type="text/css">
<link href="/static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="/static/css/auto-complete.css" rel="stylesheet" type="text/css">
<link href="/static/css/ion.rangeSlider.css" rel="stylesheet" type="text/css">
<link href="/static/css/ion.rangeSlider.skinFlat.css" rel="stylesheet" type="text/css">
<link href="/static/css/inspire-tree-light.css" rel="stylesheet" type="text/css">
<style>
.info-table {

View File

@@ -130,6 +130,19 @@
margin-bottom: 1em;
}
.inspire-tree .selected > .wholerow, .inspire-tree .selected > .title-wrap:hover + .wholerow
{
background: none;
}
.inspire-tree {
font-weight: 400;
font-size: 14px;
font-family: Helvetica, Nueue, Verdana, sans-serif;
max-height: 450px;
overflow: auto;
}
</style>
<div class="container">
@@ -161,30 +174,23 @@
<div class="col">
<label for="mime">Mime types</label>
<select class="custom-select" id="mime" multiple size="6">
<option selected value="application">application</option>
<option selected value="audio">audio</option>
<option selected value="font">font</option>
<option selected value="image">image</option>
<option selected value="text">text</option>
<option selected value="video">video</option>
</select>
<div class="tree"></div>
</div>
</div>
<br>
<br>
<script type="text/javascript">
//<!--
$(document).ready(function() {
$('#tree').tree({
/* specify here your options */
});
var tree = new InspireTree({
selection: {
mode: 'checkbox'
},
data: {{ mime_list | tojson }}
});
//-->
new InspireTreeDOM(tree, {
target: '.tree'
});
//Select all
tree.select()
</script>
</div>