tweak header controls alignment in compounds list

Former-commit-id: 27a59a6ab7eaa35b8d1df1b8a8f7a852b857792c

ippisite/ippidb/templates/compound_list.html

@@ -8,7 +8,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 %} <a href="/compounds/" class="breadNav-link"> > Query compounds</a>{% endblock %} 
         </div>
     </nav>
 </div>
@@ -17,8 +17,8 @@
 <div class="row flex-xl-nowrap">
 
 <main class="col-12" role="main">
-    <form>
-        <div class="row">
+    <form class="container-fluid">
+        <div class="m-2 d-flex justify-content-between">
        {% include "multiselection_button.html" with label="PPI Family" param_name="family" %}
        {% include "multiselection_button.html" with label="PPI" param_name="ppi" %}
        {% include "multiselection_button.html" with label="Disease" param_name="disease" %}
@@ -28,10 +28,11 @@
        {% include "slider_button.html" with label="AlogP" param_name="a_log_p" %}
        {% include "slider_button.html" with label="H donors" param_name="nb_donor_h" %}
         </div>
-        <div class="row">
-        <span class="col-md-6"><span>{{ compounds.paginator.count }} compounds</span>
+        <div class="m-2 d-flex ">
+            <span>{{ compounds.paginator.count }} compounds</span>
             {% if selected_ppis or selected_diseases or selected_taxonomies or selected_boundcomplexes or molecular_weight != molecular_weight_max or a_log_p != a_log_p_max or nb_donor_h != nb_donor_h_max%}
-                <span>&nbsp;-&nbsp;filters:&nbsp;</span>
+            <span>
+                &nbsp;-&nbsp;filters:&nbsp;
                 {% if selected_ppis %}
                     {% for selected in selected_ppis %}
                         {% include "selected_badge.html" with param_name="ppi" selected=selected %}
@@ -61,29 +62,29 @@
                 {% if nb_donor_h != nb_donor_h_max %}
                     {% include "slider_badge.html" with param_name="nb_donor_h" param_value=nb_donor_h param_label="H donors" %}
                 {% endif %}
+            </span>
             {% endif %}
-        </span>
-        <div class="dropdown">
-            <button class="btn btn-secondary dropdown-toggle" type="button" id="sortMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                <i class="fas fa-sort-amount-down" title="sort by"></i>
-            </button>
-            <div class="dropdown-menu" aria-labelledby="sortMenuButto">
-                {% for sort_by_value, sort_by_entry in sort_by_options.items %}
-                        <a class="dropdown-item {% if sort_by_value == sort_by %}active{% endif %}" href="#" onclick="modifyUrl('sort_by','{{ sort_by_value }}')">{{ sort_by_entry.name }} ({{ sort_by_entry.order }})</a>
-                {% endfor %}
+            <div class="btn-group m-1 ml-auto">
+                <button class="btn btn-secondary dropdown-toggle" type="button" id="sortMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <i class="fas fa-sort-amount-down" title="sort by"></i>
+                </button>
+                <div class="dropdown-menu" aria-labelledby="sortMenuButto">
+                    {% for sort_by_value, sort_by_entry in sort_by_options.items %}
+                            <a class="dropdown-item {% if sort_by_value == sort_by %}active{% endif %}" href="#" onclick="modifyUrl('sort_by','{{ sort_by_value }}')">{{ sort_by_entry.name }} ({{ sort_by_entry.order }})</a>
+                    {% endfor %}
+                </div>
             </div>
-        </div>
-        <span class="btn-group col-md-2">
-            <a class="btn btn-default btn-outline-primary {% if display == 'v' %}active{% endif %}" href="#" {% if display != 'v' %}onclick="modifyUrl('display', 'v')"{% endif %}>
-                <i class="fa fa-th" title="Thumbnails"></i>
-            </a>
-            <a class="btn btn-default btn-outline-primary {% if display == 'l' %}active{% endif %}" href="#" {% if display != 'l' %}onclick="modifyUrl('display', 'l')"{% endif %}>
-                <i class="fa fa-bars" title="List"></i>
-            </a>
-            <a class="btn btn-default btn-outline-primary {% if display == 't' %}active{% endif %}" href="#" {% if display != 't' %}onclick="modifyUrl('display', 't')"{% endif %}>
-                <i class="fa fa-table" title="Table"></i>
-            </a>
-        </span>
+            <span class="btn-group m-1">
+                <a class="btn btn-default btn-outline-primary {% if display == 'v' %}active{% endif %}" href="#" {% if display != 'v' %}onclick="modifyUrl('display', 'v')"{% endif %}>
+                    <i class="fa fa-th" title="Thumbnails"></i>
+                </a>
+                <a class="btn btn-default btn-outline-primary {% if display == 'l' %}active{% endif %}" href="#" {% if display != 'l' %}onclick="modifyUrl('display', 'l')"{% endif %}>
+                    <i class="fa fa-bars" title="List"></i>
+                </a>
+                <a class="btn btn-default btn-outline-primary {% if display == 't' %}active{% endif %}" href="#" {% if display != 't' %}onclick="modifyUrl('display', 't')"{% endif %}>
+                    <i class="fa fa-table" title="Table"></i>
+                </a>
+            </span>
         </div>
     </form>
 {% if compounds %}