diff --git a/ippisite/ippidb/static/css/compounds_list.css b/ippisite/ippidb/static/css/compounds_list.css index 7d5c5a73dc6d77d69bb3415da4000a65dac6b87b..7f1a62f6482c2c778dcdfd1f81e25e09abca729f 100644 --- a/ippisite/ippidb/static/css/compounds_list.css +++ b/ippisite/ippidb/static/css/compounds_list.css @@ -223,21 +223,15 @@ Description: IPPI-DB Theme } .compound_header_title { - overflow: auto; - position: relative; -} - -.compound_2D { - position: fixed; - display: flex; -} - -.fix-compound_2D { - background-color: #eee; - position: fixed; - top: 15px; + position: sticky; + top:0; + background-color: #ffffff; + margin-bottom: 18px; + border-radius: 3px; + box-shadow: 0 3px 11px 0 rgba(0, 0, 0, 0.2); + z-index: 1; } .bg_warning{ background-color: #fbbf839e; -} \ No newline at end of file +} diff --git a/ippisite/ippidb/templates/compound_card.html b/ippisite/ippidb/templates/compound_card.html index a727870404a777a8399aed2110a823a588438ff0..ca5681037511a77717e0371f8aff44e538bdefb5 100644 --- a/ippisite/ippidb/templates/compound_card.html +++ b/ippisite/ippidb/templates/compound_card.html @@ -31,9 +31,9 @@ {{ compound.id }}{% endblock %} </div> </nav> - <div class="container-fluid inner-wrap compound_header_title" id="compound_header_title" style="margin-bottom: 18px; border-radius: 3px; box-shadow: 0 3px 11px 0 rgba(0, 0, 0, 0.2);"> + <div class="container-fluid inner-wrap compound_header_title" id="compound_header_title"> <div class="row"> - {% include "compound_smiles_draw.html" with id=compound.id smile=compound.canonical_smile width=150 height=150%} + {% include "compound_smiles_draw.html" with id=compound.id smile=compound.canonical_smile width=250 height=250%} <div class="{% if compound.is_validated is False %}bg_warning{% endif %}" style="display: flex; align-items: center;"> <h1 class="page-title" style="margin: 0;">Compound {{ compound.id }}</h1> @@ -47,7 +47,7 @@ <div class="top"> </div> - <div class="row" style="display: inline-block;height:auto;"> + <div class="row" style="display: inline-block;height:auto; margin-right: 15px; margin-left: 15px;"> <div class="tab-content" id="tabContent"> <div class="tab-pane fade show active" id="compound" role="tabpanel" aria-labelledby="compound-tab"> <div class="card"> @@ -308,16 +308,4 @@ $('[href="' + tabHash + '"]').tab('show'); }); </script> -<script> - $("#compound_header_title").on("scroll", function (e) { - console.log("scroll"); - if (this.scrollTop > 300) { - - $("#compound_header_title").addClass("fix-compound_2D"); - } else { - $("#compound_header_title").removeClass("fix-compound_2D"); - } - - }); -</script> {% endblock %} \ No newline at end of file