Skip to content
GitLab
Commit befba8f4 authored by Rachel TORCHET's avatar Rachel TORCHET
Browse files

Compounds_list - Update filters layout

parent 49599b5e
Pipeline #14338 passed with stages
in 9 minutes and 45 seconds
Hide whitespace changes
Inline Side-by-side
ippisite/ippidb/static/css/admin-session.css
View file @ befba8f4
......@@ -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 {
......
ippisite/ippidb/static/css/compounds_list.css
View file @ befba8f4
......@@ -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
ippisite/ippidb/static/css/main.css
View file @ befba8f4
......@@ -697,7 +697,7 @@ font-size: 42px;
.paragraph h2 {
text-align: center;
font-family: BrandonGrotesqueBld;
font-family: "BrandonGrotesqueBld";
font-size: 24px;
padding-bottom: 10px;
}
......
ippisite/ippidb/static/js/compound_form.js
View file @ befba8f4
......@@ -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');
})
});
ippisite/ippidb/static/js/compound_list.js
View file @ befba8f4
......@@ -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
ippisite/ippidb/templates/CompoundForm.html
View file @ befba8f4
......@@ -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 %}
......
ippisite/ippidb/templates/compound_card.html
View file @ befba8f4
......@@ -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>
......
ippisite/ippidb/templates/compound_form_content.html
View file @ befba8f4
......@@ -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>
......
ippisite/ippidb/templates/compound_list.html
View file @ befba8f4
......@@ -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()">&times; 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>
&nbsp;-&nbsp;filters:&nbsp;
......@@ -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">
......
ippisite/ippidb/templates/form_with_nested_formset.html
View file @ befba8f4
{% 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>
......
ippisite/ippidb/templates/test_form_render.html
View file @ befba8f4
......@@ -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_"%}
......
ippisite/ippidb/templates/wizard_formset_with_nested_formset.html
View file @ befba8f4
......@@ -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%}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment