From 4fab4f87d3f15782eaa748531aa5c1011bd4cdff Mon Sep 17 00:00:00 2001
From: Bernd Bestel <bernd@berrnd.de>
Date: Mon, 9 Jul 2018 21:33:23 +0200
Subject: [PATCH] Start upgrading top Bootstrap 4

---
 package.json                        | 12 +++----
 public/css/grocy.css                | 37 +++++--------------
 views/components/menu.blade.php     | 42 +++++++++++-----------
 views/components/usermenu.blade.php | 16 ++++-----
 views/layout/default.blade.php      | 55 ++++++++++++-----------------
 views/stockoverview.blade.php       | 50 +++++++++++++-------------
 yarn.lock                           | 29 +++++++--------
 7 files changed, 104 insertions(+), 137 deletions(-)

diff --git a/package.json b/package.json
index f7f60f6e..ca33230c 100644
--- a/package.json
+++ b/package.json
@@ -2,18 +2,18 @@
 	"name": "grocy",
 	"private": true,
 	"dependencies": {
-		"bootstrap": "^3.3.7",
+		"bootstrap": "^4.1.1",
 		"font-awesome": "^4.7.0",
 		"bootbox": "^4.4.0",
 		"jquery-serializejson": "^2.8.1",
 		"bootstrap-validator": "^0.11.9",
-		"bootstrap-datepicker": "^1.7.1",
+		"bootstrap-datepicker": "^1.8.0",
 		"moment": "^2.18.1",
 		"@danielfarrell/bootstrap-combobox": "^1.1.8",
-		"datatables.net": "^1.10.15",
-		"datatables.net-bs": "^2.1.1",
-		"datatables.net-responsive": "^2.1.1",
-		"datatables.net-responsive-bs": "^2.1.1",
+		"datatables.net": "^1.10.19",
+		"datatables.net-bs4": "^1.10.19",
+		"datatables.net-responsive": "^2.2.3",
+		"datatables.net-responsive-bs4": "^2.2.3",
 		"timeago": "^1.6.1",
 		"toastr": "^2.1.3",
 		"tagmanager": "https://github.com/max-favilli/tagmanager.git#3.0.2",
diff --git a/public/css/grocy.css b/public/css/grocy.css
index a1725274..cdc99538 100644
--- a/public/css/grocy.css
+++ b/public/css/grocy.css
@@ -1,9 +1,9 @@
 body {
-	padding-top: 50px;
 	font-family: 'Noto Sans', sans-serif;
+	font-size: 0.85rem
 }
 
-.navbar-fixed-top {
+#top-nav {
 	background-color: #e5e5e5;
 	border-bottom: 2px solid;
 	border-color: #d6d6d6;
@@ -16,20 +16,13 @@
 	color: #0b024c !important;
 	margin-left: 0 !important;
 	padding-left: 5px !important;
-	
 }
 
-.navbar-fixed-side {
-	top: 51px;
-	padding-top: 20px;
-	margin-bottom: 20px;
+#sidebar {
 	background-color: #e5e5e5;
 	border-right: 2px solid #d6d6d6;
 	max-width: 260px;
 	border-left: 0;
-}
-
-#sidebar {
 	overflow-y: auto;
 }
 
@@ -43,12 +36,6 @@
 	}
 }
 
-@media (max-width: 768px) {
-	.navbar-brand {
-		margin-left: 25px !important;
-	}
-}
-
 .sidebar-nav > li > a {
 	padding-right: 20px;
 	padding-left: 20px;
@@ -74,8 +61,8 @@
 }
 
 .nav > li.disabled > a,
-.navbar-default .navbar-nav > .disabled > a {
-	color: #a7a7a7;
+.nav-link-navbar {
+	color: #7d7d7d;
 }
 
 .nav-copyright {
@@ -89,12 +76,13 @@
 	padding-bottom: 0 !important;
 }
 
-.navbar-default .navbar-nav > .open > a {
+#top-nav .navbar-nav > .open > a {
 	background-color: #d6d6d6 !important;
 }
 
-.dropdown-menu > li > a:hover,
-.dropdown-menu > li > a:focus {
+.dropdown-item > li > a:hover,
+.dropdown-item > li > a:focus,
+.dropdown-item:active {
 	background-color: #e5e5e5 !important;
 }
 
@@ -183,13 +171,6 @@ a.discrete-link:focus {
 	box-shadow: none;
 }
 
-.no-gutters {
-	margin-right: 0;
-	margin-left: 0;
-	padding-right: 0;
-	padding-left: 0;
-}
-
 .dataTables_filter,
 .dataTables_info {
 	display: none;
diff --git a/views/components/menu.blade.php b/views/components/menu.blade.php
index 90657f48..2822c9d8 100644
--- a/views/components/menu.blade.php
+++ b/views/components/menu.blade.php
@@ -1,65 +1,65 @@
 
-<ul class="nav navbar-nav sidebar-nav">
-	<li data-nav-for-page="stockoverview">
+<ul class="nav flex-column sidebar-nav">
+	<li class="nav-item" 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">
+	<li class="nav-item" 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">
+	<li class="nav-item" 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">
+<ul class="nav flex-column">
+	<li class="nav-item" class="disabled"><a href="#"><strong>{{ $L('Record data') }}</strong></a></li>
+	<li class="nav-item" 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">
+	<li class="nav-item" 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">
+	<li class="nav-item" 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">
+	<li class="nav-item" 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">
+	<li class="nav-item" 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">
+	<li class="nav-item" 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">
+<ul class="nav flex-column">
+	<li class="nav-item" class="disabled"><a href="#"><strong>{{ $L('Manage master data') }}</strong></a></li>
+	<li class="nav-item" 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">
+	<li class="nav-item" 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">
+	<li class="nav-item" 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">
+	<li class="nav-item" 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">
+	<li class="nav-item" 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>
+<ul class="nav flex-column nav-copyright">
+	<li class="nav-item">
 		Version {{ $version }}<br>
 		<a class="discrete-link" href="#" data-toggle="modal" data-target="#about-modal">{{ $L('About grocy') }}</a>
 	</li>
diff --git a/views/components/usermenu.blade.php b/views/components/usermenu.blade.php
index ea21e188..99bbbf33 100644
--- a/views/components/usermenu.blade.php
+++ b/views/components/usermenu.blade.php
@@ -1,15 +1,15 @@
-<ul class="nav navbar-nav navbar-right">
-	<li class="dropdown">
-		<a href="#" class="dropdown-toggle" data-toggle="dropdown">@if(AUTHENTICATED === true){{ HTTP_USER }}@endif <span class="caret"></span></a>
-		<ul class="dropdown-menu">
-			<li>
+<ul class="nav navbar-nav ml-auto">
+	<li class="dropdown nav-item">
+		<a href="#" class="dropdown-toggle nav-link nav-link-navbar" data-toggle="dropdown">@if(AUTHENTICATED === true){{ HTTP_USER }}@endif <span class="caret"></span></a>
+		<ul class="dropdown-menu dropdown-menu-right">
+			<li class="dropdown-item">
 				<a class="discrete-link logout-button" href="{{ $U('/logout') }}"><i class="fa fa-sign-out fa-fw"></i>&nbsp;{{ $L('Logout') }}</a>
 			</li>
-			<li class="divider logout-button"></li>
-			<li>
+			<div class="dropdown-divider"></div>
+			<li class="dropdown-item">
 				<a class="discrete-link" href="{{ $U('/manageapikeys') }}"><i class="fa fa-handshake-o fa-fw"></i>&nbsp;{{ $L('Manage API keys') }}</a>
 			</li>
-			<li>
+			<li class="dropdown-item">
 				<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>
diff --git a/views/layout/default.blade.php b/views/layout/default.blade.php
index 99f82b0c..eddfb91e 100644
--- a/views/layout/default.blade.php
+++ b/views/layout/default.blade.php
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ CULTURE }}">
+<html lang="{{ CULTURE }}" class="h-100">
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="x-ua-compatible" content="ie=edge">
@@ -17,12 +17,11 @@
 	<link href="{{ $U('/node_modules/font-awesome/css/font-awesome.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/node_modules/@danielfarrell/bootstrap-combobox/css/bootstrap-combobox.css?v=', true) }}{{ $version }}" rel="stylesheet">
-	<link href="{{ $U('/node_modules/datatables.net-bs/css/dataTables.bootstrap.css?v=', true) }}{{ $version }}" rel="stylesheet">
-	<link href="{{ $U('/node_modules/datatables.net-responsive-bs/css/responsive.bootstrap.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
+	<link href="{{ $U('/node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css?v=', true) }}{{ $version }}" rel="stylesheet">
+	<link href="{{ $U('/node_modules/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/node_modules/toastr/build/toastr.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/node_modules/tagmanager/tagmanager.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
-	<link href="{{ $U('/node_modules/bootstrap-side-navbar/source/assets/stylesheets/navbar-fixed-side.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/components_unmanaged/noto-sans-v6-latin/noto-sans-v6-latin.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/css/grocy.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	@stack('pageStyles')
@@ -36,41 +35,31 @@
 	</script>
 </head>
 
-<body>
-	<nav class="navbar navbar-default navbar-fixed-top">
-		<div class="container-fluid">
-			<div class="navbar-header">
-				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-mobile" >
-					<span class="icon-bar"></span>
-					<span class="icon-bar"></span>
-					<span class="icon-bar"></span>
-				</button>
-				<a class="navbar-brand" href="{{ $U('/') }}">grocy</a>
-			</div>
+<body class="h-100">
+	<nav id="top-nav" class="navbar navbar-expand-lg navbar-light py-0">
+		<a class="navbar-brand py-0" href="{{ $U('/') }}">grocy</a>
+		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-mobile">
+			<span class="navbar-toggler-icon"></span>
+		</button>
 
-			<div id="navbar" class="navbar-collapse collapse">
-				@include('components.usermenu')
-			</div>
+		<div id="navbar" class="collapse navbar-collapse">
+			@include('components.usermenu')
+		</div>
 
-			<div id="navbar-mobile" class="navbar-collapse collapse">
-				@include('components.menu')
-				@include('components.usermenu')
-			</div>
+		<div id="navbar-mobile" class="collapse navbar-collapse">
+			<!--@include('components.menu')-->
+			@include('components.usermenu')
 		</div>
 	</nav>
 
-	<div class="container-fluid">
-		<div class="row">
+	<div class="container-fluid h-100">
+		<div class="row h-100">
 
-			<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 id="sidebar" class="col-sm-3 col-xl-2 d-none d-lg-block sidebar pt-4">
+				<!--@include('components.menu')-->
 			</div>
 
-			<div class="col-sm-9 col-lg-10">
+			<div class="col pt-4 ml-4 mr-0">
 				@yield('content')
 			</div>
 
@@ -115,9 +104,9 @@
 	<script src="{{ $U('/node_modules/bootstrap-validator/dist/validator.min.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules/@danielfarrell/bootstrap-combobox/js/bootstrap-combobox.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules/datatables.net/js/jquery.dataTables.min.js?v=', true) }}{{ $version }}"></script>
-	<script src="{{ $U('/node_modules/datatables.net-bs/js/dataTables.bootstrap.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules/datatables.net-responsive/js/dataTables.responsive.min.js?v=', true) }}{{ $version }}"></script>
-	<script src="{{ $U('/node_modules/datatables.net-responsive-bs/js/responsive.bootstrap.min.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules/timeago/jquery.timeago.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules', true) }}/timeago/locales/jquery.timeago.{{ $L('timeago_locale') }}.js?v={{ $version }}"></script>
 	<script src="{{ $U('/node_modules/toastr/build/toastr.min.js?v=', true) }}{{ $version }}"></script>
diff --git a/views/stockoverview.blade.php b/views/stockoverview.blade.php
index 417e8f2b..68763b33 100644
--- a/views/stockoverview.blade.php
+++ b/views/stockoverview.blade.php
@@ -9,34 +9,34 @@
 @endpush
 
 @section('content')
-<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="row">
+	<h1>{{ $L('Stock overview') }} <small class="text-muted">{{ $L('#1 products with #2 units in stock', count($currentStock), SumArrayValue($currentStock, 'amount')) }}</small></h1>
+</div>
 
-<div class="container-fluid">
-	<div class="row">
-		<p class="btn btn-lg btn-warning no-real-button responsive-button">{{ $L('#1 products expiring within the next #2 days', $countExpiringNextXDays, $nextXDays) }}</p>
-		<p class="btn btn-lg btn-danger no-real-button responsive-button">{{ $L('#1 products are already expired', $countAlreadyExpired) }}</p>
-		<p class="btn btn-lg btn-info no-real-button responsive-button">{{ $L('#1 products are below defined min. stock amount', count($missingProducts)) }}</p>
+<div class="row">
+	<p class="btn btn-lg btn-warning no-real-button responsive-button mr-2">{{ $L('#1 products expiring within the next #2 days', $countExpiringNextXDays, $nextXDays) }}</p>
+	<p class="btn btn-lg btn-danger no-real-button responsive-button mr-2">{{ $L('#1 products are already expired', $countAlreadyExpired) }}</p>
+	<p class="btn btn-lg btn-info no-real-button responsive-button">{{ $L('#1 products are below defined min. stock amount', count($missingProducts)) }}</p>
+</div>
+
+<div class="row mt-3">
+	<div class="col-3 pl-0">
+		<label for="location-filter">{{ $L('Filter by location') }}</label>
+		<select class="form-control" id="location-filter">
+			<option value="all">{{ $L('All') }}</option>
+			@foreach($locations as $location)
+				<option value="{{ $location->name }}">{{ $location->name }}</option>
+			@endforeach
+		</select>
 	</div>
-	<div class="discrete-content-separator-2x"></div>
-	<div class="row">
-		<div class="col-sm-3 no-gutters">
-			<label for="location-filter">{{ $L('Filter by location') }}</label>
-			<select class="form-control" id="location-filter">
-				<option value="all">{{ $L('All') }}</option>
-				@foreach($locations as $location)
-					<option value="{{ $location->name }}">{{ $location->name }}</option>
-				@endforeach
-			</select>
-		</div>
-		<div class="col-sm-3">
-			<label for="search">{{ $L('Search') }}</label>
-			<input type="text" class="form-control" id="search">
-		</div>
+	<div class="col-3 pl-0">
+		<label for="search">{{ $L('Search') }}</label>
+		<input type="text" class="form-control" id="search">
 	</div>
 </div>
 
-<div class="table-responsive">
-	<table id="stock-overview-table" class="table table-striped">
+<div class="row table-responsive">
+	<table id="stock-overview-table" class="table table-striped table-sm">
 		<thead>
 			<tr>
 				<th>#</th>
@@ -50,14 +50,14 @@
 			@foreach($currentStock as $currentStockEntry) 
 			<tr id="product-{{ $currentStockEntry->product_id }}-row" class="@if($currentStockEntry->best_before_date < date('Y-m-d', strtotime('-1 days'))) error-bg @elseif($currentStockEntry->best_before_date < date('Y-m-d', strtotime('+5 days'))) warning-bg @elseif (FindObjectInArrayByPropertyValue($missingProducts, 'id', $currentStockEntry->product_id) !== null) info-bg @endif">
 				<td class="fit-content">
-					<a class="btn btn-success btn-xs product-consume-button" href="#" title="{{ $L('Consume #3 #1 of #2', FindObjectInArrayByPropertyValue($quantityunits, 'id', FindObjectInArrayByPropertyValue($products, 'id', $currentStockEntry->product_id)->qu_id_stock)->name, FindObjectInArrayByPropertyValue($products, 'id', $currentStockEntry->product_id)->name, 1) }}"
+					<a class="btn btn-success btn-sm product-consume-button" href="#" title="{{ $L('Consume #3 #1 of #2', FindObjectInArrayByPropertyValue($quantityunits, 'id', FindObjectInArrayByPropertyValue($products, 'id', $currentStockEntry->product_id)->qu_id_stock)->name, FindObjectInArrayByPropertyValue($products, 'id', $currentStockEntry->product_id)->name, 1) }}"
 						data-product-id="{{ $currentStockEntry->product_id }}"
 						data-product-name="{{ FindObjectInArrayByPropertyValue($products, 'id', $currentStockEntry->product_id)->name }}"
 						data-product-qu-name="{{ FindObjectInArrayByPropertyValue($quantityunits, 'id', FindObjectInArrayByPropertyValue($products, 'id', $currentStockEntry->product_id)->qu_id_stock)->name }}"
 						data-consume-amount="1">
 						<i class="fa fa-cutlery"></i> 1
 					</a>
-					<a id="product-{{ $currentStockEntry->product_id }}-consume-all-button" class="btn btn-danger btn-xs product-consume-button" href="#" title="{{ $L('Consume all #1 which are currently in stock', FindObjectInArrayByPropertyValue($products, 'id', $currentStockEntry->product_id)->name) }}"
+					<a id="product-{{ $currentStockEntry->product_id }}-consume-all-button" class="btn btn-danger btn-sm product-consume-button" href="#" title="{{ $L('Consume all #1 which are currently in stock', FindObjectInArrayByPropertyValue($products, 'id', $currentStockEntry->product_id)->name) }}"
 						data-product-id="{{ $currentStockEntry->product_id }}"
 						data-product-name="{{ FindObjectInArrayByPropertyValue($products, 'id', $currentStockEntry->product_id)->name }}"
 						data-product-qu-name="{{ FindObjectInArrayByPropertyValue($quantityunits, 'id', FindObjectInArrayByPropertyValue($products, 'id', $currentStockEntry->product_id)->qu_id_stock)->name }}"
diff --git a/yarn.lock b/yarn.lock
index f526ee1d..dd288515 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10,7 +10,7 @@ bootbox@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/bootbox/-/bootbox-4.4.0.tgz#ff7f898fb87d4527e547feb64158f88450d1a0c9"
 
-bootstrap-datepicker@^1.7.1:
+bootstrap-datepicker@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/bootstrap-datepicker/-/bootstrap-datepicker-1.8.0.tgz#c63513931e6f09f16ae9f11b62f32d950df3958e"
   dependencies:
@@ -24,40 +24,37 @@ bootstrap-validator@^0.11.9:
   version "0.11.9"
   resolved "https://registry.yarnpkg.com/bootstrap-validator/-/bootstrap-validator-0.11.9.tgz#fb7058eef53623e78f5aa7967026f98f875a9404"
 
-bootstrap@^3.3, bootstrap@^3.3.7:
+bootstrap@^3.3:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.3.7.tgz#5a389394549f23330875a3b150656574f8a9eb71"
 
-datatables.net-bs@^1.10.15:
+bootstrap@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.1.1.tgz#3aec85000fa619085da8d2e4983dfd67cf2114cb"
+
+datatables.net-bs4@^1.10.15, datatables.net-bs4@^1.10.19:
   version "1.10.19"
-  resolved "https://registry.yarnpkg.com/datatables.net-bs/-/datatables.net-bs-1.10.19.tgz#08763b4e4d0cef1a427d019dc15e717c7ed67a4d"
+  resolved "https://registry.yarnpkg.com/datatables.net-bs4/-/datatables.net-bs4-1.10.19.tgz#0608dff22008cf3c7b8a68b1bc702ed255b404fb"
   dependencies:
     datatables.net "1.10.19"
     jquery ">=1.7"
 
-datatables.net-bs@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/datatables.net-bs/-/datatables.net-bs-2.1.1.tgz#704108972891949d094bf44f53d0654d9fee7bce"
-  dependencies:
-    datatables.net ">=1.10.9"
-    jquery ">=1.7"
-
-datatables.net-responsive-bs@^2.1.1:
+datatables.net-responsive-bs4@^2.2.3:
   version "2.2.3"
-  resolved "https://registry.yarnpkg.com/datatables.net-responsive-bs/-/datatables.net-responsive-bs-2.2.3.tgz#6d3791a77a18af746d4ad520b7e7319f731be43c"
+  resolved "https://registry.yarnpkg.com/datatables.net-responsive-bs4/-/datatables.net-responsive-bs4-2.2.3.tgz#639de17c1d31210ebf2b3c25f1c774c13f729e94"
   dependencies:
-    datatables.net-bs "^1.10.15"
+    datatables.net-bs4 "^1.10.15"
     datatables.net-responsive "2.2.3"
     jquery ">=1.7"
 
-datatables.net-responsive@2.2.3, datatables.net-responsive@^2.1.1:
+datatables.net-responsive@2.2.3, datatables.net-responsive@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/datatables.net-responsive/-/datatables.net-responsive-2.2.3.tgz#50a2b1b4955b16b32f573a3f00f473b0bfbee913"
   dependencies:
     datatables.net "^1.10.15"
     jquery ">=1.7"
 
-datatables.net@1.10.19, datatables.net@>=1.10.9, datatables.net@^1.10.15:
+datatables.net@1.10.19, datatables.net@^1.10.15, datatables.net@^1.10.19:
   version "1.10.19"
   resolved "https://registry.yarnpkg.com/datatables.net/-/datatables.net-1.10.19.tgz#97a1ed41c85e62d61040603481b59790a172dd1f"
   dependencies: