(More or less) finish upgrading to Bootstrap 4

public/css/grocy.css

@@ -1,112 +1,26 @@
-body {
+/* Main style customizations */
+body {
 	font-family: 'Noto Sans', sans-serif;
-	font-size: 0.85rem
 }
 
-#top-nav {
-	background-color: #e5e5e5;
-	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;
-}
-
-#sidebar {
-	background-color: #e5e5e5;
-	border-right: 2px solid #d6d6d6;
-	max-width: 260px;
-	border-left: 0;
-	overflow-y: auto;
-	height: 100%;
-}
-
-#sidebar > ul > a > li {
-	background-color: #e5e5e5;
-	border: 0;
-}
-
-@media (min-width: 768px) {
-	#navbar-mobile {
-		display: none !important;
-	}
-
-	.nav-copyright {
-		padding-bottom: 100px;
-	}
-}
-
-.sidebar-nav > li {
-	padding-right: 20px;
-	padding-left: 20px;
-	transition: all 0.3s;
-}
-
-.sidebar-nav > li:hover {
-	box-shadow: inset 5px 0 0 #337ab7;
-	transition: all 0.3s;
-}
-
-.sidebar-nav > li:focus {
-	box-shadow: inset 5px 0 0 #ab2230;
-	transition: all 0.3s;
-}
-
-.sidebar-nav > .active,
-.sidebar-nav > .active:hover,
-.sidebar-nav > .active:focus {
-	background-color: #d6d6d6;
-	box-shadow: inset 5px 0 0 #ab2230;
-	transition: all 0.3s;
-}
-
-.nav > li.disabled > a,
-.nav-link-navbar {
-	color: #7d7d7d;
-}
-
-.nav-copyright {
-	color: #a7a7a7;
-	font-size: 11px;
-	text-align: center;
-}
-
-.nav-copyright > li > a {
-	padding-top: 0 !important;
-	padding-bottom: 0 !important;
-}
-
-#top-nav .navbar-nav > .open > a {
-	background-color: #d6d6d6 !important;
-}
-
-.dropdown-item > li > a:hover,
-.dropdown-item > li > a:focus,
-.dropdown-item:active {
-	background-color: #e5e5e5 !important;
-}
-
-.well {
-	background-color: #e5e5e5;
-	padding-right: 25px;
-	padding-left: 25px;
-}
-
-td {
-     vertical-align: middle !important;
+.content-text {
+	font-size: 0.85rem;
 }
 
 .responsive-button {
     white-space: normal;
 }
 
-.discrete-link {
+.no-real-button {
+	pointer-events: none;
+}
+
+.timeago-contextual {
+	font-style: italic;
+	font-size: 0.8em;
+}
+
+a.discrete-link {
 	color: inherit !important;
 	transition: all 0.3s !important;
 }
@@ -114,70 +28,114 @@ td {
 a.discrete-link:hover {
 	color: #337ab7 !important;
 	text-decoration: none !important;
-	transition: all 0.3s !important;
 }
 
 a.discrete-link:focus {
 	color: #ab2230 !important;
 	text-decoration: none !important;
+}
+
+.card {
+	border: 2px solid;
+	border-color: #d6d6d6;
+	border-radius: 0;
+}
+
+.card-header {
+	background-color: #e5e5e5;
+}
+
+/* Navigation style customizations */
+#mainNav {
+	background-color: #e5e5e5 !important;
+	border-bottom: 2px solid !important;
+	border-color: #d6d6d6 !important;
+}
+
+.navbar-sidenav {
+	overflow-y: auto;
+	overflow-x: hidden;
+}
+
+.navbar-sidenav,
+.sidenav-second-level {
+	background-color: #e5e5e5 !important;
+	border-top: 2px solid !important;
+	border-right: 2px solid !important;
+	border-color: #d6d6d6 !important;
+}
+
+.navbar-nav .dropdown-menu {
+	background-color: #e5e5e5 !important;
+	border: 0;
+	border-radius: 0;
+}
+
+.navbar-nav .dropdown-divider {
+	border-top: 2px solid !important;
+	border-color: #d6d6d6 !important;
+}
+
+.sidenav-toggler {
+	background-color: #d6d6d6 !important;
+	border-right: 2px solid !important;
+	border-color: #d6d6d6 !important;
+}
+
+.navbar-sidenav > li,
+.sidenav-second-level > li {
 	transition: all 0.3s !important;
 }
 
+.navbar-sidenav > li:hover,
+.sidenav-second-level > li:hover,
+.navbar-nav .dropdown-item:hover {
+	box-shadow: inset 5px 0 0 #337ab7 !important;
+	background-color: #d6d6d6 !important;
+}
+
+.navbar-sidenav > li > a:focus,
+.sidenav-second-level > li > a:focus,
+.navbar-nav .dropdown-item:focus {
+	box-shadow: inset 5px 0 0 #ab2230 !important;
+	background-color: #d6d6d6 !important;
+}
+
+.active-page {
+	box-shadow: inset 5px 0 0 #ab2230 !important;
+	background-color: #d6d6d6 !important;
+}
+
+/* Third party component customizations - DataTables */
+td {
+     vertical-align: middle !important;
+}
+
 .table td.fit-content,
 .table th.fit-content {
 	white-space: nowrap;
 	width: 1%;
 }
 
-.dataTables_info,
-.dataTables_length,
-.dataTables_filter {
-	font-style: italic;
-}
-
-.timeago-contextual {
-	font-style: italic;
-	font-size: 0.8em;
-}
-
-.disabled,
-.no-real-button {
-	pointer-events: none;
-	margin-top: 2px;
-	margin-bottom: 2px;
-}
-
-.discrete-content-separator-2x {
-	padding-top: 10px;
-	padding-bottom: 10px;
-}
-
-.warning-bg {
-	background-color: #fcf8e3 !important;
-}
-
-.error-bg {
-	background-color: #f2dede !important;
-}
-
-.info-bg {
-	background-color: #afd9ee !important;
+.dataTables_filter,
+.dataTables_info {
+	display: none;
 }
 
+/* Third party component customizations - toastr */
 #toast-container > div {
 	opacity: 1;
 	filter: alpha(opacity=100);
 }
 
 .toast-success {
-	background-color: #4c994c;
+	background-color: #28a745;
+}
+
+.toast-error {
+	background-color: #dc3545;
 }
 
 #toast-container > div {
 	box-shadow: none;
 }
-
-.dataTables_filter,
-.dataTables_info {
-	display: none;
-}

public/img/grocy_icon.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="60.000000pt" height="93.000000pt" viewBox="0 0 60.000000 93.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.15, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,93.000000) scale(0.100000,-0.100000)"
+fill="#0b024c" stroke="none">
+<path d="M165 905 c-52 -18 -109 -82 -132 -148 -14 -39 -18 -82 -18 -172 0
+-104 3 -127 23 -170 43 -94 114 -144 205 -145 59 0 112 21 156 63 l33 32 -7
+-75 c-10 -96 -17 -116 -57 -140 -43 -26 -130 -26 -233 0 -43 11 -80 20 -82 20
+-2 0 -3 -30 -1 -67 l3 -68 50 -13 c28 -8 100 -14 160 -15 172 -1 255 38 304
+142 l26 56 3 353 4 352 -75 0 -75 0 -7 -40 -7 -40 -36 31 c-67 59 -150 75
+-237 44z m206 -141 c45 -23 62 -72 62 -180 1 -112 -18 -152 -79 -172 -125 -42
+-201 80 -163 260 21 96 97 135 180 92z"/>
+</g>
+</svg>

public/img/grocy_logo.svg

@@ -0,0 +1,33 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="242.000000pt" height="93.000000pt" viewBox="0 0 242.000000 93.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.15, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,93.000000) scale(0.100000,-0.100000)"
+fill="#0b024c" stroke="none">
+<path d="M165 905 c-52 -18 -109 -82 -132 -148 -14 -39 -18 -82 -18 -172 0
+-104 3 -127 23 -170 43 -94 114 -144 205 -145 59 0 112 21 156 63 l33 32 -7
+-75 c-10 -96 -17 -116 -57 -140 -43 -26 -130 -26 -233 0 -43 11 -80 20 -82 20
+-2 0 -3 -30 -1 -67 l3 -68 50 -13 c28 -8 100 -14 160 -15 121 -1 183 14 244
+60 36 28 81 112 81 155 0 54 6 58 90 58 l78 0 4 193 c3 180 4 194 25 223 20
+28 99 72 110 61 2 -3 -1 -24 -6 -48 -6 -24 -11 -79 -11 -121 0 -137 53 -233
+158 -285 50 -24 69 -28 147 -28 107 0 158 20 219 83 l40 41 23 -34 c13 -20 46
+-45 80 -62 51 -25 69 -28 153 -28 68 0 108 5 143 18 l47 19 0 74 0 74 -42 -21
+c-58 -30 -154 -37 -197 -15 -85 44 -98 250 -21 328 24 24 36 28 84 28 99 0 92
+9 200 -260 l97 -242 -23 -46 c-32 -65 -67 -87 -134 -87 l-54 0 0 -66 0 -67 45
+-6 c108 -17 215 34 269 128 20 33 296 754 296 771 0 3 -40 5 -89 5 l-90 0 -64
+-197 c-35 -109 -69 -214 -75 -233 -10 -34 -10 -34 -11 -7 -1 16 -31 120 -68
+232 l-66 202 -143 8 c-116 5 -154 4 -197 -9 -61 -18 -126 -61 -145 -98 l-14
+-25 -52 53 c-40 39 -67 56 -106 68 -87 26 -181 19 -272 -19 -14 -5 -18 -2 -18
+14 0 19 -6 21 -52 21 -64 0 -129 -30 -164 -76 -15 -19 -30 -34 -34 -34 -4 0
+-13 23 -20 50 l-12 50 -133 0 -133 0 -7 -40 -7 -40 -36 31 c-67 59 -150 75
+-237 44z m206 -141 c45 -23 62 -72 62 -180 1 -112 -18 -152 -79 -172 -125 -42
+-201 80 -163 260 21 96 97 135 180 92z m888 -10 c40 -33 54 -89 49 -184 -7
+-118 -41 -160 -131 -160 -87 0 -121 53 -121 185 0 135 34 185 125 185 36 0 55
+-6 78 -26z"/>
+</g>
+</svg>

public/js/grocy.js

@@ -21,8 +21,8 @@ U = function(relativePath)
 
 if (!Grocy.ActiveNav.isEmpty())
 {
-	var menuItem = $('.nav').find("[data-nav-for-page='" + Grocy.ActiveNav + "']");
-	menuItem.addClass('active');
+	var menuItem = $('#sidebarResponsive').find("[data-nav-for-page='" + Grocy.ActiveNav + "']");
+	menuItem.addClass('active-page');
 }	
 
 $.timeago.settings.allowFuture = true;

public/viewjs/batteries.js

@@ -4,7 +4,8 @@
 	'columnDefs': [
 		{ 'orderable': false, 'targets': 0 }
 	],
-	'language': JSON.parse(L('datatables_localization'))
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false
 });
 
 $("#search").on("keyup", function()

public/viewjs/batteriesoverview.js

@@ -4,7 +4,8 @@
 	'columnDefs': [
 		{ 'orderable': false, 'targets': 0 }
 	],
-	'language': JSON.parse(L('datatables_localization'))
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false
 });
 
 $("#search").on("keyup", function()

public/viewjs/components/datetimepicker.js

@@ -6,6 +6,6 @@ $(function()
 		showTodayButton: true,
 		calendarWeeks: true,
 		maxDate: moment(),
-		locale: moment.locale('de')
+		locale: moment.locale()
 	});
 });

public/viewjs/habits.js

@@ -4,7 +4,8 @@
 	'columnDefs': [
 		{ 'orderable': false, 'targets': 0 }
 	],
-	'language': JSON.parse(L('datatables_localization'))
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false
 });
 
 $("#search").on("keyup", function()

public/viewjs/habitsoverview.js

@@ -4,7 +4,8 @@
 	'columnDefs': [
 		{ 'orderable': false, 'targets': 0 }
 	],
-	'language': JSON.parse(L('datatables_localization'))
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false
 });
 
 $("#search").on("keyup", function()

public/viewjs/inventory.js

@@ -243,8 +243,8 @@ var addBarcode = GetUriParam('addbarcodetoselection');
 if (addBarcode !== undefined)
 {
 	$('#addbarcodetoselection').text(addBarcode);
-	$('#flow-info-addbarcodetoselection').removeClass('hide');
-	$('#barcode-lookup-disabled-hint').removeClass('hide');
+	$('#flow-info-addbarcodetoselection').removeClass('d-none');
+	$('#barcode-lookup-disabled-hint').removeClass('d-none');
 }
 
 $('#new_amount').on('keypress', function(e)

public/viewjs/locations.js

@@ -4,7 +4,8 @@
 	'columnDefs': [
 		{ 'orderable': false, 'targets': 0 }
 	],
-	'language': JSON.parse(L('datatables_localization'))
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false
 });
 
 $("#search").on("keyup", function()

public/viewjs/login.js

@@ -1,4 +1,5 @@
 $('.logout-button').hide();
+$('.logout-button-divider').hide();
 
 $('#username').focus();
 

public/viewjs/manageapikeys.js

@@ -4,7 +4,8 @@
 	'columnDefs': [
 		{ 'orderable': false, 'targets': 0 }
 	],
-	'language': JSON.parse(L('datatables_localization'))
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false
 });
 
 var createdApiKeyId = GetUriParam('CreatedApiKeyId');

public/viewjs/products.js

@@ -4,7 +4,8 @@
 	'columnDefs': [
 		{ 'orderable': false, 'targets': 0 }
 	],
-	'language': JSON.parse(L('datatables_localization'))
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false
 });
 
 $("#search").on("keyup", function()

public/viewjs/purchase.js

@@ -97,7 +97,8 @@ $('#product_id').on('change', function(e)
 });
 
 $('.combobox').combobox({
-	appendId: '_text_input'
+	appendId: '_text_input',
+	bsVersion: '4'
 });
 
 $('#product_id_text_input').on('change', function(e)
@@ -253,8 +254,8 @@ var addBarcode = GetUriParam('addbarcodetoselection');
 if (addBarcode !== undefined)
 {
 	$('#addbarcodetoselection').text(addBarcode);
-	$('#flow-info-addbarcodetoselection').removeClass('hide');
-	$('#barcode-lookup-disabled-hint').removeClass('hide');
+	$('#flow-info-addbarcodetoselection').removeClass('d-none');
+	$('#barcode-lookup-disabled-hint').removeClass('d-none');
 }
 
 $('#best_before_date').on('change', function(e)

public/viewjs/quantityunits.js

@@ -4,7 +4,8 @@
 	'columnDefs': [
 		{ 'orderable': false, 'targets': 0 }
 	],
-	'language': JSON.parse(L('datatables_localization'))
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false
 });
 
 $("#search").on("keyup", function()

public/viewjs/shoppinglist.js

@@ -4,7 +4,8 @@
 	'columnDefs': [
 		{ 'orderable': false, 'targets': 0 }
 	],
-	'language': JSON.parse(L('datatables_localization'))
+	'language': JSON.parse(L('datatables_localization')),
+	'scrollY': false
 });
 
 $("#search").on("keyup", function()