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 */
body {
margin-top: 40px;
/* For fixed navbar */
padding-top: 3.5rem;
padding-bottom: 2rem;
}
/* Navbar */
.navbar h1{ margin-left: 75px; }
.navbar h1 {
font-size: 1rem;
margin: 0;
padding: 0;
}
.navbar .primary-nav { padding-left: 75px; }
.navbar .secondary-nav { padding-right: 75px; }
.brand{ font-family: 'Lobster', arial, serif; }
.navbar .secondary-nav {
text-align: right;
flex-direction: row-reverse;
}
.navbar-brand{ font-family: 'Lobster', arial, serif; }
/* Header */

39
budget/templates/layout.html
View file

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