Skip to content

GitLab

Commit 339798db authored by Fabien MAREUIL's avatar Fabien MAREUIL
Browse files

pocket and compounds menu. responsive homepage with modal

parent 12dece88
Hide whitespace changes
Inline Side-by-side
ippisite/ippidb/static/css/main.css
View file @ 339798db
......@@ -356,10 +356,47 @@ div.hidden {
/* -- Home page choices -- */
.background_choices {
margin: 40px;
.compound_choices {
position: relative;
background: #e3e9eb url(/static/images/Other/cross.png) 50px 100px no-repeat;
text-align: center;
height: fit-content;
box-shadow: 0 3px 11px 0 rgb(0 0 0 / 20%);
}
.compound_background {
position: relative;
background: #e3e9eb url(/static/images/Other/cross.png) 50px 100px no-repeat;
text-align: center;
height: fit-content;
}
.compound_choices:hover{
background: #b1b6b8 url(/static/images/Other/cross.png) 50px 100px no-repeat;
}
.pocket_choices {
position: relative;
background: #DCECF2 url(/static/images/Other/cross.png) 50px 100px no-repeat;
text-align: center;
height: fit-content;
box-shadow: 0 3px 11px 0 rgb(0 0 0 / 20%);
}
.pocket_choices:hover {
background: #cae6f0 url(/static/images/Other/cross.png) 50px 100px no-repeat;
}
.pocket_background {
position: relative;
background: #DCECF2 url(/static/images/Other/cross.png) 50px 100px no-repeat;
text-align: center;
height: fit-content;
}
.icons {
padding: 10%;
font-size: 1.5em;
}
.choices_background {
......@@ -448,6 +485,15 @@ div.hidden {
display:block;
}
.front-vertical-align {
padding-top: 80px;
}
.back-vertical-align {
padding-top: 25px;
}
/* -- Breadcrumb -- */
.breadNav {
......@@ -1220,4 +1266,44 @@ div.hidden {
.btn.float-right+.btn.float-right {
margin-right: 5px
}
\ No newline at end of file
}
/* Modal */
.modal-xl {
width: 100%;
max-width:1200px;
height: fit-content;
max-height: 1200px;
}
.close_choices_modal {
margin: 0px !important;
right: 32px !important;
top: 32px !important;
width: 32px !important;
height: 32px !important;
opacity: 0.5;
border: none !important;
color: #495057 !important;
cursor: pointer;
float: right;
text-align: right;
font-size: 2em;
background-color: white !important;
}
.close_choices_modal:hover {
opacity: 1;
}
.align_modal {
display: inline-block;
}
.modal_choices_title {
float: left;
text-align: right;
font-family: "PlayfairDisplayReg";
font-size: 2em;
}
ippisite/ippidb/static/js/ippidb.js
View file @ 339798db
......@@ -277,4 +277,11 @@ var toggleCheckBox = function (id) {
} else {
queryUrl.changeSelection(id, null);
}
}
\ No newline at end of file
}
$(document).ready(function () {
$(".modalhref").click(function(e){
$(".modal").modal('hide');
window.open($(this).find("a").last()[0].href, '_self');
});
});
\ No newline at end of file
ippisite/ippidb/templates/base.html
View file @ 339798db
......@@ -99,7 +99,7 @@
<a href="{% url 'compound_list' %}">Query compounds</a>
</li>
<li>
<a href="{% url 'cavities' %}">Query pockets</a>
<a href="{% url 'cavities' %}">Query cavities</a>
</li>
<li>
<a href="{% url 'tutorials' %}">Tutorials</a>
......
ippisite/ippidb/templates/index.html
View file @ 339798db
......@@ -65,207 +65,265 @@
<a class="next" onclick='plusSlides(1)'>&#10095;</a>
</div>
</div>
<div class="background_choices">
<div class="row justify-content-center ml-2 mr-2" style="height:300px;">
<div class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3" style="padding: 10px;">
<div class="choices_background flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<a href="/compounds">
<div style="top:30%; left:35%; position:absolute;">
<i class="fas fa-search fa-4x"></i>
<p
style="font-family: BrandonGrotesqueReg; margin-top: 20px;">
Query</p>
</div>
</a>
</div>
<div class="flip-card-back">
<a href="/compounds">
<div style="padding-top: 3.5em;">
<div class="choices_title">
Query
</div>
<div class="choices_description">Build sophisticated
queries
and
interrogate iPPI-DB using a large catalog of
criteria.
</div>
</div>
</a>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
<div class="compound_choices" data-toggle="modal" data-target="#compoundModal">
<div class="icons">
<i style="font-size: 5em;" class="icon icon-conceptual icon-chemical"></i>
<div class="choices_title">Compounds</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3" style="padding: 10px;">
<div class="choices_background flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<a href="/about-pca">
<div style="top:30%; left:10%; position:absolute;">
<i class="far fa-compass fa-4x"></i>
<p
style="font-family: BrandonGrotesqueReg; margin-top: 20px;">
Navigate the PPI chemical space</p>
</div>
</a>
</div>
<div class="flip-card-back">
<a href="/about-pca">
<div style="padding-top: 3.5em;">
<div class="choices_title">
Navigate the PPI chemical space
</div>
<div class="choices_description">Explore iPPI-DB
compounds
by
navigating within an interactive Principal
Component
Analysis
individual map.
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3" style="padding: 10px;">
<div class="choices_background flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<a href="/about-le-lle">
<div style="top:30%; left:20%; position:absolute;">
<i class="fas fa-snowboarding fa-4x"></i>
<p
style="font-family: BrandonGrotesqueReg; margin-top: 20px;">
Surf the efficiency plot</p>
</div>
</a>
</div>
<div class="flip-card-back">
<a href="/about-le-lle">
<div style="padding-top: 3.5em;">
<div class="choices_title">
Surf the efficiency plot
</div>
<div class="choices_description">Select iPPI-DB
compounds using
an
interactive efficiency plot that highlights their
ligand
(LE)
and lipophilic efficiencies (LLE).
</div>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
<div class="pocket_choices" data-toggle="modal" data-target="#pocketModal">
<div class="icons">
<i style="font-size: 5em;" class="icon icon-conceptual icon-structures-3d"></i>
<div class="choices_title">Pockets</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3" style="padding: 10px;">
<div class="choices_background flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<a href="/contribute">
<div style="top:30%; left:35%; position:absolute;">
<i class="fas fa-plus fa-4x"></i>
<p
style="font-family: BrandonGrotesqueReg; margin-top: 20px;">
Contribute</p>
</div>
</a>
</div>
<div class="flip-card-back">
<a href="/contribute">
<div style="padding-top: 2.5em; ">
<div class="choices_title">
Contribute
</div>
<div class="choices_description">You have read or written a
publication describing new iPPI compounds. Let it be a
benefit
for the whole PPI community by using our intuitive
Contribute
process. You are just few clicks away from adding new
precious
data to iPPI-DB.
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center ml-2 mr-2" style="height:300px;">
<div class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3" style="padding: 10px;">
<div class="modal fade" id="compoundModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header align_modal">
<div class="modal_choices_title">Compounds</div>
<button type="button" class="close_choices_modal" data-dismiss="modal" aria-label="Close">&times;</button>
</div>
<div class="modal-body">
<div class="row mt-4">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="compound_background">
<div class="row ml-2 mr-2" >
<div class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3" style="padding: 10px;">
<div class="choices_background flip-card">
<div class="flip-card-inner">
<div class="choices_background flip-card modalhref" style="height: 300px">
<div class="flip-card-inner">
<div class="flip-card-front">
<a href="{% url 'cavities' %}">
<div style="top:30%; left:15%; position:absolute;">
<i class="fas fa-search fa-4x"></i>
<p
style="font-family: BrandonGrotesqueReg; margin-top: 20px;">
Interrogate pockets database</p>
<div class="flip-card-front">
<a href="/compounds">
<div class="front-vertical-align">
<i class="fas fa-search fa-4x"></i>
<p
style="font-family: BrandonGrotesqueReg; margin-top: 20px;">
Query</p>
</div>
</a>
</div>
<div class="flip-card-back">
<a href="/compounds">
<div class="back-vertical-align">
<div class="choices_title">
Query
</div>
<div class="choices_description">Build sophisticated
queries
and
interrogate iPPI-DB using a large catalog of
criteria.
</div>
</div>
</a>
</div>
</div>
</div>
</a>
</div>
<div class="flip-card-back">
<a href="{% url 'cavities' %}">
<div style="padding-top: 3.5em;">
<div class="choices_title">
Interrogate pockets database
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3" style="padding: 10px;">
<div class="choices_background flip-card modalhref" style="height: 300px">
<div class="flip-card-inner">
<div class="flip-card-front">
<a href="/about-pca">
<div class="front-vertical-align">
<i class="far fa-compass fa-4x"></i>
<p
style="font-family: BrandonGrotesqueReg; margin-top: 20px;">
Navigate the PPI chemical space</p>
</div>
</a>
</div>
<div class="flip-card-back">
<a href="/about-pca">
<div class="back-vertical-align">
<div class="choices_title">
Navigate the PPI chemical space
</div>
<div class="choices_description">Explore iPPI-DB
compounds
by
navigating within an interactive Principal
Component
Analysis
individual map.
</div>
</div>
</a>
</div>
</div>
<div class="choices_description">
Interrogate pockets database and explore pockets
descriptors, predictive interactibility and
druggability, tridimensional structures...
</div>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3" style="padding: 10px;">
<div class="choices_background flip-card modalhref" style="height: 300px">
<div class="flip-card-inner">
<div class="flip-card-front">
<a href="/about-le-lle">
<div class="front-vertical-align">
<i class="fas fa-snowboarding fa-4x"></i>
<p
style="font-family: BrandonGrotesqueReg; margin-top: 20px;">
Surf the efficiency plot</p>
</div>
</a>
</div>
<div class="flip-card-back">
<a href="/about-le-lle">
<div class="back-vertical-align">
<div class="choices_title">
Surf the efficiency plot
</div>
<div class="choices_description">Select iPPI-DB
compounds using
an
interactive efficiency plot that highlights their
ligand
(LE)
and lipophilic efficiencies (LLE).
</div>
</div>
</a>
</div>
</div>
</div>
</a>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3" style="padding: 10px;">
<div class="choices_background flip-card modalhref" style="height: 300px">
<div class="flip-card-inner">
<div class="flip-card-front">
<a href="/contribute">
<div class="front-vertical-align">
<i class="fas fa-plus fa-4x"></i>
<p
style="font-family: BrandonGrotesqueReg; margin-top: 20px;">
Contribute</p>
</div>
</a>
</div>
<div class="flip-card-back">
<a href="/contribute">
<div class="back-vertical-align">
<div class="choices_title">
Contribute
</div>
<div class="choices_description">You have read or written a
publication describing new iPPI compounds. Let it be a
benefit
for the whole PPI community by using our intuitive
Contribute
process. You are just few clicks away from adding new
precious
data to iPPI-DB.
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3" style="padding: 10px;">
<div class="choices_background flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<a href="{% url 'networks' %}">
<div style="top:30%; left:15%; position:absolute;">
<i class="far fa-compass fa-4x"></i>
<p
style="font-family: BrandonGrotesqueReg; margin-top: 20px;">
Navigate the PPI pocketome</p>
</div>
</a>
</div>
<div class="flip-card-back">
<a href="{% url 'networks' %}">
<div style="padding-top: 3.5em;">
<div class="choices_title">
Navigate the PPI pocketome
</div>
</div>
</div>
<div class="modal fade" id="pocketModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header align_modal">
<div class="modal_choices_title">Pockets</div>
<button type="button" class="close_choices_modal" data-dismiss="modal" aria-label="Close">&times;</button>
</div>
<div class="modal-body">
<div class="row mt-4">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="pocket_background">
<div class="row ml-2 mr-2">
<div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6" style="padding: 10px;">
<div class="choices_background flip-card modalhref" style="height: 300px">
<div class="flip-card-inner">
<div class="flip-card-front">
<a href="{% url 'cavities' %}">
<div class="front-vertical-align">
<i class="fas fa-search fa-4x"></i>
<p
style="font-family: BrandonGrotesqueReg; margin-top: 20px;">
Interrogate pockets database</p>
</div>
</a>
</div>
<div class="flip-card-back">
<a href="{% url 'cavities' %}">
<div class="back-vertical-align">
<div class="choices_title">
Interrogate pockets database
</div>
<div class="choices_description">
Interrogate pockets database and explore pockets
descriptors, predictive interactibility and
druggability, tridimensional structures...
</div>
</div>
</a>
</div>
</div>
<div class="choices_description">Explore iPPI-DB
pocketome by navigating
within an interactive network.
</div>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6" style="padding: 10px;">
<div class="choices_background flip-card modalhref" style="height: 300px">
<div class="flip-card-inner">
<div class="flip-card-front">
<a href="{% url 'networks' %}">
<div class="front-vertical-align">
<i class="far fa-compass fa-4x"></i>
<p
style="font-family: BrandonGrotesqueReg; margin-top: 20px;">
Navigate the PPI pocketome</p>
</div>
</a>
</div>
<div class="flip-card-back">
<a href="{% url 'networks' %}">
<div class="back-vertical-align">
<div class="choices_title">
Navigate the PPI pocketome
</div>
<div class="choices_description">Explore iPPI-DB
pocketome by navigating
within an interactive network.
</div>
</div>
</a>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="aklgmt_title">
Aknowledgments
......
Markdown is supported
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