Skip to content
Snippets Groups Projects
Commit d72f4946 authored by Chris Lemaire's avatar Chris Lemaire
Browse files

Fix issues with multiselect style 

- Introduces different bootstrap-select solution as a webjar.
- Starts using bootstrap-select elements in filters to fix visual issues
  regarding long lists of rooms.
parent d9aff551
No related branches found
No related tags found
1 merge request!183Use Real IPs instead of Proxy IP for Sentry (#250)
Show whitespace changes
Inline Side-by-side
src/main/resources/static/css/global.css
+ 1
− 1
View file @ d72f4946
......@@ -662,6 +662,6 @@ div.row-xs:nth-of-type(odd) {
/**
* Hacky solution to broken bootstrap styles when upgrading from 4.0.0 to 4.3.1
*/
.multiselect {
.btn-buttonface {
background-color: buttonface;
}
src/main/resources/templates/request/list/filters.html
+ 17
− 17
View file @ d72f4946
......@@ -37,8 +37,8 @@
</head>
<body>
<div class="table-list-header" th:fragment="filters">
<script type="text/javascript" src="/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="/css/bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript" src="/webjars/bootstrap-select/1.13.8/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="/webjars/bootstrap-select/1.13.8/css/bootstrap-select.min.css" type="text/css"/>
<div class="filters" style="padding:5px;">
<form id="filter-form" method="post" class="form">
<input type="hidden" name="page" value="0"/>
......@@ -46,7 +46,7 @@
<div class="form-group filter">
<label class="form-control-label" for="courseSelect">Course</label>
<select multiple="multiple" class="form-control" id="courseSelect" name="lab.course">
<select multiple class="selectpicker" id="courseSelect" name="lab.course">
<th:block th:each="course : ${courses}">
<option th:value="${course.id}"
th:selected="${#filter.valueInMultiMap('lab.course', course, state)}"
......@@ -58,7 +58,7 @@
<div class="form-group filter">
<label class="form-control-label" for="labSelect">Lab</label>
<select multiple="multiple" class="form-control" id="labSelect" name="lab">
<select multiple class="selectpicker" id="labSelect" name="lab">
<th:block th:each="lab : ${activeLabs}">
<option th:value="${lab.id}"
th:selected="${#filter.valueInMultiMap('lab', lab, state)}"
......@@ -70,7 +70,7 @@
<div class="form-group filter">
<label class="form-control-label" for="assignmentSelect">Assignment</label>
<select multiple="multiple" class="form-control" id="assignmentSelect" name="assignment">
<select multiple class="selectpicker" id="assignmentSelect" name="assignment">
<th:block th:each="assignment : ${assignments}">
<option th:value="${assignment.id}"
th:selected="${#filter.valueInMultiMap('assignment', assignment, state)}"
......@@ -82,7 +82,8 @@
<div class="form-group filter">
<label class="form-control-label" for="roomSelect">Room</label>
<select multiple="multiple" class="form-control" id="roomSelect" name="room">
<select multiple class="selectpicker" id="roomSelect" name="room"
data-actions-box="true" data-live-search="true">
<th:block th:each="room : ${rooms}">
<option th:value="${room.id}"
th:selected="${#filter.valueInMultiMap('room', room.id, state)}"
......@@ -94,7 +95,7 @@
<div class="form-group filter">
<label class="form-control-label" for="assignedSelect">Assigned</label>
<select multiple="multiple" class="form-control" id="assignedSelect" name="assistant">
<select multiple class="selectpicker" id="assignedSelect" name="assistant">
<option th:value="${#authenticated.id}"
th:selected="${#filter.valueInMultiMap('assistant', #authenticated.id, state)}">
You
......@@ -111,7 +112,7 @@
<div class="form-group filter">
<label class="form-control-label" for="statusSelect">Status</label>
<select multiple="multiple" class="form-control" id="statusSelect" name="status">
<select multiple class="selectpicker" id="statusSelect" name="status">
<th:block th:each="status : ${T(nl.tudelft.ewi.queue.model.Request.Status).values()}">
<option th:value="${status}" th:text="${status}"
th:selected="${#filter.valueInMultiMap('status', status, state)}"></option>
......@@ -121,7 +122,7 @@
<div class="form-group filter">
<label class="form-control-label" for="statusSelect">Type</label>
<select multiple="multiple" class="form-control" id="requestTypeSelect" name="requestType">
<select multiple class="selectpicker" id="requestTypeSelect" name="requestType">
<th:block th:each="requestType : ${requestTypes}">
<option th:value="${requestType.id}" th:text="${requestType.name}"
th:selected="${#filter.valueInMultiMap('requestType', requestType.id, state)}"></option>
......@@ -141,15 +142,14 @@
</form>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('select').multiselect({
buttonWidth: '110px',
nonSelectedText: 'Select...',
templates: {li: '<li><a class="dropdown-item" tabindex="0"><label style="padding-left:1px;display: block;"></label></a></li>'}
});
var spDefaults = $.fn.selectpicker.Constructor.DEFAULTS;
spDefaults.width = '160px';
spDefaults.mobile = true;
spDefaults.styleBase = 'btn btn-buttonface';
spDefaults.selectedTextFormat = 'count > 1';
$(document).ready(function () {
$('a.filters-reset').click(function () {
$('#filter-form').append($('<input>').attr({
type: 'hidden',
......@@ -157,7 +157,7 @@
value: '1'
})
).submit();
})
});
});
</script>
</div>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment