diff --git a/ippisite/ippidb/static/css/main.css b/ippisite/ippidb/static/css/main.css index d7fdcbb8e7be243efef16d633e3f05d120465656..99c2eaa56f31963d5db3627659d4a52c3effbd9c 100644 --- a/ippisite/ippidb/static/css/main.css +++ b/ippisite/ippidb/static/css/main.css @@ -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; +} diff --git a/ippisite/ippidb/static/js/ippidb.js b/ippisite/ippidb/static/js/ippidb.js index a8d3a4050bfc7231f04aacc9541fb56eda13f253..92952f7faadf3247cb36f6ef747b84edf0023059 100644 --- a/ippisite/ippidb/static/js/ippidb.js +++ b/ippisite/ippidb/static/js/ippidb.js @@ -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 diff --git a/ippisite/ippidb/templates/base.html b/ippisite/ippidb/templates/base.html index 623af9ee1cb1caf3f13a5965de423a752b023bbe..9aedefb5d98cf9665e662912d027f657b95616ce 100644 --- a/ippisite/ippidb/templates/base.html +++ b/ippisite/ippidb/templates/base.html @@ -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> diff --git a/ippisite/ippidb/templates/index.html b/ippisite/ippidb/templates/index.html index 8de21d8751e5894bcdf28b8e5d1d17edf18e6938..13aef5048c3086146510ca229299cb76e6ef8252 100644 --- a/ippisite/ippidb/templates/index.html +++ b/ippisite/ippidb/templates/index.html @@ -65,207 +65,265 @@ <a class="next" onclick='plusSlides(1)'>❯</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">×</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">×</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