refactored navbar so it fits on screens with at least 910px width

This commit is contained in:
Konrad Mohrfeldt 2012-02-06 01:42:20 +01:00
parent 184b7c0504
commit 5bc1124edc
4 changed files with 49 additions and 11 deletions

View File

@ -24,12 +24,19 @@
<li class="{% active request store %}"><a href="{{ store }}">Einkaufen</a></li> <li class="{% active request store %}"><a href="{{ store }}">Einkaufen</a></li>
<li class="{% active request transactions %}"><a href="{{ transactions }}">Konto</a></li> <li class="{% active request transactions %}"><a href="{{ transactions }}">Konto</a></li>
<li class="{% active request history %}"><a href="{{ history }}">Frühere Einkäufe</a></li> <li class="{% active request history %}"><a href="{{ history }}">Frühere Einkäufe</a></li>
<li class="{% active request settings %}"><a href="{{ settings }}">Einstellungen</a></li> <li class="divider-vertical" role="presentation"></li>
<li class="divider-vertical" role="presentation"> <ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="icon user"></span></a>
<ul class="dropdown-menu">
<li class="{% active request settings %}"><a href="{{ settings }}"><i class="icon-cog"></i> Einstellungen</a></li>
{% if user.is_staff %} {% if user.is_staff %}
<li class=""><a href="/admin/">Administration</a></li> <li class=""><a href="/admin/"><i class="icon-lock"></i> Administration</a></li>
{% endif %} {% endif %}
<li class="{% active request logout %}"><a href="{{ logout }}">Abmelden</a></li> <li class="{% active request logout %}"><a href="{{ logout }}"><i class="icon-off"></i> Abmelden</a></li>
</ul>
</li>
</ul>
{% else %} {% else %}
<li class="{% active request login %}"><a href="{{ login }}">Anmelden</a></li> <li class="{% active request login %}"><a href="{{ login }}">Anmelden</a></li>
<li class="{% active request register %}"><a href="{{ register }}">Registrieren</a></li> <li class="{% active request register %}"><a href="{{ register }}">Registrieren</a></li>
@ -37,10 +44,12 @@
</ul> </ul>
{% if user.is_authenticated %} {% if user.is_authenticated %}
<form class="navbar-search pull-right"> <div class="pull-right">
<span class="brand balance">Kontostand: {{ user.get_profile.balance|floatformat:2 }} €</span> <span class="brand balance">Kontostand: {{ user.get_profile.balance|floatformat:2 }} €</span>
<form class="navbar-search">
<input placeholder="Suche und kaufe..." class="search-query autocomplete" <input placeholder="Suche und kaufe..." class="search-query autocomplete"
type="search" name="search_term" value="Lade Daten..." type="search" name="search_term" value="Lade Daten..."
disabled="disabled" /> disabled="disabled" />
</form> </form>
</div>
{% endif %} {% endif %}

Binary file not shown.

After

Width:  |  Height:  |  Size: 436 B

View File

@ -58,6 +58,16 @@ h3 {
background: url("img/logo.png") 6px center no-repeat transparent; background: url("img/logo.png") 6px center no-repeat transparent;
padding-left: 37px; padding-left: 37px;
} }
.navbar-inner .balance {
padding: 0;
font-size: 14px;
line-height: 40px;
margin-right: 10px;
}
.navbar-inner .icon {
width: 22px;
height: 19px;
}
.navbar-search { .navbar-search {
margin-bottom: -6px; margin-bottom: -6px;
} }
@ -375,6 +385,9 @@ table.itemListContainer > tbody > tr:first-child ~ tr > td {
background-repeat: no-repeat; background-repeat: no-repeat;
margin: 0 auto; margin: 0 auto;
} }
.icon.user {
background-image: url("img/user.png");
}
.icon.approved { .icon.approved {
background-image: url("img/approved.png"); background-image: url("img/approved.png");
} }

View File

@ -131,6 +131,18 @@ h3 {
background: url("@{fldImages}/logo.png") 6px center no-repeat transparent; background: url("@{fldImages}/logo.png") 6px center no-repeat transparent;
padding-left: 37px; padding-left: 37px;
} }
.balance {
padding: 0;
font-size: 14px;
line-height: 40px;
margin-right: 10px;
}
.icon {
width: 22px;
height: 19px;
}
} }
.navbar-search { .navbar-search {
@ -480,6 +492,10 @@ table.itemListContainer {
background-repeat: no-repeat; background-repeat: no-repeat;
margin: 0 auto; margin: 0 auto;
&.user {
background-image: url("@{fldImages}/user.png");
}
&.approved { &.approved {
background-image: url("@{fldImages}/approved.png"); background-image: url("@{fldImages}/approved.png");
} }