sidebar_table_layout switches to flex column layout (#905)

* Fixes #896

sidebar_table_layout switches to flex column layout
remove all 'float' buttons, replace them with nice flexboxes.
bill_table needs a flex-basis because with a very small width, it has a 0 height. I don't really know why, but adding a flex-basis: auto shows it.

* ensure new bill is on top of pagination

ihatemoney/static/css/main.css

@@ -339,6 +339,7 @@ footer .footer-left {
 #history_table {
   margin-top: 30px;
   margin-bottom: 30px;
+  flex-basis: auto;
 }
 
 @media (min-width: 768px) {

ihatemoney/templates/history.html

@@ -126,20 +126,21 @@
     </div>
     {% endif %}
     {{ clear_history_modals() }}
-    <span class="float-right mt-3" {% if not history %} data-toggle="tooltip" title="{{_('No history to erase')}}" {% endif %}>
-        <a href="#" class="btn btn-outline-danger float-right {% if not history %} disabled {% endif %}" data-toggle="modal" data-keyboard="false" data-target="#confirm-erase">
-            <i class="icon icon-red plus">{{ static_include("images/x.svg") | safe }}</i>
-            {{ _("Clear Project History") }}
-        </a>
-    </span>
-    <span class="float-right mt-3" {% if not any_ip_addresses %}data-placement="top" data-toggle="tooltip" title="{{_('No IP Addresses to erase')}}" {% endif %}>
-        <a href="#" class="btn btn-outline-danger float-right mr-2 {% if not any_ip_addresses %} disabled {% endif %}" data-toggle="modal" data-keyboard="false" data-target="#confirm-ip-delete">
+    <div class="d-flex mt-3 justify-content-end">
+        <span class="mr-2" {% if not any_ip_addresses %}data-placement="top" data-toggle="tooltip" title="{{_('No IP Addresses to erase')}}" {% endif %}>
+            <a href="#" class="btn btn-outline-danger {% if not any_ip_addresses %} disabled {% endif %}" data-toggle="modal" data-keyboard="false" data-target="#confirm-ip-delete">
                 <i class="icon icon-red plus">{{ static_include("images/x.svg") | safe }}</i>
                 {{ _("Delete Stored IP Addresses") }}
             </a>
         </span>
+        <span {% if not history %} data-toggle="tooltip" title="{{_('No history to erase')}}" {% endif %}>
+            <a href="#" class="btn btn-outline-danger {% if not history %} disabled {% endif %}" data-toggle="modal" data-keyboard="false" data-target="#confirm-erase">
+                <i class="icon icon-red plus">{{ static_include("images/x.svg") | safe }}</i>
+                {{ _("Clear Project History") }}
+            </a>
+        </span>
+    </div>
 
-    <div class="clearfix"></div>
     {% if history %}
     <table id="history_table" class="split_bills table table-striped">
         <thead><tr>

ihatemoney/templates/list_bills.html

@@ -63,12 +63,6 @@
 {% endblock %}
 
 {% block content %}
-    <span id="new-bill" class="float-right"  {% if not g.project.members %} data-toggle="tooltip" title="{{_('You should start by adding participants')}}" {% endif %}>
-        <a href="{{ url_for('.add_bill') }}" class="btn btn-primary float-right {% if not g.project.members %} disabled {% endif %}" data-toggle="modal" data-keyboard="false" data-target="#bill-form">
-            <i class="icon icon-white before-text">{{ static_include("images/plus.svg") | safe }}</i>
-            {{ _("Add a new bill") }}
-        </a>
-    </span>
     <div id="bill-form" class="modal fade show" role="dialog">
         <div class="modal-dialog" role="document">
             <div class="modal-content">
@@ -82,9 +76,9 @@
             </div>
         </div>
     </div>
-<div class="clearfix"></div>
+<div class="d-flex flex-wrap-reverse w-100">
 {% if bills.pages > 1 %}
-<ul class="pagination" id="pagination-top">
+<ul class="pagination mr-2" id="pagination-top">
   <li class="page-item {% if bills.page == 1 %}disabled{% endif %}"><a class="page-link" href="{{ url_for('main.list_bills', page=bills.prev_num) }}">&laquo; {{ _("Newer bills") }}</a></li>
   {%- for page in bills.iter_pages() %}
   {% if page %}
@@ -96,10 +90,15 @@
   <li class="page-item {% if bills.page == bills.pages %}disabled{% endif %}"><a class="page-link" href="{{ url_for('main.list_bills', page=bills.next_num) }}">{{ _("Older bills") }} &raquo;</a></li>
 </ul>
 {% endif %}
+<span id="new-bill" class="ml-auto" {% if not g.project.members %} data-toggle="tooltip" title="{{_('You should start by adding participants')}}" {% endif %}>
+    <a href="{{ url_for('.add_bill') }}" class="btn btn-primary {% if not g.project.members %} disabled {% endif %}" data-toggle="modal" data-keyboard="false" data-target="#bill-form">
+        <i class="icon icon-white before-text">{{ static_include("images/plus.svg") | safe }}</i>
+        {{ _("Add a new bill") }}
+    </a>
+</span>
+</div>
 
     {% if bills.total > 0 %}
-
-
         <table id="bill_table" class="col table table-striped table-hover table-responsive-sm">
             <thead>
                 <tr><th>{{ _("When?") }}
@@ -149,7 +148,7 @@
         </table>
 
 {% if bills.pages > 1 %}
-<ul class="pagination">
+<ul class="pagination w-100">
   <li class="page-item {% if bills.page == 1 %}disabled{% endif %}"><a class="page-link" href="{{ url_for('main.list_bills', page=bills.prev_num) }}">&laquo; {{ _("Newer bills") }}</a></li>
   {%- for page in bills.iter_pages() %}
   {% if page %}

ihatemoney/templates/sidebar_table_layout.html

@@ -52,7 +52,7 @@
   {% block sidebar %}{% endblock %}
 </aside>
 
-<main class="offset-md-3 col-xs-12 col-md-9">
+<main class="offset-md-3 col-xs-12 col-md-9 d-flex flex-column">
   {% block content %}{% endblock %}
 </main>