Change base layout

Make CSS a bit cleaner and remove useless separator.
7 years ago · dabf484422
2 changed files with 10 additions and 11 deletions
--- a/static/css/base.css
+++ b/static/css/base.css
@ -8,10 +8,9 @@ footer p {
  margin-bottom: .25rem;
 }

-/* Remove the navbar's default margin-bottom */
-.navbar {
-    margin-bottom: 0;
-}
+/* Move the space between navbar and content in the content */
+.navbar { margin-bottom: 0; }
+.pt4 { padding-top: 1.5rem!important; }

 /* Reserv space for icons and align */
 a > i.fa {
@ -58,10 +57,11 @@ a > i.fa {
    overflow: auto;
 }

-/* Set gray background color and 100% height */
+/* Set gray background color */
 .sidenav {
-    padding-top: 20px;
    background-color: #f1f1f1;
+    border: 1px solid #e0e0e0;
+    border-radius: 0 0 5px 5px;
 }
 .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    vertical-align: middle;
--- a/templates/base.html
+++ b/templates/base.html
@ -53,7 +53,7 @@ with this program; if not, write to the Free Software Foundation, Inc.,
        <title>{{ name_website }} : {% block title %}{% trans "Home" %}{% endblock %}</title>
    </head>

-    <body>
+    <body id="main">
        <nav class="navbar navbar-inverse navbar-static-top">
            <div class="container-fluid">
                <div class="navbar-header">
@ -162,7 +162,7 @@ with this program; if not, write to the Free Software Foundation, Inc.,

        <div class="container-fluid text-center">
            <div class="row content">
-                <div class="col-sm-2 sidenav">
+                <div class="col-sm-2 sidenav pt4">
                    <div class="panel panel-default">
                        <div class="text-left list-group">
                        {% block sidebar %}
@ -170,13 +170,12 @@ with this program; if not, write to the Free Software Foundation, Inc.,
                        </div>
                    </div>
                </div>
-                <div class="col-sm-8 text-left">
+                <div class="col-sm-8 text-left pt4">
                    {# Display django.contrib.messages as Bootstrap alerts #}
                    {% bootstrap_messages %}
-                    <hr>
                    {% block content %}{% endblock %}
                </div>
-                <div class="col-sm-2 sidenav">
+                <div class="col-sm-2 sidenav pt4">
                    <div class="panel panel-default">
                        {% if request_user.is_authenticated %}
                        <div class="panel-heading">