Update css files and images for Protein Domain Complex Type form

Former-commit-id: cffefe011db95dea9442e0810503870ae4c6329d

ippisite/ippidb/forms.py

@@ -39,8 +39,7 @@ class ProteinForm(ModelForm):
 
 ProteinFormSet = modelformset_factory(Protein, exclude=('recommended_name_long', 'short_name'))
 formset=ProteinFormSet()
-for form in formset:
-	print(form.as_table())
+
 
 ARCHI_TYPE = (
     ('inhibited', 'Inhibited'),

ippisite/ippidb/static/css/ippidb.css

@@ -646,6 +646,8 @@ body {
 
 /* BUTTONS */
 
+/* IdForm*/
+
 #id_IdForm-source {
     overflow: hidden;
     width: 400px;
@@ -684,6 +686,8 @@ body {
     border-right: 1px solid #E3E9EB;
 }
 
+/* BibliographyForm*/
+
 #ck-button {
     margin: 4px;
     float:left;
@@ -735,6 +739,87 @@ body {
     border-right: 1px solid #E3E9EB;
 }
 
+/* ProteinDomainComplexTypeForm */
+
+#id_ProteinDomainComplexTypeForm-inhibited {
+    overflow: hidden;
+    width: 600px;
+    padding-bottom: 5px;
+}
+
+#id_ProteinDomainComplexTypeForm-inhibited label span{
+  display: inline-block;
+  width: 180px;
+  text-align: center;
+  border: 1px solid #8D8888;
+  height: 180px;
+  font-size: 12px;
+} 
+
+#id_ProteinDomainComplexTypeForm-inhibited input {
+    display:none;
+}
+
+#id_ProteinDomainComplexTypeForm-inhibited 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;
+}
+
+#id_ProteinDomainComplexTypeForm-inhibited 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;
+}
+
+/* Stabilized */
+
+#id_ProteinDomainComplexTypeForm-stabilized {
+    overflow: hidden;
+    width: 600px;
+    padding-bottom: 5px;
+}
+
+#id_ProteinDomainComplexTypeForm-stabilized label span{
+  display: inline-block;
+  width: 180px;
+  text-align: center;
+  border: 1px solid #8D8888;
+  height: 180px;
+  font-size: 12px;
+} 
+
+#id_ProteinDomainComplexTypeForm-stabilized input {
+    display:none;
+}
+
+#id_ProteinDomainComplexTypeForm-stabilized 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;
+}
+
+#id_ProteinDomainComplexTypeForm-stabilized 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;
+}
+
+
 button, input, select, textarea {
     line-height: inherit;
     font-family: "BrandonGrotesqueReg";
@@ -808,6 +893,18 @@ button, input, select, textarea {
 }
 
 
+.type_style {
+    background-color: rgb(227, 233, 235);
+    padding: 10px;
+    margin: 10px;
+}
+
+.type_title h1{
+    text-align: left;
+    color: #414144;
+    font-size: 42px;
+}
+
 /* FOOTER */
 
 .main-footer {

ippisite/ippidb/templates/ProteinDomainComplexTypeForm.html

@@ -28,25 +28,41 @@ If your PPI complex is not among them, please select « Create you Own »</p>
 {% if wizard.form.forms %}
 	{{ wizard.form.management_form }}
 	{% for form in wizard.form.forms %}
-	   <td>{{form.archi_type}}</td>
-	   <td>{{form.inhibited_type}}</td>
 	{% endfor %}
 {% else %}
-	<script type="text/javascript">
-	function Hide (){
-		if(document.getElementById('archi').value == 'inhibited'){
-			document.getElementById('inhibited').style.display = 'block';
-			document.getElementById('stabilized').style.display = '';
-		} else {
-			document.getElementById('inhibited').style.display = '';
-			document.getElementById('stabilized').style.display = 'block';
-		}
-	}
-	;
-	</script>
-	<div id='archi' name='archi' onclick='Hide ()'>{{ wizard.form.archi }}</div>
-	<div id='inhibited' name='inhibited'>{{ wizard.form.inhibited }}</div>
-	<div id='stabilized' name= 'stabilized'>{{ wizard.form.stabilized }}</div>
+	<div id='archi' name='archi'>{{ wizard.form.archi }}</div>
+	<div id='inhibited' name='inhibited' class="type_style">
+		<div class="type_title"><h1>Inhibited</h1></div>
+		<div id="id_ProteinDomainComplexTypeForm-inhibited">
+				{{ wizard.form.inhibited.0.tag }}
+				<label for="{{  wizard.form.inhibited.0.id_for_label }}">
+	        		<span>{{ wizard.form.inhibited.0.choice_label}}</span>
+	        	</label>
+		</div>	
+		<div id="id_ProteinDomainComplexTypeForm-inhibited">
+				{{ wizard.form.inhibited.1.tag }}
+				<label for="{{  wizard.form.inhibited.1.id_for_label }}">
+	        		<span>{{ wizard.form.inhibited.1.choice_label}}</span>
+	        	</label>
+		</div>	
+		<div id="id_ProteinDomainComplexTypeForm-inhibited">
+				{{ wizard.form.inhibited.2.tag }}
+				<label for="{{  wizard.form.inhibited.2.id_for_label }}">
+	        		<span>{{ wizard.form.inhibited.2.choice_label}}</span>
+	        	</label>
+		</div>	
+		
+	</div>
+	<div id='stabilized' name= 'stabilized' class="type_style">
+		<div class="type_title"><h1>Stabilized</h1></div>
+		<div id="id_ProteinDomainComplexTypeForm-stabilized">
+			{% for radio in wizard.form.stabilized %}
+	    	  	{{ radio.tag }}
+	        	<label style="background-image: url('/static/images/DimericsPPI/Stabilized/{{radio.choice_value}}.png');" for="{{ radio.id_for_label }}">
+	        		<span>{{ radio.choice_label }}</span>
+	    		</label>
+			{% endfor %}
+		</div>
 	</div>
 {% endif %}
 </table>