Wizard form

Completing the wizard allowing to enter new data.

ippisite/ippidb/static/css/admin-session.css

@@ -26,14 +26,27 @@ Description: IPPI-DB Theme
   flex:1 auto;
 }
 
+.wizard_step_nav li {
+  display: inline;
+  flex:1 auto;
+}
+
 .step_nav li:not(:first-child) {
   padding-left: 5px;
 }
 
+.wizard_step_nav li:not(:first-child) {
+  padding-left: 5px;
+}
+
 .step_nav li a:not([href]), .step_nav  li a:not([href]):hover {
   color:#AAA;
 }
 
+.wizard_step_nav li a.nav-link:not([href]), .wizard_step_nav  li a.nav-link:not([href]):hover {
+  color:#AAA;
+}
+
 .step_nav li a, .step_nav  li a:hover, .step_nav li a:focus {
   width: 100%;
   background-color: #E3E9EB;
@@ -45,7 +58,25 @@ Description: IPPI-DB Theme
   text-decoration: none;
 }
 
-.step_nav li a.active {
+.wizard_step_nav li a.nav-link, .wizard_step_nav  li a.nav-link:hover, .wizard_step_nav li a.nav-link:focus {
+  background-color: #E3E9EB;
+  color:#8D8888;
+  font-family: "PlayfairDisplayReg";
+  font-size: 20px;
+  text-align: center;
+  text-decoration: none;
+  padding:0;
+  border-width:0;
+  border-radius:0;
+}
+
+.step_nav li a.nav-link.active {
+  text-decoration: none;
+  background-color: #2D96FA;
+  color:#FFFFFF;
+}
+
+.wizard_step_nav li a.nav-link.active {
   text-decoration: none;
   background-color: #2D96FA;
   color:#FFFFFF;
@@ -176,6 +207,10 @@ Description: IPPI-DB Theme
   margin-top: 5px;
 }
 
+.form_div-fluid .input_field input{
+  text-align: left;
+}
+
 .input_field input {
   width:100%;
   font-family: "BrandonGrotesqueReg";
@@ -201,7 +236,14 @@ Description: IPPI-DB Theme
   text-align: left;
   padding-bottom: 1%;
 }
-
+.smiles-inpout-and-edit{
+    display:flex;
+}
+.smiles-inpout-and-edit>*:first-child{
+    flex:1 auto;
+    margin-right:0.5em;
+}
+.form-group.form-check,
 .compound .input_field input {
     text-align: left;
 }
@@ -216,41 +258,37 @@ Description: IPPI-DB Theme
 }
 
 /* Background image classes */
-.compound_radio_smiles label span,
-.compound_radio_iupac label span,
-.compound_radio_sketch label span,
-.compound_radio_smiles label,
-.compound_radio_iupac label,
-.compound_radio_sketch label{
+.compound_radio label span,
+.compound_radio label{
     width:100%;
 }
 
 .compound .is-invalid,
-.is-invalid .compound_radio_smiles label span,
-.is-invalid .compound_radio_iupac label span,
-.is-invalid .compound_radio_sketch label span{
+.is-invalid .compound_radio label span{
     color: #dc3545;
     opacity: 1;
 }
+.is-invalid .compound_radio label span{
+    background-color: #ecd9d9;
+}
+
+.compound_radio:not(:first-child) {
+  margin-left: 5px;
+}
 
-.compound_radio_smiles input,
-.compound_radio_sketch input,
-.compound_radio_iupac input {
+.compound_radio input {
   display:none;
 }
 
-.compound_radio_smiles label span,
-.compound_radio_iupac label span,
-.compound_radio_sketch label span{
+.compound_radio label span{
   display: inline-block;
   text-align: center;
-  background-color: #FFFFFF;
+  background-color: #E8E0E0;
   background-position: center;
   background-repeat: no-repeat;
-  padding-top: 60%;
-  border: 10px solid #E3E9EB00;
-  opacity: 0.5;
-
+  padding-top: 10em;
+  border: 2px solid #E3E9EB00;
+  opacity: 1;
 }
 
 .compound_radio_smiles label span{
@@ -265,26 +303,92 @@ Description: IPPI-DB Theme
   background-image: url('/static/images/Other/SketchIcon.png');
 }
 
-.compound_radio_smiles input:checked+label span,
-.compound_radio_iupac input:checked+label span,
-.compound_radio_sketch input:checked+label span,
-.compound_radio_smiles input:hover+label span,
-.compound_radio_iupac input:hover+label span,
-.compound_radio_sketch input:hover+label span{
-  border-color: #d2dcdf;
-  opacity: 1.0;
+.compound_radio input:checked+label span,
+.compound_radio input:hover+label span{
+    background-color: #FFF;
+    border-color: #d2dcdf;
+    opacity: 1.0;
+    border-color:#E3E9EB;
+    border-bottom: 2px solid #2D96FA;
 }
 
 .formset-item .formset-item-delete-host{
     font-size:initial;
 }
 
-.formset-item.delete-checked{
+.formset-item+.formset-item,
+.formset-nested-item+.formset-nested-item{
+    margin-top: 1em;
+}
+.formset-item,
+.formset-nested-item{
+    padding: 1em;
+    border: 1px solid #ced4da;
+    background-color: rgba(227, 233, 235,0.7);
+    border-radius: 0;
+}
+
+.formset-item.delete-checked,
+.formset-nested-item.delete-checked{
     opacity:0.3;
     overflow: hidden;
     max-height: 5em;
 }
 
+.formset-item.delete-checked .form-group:not(.formset-item-delete-host),
+.formset-item.delete-checked h3,
+.formset-item.delete-checked .formset-nested-container,
+.formset-nested-item.delete-checked .form-group:not(.formset-item-delete-host),
+.formset-nested-item.delete-checked h3{
+    display:none;
+
+}
+
+.formset-item-inline-grid>.formset-item-delete-host,
+.formset-item-inline-grid>.formset-nested-container{
+    grid-column: 1/-1;
+}
+
+.formset-item-inline-grid {
+    margin: 5px;
+    padding: 10px;
+    padding-top: 20px;
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+}
+
+@media (min-width: 1200px)  {
+    .formset-item-inline-grid {
+        grid-template-columns: repeat(5, 1fr);
+    }
+}
+
+@media (min-width: 1080px) and (max-width: 1199px)  {
+    .formset-item-inline-grid {
+        grid-template-columns: repeat(4, 1fr);
+    }
+}
+
+@media (min-width: 768px) and (max-width: 1079px) {
+    .formset-item-inline-grid {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+@media (min-width: 480px) and (max-width: 767px) {
+    .formset-item-inline-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (min-width: 480px) {
+    .formset-item-inline-grid {
+        grid-column-gap: 10px;
+        grid-row-gap: 10px;
+    }
+}
+
+
 .small_icon {
   width:30%;
 }
@@ -1239,8 +1343,9 @@ Description: IPPI-DB Theme
 }*/
 
 @media (min-width: 980px)  {
-    .form_div-fluid.inline_box_complex_long{
-      display: inline-flex;
+    .inline_box_complex_long{
+        padding-top:40px;
+        display: inline-flex;
     }
 }
 
@@ -1275,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;
@@ -1285,12 +1390,24 @@ Description: IPPI-DB Theme
 }
 
 .add-button {
-    background-color: #E3E9EB;
+    border: none;
+    color: initial;
+    background-color: #e8e0e0;
+    margin-bottom: 15px;
+    width:100%
+    /*background-color: #E3E9EB;
     margin-left: -60%;
     margin-right: -60%;
     padding-bottom: 5%;
     padding-right: 5%;
-    padding-left: 5%;
+    padding-left: 5%;*/
+}
+
+.add-button:hover {
+    border: none;
+    background-color: #8D8888;
+    color:#fff;
+    cursor:pointer;
 }
 
 .add-compound {
@@ -1324,6 +1441,10 @@ Description: IPPI-DB Theme
   position: relative;
 }
 
+.form-group:last-child {
+  margin-bottom:0px;
+}
+
 .form-control-placeholder {
   position: absolute;
   top: 0;
@@ -1336,9 +1457,28 @@ Description: IPPI-DB Theme
     color: #dc3545;
 }
 
+.form-control:hover + .form-control-placeholder,
+.form-control-placeholder:hover,
 .form-control:focus + .form-control-placeholder,
-.form-control:valid + .form-control-placeholder {
+.form-control:valid + .form-control-placeholder,
+.form-control:read-only + .form-control-placeholder,
+select.form-control + .form-control-placeholder {
   font-size: 75%;
   transform: translate3d(0, -100%, 0);
   opacity: 1;
 }
+
+.form-check>small.form-text.text-muted {
+    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