Refactor layout based on bootstrap 4 grid

budget/static/css/main.css

@@ -55,13 +55,6 @@ body {
     background-position: center bottom;
     background-repeat: no-repeat;
     height: 100%;
-    width: 230px;
-    padding-left: 10px;
-    padding-right: 20px;
-    padding-top: 10px;
-    margin-left: -20px;
-    margin-top: -10px;
-    margin-right: 15px;
     color: black;
     position: fixed;
 }
@@ -70,13 +63,13 @@ body {
 #add-member-form input[type="text"] { width: 60%; }
 #add-member-form button { width: 35%; }
 
-#table_overflow { overflow-y: auto; overflow-x: hidden; width: 235px; }
+#table_overflow { overflow-y: auto; overflow-x: hidden;}
+
 
 /* Content */
 
 .content {
-    padding-top: 1em;
+    margin-top: 1rem;
-    padding-left: 250px;
 }
 
 /* Home */
@@ -94,7 +87,9 @@ body {
     height: 100px;
 }
 
-#footer{
+footer{
+    margin-left: -15px;
+    margin-right: -15px;
     margin-top: 30px;
     position: fixed;
     bottom: 0px;

budget/templates/home.html

@@ -1,24 +1,19 @@
 {% extends "layout.html" %}
 
 
-{% block header %}
+{% block body %}
-<div id="header" class="container-fluid">
+    <header id="header" class="row">
-    <div class="row-fluid">
+      <div class="col-5  offset-md-2">
-        <div class="span5 offset2">
             <h2>{{ _("Manage your shared <br>expenses, easily") }}</h2>
             <a href="{{ url_for(".demo") }}" class="tryout btn btn-inverse pull-right">{{ _("Try out the demo")  }}</a>
         </div>
-        <div class="span4">
+        <div class="col-4">
             <p class="additional-content">{{ _("You're sharing a house?") }}<br /> {{ _("Going on holidays with friends?") }}<br /> {{ _("Simply sharing money with others?") }} <br /><strong>{{ _("We can help!") }}</strong></p>
         </div>
-    </div>
+    </header>
-</div>
-{% endblock %}
 
-{% block body %}
+    <main class="row home">
-<div class="container-fluid">
+        <div class="col-4 offset-md-2">
-    <div class="row-fluid home">
-        <div class="span4 offset2">
             <form id="authentication-form" class="form-horizontal" action="{{ url_for(".authenticate") }}" method="post">
                 <fieldset class="form-group">
                     <legend>{{ _("Log to an existing project") }}...</legend>
@@ -30,7 +25,7 @@
                 </div>
             </form>
         </div>
-        <div class="span4">
+        <div class="col-3 offset-md-1">
             <form id="creation-form" class="form-horizontal" action="{{ url_for(".create_project") }}" method="post">
                 <fieldset class="form-group">
                     <legend>...{{ _("or create a new one") }}</legend>
@@ -40,9 +35,8 @@
                     <button class="btn" type="submit">{{ _("let's get started") }}</button>
                 </div>
             </form>
+        </main>
     </div>
-    </div>
-</div>
 {% endblock %}
 
 {% block js %}

budget/templates/layout.html

@@ -73,25 +73,26 @@
     </div>
 </div>
 
-{% block header %}{% endblock %}
 
-{% block body %}
+</nav>
+
 <div class="container-fluid">
+{% block body %}
     {% block sidebar %}{% endblock %}
-    <div class="content">
+    <main class="content offset-1 col-10">
     {% block content %}{% endblock %}
-    </div>
+    </main>
 </div>
 {% endblock %}
 
 {% for message in get_flashed_messages() %}
-<div class="flash alert alert-success"><p>{{ message }}</p></div>
+<div class="flash alert alert-success">{{ message }}</div>
 {% endfor %}
 
 {% block footer %}
-<div id="footer">
+<footer>
     <p><a href="https://github.com/spiral-project/ihatemoney">{{ _("This is a free software") }}</a>, {{ _("you can contribute and improve it!") }}</p>
-</div>
+</footer>
 {% endblock %}
 
 </body>

budget/templates/list_bills.html

@@ -1,16 +1,10 @@
-{% extends "layout.html" %}
+{% extends "sidebar_table_layout.html" %}
 
 {% block title %} - {{ g.project.name }}{% endblock %}
 {% block head %}
     <script src="{{ url_for("static", filename="js/bootstrap-datepicker.js") }}"></script>
 {% endblock %}
 {% block js %}
-
-    $(window).resize(function() {
-        $("#sidebar").height( window.innerHeight-50 );
-        $("#table_overflow").height( $("#sidebar").height()-120 );
-    });
-
     {% if add_bill %} $('#new-bill').click(); {% endif %}
 
     // Hide all members actions
@@ -56,8 +50,6 @@
 {% endblock %}
 
 {% block sidebar %}
-<div id="sidebar" class="sidebar">
-
     <form id="add-member-form" action="{{ url_for(".add_member") }}" method="post" class="form-inline">
         {{ forms.add_member(member_form) }}
     </form>
@@ -89,8 +81,6 @@
     {% endfor %}
     </table>
     </div>
-
-</div>
 {% endblock %}
 
 {% block content %}

budget/templates/settle_bills.html

@@ -1,8 +1,6 @@
-{% extends "layout.html" %}
+{% extends "sidebar_table_layout.html" %}
 
 {% block sidebar %}
-<div id="sidebar" class="sidebar">
-
     <div id="table_overflow">
     <table class="balance table">
     {% set balance = g.project.balance %}
@@ -16,8 +14,6 @@
     {% endfor %}
     </table>
     </div>
-
-</div>
 {% endblock %}
 
 

budget/templates/sidebar_table_layout.html

@@ -0,0 +1,14 @@
+{% extends "layout.html" %}
+
+{% block body %}
+<div class="row" style="height: 100%">
+<aside id="sidebar" class="sidebar col-3 " style="height: 100%">
+  {% block sidebar %}{% endblock %}
+</aside>
+
+<main class="offset-md-3 col-9">
+  {% block content %}{% endblock %}
+</main>
+
+</div>
+{% endblock %}