YunoHost-Apps/ihatemoney_ynh
1
0
Fork 0
mirror of https://github.com/YunoHost-Apps/ihatemoney_ynh.git synced 2024-09-03 19:26:15 +02:00
Code Issues Activity Actions

Adapt navigation bar to bootstrap 4

Browse source 
Also fixed some weird alignment issues.
I think this will need more work later (revamp the navbar layout to avoid that
sensation of thing which are floating at random places in the navbar).
This commit is contained in:
Jocelyn Delalande 2017-02-02 11:48:40 +01:00
parent e148d19e96
commit c6c5f8657e
2 changed files with 31 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
budget/static/css/main.css
View file

@ -5,15 +5,25 @@
/* General */ /* General */
body { body {
margin-top: 40px; /* For fixed navbar */
padding-top: 3.5rem;
padding-bottom: 2rem;
} }
/* Navbar */ /* Navbar */
.navbar h1{ margin-left: 75px; } .navbar h1 {
font-size: 1rem;
margin: 0;
padding: 0;
}
.navbar .primary-nav { padding-left: 75px; } .navbar .primary-nav { padding-left: 75px; }
.navbar .secondary-nav { padding-right: 75px; } .navbar .secondary-nav {
.brand{ font-family: 'Lobster', arial, serif; } text-align: right;
flex-direction: row-reverse;
}
.navbar-brand{ font-family: 'Lobster', arial, serif; }
/* Header */ /* Header */

39
budget/templates/layout.html
View file

@ -14,7 +14,7 @@
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">
$(document).ready(function(){ $(document).ready(function(){
var left = window.innerWidth/2-$('.flash').width()/2; var left = window.innerWidth/2-$('.flash').width()/2;
$(".flash").css({ "left": left+"px", "top":"45px" }); $(".flash").css({ "left": left+"px", "top":"0.6rem" });
setTimeout(function(){ setTimeout(function(){
$(".flash").fadeOut("slow", function () { $(".flash").fadeOut("slow", function () {
$(".flash").remove(); $(".flash").remove();
@ -36,42 +36,37 @@
</head> </head>
<body> <body>
<div class="navbar navbar-fixed-top"> <nav class="navbar navbar-toggleable-md navbar fixed-top navbar-inverse bg-inverse">
<div class="navbar-inner"> <h1 class="col-2"><a class="navbar-brand" href="{{ url_for(".home") }}">#! money?</a></h1>
<div class="container-fluid"> <ul class="navbar-nav col-5 offset-md-1">
<h1><a class="brand" href="{{ url_for(".home") }}">#! money?</a></h1>
{% if g.project %} {% if g.project %}
<ul class="nav primary-nav">
{% block navbar %} {% block navbar %}
<li class="nav-item{% if current_view == 'list_bills' %} active{% endif %}"><a class="nav-link" href="{{ url_for(".list_bills") }}">{{ _("Bills") }}</a></li> <li class="nav-item{% if current_view == 'list_bills' %} active{% endif %}"><a class="nav-link" href="{{ url_for(".list_bills") }}">{{ _("Bills") }}</a></li>
<li class="nav-item{% if current_view == 'settle_bill' %} active{% endif %}"><a class="nav-link" href="{{ url_for(".settle_bill") }}">{{ _("Settle") }}</a></li> <li class="nav-item{% if current_view == 'settle_bill' %} active{% endif %}"><a class="nav-link" href="{{ url_for(".settle_bill") }}">{{ _("Settle") }}</a></li>
{% endblock %} {% endblock %}
</ul>
{% endif %} {% endif %}
<ul class="nav pull-right secondary-nav"> </ul>
<ul class="navbar-nav secondary-nav col-4">
{% if g.project %} {% if g.project %}
<li class="dropdown"> <li class="nav-item dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><strong>{{ g.project.name }}</strong> {{ _("options") }} <b class="caret"></b></a> <a href="#" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><strong>{{ g.project.name }}</strong> {{ _("options") }} <b class="caret"></b></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a href="{{ url_for(".edit_project") }}">{{ _("Project settings") }}</a></li> <li><a class="dropdown-item" href="{{ url_for(".edit_project") }}">{{ _("Project settings") }}</a></li>
<li class="divider"></li> <li class="dropdown-divider"></li>
{% for id, name in session['projects'] %} {% for id, name in session['projects'] %}
{% if id != g.project.id %} {% if id != g.project.id %}
<li><a href="{{ url_for(".list_bills", project_id=id) }}">{{ _("switch to") }} {{ name }}</a></li> <li><a class="dropdown-item" href="{{ url_for(".list_bills", project_id=id) }}">{{ _("switch to") }} {{ name }}</a></li>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
<li><a href="{{ url_for(".create_project") }}">{{ _("Start a new project") }}</a></li> <li><a class="dropdown-item" href="{{ url_for(".create_project") }}">{{ _("Start a new project") }}</a></li>
<li class="divider"></li> <li class="dropdown-divider"></li>
<li><a href="{{ url_for(".exit") }}">{{ _("Logout") }}</a></li> <li><a class="dropdown-item" href="{{ url_for(".exit") }}">{{ _("Logout") }}</a></li>
</ul> </ul>
</li> </li>
{% endif %} {% endif %}
<li{% if g.lang == "fr" %} class="active"{% endif %}><a href="{{ url_for(".change_lang", lang="fr") }}">fr</a></li> <li class="nav-item{% if g.lang == "fr" %} active{% endif %}"><a class="nav-link" href="{{ url_for(".change_lang", lang="fr") }}">fr</a></li>
<li{% if g.lang == "en" %} class="active"{% endif %}><a href="{{ url_for(".change_lang", lang="en") }}">en</a></li> <li class="nav-item{% if g.lang == "en" %} active{% endif %}"><a class="nav-link" href="{{ url_for(".change_lang", lang="en") }}">en</a></li>
</ul> </ul>
</div>
</div>
</div>
</nav> </nav>