diff --git a/ippisite/ippidb/forms.py b/ippisite/ippidb/forms.py index 1ec0060291a2f477e8099cacbeadd9b2e7e24550..f5eb96eb405f50c0e20530c13c87bc9f412935d7 100644 --- a/ippisite/ippidb/forms.py +++ b/ippisite/ippidb/forms.py @@ -15,7 +15,7 @@ class IdForm(ModelForm): fields = ['source','id_source'] widgets = { 'source' : forms.RadioSelect, - 'id_source': forms.TextInput(attrs={'placeholder': 'ID'}), + 'id_source': forms.TextInput(attrs={'class': 'form-control'}), } """ Step 2 : BibliographyForm """ @@ -40,7 +40,7 @@ def validate_pdb_exists(value): class PDBForm(forms.Form): - pdb_id = forms.CharField(label="PDB ID", max_length=4, widget=forms.TextInput(attrs={'placeholder': 'e.g 3u85', 'required': 'required'}), required=True, validators=[ + pdb_id = forms.CharField(label="PDB ID", max_length=4, widget=forms.TextInput(attrs={'placeholder': 'e.g 3u85', 'required': 'required', 'class':'form-control'}), required=True, validators=[ RegexValidator( '^[0-9][a-zA-Z0-9]{3}$', message='PDB ID must be 1 numeric + 3 alphanumeric characters'), validate_pdb_exists @@ -102,10 +102,10 @@ COMPLEX_TYPE = ( ) class ComplexCompositionForm(forms.Form): - complex_type=forms.CharField(widget=forms.Select(choices=COMPLEX_TYPE)) - complex_protein=forms.ModelChoiceField(queryset=Protein.objects.all(), required=True) - complex_domain=forms.ModelChoiceField(queryset=Domain.objects.all(), required=True) - ppc_copy_nb=forms.IntegerField(initial=1,required=True) + complex_type=forms.CharField(widget=forms.Select(choices=COMPLEX_TYPE, attrs={'class':'form-control'})) + complex_protein=forms.ModelChoiceField(queryset=Protein.objects.all(), required=True, widget=forms.Select(attrs={'class':'form-control'}),empty_label=None) + complex_domain=forms.ModelChoiceField(queryset=Domain.objects.all(), required=True,widget=forms.Select(attrs={'class':'form-control'}),empty_label=None) + ppc_copy_nb=forms.IntegerField(initial=1,required=True,widget=forms.TextInput(attrs={'class':'form-control'})) def __init__(self,*args,**kwargs): super(ComplexCompositionForm, self).__init__(*args, **kwargs) @@ -131,10 +131,10 @@ class PpiComplexForm(ModelForm): fields = ['cc_nb'] class PpiAndComplexForm(forms.Form): - pdb_id=forms.CharField(widget=forms.TextInput()) - symmetry=forms.ModelChoiceField(queryset=Symmetry.objects.all(), required=True) - pockets_nb=forms.IntegerField(initial=1,required=True) - cc_nb=forms.IntegerField(initial=1,required=True) + pdb_id=forms.CharField(widget=forms.TextInput(attrs={'class':'form-control'})) + symmetry=forms.ModelChoiceField(queryset=Symmetry.objects.all(), required=True, widget=forms.Select(attrs={'class':'form-control'}), empty_label=None) + pockets_nb=forms.IntegerField(initial=1,required=True,widget=forms.TextInput(attrs={'class':'form-control'})) + cc_nb=forms.IntegerField(initial=1,required=True,widget=forms.TextInput(attrs={'class':'form-control'})) """ Step 7 : CompoundForm """ class CompoundForm(ModelForm): @@ -143,7 +143,7 @@ class CompoundForm(ModelForm): model = Compound fields = ['common_name','is_macrocycle'] widgets = { - 'common_name': forms.TextInput(attrs={'placeholder':'Common name', 'required': 'required'}), + 'common_name': forms.TextInput(attrs={'class':'form-control', 'required': 'required'}), } class RefCompoundBiblioForm(ModelForm): @@ -160,27 +160,40 @@ TYPE_MOLECULE = ( class BaseCompoundFormSet(BaseFormSet): def add_fields(self, form, index): super(BaseCompoundFormSet, self).add_fields(form, index) - form.fields["compound_name"] = forms.CharField(widget=forms.TextInput(attrs={'placeholder':'Name in the publication','required':'required'})) - form.fields["molecule"] = forms.CharField(widget=forms.RadioSelect(choices=TYPE_MOLECULE)) - form.fields["molecule_comp"] = forms.CharField(widget=forms.TextInput(attrs={'placeholder':'Molecule composition', 'required':'required'})) + form.fields["compound_name"] = forms.CharField(widget=forms.TextInput(attrs={'class':'form-control','required':'required'})) + form.fields["molecule"] = forms.CharField(widget=forms.RadioSelect(choices=TYPE_MOLECULE, attrs={'class':'form-control'})) + form.fields["molecule_comp"] = forms.CharField(widget=forms.TextInput(attrs={'required':'required', 'class':'form-control'})) CompoundFormSet = formset_factory(CompoundForm, formset=BaseCompoundFormSet, max_num=500, can_delete=True) formset = CompoundFormSet() """ Step 8 : TestsForm """ class TestsForm(forms.Form): - activityDesc_test_name=forms.CharField(widget=forms.TextInput(attrs={'placeholder':'Activity test name'})) - activityDesc_cell_line=forms.ModelChoiceField(queryset=CellLine.objects.all(), required=True, empty_label="Choose a corresponding cell line") - activityDesc_ppi=forms.CharField(widget=forms.TextInput(attrs={'placeholder':'PPI ID'})) - activityDesc_nb_active_compound=forms.IntegerField(initial=1,required=True) - activityRes_test_modulation_type=forms.ModelChoiceField(queryset=CompoundActivityResult.objects.values_list('modulation_type', flat=True).distinct(), required=True, empty_label=None) - activityDesc_type=forms.ModelChoiceField(widget=forms.RadioSelect(),queryset=TestActivityDescription.objects.values_list('test_type', flat=True).distinct(), required=True, empty_label=None) - cytotoxDesc_test_name=forms.CharField(widget=forms.TextInput()) - cytotoxDesc_cell_line=forms.ModelChoiceField(queryset=CellLine.objects.all(), required=True) - cytotoxDesc_compound_concentration=forms.CharField(widget=forms.TextInput()) + activityDesc_test_name=forms.CharField(widget=forms.TextInput(attrs={'class': 'form-control'})) + activityDesc_cell_line=forms.ModelChoiceField(queryset=CellLine.objects.all(), empty_label=None, widget=forms.Select(attrs={'class':'form-control'})) + activityDesc_nb_active_compound=forms.IntegerField(initial=1) + activityDesc_type=forms.ModelChoiceField(widget=forms.RadioSelect(attrs={'class':'form-control'}),queryset=TestActivityDescription.objects.values_list('test_type', flat=True).distinct(), empty_label=None) + activityDesc_test_modulation_type=forms.ModelChoiceField(queryset=TestActivityDescription.objects.values_list('test_modulation_type', flat=True).distinct(), empty_label=None, widget=forms.Select(attrs={'class':'form-control'})) + activityRes_compound=forms.ChoiceField(widget=forms.Select(attrs={'class':'form-control'})) + activityRes_test_modulation_type=forms.ModelChoiceField(queryset=CompoundActivityResult.objects.values_list('modulation_type', flat=True).distinct(), empty_label=None, widget=forms.Select(attrs={'class':'form-control'})) + activityRes_activity_type=forms.CharField(widget=forms.TextInput(attrs={'class':'form-control'})) + activityRes_activity=forms.IntegerField(forms.NumberInput(attrs={'class':'form-control'})) + cytotoxDesc_test_name=forms.CharField(widget=forms.TextInput(attrs={'class':'form-control'})) + cytotoxDesc_cell_line=forms.ModelChoiceField(queryset=CellLine.objects.all(), empty_label=None, widget=forms.Select(attrs={'class':'form-control'})) + cytotoxDesc_compound_concentration=forms.CharField(widget=forms.TextInput(attrs={'placeholder':'Compound concentration'})) + cytotoxRes_compound=forms.ChoiceField(widget=forms.TextInput(attrs={'class': 'form-control'})) cytotoxRes_toxicity=forms.ModelChoiceField(queryset=CompoundCytotoxicityResult.objects.all()) - pkDesc_test_name=forms.CharField(widget=forms.TextInput()) - pkDesc_organism=forms.ModelChoiceField(queryset=Taxonomy.objects.all(), required=True) - pkDesc_administration_mode=forms.CharField(widget=forms.TextInput()) - pkDesc_dose=forms.IntegerField(initial=1,required=True) - pkDesc_dose_interval=forms.IntegerField(initial=1,required=True) + pkDesc_test_name=forms.CharField(widget=forms.TextInput(attrs={'placeholder':'PK test name'})) + pkDesc_organism=forms.ModelChoiceField(queryset=Taxonomy.objects.all(), empty_label="Choose a corresponding organism") + pkDesc_administration_mode=forms.CharField(widget=forms.TextInput(attrs={'placeholder':'Admnistration mode'})) + pkDesc_dose=forms.IntegerField(initial=1) + pkDesc_dose_interval=forms.IntegerField(initial=1) + pkRes_compound = forms.ChoiceField(widget=forms.TextInput(attrs={'class': 'form-control'})) + pkRes_tolerated = forms.ChoiceField(widget=forms.TextInput(attrs={'class': 'form-control'})) + pkRes_auc = forms.IntegerField(initial=1) + pkRes_clearance = forms.DecimalField() + pkRes_cmax = forms.DecimalField() + pkRes_oral_bioavailability = forms.IntegerField(initial=1) + pkRes_t_demi = forms.IntegerField(initial=1) + pkRes_t_max = forms.IntegerField(initial=1) + pkRes_voldistribution = forms.DecimalField() \ No newline at end of file diff --git a/ippisite/ippidb/static/css/admin-session.css b/ippisite/ippidb/static/css/admin-session.css index cdb126796972d62a0b5e65b8a55b7cd9476f9526..ab6e4a57fdc3a2da92cbd29071a39c0ac297291a 100644 --- a/ippisite/ippidb/static/css/admin-session.css +++ b/ippisite/ippidb/static/css/admin-session.css @@ -10,102 +10,112 @@ Description: IPPI-DB Theme /* Step menu */ .step_nav { - width: 100%; - margin: 0 ; - padding: 0 ; + width: 100%; + margin: 0 ; + padding: 0 ; } .step_nav ul { - margin: 0 ; - padding: 0; + margin: 0 ; + padding: 0; } .step_nav li { - display: inline; + display: inline; } .step_nav li a, .step_nav li a:hover, .step_nav li a:focus { - width: 146px; - background-color: #E3E9EB; - color:#8D8888; - font-family: "PlayfairDisplayReg"; - font-size: 22px; - display: inline-block; - text-align: center; - text-decoration: none; + width: 146px; + background-color: #E3E9EB; + color:#8D8888; + font-family: "PlayfairDisplayReg"; + font-size: 22px; + display: inline-block; + text-align: center; + text-decoration: none; } .step_nav li a.active { - text-decoration: none; - background-color: #2D96FA; - color:#FFFFFF; + text-decoration: none; + background-color: #2D96FA; + color:#FFFFFF; } .step_nav li a.validate { - text-decoration: none; - background-color: #000000; - color:#ffffff; + text-decoration: none; + background-color: #000000; + color:#ffffff; } /* Step window */ .step_desc { - padding: 0px; - margin-bottom: 0px; + padding: 0px; + margin-bottom: 0px; } .step_title{ - font-family: "PlayfairDisplayRed"; - font-size: 25px; + font-family: "PlayfairDisplayRed"; + font-size: 25px; } .step_step { - color: #8D8889; - font-size: 15px; - font-family: "BrandonGrotesqueReg"; + color: #8D8889; + font-size: 15px; + font-family: "BrandonGrotesqueReg"; } .step_step_desc { - padding: 0px; - margin-bottom: 0px; - font-family: "BrandonGrotesqueReg"; + padding: 0px; + margin-bottom: 0px; + font-family: "BrandonGrotesqueReg"; } /* Form Items */ #type_style { - background-color: rgb(227, 233, 235); - padding: 10px; - margin: 10px; - margin-left: -81px; - margin-right: -81px; + background-color: rgb(227, 233, 235); + padding: 10px; + margin: 10px; + margin-left: -81px; + margin-right: -81px; } #type_title h1{ - text-align: left; - color: #414144; - font-size: 42px; - font-family: "BrandonGrotesqueBlk" + text-align: left; + color: #414144; + font-size: 42px; + font-family: "BrandonGrotesqueBlk" } #type_title h2{ - font-size: 18px; + font-size: 18px; +} + +.add_button { + margin: 0px; + padding-bottom: 0px; + padding-top: 0px; + height: 29px; + background-color: inherit; + color:#2d96fa; + border:none; } .submit_button { - font-family: "BrandonGrotesqueReg"; - width: 100%; + font-family: "BrandonGrotesqueReg"; + width: 100%; } .clear_button { - text-align: center; - padding-top: 10px; + text-align: center; + padding-top: 10px; } /* IdForm*/ #id_IdForm-source { - overflow: hidden; - padding-bottom: 5px; + overflow: hidden; + padding-bottom: 5px; } #id_IdForm-source label span{ @@ -117,79 +127,87 @@ Description: IPPI-DB Theme } #id_IdForm-source input { - display:none; + display:none; } #id_IdForm-source input:hover+label span{ - cursor: pointer; - background-color: #FFFFFF; - color: #000000; - border-bottom: 1px solid #2D96FA; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; + cursor: pointer; + background-color: #FFFFFF; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; } #id_IdForm-source input[type="radio"]:checked+label span{ - background-color: #FFFFFF; - color: #000000; - border-bottom: 1px solid #2D96FA; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; + background-color: #FFFFFF; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; } .input_field { - width:100%; - margin-right: 2px; - font-family: "BrandonGrotesqueReg"; + width:100%; + margin-right: 2px; + font-family: "BrandonGrotesqueReg"; + text-align: left; + margin-top: 5px; } .input_field input { - width:100%; - font-family: "BrandonGrotesqueReg"; - text-align: center; + width:100%; + font-family: "BrandonGrotesqueReg"; + text-align: center; } /* Form step items */ .compound{ - background-color: #E3E9EB; - margin-left: -60%; - margin-right: -60%; - padding: 5%; + background-color: #E3E9EB; + margin-left: -60%; + margin-right: -60%; + padding: 5%; } .compound h1 { - text-align: left; - color: #414144; - font-size: 42px; - padding-bottom: 1%; + text-align: left; + color: #414144; + font-size: 42px; + padding-bottom: 1%; } .compound h2 { - text-align: left; - padding-bottom: 1%; + text-align: left; + padding-bottom: 1%; } .compound_input { - margin-bottom: 5px; + margin-bottom: 15px; + width: 100%; + margin-right: 2px; + font-family: "BrandonGrotesqueReg"; + text-align: left; + margin-top: 15px; } .compound_input input{ - width: 100%; - padding: 5px; + width: 100%; + padding: 5px; + margin-bottom: 5px; } #compound_mol { - overflow: hidden; - display: flex; - padding-bottom: 5px; + overflow: hidden; + display: flex; + padding-bottom: 5px; } /* Background image classes */ .compound_radio_smiles input { - display:none; + display:none; } .compound_radio_smiles label span{ @@ -207,34 +225,34 @@ Description: IPPI-DB Theme } .compound_radio_smiles input:hover+label span{ - cursor: pointer; - background-color: #FFFFFF; - background-image: url('/static/images/Other/SMILESIcon.png'); - background-position: center; - background-repeat: no-repeat; - color: #000000; - border-bottom: 1px solid #2D96FA; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; - opacity: 1.0; + cursor: pointer; + background-color: #FFFFFF; + background-image: url('/static/images/Other/SMILESIcon.png'); + background-position: center; + background-repeat: no-repeat; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; + opacity: 1.0; } .compound_radio_smiles input[type="radio"]:checked+label span{ - background-color: #FFFFFF; - background-image: url('/static/images/Other/SMILESIcon.png'); - background-position: center; - background-repeat: no-repeat; - color: #000000; - border-bottom: 1px solid #2D96FA; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; - opacity: 1.0; + background-color: #FFFFFF; + background-image: url('/static/images/Other/SMILESIcon.png'); + background-position: center; + background-repeat: no-repeat; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; + opacity: 1.0; } .compound_radio_iupac input { - display:none; + display:none; } .compound_radio_iupac label span{ @@ -252,34 +270,34 @@ Description: IPPI-DB Theme } .compound_radio_iupac input:hover+label span{ - cursor: pointer; - background-color: #FFFFFF; - background-image: url('/static/images/Other/IUPACIcon.png'); - background-position: center; - background-repeat: no-repeat; - color: #000000; - border-bottom: 1px solid #2D96FA; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; - opacity: 1.0; + cursor: pointer; + background-color: #FFFFFF; + background-image: url('/static/images/Other/IUPACIcon.png'); + background-position: center; + background-repeat: no-repeat; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; + opacity: 1.0; } .compound_radio_iupac input[type="radio"]:checked+label span{ - background-color: #FFFFFF; - background-image: url('/static/images/Other/IUPACIcon.png'); - background-position: center; - background-repeat: no-repeat; - color: #000000; - border-bottom: 1px solid #2D96FA; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; - opacity: 1.0; + background-color: #FFFFFF; + background-image: url('/static/images/Other/IUPACIcon.png'); + background-position: center; + background-repeat: no-repeat; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; + opacity: 1.0; } .compound_radio_sketch input { - display:none; + display:none; } .compound_radio_sketch label span{ @@ -297,57 +315,57 @@ Description: IPPI-DB Theme } .compound_radio_sketch input:hover+label span{ - cursor: pointer; - background-color: #FFFFFF; - background-image: url('/static/images/Other/SketchIcon.png'); - background-position: center; - background-repeat: no-repeat; - color: #000000; - border-bottom: 1px solid #2D96FA; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; - opacity: 1.0; + cursor: pointer; + background-color: #FFFFFF; + background-image: url('/static/images/Other/SketchIcon.png'); + background-position: center; + background-repeat: no-repeat; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; + opacity: 1.0; } .compound_radio_sketch input[type="radio"]:checked+label span{ - background-color: #FFFFFF; - background-image: url('/static/images/Other/SketchIcon.png'); - background-position: center; - background-repeat: no-repeat; - color: #000000; - border-bottom: 1px solid #2D96FA; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; - opacity: 1.0; + background-color: #FFFFFF; + background-image: url('/static/images/Other/SketchIcon.png'); + background-position: center; + background-repeat: no-repeat; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; + opacity: 1.0; } .small_icon { - width:30%; + width:30%; } .add_form div{ - background-color: #8D8889; - color: #FFFFFF; + background-color: #8D8889; + color: #FFFFFF; } .add_form div:hover{ - cursor: pointer; - background-color: #484848; - color: #FFFFFF; + cursor: pointer; + background-color: #484848; + color: #FFFFFF; } .add_form div:active { - background-color: #484848; + background-color: #484848; } .add_field_button{ - width:10%; + width:10%; } .remove_field{ - width:10%; + width:10%; } @@ -356,144 +374,144 @@ Description: IPPI-DB Theme .publi_info{ - padding: 10px; + padding: 10px; } .publi_title{ - font-family: "BrandonGrotesqueReg"; - margin-left: -300px; - margin-right: -300px; - margin-bottom: 20px; + font-family: "BrandonGrotesqueReg"; + margin-left: -300px; + margin-right: -300px; + margin-bottom: 20px; } #ck-button { - margin: 4px; - float:left; + margin: 4px; + float:left; } #ck-button-long { - width:100%; + width:100%; } #ck-button label { - width: 100%; - margin-bottom: 0px; + width: 100%; + margin-bottom: 0px; } #ck-button-long label { - width: 100%; - margin-top: 5px; + width: 100%; + margin-top: 5px; } #ck-button label span { - text-align:center; - padding:3px; - display:block; - background-color: #E8E0E0; - color: #8D8888; - border-bottom: 2px solid #fff; + text-align:center; + padding:3px; + display:block; + background-color: #E8E0E0; + color: #8D8888; + border-bottom: 2px solid #fff; } #ck-button-long label span { - text-align:center; - padding:3px; - display:block; - background-color: #E8E0E0; - color: #8D8888; + text-align:center; + padding:3px; + display:block; + background-color: #E8E0E0; + color: #8D8888; } #ck-button label input { - position:absolute; - top:-20px; - display:none; + position:absolute; + top:-20px; + display:none; } #ck-button-long label input { - position:absolute; - top:-20px; - display:none; + position:absolute; + top:-20px; + display:none; } #ck-button input:hover + span { - background-color: #FFFFFF; - color: #000000; - border-bottom: 1px solid #2D96FA; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; + background-color: #FFFFFF; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; } #ck-button-long input:hover + span { - background: white url("http://localhost:8000/static/images/Buttons/CheckButton.png") no-repeat right; - background-size: contain; - color: #000000; - border-bottom: 1px solid #2D96FA; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; + background: white url("http://localhost:8000/static/images/Buttons/CheckButton.png") no-repeat right; + background-size: contain; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; } #ck-button input:checked + span { - background: white url("http://localhost:8000/static/images/Buttons/CheckButton.png") no-repeat right; - background-size: contain; - color: #000000; - border-bottom: 1px solid #2D96FA; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; + background: white url("http://localhost:8000/static/images/Buttons/CheckButton.png") no-repeat right; + background-size: contain; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; } #ck-button-long input:checked + span { - background: white url("http://localhost:8000/static/images/Buttons/CheckButton.png") no-repeat right; - background-size: contain; - color: #000000; - border-bottom: 1px solid #2D96FA; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; + background: white url("http://localhost:8000/static/images/Buttons/CheckButton.png") no-repeat right; + background-size: contain; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; } #ck-button input:checked:hover + span { - background-color: #FFFFFF; - color: #000000; - border-bottom: 1px solid #2D96FA; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; + background-color: #FFFFFF; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; } #ck-button-long input:checked:hover + span { - background-color: #FFFFFF; - color: #000000; - border-bottom: 1px solid #2D96FA; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; + background-color: #FFFFFF; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; } /* ProteinDomainComplexTypeForm */ #id_ProteinDomainComplexTypeForm-inhibited { - overflow: hidden; - display: flex; + overflow: hidden; + display: flex; } #id_ProteinDomainComplexTypeForm-complexChoice { - line-height: inherit; - font-family: "BrandonGrotesqueReg"; - border-bottom: 1px solid #2d96fa; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; - text-align: center; - width: 100%; + line-height: inherit; + font-family: "BrandonGrotesqueReg"; + border-bottom: 1px solid #2d96fa; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; + text-align: center; + width: 100%; } - + /* Background image classes */ .imageBack_Inhib_Hetero2-merAB input { - display:none; + display:none; } .imageBack_Inhib_Hetero2-merAB label span{ @@ -510,33 +528,33 @@ Description: IPPI-DB Theme } .imageBack_Inhib_Hetero2-merAB input:hover+label span{ - cursor: pointer; - background-color: #FFFFFF; - background-image: url('/static/images/PPITypes/Inhibited/Hetero2-merAB_Holo.png'); - background-position: center; - background-repeat: no-repeat; - color: #000000; - border-bottom: 1px solid #2D96FA; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; + cursor: pointer; + background-color: #FFFFFF; + background-image: url('/static/images/PPITypes/Inhibited/Hetero2-merAB_Holo.png'); + background-position: center; + background-repeat: no-repeat; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; } .imageBack_Inhib_Hetero2-merAB input[type="radio"]:checked+label span{ - background-color: #FFFFFF; - background-image: url('/static/images/PPITypes/Inhibited/Hetero2-merAB_Holo.png'); - background-position: center; - background-repeat: no-repeat; - color: #000000; - border-bottom: 1px solid #2D96FA; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; + background-color: #FFFFFF; + background-image: url('/static/images/PPITypes/Inhibited/Hetero2-merAB_Holo.png'); + background-position: center; + background-repeat: no-repeat; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; } .imageBack_Inhib_Homo2-merA2 input { - display:none; + display:none; } .imageBack_Inhib_Homo2-merA2 label span{ @@ -552,32 +570,32 @@ Description: IPPI-DB Theme } .imageBack_Inhib_Homo2-merA2 input:hover+label span{ - cursor: pointer; - background-color: #FFFFFF; - background-image: url('/static/images/PPITypes/Inhibited/Homo2-merA2_Holo.png'); - background-position: center; - background-repeat: no-repeat; - color: #000000; - border-bottom: 1px solid #2D96FA; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; + cursor: pointer; + background-color: #FFFFFF; + background-image: url('/static/images/PPITypes/Inhibited/Homo2-merA2_Holo.png'); + background-position: center; + background-repeat: no-repeat; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; } .imageBack_Inhib_Homo2-merA2 input[type="radio"]:checked+label span{ - background-color: #FFFFFF; - background-image: url('/static/images/PPITypes/Inhibited/Homo2-merA2_Holo.png'); - background-position: center; - background-repeat: no-repeat; - color: #000000; - border-bottom: 1px solid #2D96FA; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; + background-color: #FFFFFF; + background-image: url('/static/images/PPITypes/Inhibited/Homo2-merA2_Holo.png'); + background-position: center; + background-repeat: no-repeat; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; } .imageBack_Inhib_Custom input { - display:none; + display:none; } .imageBack_Inhib_Custom label span{ @@ -594,40 +612,40 @@ Description: IPPI-DB Theme } .imageBack_Inhib_Custom input:hover+label span{ - cursor: pointer; - background-color: #FFFFFF; - background-image: url('/static/images/PPITypes/Inhibited/Custom_Holo.png'); - background-position: center; - background-repeat: no-repeat; - color: #000000; - border-bottom: 1px solid #2D96FA; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; + cursor: pointer; + background-color: #FFFFFF; + background-image: url('/static/images/PPITypes/Inhibited/Custom_Holo.png'); + background-position: center; + background-repeat: no-repeat; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; } .imageBack_Inhib_Custom input[type="radio"]:checked+label span{ - background-color: #FFFFFF; - background-image: url('/static/images/PPITypes/Inhibited/Custom_Holo.png'); - background-position: center; - background-repeat: no-repeat; - color: #000000; - border-bottom: 1px solid #2D96FA; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; + background-color: #FFFFFF; + background-image: url('/static/images/PPITypes/Inhibited/Custom_Holo.png'); + background-position: center; + background-repeat: no-repeat; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; } /* Stabilized */ #id_ProteinDomainComplexTypeForm-stabilized { - overflow: hidden; - display: flex; - flex-wrap: wrap; + overflow: hidden; + display: flex; + flex-wrap: wrap; } .imageBack_Stab_Hetero2-merAB input { - display:none; + display:none; } .imageBack_Stab_Hetero2-merAB label span{ @@ -644,32 +662,32 @@ Description: IPPI-DB Theme } .imageBack_Stab_Hetero2-merAB input:hover+label span{ - cursor: pointer; - background-color: #FFFFFF; - background-image: url('/static/images/PPITypes/Stabilized/Hetero2-merAB_Holo.png'); - background-position: center; - background-repeat: no-repeat; - color: #000000; - border-bottom: 1px solid #2D96FA; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; + cursor: pointer; + background-color: #FFFFFF; + background-image: url('/static/images/PPITypes/Stabilized/Hetero2-merAB_Holo.png'); + background-position: center; + background-repeat: no-repeat; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; } .imageBack_Stab_Hetero2-merAB input[type="radio"]:checked+label span{ - background-color: #FFFFFF; - background-image: url('/static/images/PPITypes/Stabilized/Hetero2-merAB_Holo.png'); - background-position: center; - background-repeat: no-repeat; - color: #000000; - border-bottom: 1px solid #2D96FA; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; + background-color: #FFFFFF; + background-image: url('/static/images/PPITypes/Stabilized/Hetero2-merAB_Holo.png'); + background-position: center; + background-repeat: no-repeat; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; } .imageBack_Stab_Homo2-merA2 input { - display:none; + display:none; } .imageBack_Stab_Homo2-merA2 label span{ @@ -686,32 +704,32 @@ Description: IPPI-DB Theme } .imageBack_Stab_Homo2-merA2 input:hover+label span{ - cursor: pointer; - background-color: #FFFFFF; - background-image: url('/static/images/PPITypes/Stabilized/Homo2-merA2_Holo.png'); - background-position: center; - background-repeat: no-repeat; - color: #000000; - border-bottom: 1px solid #2D96FA; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; + cursor: pointer; + background-color: #FFFFFF; + background-image: url('/static/images/PPITypes/Stabilized/Homo2-merA2_Holo.png'); + background-position: center; + background-repeat: no-repeat; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; } .imageBack_Stab_Homo2-merA2 input[type="radio"]:checked+label span{ - background-color: #FFFFFF; - background-image: url('/static/images/PPITypes/Stabilized/Homo2-merA2_Holo.png'); - background-position: center; - background-repeat: no-repeat; - color: #000000; - border-bottom: 1px solid #2D96FA; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; + background-color: #FFFFFF; + background-image: url('/static/images/PPITypes/Stabilized/Homo2-merA2_Holo.png'); + background-position: center; + background-repeat: no-repeat; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; } .imageBack_Stab_Homo-Like2-merA2 input { - display:none; + display:none; } .imageBack_Stab_Homo-Like2-merA2 label span{ @@ -728,32 +746,32 @@ Description: IPPI-DB Theme } .imageBack_Stab_Homo-Like2-merA2 input:hover+label span{ - cursor: pointer; - background-color: #FFFFFF; - background-image: url('/static/images/PPITypes/Stabilized/Homo-Like2-merA2_Holo.png'); - background-position: center; - background-repeat: no-repeat; - color: #000000; - border-bottom: 1px solid #2D96FA; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; + cursor: pointer; + background-color: #FFFFFF; + background-image: url('/static/images/PPITypes/Stabilized/Homo-Like2-merA2_Holo.png'); + background-position: center; + background-repeat: no-repeat; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; } .imageBack_Stab_Homo-Like2-merA2 input[type="radio"]:checked+label span{ - background-color: #FFFFFF; - background-image: url('/static/images/PPITypes/Stabilized/Homo-Like2-merA2_Holo.png'); - background-position: center; - background-repeat: no-repeat; - color: #000000; - border-bottom: 1px solid #2D96FA; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; + background-color: #FFFFFF; + background-image: url('/static/images/PPITypes/Stabilized/Homo-Like2-merA2_Holo.png'); + background-position: center; + background-repeat: no-repeat; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; } .imageBack_Stab_Homo3-merA3 input { - display:none; + display:none; } .imageBack_Stab_Homo3-merA3 label span{ @@ -770,32 +788,32 @@ Description: IPPI-DB Theme } .imageBack_Stab_Homo3-merA3 input:hover+label span{ - cursor: pointer; - background-color: #FFFFFF; - background-image: url('/static/images/PPITypes/Stabilized/Homo3-merA3_Holo.png'); - background-position: center; - background-repeat: no-repeat; - color: #000000; - border-bottom: 1px solid #2D96FA; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; + cursor: pointer; + background-color: #FFFFFF; + background-image: url('/static/images/PPITypes/Stabilized/Homo3-merA3_Holo.png'); + background-position: center; + background-repeat: no-repeat; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; } .imageBack_Stab_Homo3-merA3 input[type="radio"]:checked+label span{ - background-color: #FFFFFF; - background-image: url('/static/images/PPITypes/Stabilized/Homo3-merA3_Holo.png'); - background-position: center; - background-repeat: no-repeat; - color: #000000; - border-bottom: 1px solid #2D96FA; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; + background-color: #FFFFFF; + background-image: url('/static/images/PPITypes/Stabilized/Homo3-merA3_Holo.png'); + background-position: center; + background-repeat: no-repeat; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; } .imageBack_Stab_Homo3-merA3inhibitedA2-dimer input { - display:none; + display:none; } .imageBack_Stab_Homo3-merA3inhibitedA2-dimer label span{ @@ -812,32 +830,32 @@ Description: IPPI-DB Theme } .imageBack_Stab_Homo3-merA3inhibitedA2-dimer input:hover+label span{ - cursor: pointer; - background-color: #FFFFFF; - background-image: url('/static/images/PPITypes/Stabilized/Homo3-merA3inhibitedA2-dimer_Holo.png'); - background-position: center; - background-repeat: no-repeat; - color: #000000; - border-bottom: 1px solid #2D96FA; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; + cursor: pointer; + background-color: #FFFFFF; + background-image: url('/static/images/PPITypes/Stabilized/Homo3-merA3inhibitedA2-dimer_Holo.png'); + background-position: center; + background-repeat: no-repeat; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; } .imageBack_Stab_Homo3-merA3inhibitedA2-dimer input[type="radio"]:checked+label span{ - background-color: #FFFFFF; - background-image: url('/static/images/PPITypes/Stabilized/Homo3-merA3inhibitedA2-dimer_Holo.png'); - background-position: center; - background-repeat: no-repeat; - color: #000000; - border-bottom: 1px solid #2D96FA; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; + background-color: #FFFFFF; + background-image: url('/static/images/PPITypes/Stabilized/Homo3-merA3inhibitedA2-dimer_Holo.png'); + background-position: center; + background-repeat: no-repeat; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; } .imageBack_Stab_Homo4-merA4 input { - display:none; + display:none; } .imageBack_Stab_Homo4-merA4 label span{ @@ -854,32 +872,32 @@ Description: IPPI-DB Theme } .imageBack_Stab_Homo4-merA4 input:hover+label span{ - cursor: pointer; - background-color: #FFFFFF; - background-image: url('/static/images/PPITypes/Stabilized/Homo4-merA4_Holo.png'); - background-position: center; - background-repeat: no-repeat; - color: #000000; - border-bottom: 1px solid #2D96FA; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; + cursor: pointer; + background-color: #FFFFFF; + background-image: url('/static/images/PPITypes/Stabilized/Homo4-merA4_Holo.png'); + background-position: center; + background-repeat: no-repeat; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; } .imageBack_Stab_Homo4-merA4 input[type="radio"]:checked+label span{ - background-color: #FFFFFF; - background-image: url('/static/images/PPITypes/Stabilized/Homo4-merA4_Holo.png'); - background-position: center; - background-repeat: no-repeat; - color: #000000; - border-bottom: 1px solid #2D96FA; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; + background-color: #FFFFFF; + background-image: url('/static/images/PPITypes/Stabilized/Homo4-merA4_Holo.png'); + background-position: center; + background-repeat: no-repeat; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; } .imageBack_Stab_Ring-Like3-merA3 input { - display:none; + display:none; } .imageBack_Stab_Ring-Like3-merA3 label span{ @@ -896,32 +914,32 @@ Description: IPPI-DB Theme } .imageBack_Stab_Ring-Like3-merA3 input:hover+label span{ - cursor: pointer; - background-color: #FFFFFF; - background-image: url('/static/images/PPITypes/Stabilized/Ring-Like3-merA3_Holo.png'); - background-position: center; - background-repeat: no-repeat; - color: #000000; - border-bottom: 1px solid #2D96FA; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; + cursor: pointer; + background-color: #FFFFFF; + background-image: url('/static/images/PPITypes/Stabilized/Ring-Like3-merA3_Holo.png'); + background-position: center; + background-repeat: no-repeat; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; } .imageBack_Stab_Ring-Like3-merA3 input[type="radio"]:checked+label span{ - background-color: #FFFFFF; - background-image: url('/static/images/PPITypes/Stabilized/Ring-Like3-merA3_Holo.png'); - background-position: center; - background-repeat: no-repeat; - color: #000000; - border-bottom: 1px solid #2D96FA; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; + background-color: #FFFFFF; + background-image: url('/static/images/PPITypes/Stabilized/Ring-Like3-merA3_Holo.png'); + background-position: center; + background-repeat: no-repeat; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; } .imageBack_Stab_Ring-Like5-merA5 input { - display:none; + display:none; } .imageBack_Stab_Ring-Like5-merA5 label span{ @@ -938,33 +956,33 @@ Description: IPPI-DB Theme } .imageBack_Stab_Ring-Like5-merA5 input:hover+label span{ - cursor: pointer; - background-color: #FFFFFF; - background-image: url('/static/images/PPITypes/Stabilized/Ring-Like5-merA5_Holo.png'); - background-position: center; - background-repeat: no-repeat; - color: #000000; - border-bottom: 1px solid #2D96FA; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; + cursor: pointer; + background-color: #FFFFFF; + background-image: url('/static/images/PPITypes/Stabilized/Ring-Like5-merA5_Holo.png'); + background-position: center; + background-repeat: no-repeat; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; } .imageBack_Stab_Ring-Like5-merA5 input[type="radio"]:checked+label span{ - background-color: #FFFFFF; - background-image: url('/static/images/PPITypes/Stabilized/Ring-Like5-merA5_Holo.png'); - background-position: center; - background-repeat: no-repeat; - color: #000000; - border-bottom: 1px solid #2D96FA; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; + background-color: #FFFFFF; + background-image: url('/static/images/PPITypes/Stabilized/Ring-Like5-merA5_Holo.png'); + background-position: center; + background-repeat: no-repeat; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; } .imageBack_Stab_Custom input { - display:none; + display:none; } .imageBack_Stab_Custom label span{ @@ -981,41 +999,50 @@ Description: IPPI-DB Theme } .imageBack_Stab_Custom input:hover+label span{ - cursor: pointer; - background-color: #FFFFFF; - background-image: url('/static/images/PPITypes/Stabilized/Custom_Holo.png'); - background-position: center; - background-repeat: no-repeat; - color: #000000; - border-bottom: 1px solid #2D96FA; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; + cursor: pointer; + background-color: #FFFFFF; + background-image: url('/static/images/PPITypes/Stabilized/Custom_Holo.png'); + background-position: center; + background-repeat: no-repeat; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; } .imageBack_Stab_Custom input[type="radio"]:checked+label span{ - background-color: #FFFFFF; - background-image: url('/static/images/PPITypes/Stabilized/Custom_Holo.png'); - background-position: center; - background-repeat: no-repeat; - color: #000000; - border-bottom: 1px solid #2D96FA; - border-top: 1px solid #E3E9EB; - border-left: 1px solid #E3E9EB; - border-right: 1px solid #E3E9EB; + background-color: #FFFFFF; + background-image: url('/static/images/PPITypes/Stabilized/Custom_Holo.png'); + background-position: center; + background-repeat: no-repeat; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; } /* Tests form */ -.tests{ +.tests { background-color: #E3E9EB; margin-left: -60%; margin-right: -60%; padding-bottom: 0% 5% 5% 5%; + text-align: left; +} + +.tests h2 { + font-size: 18px; + text-align: left; + padding-top: 1%; + padding-bottom: 1%; } .test_input{ - margin-bottom: 5px; + margin-bottom: 15px; + margin-top: 15px; } .test_input input { @@ -1027,146 +1054,236 @@ Description: IPPI-DB Theme width: 100%; padding: 5px; } + +.inline_box_test { + display: inline-flex; + width: 100%; +} + +.test_activity { + width: 70%; + margin-left: auto; + margin-right: auto; +} + +#ck-button-half { + width:100%; + display: inline-flex; + margin-bottom: 2.5px; +} + +#ck-button-half label { + width: 100%; + margin: 4px; +} + + +#ck-button-half label span { + text-align:center; + padding:3px; + display:block; + background-color: #E8E0E0; + color: #8D8888; +} + +#ck-button-half label input { + position:absolute; + top:-20px; + display:none; +} + +#ck-button-half input:hover + span { + background: white url("http://localhost:8000/static/images/Buttons/CheckButton.png") no-repeat right; + background-size: contain; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; +} + +#ck-button-half input:checked + span { + background: white url("http://localhost:8000/static/images/Buttons/CheckButton.png") no-repeat right; + background-size: contain; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; +} + +#ck-button-half input:checked:hover + span { + background-color: #FFFFFF; + color: #000000; + border-bottom: 1px solid #2D96FA; + border-top: 1px solid #E3E9EB; + border-left: 1px solid #E3E9EB; + border-right: 1px solid #E3E9EB; +} + /* Style the tab */ .tab { - overflow: hidden; - background-color: #ffffff; + overflow: hidden; + background-color: #ffffff; } /* Style the buttons that are used to open the tab content */ .tab button { - background-color: #ffffff; - float: left; - border: none; - outline: none; - cursor: pointer; - padding: 14px 16px; - transition: 0.3s; - text-align: center; - color: #8D8889; - font-size: 42px; - font-family: "BrandonGrotesqueBlk"; - width: 33.33%; + background-color: #ffffff; + float: left; + border: none; + outline: none; + cursor: pointer; + padding: 14px 16px; + transition: 0.3s; + text-align: center; + color: #8D8889; + font-size: 42px; + font-family: "BrandonGrotesqueBlk"; + width: 33.33%; } /* Change background color of buttons on hover */ .tab button:hover { - background-color: #E3E9EB; - color: #414144; + background-color: #E3E9EB; + color: #414144; } /* Create an active/current tablink class */ .tab button.active { - background-color: #E3E9EB; - color: #414144; + background-color: #E3E9EB; + color: #414144; } /* Style the tab content */ .tabcontent { - display: none; - padding: 12px 12px; - border-top: none; - background-color: #E3E9EB; + display: none; + padding: 12px 12px; + border-top: none; + background-color: #E3E9EB; } /* Proteins form */ .proteins_form { - width: 100%; + width: 100%; } .inline_prot { - display: inline-flex; + display: inline-flex; } .inline_label { - font-weight: 700; - padding-right: 5px; + font-weight: 700; + padding-right: 5px; } .inline_field { - padding-right: 5px; + padding-right: 2px; + width: 100%; + margin-top: 5px; + text-align: left; } .inline_field input { - width: 100%; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - padding-right: 5px; + width: 100%; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + padding-right: 5px; } .inline_field select { - width: 150px; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - padding-right: 5px; + width: 150px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + padding-right: 5px; + width: 100%; } .inline_field_multiple select { - width: 210px; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - padding-right: 5px; + width: 210px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + padding-right: 5px; } .inline_box_complex { - margin: 5px; - padding: 10px; - display: inline-flex; - margin-left: -150px; - margin-right: -150px; + margin: 5px; + padding: 10px; + display: inline-flex; + margin-left: -150px; + margin-right: -150px; } .inline_box_complex_long { - margin: 5px; - padding: 10px; - display: inline-flex; - margin-left: -280px; - margin-right: -280px; + margin: 5px; + padding: 10px; + display: inline-flex; + margin-left: -280px; + margin-right: -280px; } /* Done step */ .last_step { - margin-top: 10%; + margin-top: 10%; } .add_new { - margin-top: 5px; - border-radius: 0px; - background-color: #2d96fa; - border: none; - color: #fff; - margin: 0 auto; - width: 43%; + margin-top: 5px; + border-radius: 0px; + background-color: #2d96fa; + border: none; + color: #fff; + margin: 0 auto; + width: 43%; } .add_new a { - color: #FFF; - text-decoration: none; + color: #FFF; + text-decoration: none; } .add_new a:hover { - color: #FFF; - text-decoration: none; + color: #FFF; + text-decoration: none; } .add_new a:visited { - color: #FFF; - text-decoration: none; + color: #FFF; + text-decoration: none; } +[type="reset"], [type="submit"], button { + -webkit-appearance: button; + margin-top: 5px; + border-radius: 0px; + background-color: #2d96fa; + border: none; + color: #fff; +} -[type="reset"], [type="submit"], button, html [type="button"] { - -webkit-appearance: button; - margin-top: 5px; - border-radius: 0px; - background-color: #2d96fa; - border: none; - color: #fff; + +/* Test floating label */ +.form-group { + position: relative; } +.form-control-placeholder { + position: absolute; + top: 0; + padding: 7px 0 0 7px; + transition: all 200ms; + opacity: 0.5; +} + +.form-control:focus + .form-control-placeholder, +.form-control:valid + .form-control-placeholder { + font-size: 75%; + transform: translate3d(0, -100%, 0); + opacity: 1; +} diff --git a/ippisite/ippidb/static/js/ippidb.js b/ippisite/ippidb/static/js/ippidb.js index d53314e5968b1f4067d9f6e980c9763325d30b0a..c88592a2a379281e9847284b0ce533af747624c2 100644 --- a/ippisite/ippidb/static/js/ippidb.js +++ b/ippisite/ippidb/static/js/ippidb.js @@ -33,6 +33,7 @@ function addComp(id){ document.getElementById("compound_"+id).appendChild(clone); } + // Function to enlarge some part of the main page $(document).ready(function(){ $('.box').on('click','.box__inner',function() { diff --git a/ippisite/ippidb/templates/CompoundForm.html b/ippisite/ippidb/templates/CompoundForm.html index e12d945f9ab9f493584aaa26405c1b14ce697049..274d1619a29e759ef4b3e17132291b4f646109a8 100644 --- a/ippisite/ippidb/templates/CompoundForm.html +++ b/ippisite/ippidb/templates/CompoundForm.html @@ -37,8 +37,14 @@ <h1 id="Name_{{ form.compound_name.id_for_label }}">Compound</h1> <h2>Name your compound</h2> </div> - <div class="compound_input">{{ form.common_name }}</div> - <div class="compound_input">{{ form.compound_name }}</div> + <div class="compound_input form-group"> + {{ form.common_name }} + <label class="form-control-placeholder">Common name</label> + </div> + <div class="compound_input form-group"> + {{ form.compound_name }} + <label class="form-control-placeholder">Name in biblio</label> + </div> <div id="type_title"> <h2>Choose a format to import your molecule</h2> </div> @@ -52,14 +58,15 @@ </div> {% endfor %} </div> - <div class="compound_input" id="molecule_comp_{{ form.molecule.id_for_label }}"> + <div class="compound_input form-group" id="molecule_comp_{{ form.molecule.id_for_label }}"> {{form.molecule_comp}} + <label class="form-control-placeholder">Molecule composition</label> </div> - <div id="ck-button-long" class="compound_input"> + <div id="ck-button-long"> <label>{{ form.is_macrocycle}}<span>{{ form.is_macrocycle.label }}</span></label> </div> - <div id="ck-button-long" class="submit_button"> Add compound - </div> + <input type="button" id="ck-button-long" class="add_button" onclick="addComp();" value="Add Compound"> + </input> </div> {% endfor %} </div> diff --git a/ippisite/ippidb/templates/IdForm.html b/ippisite/ippidb/templates/IdForm.html index ef8eeef8065dd15fba5d406b940e62917a19955c..6c834eb196638233dd747f5c1406e59038425895 100644 --- a/ippisite/ippidb/templates/IdForm.html +++ b/ippisite/ippidb/templates/IdForm.html @@ -46,7 +46,10 @@ </label> {% endfor %} </div> - <div class="input_field">{{ wizard.form.id_source}}</div> + <div class="input_field form-group"> + {{ wizard.form.id_source}} + <label class="form-control-placeholder">ID</label> + </div> </div> {% endif %} </table> diff --git a/ippisite/ippidb/templates/PDBForm.html b/ippisite/ippidb/templates/PDBForm.html index 50626d6d7e959970287c432aaab4383aac692e3a..d6033a2ec818bd4c46b7cf1d55ec927a31caf924 100644 --- a/ippisite/ippidb/templates/PDBForm.html +++ b/ippisite/ippidb/templates/PDBForm.html @@ -36,7 +36,10 @@ test {{ form }} {% endfor %} {% else %} - <div class="input_field">{{form.pdb_id}}</div> + <div class="input_field form-group"> + {{form.pdb_id}} + <label for="id_PDBForm-pdb_id" class="form-control-placeholder">PDB ID</label> + </div> {% endif %} </table> <input class="submit_button" type="submit" value="{% trans "Next step" %}"/> diff --git a/ippisite/ippidb/templates/PpiForm.html b/ippisite/ippidb/templates/PpiForm.html index 7a37f00de287ea18450b47041c35b58a187d3e59..e902176419f65e70a45320a637675f67fc466e6d 100644 --- a/ippisite/ippidb/templates/PpiForm.html +++ b/ippisite/ippidb/templates/PpiForm.html @@ -39,11 +39,22 @@ {% endfor %} {% else %} <div class="inline_box_complex"> - <div class="inline_label"> PPI: </div> - <div class="input_field">{{ wizard.form.pdb_id }}</div> - <div class="input_field">{{ wizard.form.pockets_nb}}</div> - <div class="inline_field">{{ wizard.form.cc_nb }}</div> - <div class="inline_field">{{ wizard.form.symmetry }}</div> + <div class="input_field form-group"> + {{ wizard.form.pdb_id }} + <label class="form-control-placeholder">PDB ID</label> + </div> + <div class="input_field form-group"> + {{ wizard.form.pockets_nb}} + <label class="form-control-placeholder">Pockets number</label> + </div> + <div class="input_field form-group"> + {{ wizard.form.cc_nb }} + <label class="form-control-placeholder">Complex per PPI</label> + </div> + <div class="input_field form-group"> + {{ wizard.form.symmetry }} + <label class="form-control-placeholder">Symmetry</label> + </div> </div> {% endif %} </table> diff --git a/ippisite/ippidb/templates/ProteinDomainComplexForm.html b/ippisite/ippidb/templates/ProteinDomainComplexForm.html index f6bfa0ee19a27cb845ecb16e6474c77809732f03..3dea930312c0975e543435981efeb9ce41fb0538 100644 --- a/ippisite/ippidb/templates/ProteinDomainComplexForm.html +++ b/ippisite/ippidb/templates/ProteinDomainComplexForm.html @@ -34,10 +34,22 @@ {{ wizard.form.management_form }} {% for form in wizard.form.forms %} <div class="inline_box_complex_long"> - <div class="input_field"> {{ form.complex_type }}</div> - <div class="input_field"> {{ form.complex_protein }}</div> - <div class="input_field"> {{ form.complex_domain }}</div> - <div class="input_field"> {{ form.ppc_copy_nb }}</div> + <div class="input_field form-group"> + {{ form.complex_type }} + <label class="form-control-placeholder">Complex type</label> + </div> + <div class="input_field form-group"> + {{ form.complex_protein }} + <label class="form-control-placeholder">Protein</label> + </div> + <div class="input_field form-group"> + {{ form.complex_domain }} + <label class="form-control-placeholder">Domain</label> + </div> + <div class="input_field form-group"> + {{ form.ppc_copy_nb }} + <label class="form-control-placeholder">Number of copies of the protein in the complex</label> + </div> </div> {% endfor %} {% endif %} diff --git a/ippisite/ippidb/templates/TestsForm.html b/ippisite/ippidb/templates/TestsForm.html index ca1dbdd9a6d944308fec5b198370e18938acdd7e..ef8dd9cb247be87ac7c27fc6fd6226cf04d47ced 100644 --- a/ippisite/ippidb/templates/TestsForm.html +++ b/ippisite/ippidb/templates/TestsForm.html @@ -19,68 +19,124 @@ <div id="Form"> <div class="step_desc"> <h1 class="step_title">Tests performed</h1> - <p class="step_step">Step {{ wizard.steps.step1 }} on {{ wizard.steps.count }}</p> - <p class="step_step_desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vulputate felis ac augue pretium, ac blandit lectus mattis. Vestibulum iaculis consequat facilisis. Duis porttitor erat mauris, non porttitor eros feugiat eu. Pellentesque id nisl vel nisl imperdiet convallis vel sed lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec dolor urna, posuere vitae leo quis, hendrerit imperdiet enim. Nunc nec euismod nisi. Phasellus ut ante ante.</p> + <p class="step_step">Step {{ wizard.steps.step1 }} on {{ wizard.steps.count }}</p> + <p class="step_step_desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vulputate felis ac augue pretium, ac blandit lectus mattis. Vestibulum iaculis consequat facilisis. Duis porttitor erat mauris, non porttitor eros feugiat eu. Pellentesque id nisl vel nisl imperdiet convallis vel sed lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec dolor urna, posuere vitae leo quis, hendrerit imperdiet enim. Nunc nec euismod nisi. Phasellus ut ante ante.</p> </div> <div class="form_div"> <form action="" method="post"> {% csrf_token %} <table> - {{ wizard.management_form }} - {{ wizard.form.errors}} - {{ wizard.form.non_field_errors}} - {% block custom_form %}{% endblock %} - - {% if wizard.form.forms %} + {{ wizard.management_form }} + {{ wizard.form.errors}} + {{ wizard.form.non_field_errors}} + {% block custom_form %}{% endblock %} + + {% if wizard.form.forms %} {{ wizard.form.management_form }} {% for form in wizard.form.forms %} - {{ form }} + {{ form }} {% endfor %} - {% else %} - <div class="tests"> - <!-- Tab links --> - <div class="tab"> - <button class="tablinks active" onclick="openTests(event, 'Activity')" id="defaultOpen">Activity</button> - <button class="tablinks" onclick="openTests(event, 'Cytotoxicity')">Cytotoxicity</button> - <button class="tablinks" onclick="openTests(event, 'PK')">PK</button> - </div> + {% else %} + <div class="tests"> + <!-- Tab links --> + <div class="tab"> + <button class="tablinks active" onclick="openTests(event, 'Activity')" id="defaultOpen">Activity</button> + <button class="tablinks" onclick="openTests(event, 'Cytotoxicity')">Cytotoxicity</button> + <button class="tablinks" onclick="openTests(event, 'PK')">PK</button> + </div> - <!-- Tab content --> - <div id="Activity" class="tabcontent" style="display: block;"> - <div class="test_input">{{ wizard.form.activityDesc_test_name }}</div> - <div> - {% for radio in wizard.form.activityDesc_type %} - <div> - {{ radio.tag }} - <label> - <span>{{ radio.choice_label }}</span> - </label> + <!-- Tab content --> + <div id="Activity" class="tabcontent" style="display: block;"> + <div class="test_activity"> + <h2>Describe your activity test</h2> + <div class="test_input form-group"> + {{ wizard.form.activityDesc_test_name }} + <label class="form-control-placeholder" for="id_TestsForm-activityDesc_test_name">Activity test name</label> + </div> + <div id="ck-button-half"> + {% for radio in wizard.form.activityDesc_type %} + <label> + {{ radio.tag }} + <span>{{ radio.choice_label }}</span> + </label> + {% endfor %} + <label class="form-control-placeholder">Activity type</label> + </div> + <div class="test_input form-group"> + {{ wizard.form.activityDesc_cell_line }} + <label class="form-control-placeholder">Corresponding cell line</label> + </div> + <div class="test_input form-group"> + {{ wizard.form.activityDesc_test_modulation_type }} + <label class="form-control-placeholder">Modulation type</label> + </div> + <h2>Results</h2> + <div class="inline_box_test "> + <div class="inline_field form-group"> + {{ wizard.form.activityRes_compound }} + <label class="form-control-placeholder">Compound</label> + </div> + <div class="inline_field form-group"> + {{ wizard.form.activityRes_test_modulation_type }} + <label class="form-control-placeholder">Modulation type</label> + </div> + <div class="inline_field form-group"> + {{ wizard.form.activityRes_activity_type }} + <label class="form-control-placeholder">Activity type</label> + </div> + <div class="inline_field form-group"> + {{ wizard.form.activityRes_activity }} + <label class="form-control-placeholder">Activity</label> + </div> + <input type="button" class="add_button" value="+ Add compound"></input> + </div> + </div> + </div> + <div id="Cytotoxicity" class="tabcontent"> + <div class="test_activity"> + <h2>Describe your cytotoxicity test</h2> + <div class="test_input form-group"> + {{ wizard.form.cytotoxDesc_test_name }} + <label class="form-control-placeholder" for="id_TestsForm-id_TestsForm-cytotoxDesc_test_name">Cytotoxicity test name</label> + </div> + <div class="test_input">{{ wizard.form.cytotoxDesc_cell_line }}</div> + <div class="test_input">{{ wizard.form.cytotoxDesc_compound_concentration }}</div> + <h2>Results</h2> + <div class="inline_box_test"> + <div class="inline_field">{{ wizard.form.cytotoxRes_compound }}</div> + <div class="inline_field">{{ wizard.form.cytotoxRes_toxicity }}</div> + <input type="button" class="add_button" value="+ Add compound"></input> + </div> </div> - {% endfor %} </div> - <div class="test_input">{{ wizard.form.activityDesc_cell_line }}</div> - <div class="test_input">{{ wizard.form.activityDesc_ppi }}</div> - <div class="test_input">{{ wizard.form.activityRes_test_modulation_type }}</div> - </div> - <div id="Cytotoxicity" class="tabcontent"> - <div class="test_input">{{ wizard.form.cytotoxDesc_test_name }}</div> - <div class="test_input">{{ wizard.form.cytotoxDesc_cell_line }}</div> - <div class="test_input">{{ wizard.form.cytotoxDesc_compound_concentration }}</div> - <div class="test_input">{{ wizard.form.cytotoxRes_toxicity }}</div> + <div id="PK" class="tabcontent"> + <div class="test_activity"> + <h2>Describe your PK test</h2> + <div class="test_input">{{ wizard.form.pkDesc_test_name }}</div> + <div class="test_input">{{ wizard.form.pkDesc_organism }}</div> + <div class="test_input">{{ wizard.form.pkDesc_administration_mode }}</div> + <div class="test_input">{{ wizard.form.pkDesc_dose }}</div> + <div class="test_input">{{ wizard.form.pkDesc_dose_interval }}</div> + <h2>Results</h2> + <div class="inline_box_test"> + <div class="inline_field">{{ wizard.form.pkRes_compound }}</div> + <div class="inline_field">{{ wizard.form.pkRes_tolerated }}</div> + <div class="inline_field">{{ wizard.form.pkRes_auc }}</div> + <div class="inline_field">{{ wizard.form.pkRes_clearance }}</div> + <div class="inline_field">{{ wizard.form.pkRes_cmax }}</div> + <div class="inline_field">{{ wizard.form.pkRes_oral_bioavailability }}</div> + <div class="inline_field">{{ wizard.form.pkRes_t_demi }}</div> + <div class="inline_field">{{ wizard.form.pkRes_t_max }}</div> + <div class="inline_field">{{ wizard.form.pkRes_voldistribution }}</div> + <input type="button" class="add_button" value="+ Add compound"></input> + </div> + </div> + </div> </div> - - <div id="PK" class="tabcontent"> - <div class="test_input">{{ wizard.form.pkDesc_test_name }}</div> - <div class="test_input">{{ wizard.form.pkDesc_organism }}</div> - <div class="test_input">{{ wizard.form.pkDesc_administration_mode }}</div> - <div class="test_input">{{ wizard.form.pkDesc_dose }}</div> - <div class="test_input">{{ wizard.form.pkDesc_dose_interval }}</div> - </div> - </div> - {% endif %} + {% endif %} </table> - <input class="submit_button" type="submit" value="{% trans "submit" %}"/> + <input class="submit_button" type="submit" value="{% trans "submit" %}"/> </form> </div> </div> diff --git a/ippisite/requirements_rachel.txt b/ippisite/requirements_rachel.txt new file mode 100644 index 0000000000000000000000000000000000000000..18ef0a1d69b83f1b92a0d7896e560f9a30b2be39 --- /dev/null +++ b/ippisite/requirements_rachel.txt @@ -0,0 +1,14 @@ +Django==1.11 +django-bootstrap3 +django-pandas +bioservices +typing +django-extensions +pydot +pyparsing +django-formtools +django-debug-toolbar +mod_wsgi +bioblend +django-allauth +#pygraphviz>=1.3 --install-option="--include-path=/usr/local/include/graphviz/" --install-option="--library-path=/usr/local/lib/graphviz"