Add selectpicker. Make select look nicer

This commit is contained in:
amcmanu3 2023-01-19 14:09:21 -05:00
parent 868b324547
commit 04f7876e9f

View File

@ -6,6 +6,9 @@
{% block title %}Crafty Controller - {{ translate('panelConfig', 'pageTitle', data['lang']) }}{% end %} {% block title %}Crafty Controller - {{ translate('panelConfig', 'pageTitle', data['lang']) }}{% end %}
{% block content %} {% block content %}
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/css/bootstrap-select.min.css">
<div class="content-wrapper"> <div class="content-wrapper">
{% if data['superuser'] %} {% if data['superuser'] %}
@ -44,7 +47,7 @@
<div class="form-group"> <div class="form-group">
<label class="form" for="{{item[0]}}">{{item[0]}} <label class="form" for="{{item[0]}}">{{item[0]}}
<small class="text-muted ml-1"> <small class="text-muted ml-1">
</small> </label> </small> </label><br />
{% if item[0] == 'language' %} {% if item[0] == 'language' %}
<select name="{{item[0]}}" class="form-control"> <select name="{{item[0]}}" class="form-control">
{% for lang in data['availables_languages'] %} {% for lang in data['availables_languages'] %}
@ -56,7 +59,8 @@
{% end %} {% end %}
</select> </select>
{% elif item[0] == 'disabled_language_files' %} {% elif item[0] == 'disabled_language_files' %}
<select id="lang_select" class="form-control" size="{{ len(data['all_languages']) }}" multiple> <select id="lang_select" class="selectpicker show-tick" data-icon-base="fas" data-tick-icon="fa-check"
multiple>
{% for lang in data['all_languages'] %} {% for lang in data['all_languages'] %}
{% if lang in item[1] %} {% if lang in item[1] %}
<option selected>{{lang}}</option> <option selected>{{lang}}</option>
@ -66,7 +70,7 @@
{% end %} {% end %}
</select> </select>
<button type="button" class="btn btn-outline-primary" onclick="$('option', $('#lang_select')).each(function(element) { <button type="button" class="btn btn-outline-primary" onclick="$('option', $('#lang_select')).each(function(element) {
$(this).removeAttr('selected').prop('selected', false); $(this).removeAttr('selected').prop('selected', false); $('.selectpicker').selectpicker('refresh')
});">Enable all Languages</button> });">Enable all Languages</button>
<textarea id="disabled_lang" name="{{item[0]}}" class="form-control list hidden" <textarea id="disabled_lang" name="{{item[0]}}" class="form-control list hidden"
@ -111,6 +115,10 @@
</div> </div>
<style> <style>
.dropdown-menu.inner {
display: inline-block !important;
}
.popover-body { .popover-body {
color: white !important; color: white !important;
; ;
@ -213,8 +221,8 @@
<script> <script>
$(document).ready(function () { $(document).ready(function () {
console.log('ready for JS!') console.log('ready for JS!');
$('.selectpicker').selectpicker("refresh");
}); });
$(".show_button").click(function () { $(".show_button").click(function () {
@ -302,5 +310,6 @@
xmlHttpRequest.send(file); xmlHttpRequest.send(file);
} }
</script> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/js/bootstrap-select.min.js">
</script>
{% end %} {% end %}