Rework general page layout and improve responsiveness (references #9)

bower.json

@@ -19,6 +19,7 @@
 		"tagmanager": "^3.0.2",
 		"eonasdan-bootstrap-datetimepicker": "^4.17.47",
 		"swagger-ui": "^3.13.4",
-		"jquery-ui": "^1.12.1"
+		"jquery-ui": "^1.12.1",
+		"bootstrap-side-navbar": "^1.0.1"
 	}
 }

localization/de.php

@@ -155,5 +155,7 @@ return array(
 	'Warranty ends' => 'Garantie endet',
 	'TV remote control' => 'TV Fernbedienung',
 	'Alarm clock' => 'Wecker',
-	'Heat remote control' => 'Fernbedienung Heizung'
+	'Heat remote control' => 'Fernbedienung Heizung',
+	'About grocy' => 'Über grocy',
+	'Close' => 'Schließen'
 );

public/css/grocy.css

@@ -4,82 +4,78 @@
 }
 
 .navbar-fixed-top {
-	border: 0;
+	background-color: #e5e5e5;
+	border-bottom: 2px solid;
+	border-color: #d6d6d6;
 }
 
-.sidebar {
+.navbar-brand {
-	display: none;
+	font-weight: bold;
+	letter-spacing: -5px;
+	font-size: 2.2em;
+	color: #0b024c !important;
+	margin-left: 0 !important;
+	padding-left: 5px !important;
+	
+}
+
+.navbar-fixed-side {
+	top: 51px;
+	padding-top: 20px;
+	margin-bottom: 20px;
+	background-color: #e5e5e5;
+	border-right: 2px solid #d6d6d6;
+	max-width: 260px;
+	border-left: 0;
+}
+
+#sidebar {
+	overflow-y: auto;
 }
 
 @media (min-width: 768px) {
-	.sidebar {
-		position: fixed;
-		top: 51px;
-		bottom: 0;
-		left: 0;
-		z-index: 1000;
-		display: block;
-		padding: 20px;
-		overflow-x: hidden;
-		overflow-y: auto;
-		background-color: #e5e5e5;
-		border-right: 2px solid #d6d6d6;
-		min-width: 220px;
-		max-width: 260px;
-	}
-
 	#navbar-mobile {
 		display: none !important;
 	}
+
+	.nav-copyright {
+		padding-bottom: 100px;
+	}
 }
 
-.nav-sidebar {
+@media (max-width: 768px) {
-	margin-right: -21px;
+	.navbar-brand {
-	margin-bottom: 20px;
+		margin-left: 25px !important;
-	margin-left: -20px;
+	}
 }
 
-.nav-sidebar > li > a {
+.sidebar-nav > li > a {
 	padding-right: 20px;
 	padding-left: 20px;
 	transition: all 0.3s;
 }
 
-.nav-sidebar > li > a:hover {
+.sidebar-nav > li > a:hover {
 	box-shadow: inset 5px 0 0 #337ab7;
 	transition: all 0.3s;
 }
 
-.nav-sidebar > li > a:focus {
+.sidebar-nav > li > a:focus {
 	box-shadow: inset 5px 0 0 #ab2230;
 	transition: all 0.3s;
 }
 
-.nav-sidebar > .active > a,
+.sidebar-nav > .active > a,
-.nav-sidebar > .active > a:hover,
+.sidebar-nav > .active > a:hover,
-.nav-sidebar > .active > a:focus {
+.sidebar-nav > .active > a:focus {
 	background-color: #d6d6d6;
 	box-shadow: inset 5px 0 0 #ab2230;
 	transition: all 0.3s;
 }
 
-.navbar-default {
+.nav > li.disabled > a,
-	background-color: #e5e5e5;
+.navbar-default .navbar-nav > .disabled > a {
-}
+	color: #a7a7a7;
-
-.main {
-	padding: 20px;
-}
-
-@media (min-width: 768px) {
-	.main {
-		padding-right: 40px;
-		padding-left: 40px;
-	}
-}
-
-.main .page-header {
-	margin-top: 0;
 }
 
 .nav-copyright {
@@ -88,6 +84,26 @@
 	text-align: center;
 }
 
+.nav-copyright > li > a {
+	padding-top: 0 !important;
+	padding-bottom: 0 !important;
+}
+
+.navbar-default .navbar-nav > .open > a {
+	background-color: #d6d6d6 !important;
+}
+
+.dropdown-menu > li > a:hover,
+.dropdown-menu > li > a:focus {
+	background-color: #e5e5e5 !important;
+}
+
+.well {
+	background-color: #e5e5e5;
+	padding-right: 25px;
+	padding-left: 25px;
+}
+
 .discrete-link {
 	color: inherit !important;
 	transition: all 0.3s !important;
@@ -105,21 +121,6 @@ a.discrete-link:focus {
 	transition: all 0.3s !important;
 }
 
-.navbar-fixed-top {
-	border-bottom: 2px solid;
-	border-color: #d6d6d6;
-}
-
-.navbar-brand {
-	font-weight: bold;
-	letter-spacing: -5px;
-	font-size: 2.2em;
-	color: #0b024c !important;
-	margin-left: 0 !important;
-	padding-left: 5px !important;
-	
-}
-
 .table td.fit-content,
 .table th.fit-content {
 	white-space: nowrap;
@@ -144,6 +145,11 @@ a.discrete-link:focus {
 	margin-bottom: 2px;
 }
 
+.discrete-content-separator-2x {
+	padding-top: 10px;
+	padding-bottom: 10px;
+}
+
 .warning-bg {
 	background-color: #fcf8e3 !important;
 }
@@ -156,44 +162,15 @@ a.discrete-link:focus {
 	background-color: #afd9ee !important;
 }
 
-.discrete-content-separator {
-	padding-top: 5px;
-	padding-bottom: 5px;
-}
-
-.discrete-content-separator-2x {
-	padding-top: 10px;
-	padding-bottom: 10px;
-}
-
-.well {
-	background-color: #e5e5e5;
-}
-
-.nav > li.disabled > a,
-.navbar-default .navbar-nav > .disabled > a
-{
-	color: #a7a7a7;
-}
-
 #toast-container > div {
 	opacity: 1;
 	filter: alpha(opacity=100);
 }
 
- .toast-success {
+.toast-success {
 	background-color: #4c994c;
 }
 
 #toast-container > div {
 	box-shadow: none;
 }
-
-.navbar-default .navbar-nav > .open > a {
-	background-color: #d6d6d6 !important;
-}
-
-.dropdown-menu > li > a:hover,
-.dropdown-menu > li > a:focus {
-	background-color: #e5e5e5 !important;
-}

views/batteries.blade.php

@@ -5,16 +5,14 @@
 @section('viewJsName', 'batteries')
 
 @section('content')
-<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
+<h1 class="page-header">
-
-	<h1 class="page-header">
 	@yield('title')
 	<a class="btn btn-default" href="{{ $U('/battery/new') }}" role="button">
 		<i class="fa fa-plus"></i>&nbsp;{{ $L('Add') }}
 	</a>
-	</h1>
+</h1>
 
-	<div class="table-responsive">
+<div class="table-responsive">
 	<table id="batteries-table" class="table table-striped">
 		<thead>
 			<tr>
@@ -48,7 +46,5 @@
 			@endforeach
 		</tbody>
 	</table>
-	</div>
-
 </div>
 @stop

views/batteriesoverview.blade.php

@@ -5,11 +5,9 @@
 @section('viewJsName', 'batteriesoverview')
 
 @section('content')
-<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
+<h1 class="page-header">@yield('title')</h1>
 
-	<h1 class="page-header">@yield('title')</h1>
+<div class="table-responsive">
-
-	<div class="table-responsive">
 	<table id="batteries-overview-table" class="table table-striped">
 		<thead>
 			<tr>
@@ -40,7 +38,5 @@
 			@endforeach
 		</tbody>
 	</table>
-	</div>
-
 </div>
 @stop

views/batteryform.blade.php

@@ -9,8 +9,7 @@
 @section('viewJsName', 'batteryform')
 
 @section('content')
-<div class="col-sm-3 col-sm-offset-3 col-md-4 col-md-offset-2">
+<div class="col-lg-4 col-xs-12">
-
 	<h1 class="page-header">@yield('title')</h1>
 
 	<script>Grocy.EditMode = '{{ $mode }}';</script>
@@ -40,6 +39,5 @@
 		<button id="save-battery-button" type="submit" class="btn btn-default">{{ $L('Save') }}</button>
 
 	</form>
-
 </div>
 @stop

views/batterytracking.blade.php

@@ -5,8 +5,7 @@
 @section('viewJsName', 'batterytracking')
 
 @section('content')
-<div class="col-sm-3 col-sm-offset-3 col-md-3 col-md-offset-2">
+<div class="col-lg-4 col-xs-12">
-
 	<h1 class="page-header">@yield('title')</h1>
 
 	<form id="batterytracking-form">
@@ -36,10 +35,9 @@
 		<button id="save-batterytracking-button" type="submit" class="btn btn-default">{{ $L('OK') }}</button>
 
 	</form>
-
 </div>
 
-<div class="col-sm-6 col-md-5 col-lg-3">
+<div class="col-lg-4 col-xs-12">
 	@include('components.batterycard')
 </div>
 @stop

views/components/menu.blade.php

@@ -0,0 +1,66 @@
+
+<ul class="nav navbar-nav sidebar-nav">
+	<li data-nav-for-page="stockoverview">
+		<a class="discrete-link" href="{{ $U('/stockoverview') }}"><i class="fa fa-tachometer fa-fw"></i>&nbsp;{{ $L('Stock overview') }}</a>
+	</li>
+	<li data-nav-for-page="habitsoverview">
+		<a class="discrete-link" href="{{ $U('/habitsoverview') }}"><i class="fa fa-tachometer fa-fw"></i>&nbsp;{{ $L('Habits overview') }}</a>
+	</li>
+	<li data-nav-for-page="batteriesoverview">
+		<a class="discrete-link" href="{{ $U('/batteriesoverview') }}"><i class="fa fa-tachometer fa-fw"></i>&nbsp;{{ $L('Batteries overview') }}</a>
+	</li>
+</ul>
+
+<div class="discrete-content-separator-2x"></div>
+
+<ul class="nav navbar-nav sidebar-nav">
+	<li class="disabled"><a href="#"><strong>{{ $L('Record data') }}</strong></a></li>
+	<li data-nav-for-page="purchase">
+		<a class="discrete-link" href="{{ $U('/purchase') }}"><i class="fa fa-shopping-cart fa-fw"></i>&nbsp;{{ $L('Purchase') }}</a>
+	</li>
+	<li data-nav-for-page="consume">
+		<a class="discrete-link" href="{{ $U('/consume') }}"><i class="fa fa-cutlery fa-fw"></i>&nbsp;{{ $L('Consume') }}</a>
+	</li>
+	<li data-nav-for-page="shoppinglist">
+		<a class="discrete-link" href="{{ $U('/shoppinglist') }}"><i class="fa fa-shopping-bag fa-fw"></i>&nbsp;{{ $L('Shopping list') }}</a>
+	</li>
+	<li data-nav-for-page="inventory">
+		<a class="discrete-link" href="{{ $U('/inventory') }}"><i class="fa fa-list fa-fw"></i>&nbsp;{{ $L('Inventory') }}</a>
+	</li>
+	<li data-nav-for-page="habittracking">
+		<a class="discrete-link" href="{{ $U('/habittracking') }}"><i class="fa fa-play fa-fw"></i>&nbsp;{{ $L('Habit tracking') }}</a>
+	</li>
+	<li data-nav-for-page="batterytracking">
+		<a class="discrete-link" href="{{ $U('/batterytracking') }}"><i class="fa fa-fire fa-fw"></i>&nbsp;{{ $L('Battery tracking') }}</a>
+	</li>
+</ul>
+
+<div class="discrete-content-separator-2x"></div>
+
+<ul class="nav navbar-nav sidebar-nav">
+	<li class="disabled"><a href="#"><strong>{{ $L('Manage master data') }}</strong></a></li>
+	<li data-nav-for-page="products">
+		<a class="discrete-link" href="{{ $U('/products') }}"><i class="fa fa-product-hunt fa-fw"></i>&nbsp;{{ $L('Products') }}</a>
+	</li>
+	<li data-nav-for-page="locations">
+		<a class="discrete-link" href="{{ $U('/locations') }}"><i class="fa fa-map-marker fa-fw"></i>&nbsp;{{ $L('Locations') }}</a>
+	</li>
+	<li data-nav-for-page="quantityunits">
+		<a class="discrete-link" href="{{ $U('/quantityunits') }}"><i class="fa fa-balance-scale fa-fw"></i>&nbsp;{{ $L('Quantity units') }}</a>
+	</li>
+	<li data-nav-for-page="habits">
+		<a class="discrete-link" href="{{ $U('/habits') }}"><i class="fa fa-refresh fa-fw"></i>&nbsp;{{ $L('Habits') }}</a>
+	</li>
+	<li data-nav-for-page="batteries">
+		<a class="discrete-link" href="{{ $U('/batteries') }}"><i class="fa fa-battery-three-quarters fa-fw"></i>&nbsp;{{ $L('Batteries') }}</a>
+	</li>
+</ul>
+
+<div class="discrete-content-separator-2x hidden-xs"></div>
+
+<ul class="nav navbar-nav sidebar-nav nav-copyright">
+	<li>
+		Version {{ $version }}<br>
+		<a class="discrete-link" href="#" data-toggle="modal" data-target="#about-modal">{{ $L('About grocy') }}</a>
+	</li>
+</ul>

views/components/usermenu.blade.php

@@ -0,0 +1,17 @@
+<ul class="nav navbar-nav navbar-right">
+	<li class="dropdown">
+		<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ HTTP_USER }} <span class="caret"></span></a>
+		<ul class="dropdown-menu">
+			<li>
+				<a class="discrete-link logout-button" href="{{ $U('/logout') }}"><i class="fa fa-sign-out fa-fw"></i>&nbsp;{{ $L('Logout') }}</a>
+			</li>
+			<li role="separator" class="divider"></li>
+			<li>
+				<a class="discrete-link" href="{{ $U('/manageapikeys') }}"><i class="fa fa-handshake-o fa-fw"></i>&nbsp;{{ $L('Manage API keys') }}</a>
+			</li>
+			<li>
+				<a class="discrete-link" target="_blank" href="{{ $U('/api') }}"><i class="fa fa-book"></i>&nbsp;{{ $L('REST API & data model documentation') }}</a>
+			</li>
+		</ul>
+	</li>
+</ul>

views/consume.blade.php

@@ -5,8 +5,7 @@
 @section('viewJsName', 'consume')
 
 @section('content')
-<div class="col-sm-3 col-sm-offset-3 col-md-3 col-md-offset-2">
+<div class="col-lg-4 col-xs-12">
-
 	<h1 class="page-header">@yield('title')</h1>
 
 	<form id="consume-form">
@@ -37,10 +36,9 @@
 		<button id="save-consume-button" type="submit" class="btn btn-default">{{ $L('OK') }}</button>
 
 	</form>
-
 </div>
 
-<div class="col-sm-6 col-md-5 col-lg-3">
+<div class="col-lg-4 col-xs-12">
 	@include('components.productcard')
 </div>
 @stop

views/habitform.blade.php

@@ -9,8 +9,7 @@
 @section('viewJsName', 'habitform')
 
 @section('content')
-<div class="col-sm-3 col-sm-offset-3 col-md-4 col-md-offset-2">
+<div class="col-lg-4 col-xs-12">
-
 	<h1 class="page-header">@yield('title')</h1>
 
 	<script>Grocy.EditMode = '{{ $mode }}';</script>
@@ -53,6 +52,5 @@
 		<button id="save-habit-button" type="submit" class="btn btn-default">{{ $L('Save') }}</button>
 
 	</form>
-
 </div>
 @stop

views/habits.blade.php

@@ -5,16 +5,14 @@
 @section('viewJsName', 'habits')
 
 @section('content')
-<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
+<h1 class="page-header">
-
-	<h1 class="page-header">
 	@yield('title')
 	<a class="btn btn-default" href="{{ $U('/habit/new') }}" role="button">
 		<i class="fa fa-plus"></i>&nbsp;{{ $L('Add') }}
 	</a>
-	</h1>
+</h1>
 
-	<div class="table-responsive">
+<div class="table-responsive">
 	<table id="habits-table" class="table table-striped">
 		<thead>
 			<tr>
@@ -52,7 +50,5 @@
 			@endforeach
 		</tbody>
 	</table>
-	</div>
-
 </div>
 @stop

views/habitsoverview.blade.php

@@ -5,11 +5,9 @@
 @section('viewJsName', 'habitsoverview')
 
 @section('content')
-<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
+<h1 class="page-header">@yield('title')</h1>
 
-	<h1 class="page-header">@yield('title')</h1>
+<div class="table-responsive">
-
-	<div class="table-responsive">
 	<table id="habits-overview-table" class="table table-striped">
 		<thead>
 			<tr>
@@ -40,7 +38,5 @@
 			@endforeach
 		</tbody>
 	</table>
-	</div>
-
 </div>
 @stop

views/habittracking.blade.php

@@ -5,8 +5,7 @@
 @section('viewJsName', 'habittracking')
 
 @section('content')
-<div class="col-sm-3 col-sm-offset-3 col-md-3 col-md-offset-2">
+<div class="col-lg-4 col-xs-12">
-
 	<h1 class="page-header">@yield('title')</h1>
 
 	<form id="habittracking-form">
@@ -30,10 +29,9 @@
 		<button id="save-habittracking-button" type="submit" class="btn btn-default">{{ $L('OK') }}</button>
 
 	</form>
-
 </div>
 
-<div class="col-sm-6 col-md-5 col-lg-3">
+<div class="col-lg-4 col-xs-12">
 	@include('components.habitcard')
 </div>
 @stop

views/inventory.blade.php

@@ -5,8 +5,7 @@
 @section('viewJsName', 'inventory')
 
 @section('content')
-<div class="col-sm-4 col-sm-offset-3 col-md-3 col-md-offset-2">
+<div class="col-lg-4 col-xs-12">
-
 	<h1 class="page-header">@yield('title')</h1>
 
 	<form id="inventory-form">
@@ -39,10 +38,9 @@
 		<button id="save-inventory-button" type="submit" class="btn btn-default">{{ $L('OK') }}</button>
 
 	</form>
-
 </div>
 
-<div class="col-sm-6 col-md-5 col-lg-3">
+<div class="col-lg-4 col-xs-12">
 	@include('components.productcard')
 </div>
 @stop

views/layout/default.blade.php

@@ -22,6 +22,7 @@
 	<link href="{{ $U('/bower_components/toastr/toastr.min.css?v=') }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/bower_components/tagmanager/tagmanager.css?v=') }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css?v=') }}{{ $version }}" rel="stylesheet">
+	<link href="{{ $U('/bower_components/bootstrap-side-navbar/source/assets/stylesheets/navbar-fixed-side.css?v=') }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/components_unmanaged/noto-sans-v6-latin/noto-sans-v6-latin.css?v=') }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/css/grocy.css?v=') }}{{ $version }}" rel="stylesheet">
 	@stack('pageStyles')
@@ -48,113 +49,12 @@
 			</div>
 
 			<div id="navbar" class="navbar-collapse collapse">
-				<ul class="nav navbar-nav navbar-right">
+				@include('components.usermenu')
-					<li class="dropdown">
-						<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ HTTP_USER }} <span class="caret"></span></a>
-						<ul class="dropdown-menu">
-							<li>
-								<a class="discrete-link logout-button" href="{{ $U('/logout') }}"><i class="fa fa-sign-out fa-fw"></i>&nbsp;{{ $L('Logout') }}</a>
-							</li>
-							<li role="separator" class="divider"></li>
-							<li>
-								<a class="discrete-link" href="{{ $U('/manageapikeys') }}"><i class="fa fa-handshake-o fa-fw"></i>&nbsp;{{ $L('Manage API keys') }}</a>
-							</li>
-							<li>
-								<a class="discrete-link" target="_blank" href="{{ $U('/api') }}"><i class="fa fa-book"></i>&nbsp;{{ $L('REST API & data model documentation') }}</a>
-							</li>
-						</ul>
-					</li>
-				</ul>
 			</div>
 
 			<div id="navbar-mobile" class="navbar-collapse collapse">
-
+				@include('components.menu')
-				<ul class="nav navbar-nav navbar-right">
+				@include('components.usermenu')
-					<li data-nav-for-page="stockoverview">
-						<a class="discrete-link" href="{{ $U('/stockoverview') }}"><i class="fa fa-tachometer fa-fw"></i>&nbsp;{{ $L('Stock overview') }}</a>
-					</li>
-					<li data-nav-for-page="habitsoverview">
-						<a class="discrete-link" href="{{ $U('/habitsoverview') }}"><i class="fa fa-tachometer fa-fw"></i>&nbsp;{{ $L('Habits overview') }}</a>
-					</li>
-					<li data-nav-for-page="batteriesoverview">
-						<a class="discrete-link" href="{{ $U('/batteriesoverview') }}"><i class="fa fa-tachometer fa-fw"></i>&nbsp;{{ $L('Batteries overview') }}</a>
-					</li>
-				</ul>
-
-				<ul class="nav navbar-nav navbar-right">
-					<li class="disabled"><a href="#"><strong>{{ $L('Record data') }}</strong></a></li>
-					<li data-nav-for-page="purchase">
-						<a class="discrete-link" href="{{ $U('/purchase') }}"><i class="fa fa-shopping-cart fa-fw"></i>&nbsp;{{ $L('Purchase') }}</a>
-					</li>
-					<li data-nav-for-page="consume">
-						<a class="discrete-link" href="{{ $U('/consume') }}"><i class="fa fa-cutlery fa-fw"></i>&nbsp;{{ $L('Consume') }}</a>
-					</li>
-					<li data-nav-for-page="shoppinglist">
-						<a class="discrete-link" href="{{ $U('/shoppinglist') }}"><i class="fa fa-shopping-bag fa-fw"></i>&nbsp;{{ $L('Shopping list') }}</a>
-					</li>
-					<li data-nav-for-page="inventory">
-						<a class="discrete-link" href="{{ $U('/inventory') }}"><i class="fa fa-list fa-fw"></i>&nbsp;{{ $L('Inventory') }}</a>
-					</li>
-					<li data-nav-for-page="habittracking">
-						<a class="discrete-link" href="{{ $U('/habittracking') }}"><i class="fa fa-play fa-fw"></i>&nbsp;{{ $L('Habit tracking') }}</a>
-					</li>
-					<li data-nav-for-page="batterytracking">
-						<a class="discrete-link" href="{{ $U('/batterytracking') }}"><i class="fa fa-fire fa-fw"></i>&nbsp;{{ $L('Battery tracking') }}</a>
-					</li>
-				</ul>
-
-				<ul class="nav navbar-nav navbar-right">
-					<li class="disabled"><a href="#"><strong>{{ $L('Manage master data') }}</strong></a></li>
-					<li data-nav-for-page="products">
-						<a class="discrete-link" href="{{ $U('/products') }}"><i class="fa fa-product-hunt fa-fw"></i>&nbsp;{{ $L('Products') }}</a>
-					</li>
-					<li data-nav-for-page="locations">
-						<a class="discrete-link" href="{{ $U('/locations') }}"><i class="fa fa-map-marker fa-fw"></i>&nbsp;{{ $L('Locations') }}</a>
-					</li>
-					<li data-nav-for-page="quantityunits">
-						<a class="discrete-link" href="{{ $U('/quantityunits') }}"><i class="fa fa-balance-scale fa-fw"></i>&nbsp;{{ $L('Quantity units') }}</a>
-					</li>
-					<li data-nav-for-page="habits">
-						<a class="discrete-link" href="{{ $U('/habits') }}"><i class="fa fa-refresh fa-fw"></i>&nbsp;{{ $L('Habits') }}</a>
-					</li>
-					<li data-nav-for-page="batteries">
-						<a class="discrete-link" href="{{ $U('/batteries') }}"><i class="fa fa-battery-three-quarters fa-fw"></i>&nbsp;{{ $L('Batteries') }}</a>
-					</li>
-				</ul>
-
-				<ul class="nav navbar-nav navbar-right">
-					<li class="dropdown">
-						<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ HTTP_USER }} <span class="caret"></span></a>
-						<ul class="dropdown-menu">
-							<li>
-								<a class="discrete-link logout-button" href="{{ $U('/logout') }}"><i class="fa fa-sign-out fa-fw"></i>&nbsp;{{ $L('Logout') }}</a>
-							</li>
-							<li role="separator" class="divider"></li>
-							<li>
-								<a class="discrete-link" href="{{ $U('/manageapikeys') }}"><i class="fa fa-handshake-o fa-fw"></i>&nbsp;{{ $L('Manage API keys') }}</a>
-							</li>
-							<li>
-								<a class="discrete-link" target="_blank" href="{{ $U('/api') }}"><i class="fa fa-book"></i>&nbsp;{{ $L('REST API & data model documentation') }}</a>
-							</li>
-						</ul>
-					</li>
-				</ul>
-
-				<div class="nav-copyright nav nav-sidebar">
-					grocy is a project by
-					<a class="discrete-link" href="https://berrnd.de" target="_blank">Bernd Bestel</a>
-					<br>
-					Created with passion since 2017
-					<br>
-					Version {{ $version }}
-					<br>
-					Life runs on code
-					<br>
-					<a class="discrete-link" href="https://github.com/berrnd/grocy" target="_blank">
-						<i class="fa fa-github"></i>
-					</a>
-				</div>
-
 			</div>
 		</div>
 	</nav>
@@ -162,64 +62,31 @@
 	<div class="container-fluid">
 		<div class="row">
 
-			<div class="col-sm-3 col-md-2 sidebar">
+			<div id="sidebar" class="col-sm-3 col-lg-2">
+				<nav class="navbar navbar-default navbar-fixed-side hidden-xs">
+					<div class="navbar-collapse collapse">
+						@include('components.menu')
+					</div>
+				</nav>
+			</div>
 
-				<ul class="nav nav-sidebar">
+			<div class="col-sm-9 col-lg-10">
-					<li data-nav-for-page="stockoverview">
+				@yield('content')
-						<a class="discrete-link" href="{{ $U('/stockoverview') }}"><i class="fa fa-tachometer fa-fw"></i>&nbsp;{{ $L('Stock overview') }}</a>
+			</div>
-					</li>
-					<li data-nav-for-page="habitsoverview">
-						<a class="discrete-link" href="{{ $U('/habitsoverview') }}"><i class="fa fa-tachometer fa-fw"></i>&nbsp;{{ $L('Habits overview') }}</a>
-					</li>
-					<li data-nav-for-page="batteriesoverview">
-						<a class="discrete-link" href="{{ $U('/batteriesoverview') }}"><i class="fa fa-tachometer fa-fw"></i>&nbsp;{{ $L('Batteries overview') }}</a>
-					</li>
-				</ul>
 
-				<ul class="nav nav-sidebar">
+		</div>
-					<li class="disabled"><a href="#"><strong>{{ $L('Record data') }}</strong></a></li>
+	</div>
-					<li data-nav-for-page="purchase">
-						<a class="discrete-link" href="{{ $U('/purchase') }}"><i class="fa fa-shopping-cart fa-fw"></i>&nbsp;{{ $L('Purchase') }}</a>
-					</li>
-					<li data-nav-for-page="consume">
-						<a class="discrete-link" href="{{ $U('/consume') }}"><i class="fa fa-cutlery fa-fw"></i>&nbsp;{{ $L('Consume') }}</a>
-					</li>
-					<li data-nav-for-page="shoppinglist">
-						<a class="discrete-link" href="{{ $U('/shoppinglist') }}"><i class="fa fa-shopping-bag fa-fw"></i>&nbsp;{{ $L('Shopping list') }}</a>
-					</li>
-					<li data-nav-for-page="inventory">
-						<a class="discrete-link" href="{{ $U('/inventory') }}"><i class="fa fa-list fa-fw"></i>&nbsp;{{ $L('Inventory') }}</a>
-					</li>
-					<li data-nav-for-page="habittracking">
-						<a class="discrete-link" href="{{ $U('/habittracking') }}"><i class="fa fa-play fa-fw"></i>&nbsp;{{ $L('Habit tracking') }}</a>
-					</li>
-					<li data-nav-for-page="batterytracking">
-						<a class="discrete-link" href="{{ $U('/batterytracking') }}"><i class="fa fa-fire fa-fw"></i>&nbsp;{{ $L('Battery tracking') }}</a>
-					</li>
-				</ul>
 
-				<ul class="nav nav-sidebar">
+	<div class="modal fade" id="about-modal" tabindex="-1">
-					<li class="disabled"><a href="#"><strong>{{ $L('Manage master data') }}</strong></a></li>
+		<div class="modal-dialog">
-					<li data-nav-for-page="products">
+			<div class="modal-content text-center">
-						<a class="discrete-link" href="{{ $U('/products') }}"><i class="fa fa-product-hunt fa-fw"></i>&nbsp;{{ $L('Products') }}</a>
+				<div class="modal-header">
-					</li>
+					<button type="button" class="close" data-dismiss="modal">&times;</button>
-					<li data-nav-for-page="locations">
+					<h4 class="modal-title">{{ $L('About grocy') }}</h4>
-						<a class="discrete-link" href="{{ $U('/locations') }}"><i class="fa fa-map-marker fa-fw"></i>&nbsp;{{ $L('Locations') }}</a>
+				</div>
-					</li>
+				<div class="modal-body">
-					<li data-nav-for-page="quantityunits">
-						<a class="discrete-link" href="{{ $U('/quantityunits') }}"><i class="fa fa-balance-scale fa-fw"></i>&nbsp;{{ $L('Quantity units') }}</a>
-					</li>
-					<li data-nav-for-page="habits">
-						<a class="discrete-link" href="{{ $U('/habits') }}"><i class="fa fa-refresh fa-fw"></i>&nbsp;{{ $L('Habits') }}</a>
-					</li>
-					<li data-nav-for-page="batteries">
-						<a class="discrete-link" href="{{ $U('/batteries') }}"><i class="fa fa-battery-three-quarters fa-fw"></i>&nbsp;{{ $L('Batteries') }}</a>
-					</li>
-				</ul>
-
-				<div class="nav-copyright nav nav-sidebar">
 					grocy is a project by
-					<a class="discrete-link" href="https://berrnd.de" target="_blank">Bernd Bestel</a>
+					<a href="https://berrnd.de" target="_blank">Bernd Bestel</a>
 					<br>
 					Created with passion since 2017
 					<br>
@@ -227,15 +94,14 @@
 					<br>
 					Life runs on code
 					<br>
-					<a class="discrete-link" href="https://github.com/berrnd/grocy" target="_blank">
+					<a href="https://github.com/berrnd/grocy" target="_blank">
 						<i class="fa fa-github"></i>
 					</a>
 				</div>
-
+				<div class="modal-footer">
+					<button type="button" class="btn btn-default" data-dismiss="modal">{{ $L('Close') }}</button>
+				</div>
 			</div>
-
-			@yield('content')
-
 		</div>
 	</div>
 

views/locationform.blade.php

@@ -9,8 +9,7 @@
 @section('viewJsName', 'locationform')
 
 @section('content')
-<div class="col-sm-3 col-sm-offset-3 col-md-4 col-md-offset-2">
+<div class="col-lg-4 col-xs-12">
-
 	<h1 class="page-header">@yield('title')</h1>
 
 	<script>Grocy.EditMode = '{{ $mode }}';</script>
@@ -35,6 +34,5 @@
 		<button id="save-location-button" type="submit" class="btn btn-default">{{ $L('Save') }}</button>
 
 	</form>
-
 </div>
 @stop

views/locations.blade.php

@@ -5,16 +5,14 @@
 @section('viewJsName', 'locations')
 
 @section('content')
-<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
+<h1 class="page-header">
-
-	<h1 class="page-header">
 	@yield('title')
 	<a class="btn btn-default" href="{{ $U('/location/new') }}" role="button">
 		<i class="fa fa-plus"></i>&nbsp;{{ $L('Add') }}
 	</a>
-	</h1>
+</h1>
 
-	<div class="table-responsive">
+<div class="table-responsive">
 	<table id="locations-table" class="table table-striped">
 		<thead>
 			<tr>
@@ -44,7 +42,5 @@
 			@endforeach
 		</tbody>
 	</table>
-	</div>
-
 </div>
 @stop

views/login.blade.php

@@ -4,8 +4,7 @@
 @section('viewJsName', 'login')
 
 @section('content')
-<div class="col-md-4 col-md-offset-5">
+	<div class="col-md-6 col-md-offset-3 col-xs-12">
-
 		<h1 class="page-header text-center">@yield('title')</h1>
 
 		<form method="post" action="{{ $U('/login') }}" id="login-form">
@@ -25,6 +24,5 @@
 			<button id="login-button" type="submit" class="btn btn-default">{{ $L('OK') }}</button>
 
 		</form>
-
+	</div>
-</div>
 @stop

views/manageapikeys.blade.php

@@ -9,18 +9,16 @@
 @endpush
 
 @section('content')
-<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
+<h1 class="page-header">
-
-	<h1 class="page-header">
 	@yield('title')
 	<a class="btn btn-default" href="{{ $U('/manageapikeys/new') }}" role="button">
 		<i class="fa fa-plus"></i>&nbsp;{{ $L('Create new API key') }}
 	</a>
-	</h1>
+</h1>
 
-	<p class="lead"><a href="{{ $U('/api') }}" target="_blank">{{ $L('REST API & data model documentation') }}</a></p>
+<p class="lead"><a href="{{ $U('/api') }}" target="_blank">{{ $L('REST API & data model documentation') }}</a></p>
 
-	<div class="table-responsive">
+<div class="table-responsive">
 	<table id="apikeys-table" class="table table-striped">
 		<thead>
 			<tr>
@@ -58,7 +56,5 @@
 			@endforeach
 		</tbody>
 	</table>
-	</div>
-
 </div>
 @stop

views/productform.blade.php

@@ -9,8 +9,7 @@
 @section('viewJsName', 'productform')
 
 @section('content')
-<div class="col-sm-3 col-sm-offset-3 col-md-4 col-md-offset-2">
+<div class="col-lg-4 col-xs-12">
-
 	<h1 class="page-header">@yield('title')</h1>
 
 	<script>Grocy.EditMode = '{{ $mode }}';</script>
@@ -90,6 +89,5 @@
 
 		<button id="save-product-button" type="submit" class="btn btn-default">{{ $L('Save') }}</button>
 	</form>
-
 </div>
 @stop

views/products.blade.php

@@ -5,16 +5,14 @@
 @section('viewJsName', 'products')
 
 @section('content')
-<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
+<h1 class="page-header">
-
-	<h1 class="page-header">
 	@yield('title')
 	<a class="btn btn-default" href="{{ $U('/product/new') }}" role="button">
 		<i class="fa fa-plus"></i>&nbsp;{{ $L('Add') }}
 	</a>
-	</h1>
+</h1>
 
-	<div class="table-responsive">
+<div class="table-responsive">
 	<table id="products-table" class="table table-striped">
 		<thead>
 			<tr>
@@ -64,7 +62,5 @@
 			@endforeach
 		</tbody>
 	</table>
-	</div>
-
 </div>
 @stop

views/purchase.blade.php

@@ -5,8 +5,7 @@
 @section('viewJsName', 'purchase')
 
 @section('content')
-<div class="col-sm-4 col-sm-offset-3 col-md-3 col-md-offset-2">
+<div class="col-lg-4 col-xs-12">
-
 	<h1 class="page-header">@yield('title')</h1>
 
 	<form id="purchase-form">
@@ -37,10 +36,9 @@
 		<button id="save-purchase-button" type="submit" class="btn btn-default">{{ $L('OK') }}</button>
 
 	</form>
-
 </div>
 
-<div class="col-sm-6 col-md-5 col-lg-3">
+<div class="col-lg-4 col-xs-12">
 	@include('components.productcard')
 </div>
 @stop

views/quantityunitform.blade.php

@@ -9,8 +9,7 @@
 @section('viewJsName', 'quantityunitform')
 
 @section('content')
-<div class="col-sm-3 col-sm-offset-3 col-md-4 col-md-offset-2">
+<div class="col-lg-4 col-xs-12">
-
 	<h1 class="page-header">@yield('title')</h1>
 
 	<script>Grocy.EditMode = '{{ $mode }}';</script>
@@ -35,6 +34,5 @@
 		<button id="save-quantityunit-button" type="submit" class="btn btn-default">{{ $L('Save') }}</button>
 
 	</form>
-
 </div>
 @stop

views/quantityunits.blade.php

@@ -5,16 +5,14 @@
 @section('viewJsName', 'quantityunits')
 
 @section('content')
-<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
+<h1 class="page-header">
-
-	<h1 class="page-header">
 	@yield('title')
 	<a class="btn btn-default" href="{{ $U('/quantityunit/new') }}" role="button">
 		<i class="fa fa-plus"></i>&nbsp;{{ $L('Add') }}
 	</a>
-	</h1>
+</h1>
 
-	<div class="table-responsive">
+<div class="table-responsive">
 	<table id="quantityunits-table" class="table table-striped">
 		<thead>
 			<tr>
@@ -44,7 +42,5 @@
 			@endforeach
 		</tbody>
 	</table>
-	</div>
-
 </div>
 @stop

views/shoppinglist.blade.php

@@ -5,9 +5,7 @@
 @section('viewJsName', 'shoppinglist')
 
 @section('content')
-<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
+<h1 class="page-header">
-
-	<h1 class="page-header">
 	@yield('title')
 	<a class="btn btn-default" href="{{ $U('/shoppinglistitem/new') }}" role="button">
 		<i class="fa fa-plus"></i>&nbsp;{{ $L('Add') }}
@@ -15,9 +13,9 @@
 	<a id="add-products-below-min-stock-amount" class="btn btn-info" href="#" role="button">
 		<i class="fa fa-plus"></i>&nbsp;{{ $L('Add products that are below defined min. stock amount') }}
 	</a>
-	</h1>
+</h1>
 
-	<div class="table-responsive">
+<div class="table-responsive">
 	<table id="shoppinglist-table" class="table table-striped">
 		<thead>
 			<tr>
@@ -47,7 +45,5 @@
 			@endforeach
 		</tbody>
 	</table>
-	</div>
-
 </div>
 @stop

views/shoppinglistform.blade.php

@@ -9,8 +9,7 @@
 @section('viewJsName', 'shoppinglistform')
 
 @section('content')
-<div class="col-sm-3 col-sm-offset-3 col-md-3 col-md-offset-2">
+<div class="col-lg-4 col-xs-12">
-
 	<h1 class="page-header">@yield('title')</h1>
 
 	<script>Grocy.EditMode = '{{ $mode }}';</script>
@@ -46,10 +45,9 @@
 		<button id="save-shoppinglist-button" type="submit" class="btn btn-default">{{ $L('Save') }}</button>
 
 	</form>
-
 </div>
 
-<div class="col-sm-6 col-md-5 col-lg-3">
+<div class="col-lg-4 col-xs-12">
 	@include('components.productcard')
 </div>
 @stop

views/stockoverview.blade.php

@@ -5,21 +5,19 @@
 @section('viewJsName', 'stockoverview')
 
 @section('content')
-<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
+<h1 class="page-header">{{ $L('Stock overview') }} <span class="text-muted small">{{ $L('#1 products with #2 units in stock', count($currentStock), SumArrayValue($currentStock, 'amount')) }}</span></h1>
 
-	<h1 class="page-header">{{ $L('Stock overview') }} <span class="text-muted small">{{ $L('#1 products with #2 units in stock', count($currentStock), SumArrayValue($currentStock, 'amount')) }}</span></h1>
+<div class="container-fluid">
-
-	<div class="container-fluid">
 	<div class="row">
 		<p class="btn btn-lg btn-warning no-real-button">{{ $L('#1 products expiring within the next #2 days', count(FindAllObjectsInArrayByPropertyValue($currentStock, 'best_before_date', date('Y-m-d', strtotime('+5 days')), '<')), 5) }}</p>
 		<p class="btn btn-lg btn-danger no-real-button">{{ $L('#1 products are already expired', count(FindAllObjectsInArrayByPropertyValue($currentStock, 'best_before_date', date('Y-m-d', strtotime('-1 days')), '<'))) }}</p>
 		<p class="btn btn-lg btn-info no-real-button">{{ $L('#1 products are below defined min. stock amount', count($missingProducts)) }}</p>
 	</div>
-	</div>
+</div>
 
-	<div class="discrete-content-separator-2x"></div>
+<div class="discrete-content-separator-2x"></div>
 
-	<div class="table-responsive">
+<div class="table-responsive">
 	<table id="stock-overview-table" class="table table-striped">
 		<thead>
 			<tr>
@@ -45,7 +43,5 @@
 			@endforeach
 		</tbody>
 	</table>
-	</div>
-
 </div>
 @stop