Commit 86cb754d authored by Bryan  BRANCOTTE's avatar Bryan BRANCOTTE
Browse files

Use bootstrap-multiselect js library for diseases

parent b1b77dbe
......@@ -318,7 +318,7 @@ class PpiModelForm(ModelForm):
'family_name',
'symmetry',
'pockets_nb',
# 'diseases',
'diseases',
# 'other_disease',
)
widgets = {
......
......@@ -1380,7 +1380,7 @@ Description: IPPI-DB Theme
}
[type="reset"], [type="submit"], button {
[type="reset"], [type="submit"], button:not(.multiselect-native-select):not(.multiselect-clear-filter) {
-webkit-appearance: button;
margin-top: 5px;
border-radius: 0px;
......@@ -1472,4 +1472,13 @@ select.form-control + .form-control-placeholder {
margin-top: -0.25em;
margin-left: -1.25rem;
margin-bottom: 0.45em;
}
.multiselect.dropdown-toggle.btn-secondary {
background-color: #6c757d;
border-color: #6c757d;
}
.multiselect-container .input-group {
padding: 5px;
margin:0px !important;
}
\ No newline at end of file
span.multiselect-native-select{position:relative}span.multiselect-native-select select{border:0!important;clip:rect(0 0 0 0)!important;height:1px!important;margin:-1px -1px -1px -3px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;left:50%;top:30px}.multiselect-container{position:absolute;list-style-type:none;margin:0;padding:0}.multiselect-container .input-group{margin:5px}.multiselect-container .multiselect-reset .input-group{width:93%}.multiselect-container>li{padding:0}.multiselect-container>li>a.multiselect-all label{font-weight:700}.multiselect-container>li.multiselect-group label{margin:0;padding:3px 20px;height:100%;font-weight:700}.multiselect-container>li.multiselect-group-clickable label{cursor:pointer}.multiselect-container>li>a{padding:0}.multiselect-container>li>a>label{margin:0;height:100%;cursor:pointer;font-weight:400;padding:3px 20px 3px 40px}.multiselect-container>li>a>label.checkbox,.multiselect-container>li>a>label.radio{margin:0}.multiselect-container>li>a>label>input[type=checkbox]{margin-bottom:5px}.btn-group>.btn-group:nth-child(2)>.multiselect.btn{border-top-left-radius:4px;border-bottom-left-radius:4px}.form-inline .multiselect-container label.checkbox,.form-inline .multiselect-container label.radio{padding:3px 20px 3px 40px}.form-inline .multiselect-container li a label.checkbox input[type=checkbox],.form-inline .multiselect-container li a label.radio input[type=radio]{margin-left:-20px;margin-right:0}
\ No newline at end of file
This diff is collapsed.
{% extends "add.html" %}
{% load i18n %}
{% block extra_js %}
{{block.super}}
<script type="text/javascript">
window.onload = function() {
$("#id_PpiForm-diseases").multiselect({
allSelectedText: 'All diseases used',
nonSelectedText: 'No diseases selected',
enableFiltering: true,
buttonWidth:'100%',
numberDisplayed: 4,
nSelectedText:" diseases selected",
maxHeight: 600,
templates:{
button: '<button type="button" class="multiselect dropdown-toggle btn btn-secondary btn-default " data-toggle="dropdown"><span class="multiselect-selected-text"></span> <b class="caret"></b></button>',
filterClearBtn: '<div class="input-group-append"><button class="btn btn-outline-primary multiselect-clear-filter" type="button"><i class="fa fa-times-circle"></i></button></div>',
filter: '<li class="multiselect-item multiselect-filter"><div class="input-group"><div class="input-group-prepend"><span class="input-group-text" id="basic-addon1"><i class="fa fa-search"></i></span></div><input class="form-control multiselect-search" type="text" /></div></li>',
}
}).show();
};
</script>
{% endblock extra_js %}
{%block step_desc%}
{%blocktrans%}You have selected a <span style="color:#2d96fa;">{{ complex_type }}</span> that is <span style="color:#2d96fa;">{{ complex_choice }}</span> by the binding of PPI modulator.{%endblocktrans%}
<br/>
......
{% extends "admin-session.html" %}
{% load i18n %}
{% load static %}
{% load customtags %}
{% block title %}inhibitors of Protein-Protein Interaction Database{% endblock %}
{% block extra_css %}
{{block.super}}
<link rel="stylesheet" href="{% static '/css/bootstrap-multiselect.css' %}" type="text/css"/>
{% endblock extra_css %}
{% block extra_js %}
{{block.super}}
<script type="text/javascript" src="{% static '/js/bootstrap-multiselect.js' %}"></script>
<script type="text/javascript">
window.onload = function() {
$(".formset-item-delete:checked").each(function(i,o){delete_button_clicked(o);});
......
......@@ -22,11 +22,14 @@ def url_replace(request, field, value):
def bootstrap(object):
return mark_safe("".join(bootstrap_core(object)))
def bootstrap_core(object):
ret = []
print(type(object.field.widget))
if isinstance(object, forms.BoundField):
field = object
if isinstance(field.field.widget, forms.HiddenInput):
if isinstance(field.field.widget, forms.HiddenInput) or \
isinstance(field.field.widget, forms.SelectMultiple):
ret.append(field.as_widget())
if field.errors:
for e in field.errors:
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment