Commit 8130dbba authored by Rachel TORCHET's avatar Rachel TORCHET
Browse files

Compounds_list - Update of cards and other views

parent befba8f4
Pipeline #14382 passed with stages
in 12 minutes and 43 seconds
......@@ -9,12 +9,20 @@ Description: IPPI-DB Theme
/* Compounds list */
.compounds_page_list{
width: 1000px !important;
margin: 0 auto !important;
}
.compounds_list_number{
font-family: "BrandonGrotesqueBlk";
text-transform: uppercase;
font-size: 30px;
}
.compound_list_title{
font-family: "PlayfairDisplayReg";
}
.compounds_sort_btn{
font-family: "BrandonGrotesqueReg" !important;
background-color: #FFFFFF !important;
......@@ -103,6 +111,7 @@ Description: IPPI-DB Theme
.sidenav a {font-size: 18px;}
}
.side_menu_title{
font-size: 20px;
font-family: "BrandonGrotesqueBlk";
......@@ -116,12 +125,41 @@ Description: IPPI-DB Theme
.open_filters_btn span{
font-family: "BrandonGrotesqueReg";
font-size: 18px !important;
padding:0px;
padding:6px;
font-size:30px;
cursor:pointer;
box-shadow: 0px 1px 6px #aaaaaa;
background-color:#2D96FA;
border-radius: .25rem;
}
.open_filters_btn span:hover{
background-color:rgb(11, 133, 247) !important;
}
.open_filters_btn span a{
color:#2D96FA !important;
color:#FFFFFF !important;
padding: 10px;
}
.open_filters_btn span a:hover{
color:rgb(11, 133, 247) !important;
}
\ No newline at end of file
.border_card {
border-color: #E8E0E0 !important;
box-shadow: 0 3px 11px 0 rgba(0, 0, 0, 0.2);
}
.desc_card {
padding: 10px !important;
border-top: 1px solid #E8E0E0;
background: #F1F4F5;
font-family: "BrandonGrotesqueReg";
}
.desc_card p {
margin-block-end: 0px;
}
.badge-light {
font-family: "BrandonGrotesqueBlk";
background-color: transparent !important;
}
\ No newline at end of file
......@@ -5,6 +5,11 @@ Author: Rachel Torchet
Description: IPPI-DB Theme
*/
* {
font-family: "BrandonGrotesqueReg";
}
/* HEAD */
.hide {
......
<div class="row m-2 border border-info bg-light">
<div class="row m-2 border border-info bg-light border_card" style="box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);">
{%if show_detail != True %}
<div class="col-sm-3 border-info d-flex justify-content-center align-content-center">
<a href="/compounds/{{ compound.id }}">{% include "compound_smiles_draw.html" with id=compound.id smile=compound.canonical_smile %}</a>
<h2 class="position-absolute" style="top:0.3em; left:0.3em;"><span class="badge badge-dark"><a href="/compounds/{{ compound.id }}">{{ compound.id }}</a></span></h2>
<h2 class="position-absolute" style="top:0.3em; left:0.3em;"><span class="badge badge-light"><a href="/compounds/{{ compound.id }}">{{ compound.id }}</a></span></h2>
{% if compound.tanimoto != None %}
<h2 class="position-absolute" style="top:0.3em; right:0.3em;" title="tanimoto similarity value"><span class="badge badge-dark text-warning">{{ compound.tanimoto }}</span></h2>
<h2 class="position-absolute" style="top:0.3em; right:0.3em;" title="tanimoto similarity value"><span class="badge badge-light text-warning">{{ compound.tanimoto }}</span></h2>
{% endif %}
</div>
{% endif %}
<div class="{%if show_detail != True %}col-sm-9{% else %}col-sm-12{% endif %}">
<h4 class="pt-2">Identifiers</h4>
<h4 class="pt-2 compound_list_title">Identifiers</h4>
<ul class="list-group">
{% if compound.common_name %}
<li class="list-group-item">Common name: {{ compound.common_name }}</li>
......@@ -28,15 +28,15 @@
{% endif %}
</ul>
{%if compound.pubchem_id or compound.chembl_id or compound.chemspider_id %}
<h4 class="pt-2">External links</h4>
<h4 class="pt-2 compound_list_title">External links</h4>
{% include "compound_db_links.html" %}
{% endif %}
{%if show_detail == True and compound.inchikey %}
<h4 class="pt-2">External search</h4>
<h4 class="pt-2 compound_list_title">External search</h4>
{% include "compound_dbsearch_links.html" %}
{% endif %}
{% if compound.biblio_refs %}
<h4 class="pt-2">Bibliography</h4>
<h4 class="pt-2 compound_list_title">Bibliography</h4>
<table class="table">
<thead>
<tr>
......
......@@ -35,7 +35,7 @@
</nav>
</div>
<div class="inner-wrap container-fluid">
<div class="inner-wrap container-fluid ">
<div class="row flex-xl-nowrap">
<main class="col-12" role="main">
......@@ -196,7 +196,7 @@
</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>
<span onclick="openNav()" ><a><i class="fas fa-filter"></i> Open filters</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 found</span>
......@@ -285,7 +285,7 @@
{% if page_obj %}
<div class="container-fluid">
{% if display == 'v' %}
<div class="d-flex flex-wrap m-2 justify-content-between">
<div class="d-flex flex-wrap m-2 justify-content-between compounds_page_list">
{% for compound in page_obj %}
{% include "compound_v_item.html" with compound=compound %}
{% endfor %}
......
......@@ -32,7 +32,7 @@
{% if compound.tanimoto != None %}
<td title="tanimoto similarity value">{{ compound.tanimoto }}</td>
{% endif %}
<td scope="col"><span class="badge badge-dark"><a href="/compounds/{{ compound.id }}">{{ compound.id }}</a></span></td>
<td scope="col"><span class="badge badge-light"><a href="/compounds/{{ compound.id }}">{{ compound.id }}</a></span></td>
{% if "canonical_smiles" in fields %}
<td scope="col" style="width:150px">{% include "compound_smiles_draw.html" with id=compound.id smile=compound.canonical_smile width="150" height="150"%}</td>
{% endif %}
......
<div class="p-2">
<div class="card border border-info">
<div class="card border border-info border_card">
<a href="/compounds/{{ compound.id }}">{% include "compound_smiles_draw.html" with id=compound.id smile=compound.canonical_smile %}</a>
<h2 class="position-absolute" style="top:0.3em; left:0.3em;"><span class="badge badge-dark"><a href="/compounds/{{ compound.id }}">{{ compound.id }}</a></span></h2>
<h2 class="position-absolute" style="top:0.3em; left:0.3em;"><span class="badge badge-light"><a href="/compounds/{{ compound.id }}">{{ compound.id }}</a></span></h2>
{% if compound.tanimoto != None %}
<h2 class="position-absolute" style="top:0.3em; right:0.3em;" title="tanimoto similarity value"><span class="badge badge-dark text-warning">{{ compound.tanimoto }}</span></h2>
{% endif %}
<div class="card-body" style="overflow:hidden; word-wrap:break-word;">
{%if compound.common_name %}<p title="Common name">{{ compound.common_name }}</p>{% endif %}
<p title="PPI Family">{{ compound.best_activity_ppi_family_name }}</p>
<p title="Molecular Weight">{{ compound.molecular_weight }} g/mol</p>
<div class="card-body desc_card" style="overflow:hidden; word-wrap:break-word;">
{%if compound.common_name %}<p title="Common name"><span style="font-family:'BrandonGrotesqueBlk';">Common name : </span>{{ compound.common_name }}</p>{% endif %}
<p title="PPI Family"><span style="font-family:'BrandonGrotesqueBlk';">PPI Family : </span>{{ compound.best_activity_ppi_family_name }}</p>
<p title="Molecular Weight"><span style="font-family:'BrandonGrotesqueBlk';">Molecular weight: </span>{{ compound.molecular_weight }} g/mol</p>
<p style="text-align:right;"><a class="read-more" href="/compounds/{{ compound.id }}">Read more</a></p>
</div>
</div>
</div>
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