From 19b10e64b3f92a727f328c4742fcaa4c802e4063 Mon Sep 17 00:00:00 2001
From: Rachel TORCHET <racheltorchet@users.noreply.github.com>
Date: Fri, 7 Jul 2017 17:25:46 +0200
Subject: [PATCH] update Architecture form - radio buttons with images

Former-commit-id: 9fe85cac03a2cbe47475593061a6ccf8ff0c40ae
---
 ippisite/ippidb/forms.py                      |   4 +-
 ippisite/ippidb/static/css/ippidb.css         | 135 +++++++++++++++---
 .../PPITypes/Inhibited/Customyourown_Apo.png  | Bin 1387 -> 1505 bytes
 .../PPITypes/Inhibited/Customyourown_Holo.png | Bin 1387 -> 1840 bytes
 .../PPITypes/Stabilized/Customyourown_Apo.png | Bin 1387 -> 1505 bytes
 .../Stabilized/Customyourown_Holo.png         | Bin 1387 -> 1840 bytes
 ...Hetero2merApo.png => Hetero2-merABApo.png} | Bin
 ippisite/ippidb/templates/PDBForm.html        |  12 +-
 .../ProteinDomainComplexTypeForm.html         |  26 ++--
 ippisite/ippidb/templates/ProteinForm.html    |   4 +-
 ippisite/ippidb/views.py                      |   4 +-
 11 files changed, 148 insertions(+), 37 deletions(-)
 rename ippisite/ippidb/static/images/PPITypes/Stabilized/{Hetero2merApo.png => Hetero2-merABApo.png} (100%)

diff --git a/ippisite/ippidb/forms.py b/ippisite/ippidb/forms.py
index 4e179130..925fbf2f 100644
--- a/ippisite/ippidb/forms.py
+++ b/ippisite/ippidb/forms.py
@@ -1,4 +1,4 @@
-from django.forms import ModelForm,modelformset_factory
+from django.forms import ModelForm,modelformset_factory,formset_factory
 from django import forms
 from django.db import models
 from .models import Bibliography, Protein, ProteinDomainComplex, Ppi, PpiComplex
@@ -26,6 +26,8 @@ class BibliographyForm(ModelForm):
 class PDBForm(forms.Form):
 	pdb_id = forms.CharField(label="PDB ID",max_length=4, widget=forms.TextInput(attrs={'placeholder': 'e.g 4HHB'}))
 
+PDBFormSet = formset_factory(PDBForm)
+
 
 class ProteinForm(ModelForm):
 	class Meta:
diff --git a/ippisite/ippidb/static/css/ippidb.css b/ippisite/ippidb/static/css/ippidb.css
index ac0da657..e8be8293 100644
--- a/ippisite/ippidb/static/css/ippidb.css
+++ b/ippisite/ippidb/static/css/ippidb.css
@@ -744,28 +744,77 @@ body {
     overflow: hidden;
     width: 600px;
     padding-bottom: 5px;
-    background-image: url('/static/images/PPITypes/Inhibited/{{radio.choice_label|cut:" "}}_Apo.png');
-    background-position: center;
-    background-repeat: no-repeat;
+    display: flex;
+}
+
+/* Background image classes */
+.imageBack_Inhib_Hetero2-merAB input {
+    display:none;
 }
 
-#id_ProteinDomainComplexTypeForm-inhibited label span{
+.imageBack_Inhib_Hetero2-merAB label span{
   display: inline-block;
   width: 180px;
   text-align: center;
   border: 1px solid #8D8888;
+  background-color: #FFFFFF;
+  background-image: url('/static/images/PPITypes/Inhibited/Hetero2-merAB_Apo.png');
+  background-position: center;
+  background-repeat: no-repeat;
   height: 180px;
   font-size: 12px;
 
 } 
 
-#id_ProteinDomainComplexTypeForm-inhibited input {
+.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;
+}
+
+.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;
+}
+
+
+.imageBack_Inhib_Homo2-merA2 input {
     display:none;
 }
 
-#id_ProteinDomainComplexTypeForm-inhibited input:hover+label span{
+.imageBack_Inhib_Homo2-merA2 label span{
+  display: inline-block;
+  width: 180px;
+  text-align: center;
+  border: 1px solid #8D8888;
+  background-color: #FFFFFF;
+  background-image: url('/static/images/PPITypes/Inhibited/Homo2-merA2_Apo.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 180px;
+  font-size: 12px;
+} 
+
+.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;
@@ -773,8 +822,11 @@ body {
     border-right: 1px solid #E3E9EB;
 }
 
-#id_ProteinDomainComplexTypeForm-inhibited input[type="radio"]:checked+label span{
+.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;
@@ -782,16 +834,48 @@ body {
     border-right: 1px solid #E3E9EB;
 }
 
-.image-inhibited label span{
+.imageBack_Inhib_Customyourown input {
+    display:none;
+}
+
+.imageBack_Inhib_Customyourown label span{
+  display: inline-block;
+  width: 180px;
+  text-align: center;
+  border: 1px solid #8D8888;
+  background-color: #FFFFFF;
+  background-image: url('/static/images/PPITypes/Inhibited/Customyourown_Apo.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 180px;
+  font-size: 12px;
+
+} 
+
+.imageBack_Inhib_Customyourown input:hover+label span{
+    cursor: pointer;
+    background-color: #FFFFFF;
+    background-image: url('/static/images/PPITypes/Inhibited/Customyourown_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;
 }
 
-.image-inhibited label span:hover {
+.imageBack_Inhib_Customyourown input[type="radio"]:checked+label span{
+    background-color: #FFFFFF;
+    background-image: url('/static/images/PPITypes/Inhibited/Customyourown_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 */
 
 #stabilized{
@@ -802,24 +886,34 @@ body {
     overflow: hidden;
     width: 600px;
     padding-bottom: 5px;
+    display: flex;
+    flex-wrap: wrap;
 }
 
-#id_ProteinDomainComplexTypeForm-stabilized label span{
+.imageBack_Stab_Customyourown input {
+    display:none;
+}
+
+.imageBack_Stab_Customyourown label span{
   display: inline-block;
   width: 180px;
   text-align: center;
   border: 1px solid #8D8888;
+  background-color: #FFFFFF;
+  background-image: url('/static/images/PPITypes/Stabilized/Customyourown_Apo.png');
+  background-position: center;
+  background-repeat: no-repeat;
   height: 180px;
   font-size: 12px;
-} 
 
-#id_ProteinDomainComplexTypeForm-stabilized input {
-    display:none;
-}
+} 
 
-#id_ProteinDomainComplexTypeForm-stabilized input:hover+label span{
+.imageBack_Stab_Customyourown input:hover+label span{
     cursor: pointer;
     background-color: #FFFFFF;
+    background-image: url('/static/images/PPITypes/Stabilized/Customyourown_Holo.png');
+    background-position: center;
+    background-repeat: no-repeat;
     color: #000000;
     border-bottom: 1px solid #2D96FA;
     border-top: 1px solid #E3E9EB;
@@ -827,8 +921,11 @@ body {
     border-right: 1px solid #E3E9EB;
 }
 
-#id_ProteinDomainComplexTypeForm-stabilized input[type="radio"]:checked+label span{
+.imageBack_Stab_Customyourown input[type="radio"]:checked+label span{
     background-color: #FFFFFF;
+    background-image: url('/static/images/PPITypes/Stabilized/Customyourown_Holo.png');
+    background-position: center;
+    background-repeat: no-repeat;
     color: #000000;
     border-bottom: 1px solid #2D96FA;
     border-top: 1px solid #E3E9EB;
@@ -837,6 +934,10 @@ body {
 }
 
 
+
+
+
+
 button, input, select, textarea {
     line-height: inherit;
     font-family: "BrandonGrotesqueReg";
diff --git a/ippisite/ippidb/static/images/PPITypes/Inhibited/Customyourown_Apo.png b/ippisite/ippidb/static/images/PPITypes/Inhibited/Customyourown_Apo.png
index 3726d3e314ccb7c3e948171be5bd96293090c455..90ecfaf138fd40773474bc71847888c92db595f9 100644
GIT binary patch
delta 445
zcmaFO^^jY!Gr-TCmrII^fq{Y7)59eQNIQTq2OE%Fm05UiqoN^8eU+z+V@L(#+u4SG
zhXVv$%4KJVh!n8$F$jrHDaqW)I;SbQ;fQDkvuN$Dk}D-19vp!R$A5ZX>W!)4ObtG}
z<JSB6J+{XFdP>K0`H%l}E^(Gzw`s}YoUMCa#%=x*u>7d&wHkwshwEhZBdhZMZM|r9
z>XP$ZHu0X#ObI!%w%rUq&Gm(1j6G`?rwcY@8k|#V*jV~Shsl8VSR{+Vw!V3;49gB$
zbTb^gcColx{G!ghwTCC~J}3X)>~3iCpT9S4E}1?ze*O1L-44B_Hof{MHssBI=X0K+
zZCSRQtAnm=o2}r13q@xabF5f;c!N5VMAW)U5yq`065m`HoKKtfD=nDDcX%F0eL}|0
zXB$hmC%vnE>-_(2v2lOLmHU#L-xt0<sV+9V`mDX4+~Xh1<7?A2^W&$)+$*aJG|~>Z
za?x4fa>5)}hUC{TB3TlodNy;w{Da*)Gv_tz{Zn02m2`i9e%(yhkj{wo%-+&}44-}r
WnOLv*p;QTs5e83JKbLh*2~7ax5WtWC

delta 326
zcmV-M0lEI+3+oCYiBL{Q4GJ0x0000DNk~Le0000Z0000Z2nGNE03O-1S+OB81b+lc
zL_t(o3GJ9Y3Iah4h4Xa9(i>RWDmDt+iiKD44%T`DJ(6N!VdYP$9>7l6A_f$cSspvn
z2tuaHym=eKN7(s+B#z#)n5#&q>N7x2`)OlV<@;XGz9%uU6*3mlLA4hf^CT5ht4{hm
zhZn<GI~ga#2r%7y<}b*gyDAn?>3_3oOFAT1)mBLl1ORtYSqCzoLUtKMhAKMZu3*JB
zr<n0BcoO4%c~JKTX0)7)lVJpy?mffEWTJYtll++(LR}SYJCHX+y)*|N5WSRiBAEAP
zKj5^{T^8Gz+ktHd8@sCHDcQYe7%eB`WEcUad(Su-Mu6$bk41nUELoi;{2S<c{KRq5
Y6Q2<<bM7C@LI3~&07*qoM6N<$f(^8UjQ{`u

diff --git a/ippisite/ippidb/static/images/PPITypes/Inhibited/Customyourown_Holo.png b/ippisite/ippidb/static/images/PPITypes/Inhibited/Customyourown_Holo.png
index 3726d3e314ccb7c3e948171be5bd96293090c455..c094ea6329150b771b729db3f26e1bd150e47c6f 100644
GIT binary patch
delta 783
zcmaFOwSiBuGr-TCmrII^fq{Y7)59eQNN0jD2OE&IY~r=rsA#}a&veq$#WAFU@$GHJ
zzA26ZZ4ckgl;0S+Q(*^VmT*&)W0Nw64qv0o<Ov0geGb=@3+FT_3#@BYQ#^BlS6j_g
zGjLn{$8|GTX<m%qr@lL{n)$EIKHEDo>A!baU0S^Q?a%4qf6u>?S^j<dWrrVsZvXmg
zc6{^I$hv=7yRS-~yYJp=$^WcghPOi`HbH&j1`|P_B`=t)J6o1^CMdaz-|$q?@nsR#
z+;zZDDKS%NhQ~$LG9gZH;e#$+dK)HtM9kt)3o2=x>vHIli^0T2+;3Ebrl~b`l5A8x
zPP4wg_HSRl_j~)ttEV#UB#ZaO&wTLi?cKcZyUrf_QGVv{zu(uYej7Zi*tkpL((mM+
z^HXeg8{Yr<yl+w96M>Z)?L|VJO2n}0iB(7)bp^lv`<HGOZkl5hb6+n0oZ-IudEY|k
zhl_vL+qd`S{_wr??|(JdG-tZw%CzW-htgBGhTR?xQ)E1s+~Ft?=j@oI+&M*>@tqQ5
zV3EqiBIN_IDhghGDnWTHJGxn1PEK?=)yq&mu|dOflE+TL2YNyRs_sIB3`-%;wCI0H
xPxsybW`C@3PwdQx@7}Ucf4jlz@Xz1>8Qz!~iOSc1UjR(w44$rjF6*2Ung9yaN*4eC

delta 327
zcmV-N0l5CK4(kdbiBL{Q4GJ0x0000DNk~Le0000Z0000Z2nGNE03O-1S+OB71b+bp
zNkl<ZSPAWzJqiLr42AP_#nKyC*(x>)+lqx(@ebB{13i*rVPWM@sUE;i*dhiLlvy4-
z(+EPQ%Dj0S!bjNofh3OJvY4w#r|L66PWx$NR^|I%&%P%yu@y2F(LuEr8}lR;Q>#w;
zJBJs;SUVXf!w4|ld*(05pt~v-P=D#OYD+pKSJhTY4+H>rQCSBvpF(ySM20Fl;;vxD
zHm8{JE_f2-eR)v#24=LJjFVvmnC?Bp$Yi2=wUhjr8A4qZZ99-RL%lQy9uU2hbRwAd
zW<TJx(OnkXnA?GE2OGPp<SE&`XBaIf<75~CrhCsg8AgEV$&W>V9xPd%B^><ddi=z3
Z(G#B$Fmvu7%R&GE002ovPDHLkV1n9ggkS&w

diff --git a/ippisite/ippidb/static/images/PPITypes/Stabilized/Customyourown_Apo.png b/ippisite/ippidb/static/images/PPITypes/Stabilized/Customyourown_Apo.png
index 3726d3e314ccb7c3e948171be5bd96293090c455..90ecfaf138fd40773474bc71847888c92db595f9 100644
GIT binary patch
delta 445
zcmaFO^^jY!Gr-TCmrII^fq{Y7)59eQNIQTq2OE%Fm05UiqoN^8eU+z+V@L(#+u4SG
zhXVv$%4KJVh!n8$F$jrHDaqW)I;SbQ;fQDkvuN$Dk}D-19vp!R$A5ZX>W!)4ObtG}
z<JSB6J+{XFdP>K0`H%l}E^(Gzw`s}YoUMCa#%=x*u>7d&wHkwshwEhZBdhZMZM|r9
z>XP$ZHu0X#ObI!%w%rUq&Gm(1j6G`?rwcY@8k|#V*jV~Shsl8VSR{+Vw!V3;49gB$
zbTb^gcColx{G!ghwTCC~J}3X)>~3iCpT9S4E}1?ze*O1L-44B_Hof{MHssBI=X0K+
zZCSRQtAnm=o2}r13q@xabF5f;c!N5VMAW)U5yq`065m`HoKKtfD=nDDcX%F0eL}|0
zXB$hmC%vnE>-_(2v2lOLmHU#L-xt0<sV+9V`mDX4+~Xh1<7?A2^W&$)+$*aJG|~>Z
za?x4fa>5)}hUC{TB3TlodNy;w{Da*)Gv_tz{Zn02m2`i9e%(yhkj{wo%-+&}44-}r
WnOLv*p;QTs5e83JKbLh*2~7ax5WtWC

delta 326
zcmV-M0lEI+3+oCYiBL{Q4GJ0x0000DNk~Le0000Z0000Z2nGNE03O-1S+OB81b+lc
zL_t(o3GJ9Y3Iah4h4Xa9(i>RWDmDt+iiKD44%T`DJ(6N!VdYP$9>7l6A_f$cSspvn
z2tuaHym=eKN7(s+B#z#)n5#&q>N7x2`)OlV<@;XGz9%uU6*3mlLA4hf^CT5ht4{hm
zhZn<GI~ga#2r%7y<}b*gyDAn?>3_3oOFAT1)mBLl1ORtYSqCzoLUtKMhAKMZu3*JB
zr<n0BcoO4%c~JKTX0)7)lVJpy?mffEWTJYtll++(LR}SYJCHX+y)*|N5WSRiBAEAP
zKj5^{T^8Gz+ktHd8@sCHDcQYe7%eB`WEcUad(Su-Mu6$bk41nUELoi;{2S<c{KRq5
Y6Q2<<bM7C@LI3~&07*qoM6N<$f(^8UjQ{`u

diff --git a/ippisite/ippidb/static/images/PPITypes/Stabilized/Customyourown_Holo.png b/ippisite/ippidb/static/images/PPITypes/Stabilized/Customyourown_Holo.png
index 3726d3e314ccb7c3e948171be5bd96293090c455..c094ea6329150b771b729db3f26e1bd150e47c6f 100644
GIT binary patch
delta 783
zcmaFOwSiBuGr-TCmrII^fq{Y7)59eQNN0jD2OE&IY~r=rsA#}a&veq$#WAFU@$GHJ
zzA26ZZ4ckgl;0S+Q(*^VmT*&)W0Nw64qv0o<Ov0geGb=@3+FT_3#@BYQ#^BlS6j_g
zGjLn{$8|GTX<m%qr@lL{n)$EIKHEDo>A!baU0S^Q?a%4qf6u>?S^j<dWrrVsZvXmg
zc6{^I$hv=7yRS-~yYJp=$^WcghPOi`HbH&j1`|P_B`=t)J6o1^CMdaz-|$q?@nsR#
z+;zZDDKS%NhQ~$LG9gZH;e#$+dK)HtM9kt)3o2=x>vHIli^0T2+;3Ebrl~b`l5A8x
zPP4wg_HSRl_j~)ttEV#UB#ZaO&wTLi?cKcZyUrf_QGVv{zu(uYej7Zi*tkpL((mM+
z^HXeg8{Yr<yl+w96M>Z)?L|VJO2n}0iB(7)bp^lv`<HGOZkl5hb6+n0oZ-IudEY|k
zhl_vL+qd`S{_wr??|(JdG-tZw%CzW-htgBGhTR?xQ)E1s+~Ft?=j@oI+&M*>@tqQ5
zV3EqiBIN_IDhghGDnWTHJGxn1PEK?=)yq&mu|dOflE+TL2YNyRs_sIB3`-%;wCI0H
xPxsybW`C@3PwdQx@7}Ucf4jlz@Xz1>8Qz!~iOSc1UjR(w44$rjF6*2Ung9yaN*4eC

delta 327
zcmV-N0l5CK4(kdbiBL{Q4GJ0x0000DNk~Le0000Z0000Z2nGNE03O-1S+OB71b+bp
zNkl<ZSPAWzJqiLr42AP_#nKyC*(x>)+lqx(@ebB{13i*rVPWM@sUE;i*dhiLlvy4-
z(+EPQ%Dj0S!bjNofh3OJvY4w#r|L66PWx$NR^|I%&%P%yu@y2F(LuEr8}lR;Q>#w;
zJBJs;SUVXf!w4|ld*(05pt~v-P=D#OYD+pKSJhTY4+H>rQCSBvpF(ySM20Fl;;vxD
zHm8{JE_f2-eR)v#24=LJjFVvmnC?Bp$Yi2=wUhjr8A4qZZ99-RL%lQy9uU2hbRwAd
zW<TJx(OnkXnA?GE2OGPp<SE&`XBaIf<75~CrhCsg8AgEV$&W>V9xPd%B^><ddi=z3
Z(G#B$Fmvu7%R&GE002ovPDHLkV1n9ggkS&w

diff --git a/ippisite/ippidb/static/images/PPITypes/Stabilized/Hetero2merApo.png b/ippisite/ippidb/static/images/PPITypes/Stabilized/Hetero2-merABApo.png
similarity index 100%
rename from ippisite/ippidb/static/images/PPITypes/Stabilized/Hetero2merApo.png
rename to ippisite/ippidb/static/images/PPITypes/Stabilized/Hetero2-merABApo.png
diff --git a/ippisite/ippidb/templates/PDBForm.html b/ippisite/ippidb/templates/PDBForm.html
index 1efe561d..fc081b80 100644
--- a/ippisite/ippidb/templates/PDBForm.html
+++ b/ippisite/ippidb/templates/PDBForm.html
@@ -25,15 +25,17 @@
     	{% block custom_form %}{% endblock %}
 	
 		{% if wizard.form.forms %}
-			{{ wizard.form.management_form }}
+			{{ formset.management_form }}
 			{% for form in wizard.form.forms %}
 			    {{ form }}
 			{% endfor %}
 		{% else %}
-			<div class="input_fields_wrap">
-		    	<div class="input_size">{{ wizard.form.pdb_id }}
-		    	<div class="add_field_button"><img class="small_icon" src="/static/images/Other/AddMore.png"></div></div>
-		    </div>
+			{{ formset.management_form }}
+		    {% for form in formset %}
+		        {% for field in form %}
+		            {{ field.label_tag }} {{ field }}
+		        {% endfor %}
+		    {% endfor %}
 		{% endif %}
 		</table>
 		<input type="submit" value="{% trans "Next step" %}"/>
diff --git a/ippisite/ippidb/templates/ProteinDomainComplexTypeForm.html b/ippisite/ippidb/templates/ProteinDomainComplexTypeForm.html
index 976d058c..db177f89 100644
--- a/ippisite/ippidb/templates/ProteinDomainComplexTypeForm.html
+++ b/ippisite/ippidb/templates/ProteinDomainComplexTypeForm.html
@@ -35,23 +35,29 @@ If your PPI complex is not among them, please select « Create you Own »</p>
 				<div class="type_title">
 					<h1>Inhibited</h1>
 				</div>
-				<div id="id_ProteinDomainComplexTypeForm-inhibited" class="image-inhibited">
+				<div id="id_ProteinDomainComplexTypeForm-inhibited">
 					{% for radio in wizard.form.inhibited %}
-			    	  	{{ radio.tag }}
-			        	<label style="background-image: url('/static/images/PPITypes/Inhibited/{{radio.choice_label|cut:" "}}_Apo.png');" for="{{ radio.id_for_label }}">
-			        		<span>{{ radio.choice_label}}</span>
-			    		</label>
+						<div class="imageBack_Inhib_{{radio.choice_label|cut:" "}}">
+				    	  	{{ radio.tag }}
+				        	<label for="{{ radio.id_for_label }}">
+				        		<span>{{ radio.choice_label}}</span>
+				    		</label>
+			    		</div>
 					{% endfor %}
 				</div>
 			</div>
 			<div id="stabilized" class="type_style">
-				<div class="type_title"><h1>Stabilized</h1></div>
+				<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_label|cut:" "}}.png');" for="{{ radio.id_for_label }}">
-			        		<span>{{ radio.choice_label}}</span>
-			    		</label>
+						<div class="imageBack_Stab_{{radio.choice_label|cut:" "}}">
+			    	  		{{ radio.tag }}
+				        	<label for="{{ radio.id_for_label }}">
+				        		<span>{{ radio.choice_label}}</span>
+				    		</label>
+				    	</div>
 					{% endfor %}
 				</div>
 			</div>
diff --git a/ippisite/ippidb/templates/ProteinForm.html b/ippisite/ippidb/templates/ProteinForm.html
index 68a4279c..1664265c 100644
--- a/ippisite/ippidb/templates/ProteinForm.html
+++ b/ippisite/ippidb/templates/ProteinForm.html
@@ -25,12 +25,12 @@
     	{% block custom_form %}{% endblock %}
 	
 		{% if wizard.form.forms %}
-			{{ wizard.form.management_form }}
+			{{ formset.management_form }}
 			{% for form in wizard.form.forms %}
 			    {{ form }}
 			{% endfor %}
 		{% else %}
-			{{ wizard.form.management_form }}
+			{{ formset.management_form }}
 		    {% for form in formset %}
 		        {% for field in form %}
 		            {{ field.label_tag }} {{ field }}
diff --git a/ippisite/ippidb/views.py b/ippisite/ippidb/views.py
index 862fe3b0..bb12abeb 100644
--- a/ippisite/ippidb/views.py
+++ b/ippisite/ippidb/views.py
@@ -3,7 +3,7 @@ from django.shortcuts import render
 from django.http import HttpResponseRedirect
 from formtools.wizard.views import SessionWizardView,NamedUrlSessionWizardView
 
-from .forms import IdForm, BibliographyForm, PDBForm, ProteinForm, ProteinDomainComplexTypeForm, ProteinDomainComplexForm, PpiForm, ProteinFormSet
+from .forms import IdForm, BibliographyForm, PDBForm, ProteinForm, ProteinDomainComplexTypeForm, ProteinDomainComplexForm, PpiForm, ProteinFormSet, PDBFormSet
 from .models import Protein
 from .ws import get_pdb_uniprot_mapping
 
@@ -24,7 +24,7 @@ def adminSession(request):
 
 FORMS = [("IdForm", ippidb.forms.IdForm),
          ("BibliographyForm", ippidb.forms.BibliographyForm),
-         ("PDBForm", ippidb.forms.PDBForm),
+         ("PDBForm", ippidb.forms.PDBFormSet),
          ("ProteinForm",ippidb.forms.ProteinFormSet),
          ("ProteinDomainComplexTypeForm", ippidb.forms.ProteinDomainComplexTypeForm),
          ("ProteinDomainComplexForm", ippidb.forms.ProteinDomainComplexForm),
-- 
GitLab