diff --git a/ippisite/ippidb/static/css/admin-session.css b/ippisite/ippidb/static/css/admin-session.css
index 20f337628b670ffe6fc5aad0dcfa9c934ab8fbe5..b047c55d8edc6b1aec62c2698cf9221ac092c915 100644
--- a/ippisite/ippidb/static/css/admin-session.css
+++ b/ippisite/ippidb/static/css/admin-session.css
@@ -1216,18 +1216,41 @@ Description: IPPI-DB Theme
.compound_title{
text-align: left;
margin-top: 15px;
+ margin-bottom: 20px;
+}
+
+.compound_title:after {
+ display: table;
+ white-space: nowrap;
+ border-top: 1px solid #212529;
+ content: '';
+ display: table-cell;
+ position: relative;
+ top: 0.5em;
+ width: 45%;
+ left: 1.5%;
}
+
.input-inline{
width:49%;
margin-right:5px;
text-align: left;
}
-.molecule_input {
- width:100%;
+.molecule_draw {
+ display:flex;
text-align: left;
}
+.compo_input {
+ text-align: left;
+}
+
+.compo_box {
+ width: 100%;
+ height: 100px;
+}
+
.molecule_input button {
width:100%;
}
@@ -1598,6 +1621,7 @@ Description: IPPI-DB Theme
border: none;
color: #2d96fa;
margin-bottom: 15px;
+ background-color: transparent;
}
.add-compound:hover {
diff --git a/ippisite/ippidb/static/css/compounds_list.css b/ippisite/ippidb/static/css/compounds_list.css
index a919ed718d192a9afb894dc7177840d162373fe3..9ba371951c26b80e0eaf54617e3711de791e97fc 100644
--- a/ippisite/ippidb/static/css/compounds_list.css
+++ b/ippisite/ippidb/static/css/compounds_list.css
@@ -55,4 +55,73 @@ Description: IPPI-DB Theme
.filter_box{
width: 100%;
height: 100px;
-}
\ No newline at end of file
+}
+
+.sidenav {
+ height: 100%;
+ width: 0;
+ position: fixed;
+ z-index: 1;
+ top: 0;
+ left: 0;
+ background-color: #F9F9F9;
+ overflow-x: hidden;
+ transition: 0.5s;
+ padding-top: 60px;
+ border-right: 1px solid #AEB7C0;
+ }
+
+ .sidenav a {
+ padding: 8px 8px 0px 32px;
+ text-decoration: none;
+ font-size: 25px;
+ color: #818181;
+ display: block;
+ transition: 0.3s;
+ }
+
+ .sidenav a:hover {
+ color: #f1f1f1;
+ }
+
+ .sidenav .closebtn {
+ position: absolute;
+ top: 0;
+ right: 25px;
+ font-family: "BrandonGrotesqueReg";
+ font-size: 15px;
+ margin-left: 50px;
+ }
+
+ #main {
+ transition: margin-left .5s;
+ padding: 16px;
+ }
+
+ @media screen and (max-height: 450px) {
+ .sidenav {padding-top: 15px;}
+ .sidenav a {font-size: 18px;}
+ }
+
+ .side_menu_title{
+ font-size: 20px;
+ font-family: "BrandonGrotesqueBlk";
+ margin-left: 10px;
+ }
+
+ .open_filters_btn{
+ padding:0px;
+ }
+
+ .open_filters_btn span{
+ font-family: "BrandonGrotesqueReg";
+ font-size: 18px !important;
+ padding:0px;
+ }
+
+ .open_filters_btn span a{
+ color:#2D96FA !important;
+ }
+ .open_filters_btn span a:hover{
+ color:rgb(11, 133, 247) !important;
+ }
\ No newline at end of file
diff --git a/ippisite/ippidb/static/css/main.css b/ippisite/ippidb/static/css/main.css
index bc38e153c9bc9f3668799f7d8a7a3fc02c94aea5..b07c93799d6d5e97180212fd8f08c5e374e434b3 100644
--- a/ippisite/ippidb/static/css/main.css
+++ b/ippisite/ippidb/static/css/main.css
@@ -697,7 +697,7 @@ font-size: 42px;
.paragraph h2 {
text-align: center;
- font-family: BrandonGrotesqueBld;
+ font-family: "BrandonGrotesqueBld";
font-size: 24px;
padding-bottom: 10px;
}
diff --git a/ippisite/ippidb/static/js/compound_form.js b/ippisite/ippidb/static/js/compound_form.js
index 63a1fabb4d1a38081b8511b8df71fb7eb75f6b68..4c94a93230f05379699d70cef4af026769cd3d01 100644
--- a/ippisite/ippidb/static/js/compound_form.js
+++ b/ippisite/ippidb/static/js/compound_form.js
@@ -50,4 +50,18 @@ window.addEventListener("load",function(){
$("#"+$("#smiles-textarea").attr("data-smile-target")).val(smilesString).change();
}
);
-});
\ No newline at end of file
+});
+
+
+
+$(document).ready(function(){
+ $('.molecule_draw').on('click','.compo_input',function() {
+
+ $(this).closest('.compo_input').find('.compo_box').removeClass('compo_box');
+ $(this).addClass('compo_box');
+ }).on('click','.compo_box',function() {
+ $(this).removeClass('compo_box');
+ })
+});
+
+
diff --git a/ippisite/ippidb/static/js/compound_list.js b/ippisite/ippidb/static/js/compound_list.js
index d8558f0e58aece9295a4520efdbf0e0180700809..527fbd6d1758ff8f302a2d593d4208ff26a25776 100644
--- a/ippisite/ippidb/static/js/compound_list.js
+++ b/ippisite/ippidb/static/js/compound_list.js
@@ -16,17 +16,3 @@ $(document).ready(function(){
);
});
-$('#filter_search').click(function(){
- console.log("test");
- $('#filter_search').toggleClass('filter_btn');
- $('#filter_search').toggleClass('filter_box');
-});
-
-$(document).ready(function(){
- $('.filter_row').on('click','.filter_btn',function() {
- $(this).closest('.filter_btn').find('.filter_box').removeClass('filter_box');
- $(this).addClass('filter_box');
- }).on('click','.filter_box',function() {
- $(this).removeClass('filter_box');
- })
-});
\ No newline at end of file
diff --git a/ippisite/ippidb/templates/CompoundForm.html b/ippisite/ippidb/templates/CompoundForm.html
index d2a9ead87d0d170b7aba35017be16598717ac1a5..a4e48bb2b427f16d12314a413bd34f425b900500 100644
--- a/ippisite/ippidb/templates/CompoundForm.html
+++ b/ippisite/ippidb/templates/CompoundForm.html
@@ -12,6 +12,7 @@
<script src="/static/js/ippidb-compoundws.js"></script>
<script src="{% sstatic '/js/ippidb-marvinjsmodal.js'%}"></script>
<script src="{% sstatic '/js/compound_form.js'%}"></script>
+<script src="/static/js/compound_form.js"></script>
{% endblock extra_js %}
diff --git a/ippisite/ippidb/templates/compound_card.html b/ippisite/ippidb/templates/compound_card.html
index 9edd0371abf009e1a60ce88b4567ec1d706e0533..ba50ab9442120e6841f61efebb475ec905c5076b 100644
--- a/ippisite/ippidb/templates/compound_card.html
+++ b/ippisite/ippidb/templates/compound_card.html
@@ -7,13 +7,12 @@
<div class="inner-wrap">
<nav class="breadcrumb breadNav" role="navigation">
<div class="breadNav-label">You are here</div>
- <div aria-labelledby="breadcrumb-label">
- {% block breadcrumb %} <a href="/compounds/" class="breadNav-link"> > Query compounds</a> <a href="/compounds/{{ compound.id }}" class="breadNav-link"> > Compound {{ compound.id }}</a>{% endblock %}
+ <div aria-labelledby="breadNav-label">
+ {% block breadcrumb %} <a href="/compounds/" class="breadNav-link">Query compounds</a> > Compound {{ compound.id }}{% endblock %}
</div>
</nav>
-</div>
-
-
+ </div>
+
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<h1 class="page-title">Compound {{ compound.id }}</h1>
diff --git a/ippisite/ippidb/templates/compound_form_content.html b/ippisite/ippidb/templates/compound_form_content.html
index 3e95707a27b8c241c6242830b22e9fee972a7148..c5a8169007c951c879e5a7edc55b48cdd5346e01 100644
--- a/ippisite/ippidb/templates/compound_form_content.html
+++ b/ippisite/ippidb/templates/compound_form_content.html
@@ -3,10 +3,12 @@
{% block extra_js %}
<script type="text/javascript">
+
$(document).ready(function(){
$('#delete-btn > div:first').remove();
});
</script>
+<script src="/static/js/compound_form.js"></script>
{% endblock extra_js %}
<div class="compound formset-item">
@@ -50,14 +52,14 @@ $(document).ready(function(){
<!-- {{ form.common_name|bootstrap }}-->
<h3 class="compound_title">Draw it
</h3>
- <div style="display:flex;">
+ <div class="molecule_draw">
<div class="molecule_scheme">
<canvas id="canvas-{{form.molecule_smiles.html_name}}"></canvas>
</div>
<div class="input-group smiles-input-and-edit">
- <div class="molecule_input">
+ <div id="compo_field" class="compo_input">
<textarea type="text"
name="{{form.molecule_smiles.html_name}}"
{%if form.molecule_smiles.value %}value="{{form.molecule_smiles.value}}"{%endif%}
@@ -70,10 +72,10 @@ $(document).ready(function(){
</label>
</div>
- <div class="molecule_input">
+ <div id="compo_field" class="compo_input">
{{ form.molecule_iupac|bootstrap }}
</div>
- <div class="molecule_input">
+ <div>
<button class="btn btn-outline-secondary" onclick="showModalFromMe(this);return false;"><i class="fas fa-pencil-alt"></i></button>
</div>
</div>
diff --git a/ippisite/ippidb/templates/compound_list.html b/ippisite/ippidb/templates/compound_list.html
index 415005c7e27d88207fc17697b0f6d84adda1290e..1c2ca92ac98ba8bc9a24cb3918fea012a3012e66 100644
--- a/ippisite/ippidb/templates/compound_list.html
+++ b/ippisite/ippidb/templates/compound_list.html
@@ -12,6 +12,17 @@
<script src="/static/js/ippidb-compoundws.js"></script>
<script src="/static/js/ippidb-marvinjsmodal.js"></script>
<script src="/static/js/compound_list.js"></script>
+<script>
+ function openNav() {
+ console.log('test');
+ document.getElementById("mySidenav").style.width = "250px";
+ document.getElementById("main").style.marginLeft = "0px";
+ }
+ function closeNav() {
+ document.getElementById("mySidenav").style.width = "0";
+ document.getElementById("main").style.marginLeft= "0";
+ }
+</script>
{% endblock %}
{% block content %}
@@ -19,7 +30,7 @@
<nav class="breadcrumb breadNav" role="navigation">
<div class="breadNav-label">You are here</div>
<div aria-labelledby="breadcrumb-label">
- {% block breadcrumb %} <a href="/compounds/" class="breadNav-link"> > Query compounds</a>{% endblock %}
+ {% block breadcrumb %} {{block.super}}<a href="/compounds/" class="breadNav-link">Query compounds</a>{% endblock %}
</div>
</nav>
</div>
@@ -31,11 +42,16 @@
<h1 class="page-title">Query compounds</h1>
<form class="container-fluid">
<div class="m-2">
- <div class="row filter_row">
- <span class="">
- <div id="filter_search" class="filter_btn" style="display: inline-flex">
- <input style="width: 95%" id="q" value="{{ q | default_if_none:"" }}" class="form-control col-9" type="search" placeholder="Type search text here" onchange="modifyUrl('q',$('#q').val());">
- </div>
+ <div class="row" style="display:none;">
+ <span class="border border-primary rounded p-1 m-1 col-lg-12 col-xl-2">
+ <div class="row" style="display: inline-flex">
+ <i class="icon icon-common icon-search mr-2 ml-1 col-2" style="font-size: 1.75rem; vertical-align: middle" title="Text search"></i>
+ <input style="width: 100%" id="q" value="{{ q | default_if_none:"" }}" class="form-control col-9" type="search" placeholder="Type search text here" onchange="modifyUrl('q',$('#q').val());">
+ </div>
+ </span>
+ <span class="border border-primary rounded p-1 m-1 col-lg-12 col-xl-auto">
+ <i class="icon icon-conceptual icon-chemical" style="font-size: 1.75rem; vertical-align: middle" title="Compound filters"></i>
+
<div class="dropdown btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" id="pcpropMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Physico-Chemical Properties
@@ -160,9 +176,30 @@
</div>
</div>
-
+ <div id="mySidenav" class="sidenav">
+ <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">× Close</a>
+ <h1 class="side_menu_title">
+ Search
+ </h1>
+ <hr>
+ <h1 class="side_menu_title">
+ Compound
+ </h1>
+ <hr>
+ <h1 class="side_menu_title">
+ Target
+ </h1>
+ <hr>
+ <h1 class="side_menu_title">
+ Test
+ </h1>
+ </div>
+ </div>
+ <div id="main" class="open_filters_btn">
+ <span style="font-size:30px;cursor:pointer" onclick="openNav()" ><a><i class="fas fa-filter"></i> Narrow your results</a></span>
+ </div>
<div class="m-2 d-flex justify-content-between">
- <span style="font-family:BrandonGrotesqueBlk; text-transform: uppercase; font-size: 30px;">{{ paginator.count }} compounds</span>
+ <span style="font-family:BrandonGrotesqueBlk; text-transform: uppercase; font-size: 30px;">{{ paginator.count }} compounds found</span>
{% if filter_on %}
<span>
- filters:
@@ -217,6 +254,7 @@
{% include "slider_badge.html" with param_name="pubs" param_value=pubs param_value_min=pubs_value_min param_value_max=pubs_value_max param_label="Publications" %}
</span>
{% endif %}
+
<div class="m-1 ml-auto">
</div>
<div class="btn-group btn-group-sm ml-1">
@@ -240,7 +278,9 @@
<i class="fa fa-table" title="Table"></i>
</a>
</span>
+
</div>
+
</form>
{% if page_obj %}
<div class="container-fluid">
diff --git a/ippisite/ippidb/templates/form_with_nested_formset.html b/ippisite/ippidb/templates/form_with_nested_formset.html
index 3ec0b2cdaaf1eb3d8d324ebae2bea62bb8d2df52..410a4f6b44f1b9b286fa3d001b4cfbf9417d8fcb 100644
--- a/ippisite/ippidb/templates/form_with_nested_formset.html
+++ b/ippisite/ippidb/templates/form_with_nested_formset.html
@@ -1,23 +1,27 @@
{% load i18n %}
{% load customtags %}
<div class="formset-item formset-item-inline-grid">
+ <h3 class="compound_title">Description</h3>
+
{{form|bootstrap}}
<div class="formset-nested-container">
{{ form.nested.management_form }}
{{ form.nested.non_form_errors|bootstrap }}
{% if nested_form %}
<div class="formset-nested-item formset-item-inline-grid">
+ <h3 class="compound_title">Results</h3>
{{ nested_form|bootstrap }}
</div>
{% endif %}
{% for nested_form in nested_forms %}
<div class="formset-nested-item formset-item-inline-grid">
+ <h3 class="compound_title">Results</h3>
{{ nested_form|bootstrap }}
</div>
{% endfor %}
<div class="form_div">
<input type="button"
- class="add-button"
+ class="add-test"
value="{%if add_another_nested_one %}{{add_another_nested_one}} {%else%}Add another one{%endif%}"
onclick="add_nested_form_to_nested_formset(this,'{{form.nested.prefix}}','{{parent_prefix}}');"/>
</div>
diff --git a/ippisite/ippidb/templates/test_form_render.html b/ippisite/ippidb/templates/test_form_render.html
index d0731402a2131ba2d7786087bff1883bf52148d5..4af55a0951bc0c04cf45dcb6f13e42b37b2c7add 100644
--- a/ippisite/ippidb/templates/test_form_render.html
+++ b/ippisite/ippidb/templates/test_form_render.html
@@ -5,7 +5,6 @@
{% endfor %}
<div class="div_test_activity formset-item">
<div class="div_test_activity_desc">
- <h4>Activity test description<span class="float-right">{{ form.DELETE|bootstrap }}</span></h4>
<div class="inline_grid_complex_long">
{{ form.test_type|bootstrap }}
{% for field in form.visible_fields %}
@@ -16,7 +15,6 @@
</div>
</div>
<div class="div_test_activity_res">
- <h4>Result</h4>
<div class="inline_grid_complex_long">
{% for field in form.visible_fields %}
{%if field.name|startswith:"activityRes_"%}
@@ -28,7 +26,6 @@
</div>
<div class="div_test_cytotoxicity formset-item" style="display:none;">
<div class="div_test_cytotoxicity_desc">
- <h4>Cytotoxicity test description<span class="float-right">{{ form.DELETE|bootstrap }}</span></h4>
<div class="inline_grid_complex_long">
{{ form.test_type|bootstrap }}
{% for field in form.visible_fields %}
@@ -39,7 +36,6 @@
</div>
</div>
<div class="div_test_cytotoxicity_res">
- <h4>Result</h4>
<div class="inline_grid_complex_long">
{% for field in form.visible_fields %}
{%if field.name|startswith:"cytotoxRes_"%}
@@ -51,7 +47,6 @@
</div>
<div class="div_test_pk formset-item" style="display:none;">
<div class="div_test_pk_desc">
- <h4>PK test description<span class="float-right">{{ form.DELETE|bootstrap }}</span></h4>
<div class="inline_grid_complex_long">
{{ form.test_type|bootstrap }}
{% for field in form.visible_fields %}
@@ -62,7 +57,6 @@
</div>
</div>
<div class="div_test_pk_res">
- <h4>Result</h4>
<div class="inline_grid_complex_long">
{% for field in form.visible_fields %}
{%if field.name|startswith:"pkRes_"%}
diff --git a/ippisite/ippidb/templates/wizard_formset_with_nested_formset.html b/ippisite/ippidb/templates/wizard_formset_with_nested_formset.html
index 2a714959eea382571c3da0bf7d4833f495ef64ef..4628120d735e79f708467314cb9f720f226767e3 100644
--- a/ippisite/ippidb/templates/wizard_formset_with_nested_formset.html
+++ b/ippisite/ippidb/templates/wizard_formset_with_nested_formset.html
@@ -18,17 +18,17 @@
{{ wizard.form.non_field_errors|bootstrap}}
{% for form in wizard.form.forms %}
- {% include "form_with_nested_formset.html" with form=form nested_forms=form.nested.forms nested_form=None add_another_nested_one="Add another result" parent_prefix=wizard.form.prefix %}
+ {% include "form_with_nested_formset.html" with form=form nested_forms=form.nested.forms nested_form=None add_another_nested_one="+ Add result" parent_prefix=wizard.form.prefix %}
{% endfor %}
<div class="form_div">
<input type="button"
- class="add-button"
- value="{%block add_another_one %}Add another test{%endblock%}"
+ class="add-test"
+ value="{%block add_another_one %}+ Add test{%endblock%}"
onclick="add_form_to_nested_formset(this,'{{wizard.form.prefix}}');"/>
</div>
</div>
{% endblock %}
{% block emptyform %}
-{% include "form_with_nested_formset.html" with form=wizard.form.empty_form nested_forms=wizard.form.empty_form.nested.forms nested_form=wizard.form.empty_form.nested.empty_form add_another_nested_one="Add another result" parent_prefix=wizard.form.prefix %}
+{% include "form_with_nested_formset.html" with form=wizard.form.empty_form nested_forms=wizard.form.empty_form.nested.forms nested_form=wizard.form.empty_form.nested.empty_form add_another_nested_one="+ Add result" parent_prefix=wizard.form.prefix %}
{% endblock emptyform%}