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

k4ever/main/templates/main/navbar-content.html

@@ -24,12 +24,19 @@
 		<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 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">
-		{% if user.is_staff %}
-			<li class=""><a href="/admin/">Administration</a></li>
-		{% endif %}
-		<li class="{% active request logout %}"><a href="{{ logout }}">Abmelden</a></li>
+		<li class="divider-vertical" role="presentation"></li>
+		<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 %}
+						<li class=""><a href="/admin/"><i class="icon-lock"></i> Administration</a></li>
+					{% endif %}
+					<li class="{% active request logout %}"><a href="{{ logout }}"><i class="icon-off"></i> Abmelden</a></li>
+				</ul>
+			</li>
+		</ul>
 	{% else %}
 		<li class="{% active request login %}"><a href="{{ login }}">Anmelden</a></li>
 		<li class="{% active request register %}"><a href="{{ register }}">Registrieren</a></li>
@@ -37,10 +44,12 @@
 </ul>
 
 {% 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>
-		<input placeholder="Suche und kaufe..." class="search-query autocomplete"
-			type="search" name="search_term" value="Lade Daten..."
-			disabled="disabled" />
-	</form>
+		<form class="navbar-search">
+			<input placeholder="Suche und kaufe..." class="search-query autocomplete"
+				type="search" name="search_term" value="Lade Daten..."
+				disabled="disabled" />
+		</form>
+	</div>
 {% endif %}

k4ever/media/css/style.css

@@ -58,6 +58,16 @@ h3 {
   background: url("img/logo.png") 6px center no-repeat transparent;
   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 {
   margin-bottom: -6px;
 }
@@ -375,6 +385,9 @@ table.itemListContainer > tbody > tr:first-child ~ tr > td {
   background-repeat: no-repeat;
   margin: 0 auto;
 }
+.icon.user {
+  background-image: url("img/user.png");
+}
 .icon.approved {
   background-image: url("img/approved.png");
 }

k4ever/media/css/style.less

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