reseted fork to upstream/master and applied patch gracefully provided by kesselb

Signed-off-by: Kevin Pfeifer <kevin.pfeifer@sunlime.at>

6 files changed, 692 insertions, 447 deletions

diff --git a/.gitignore b/.gitignore
index a9da9a1..a6b6702 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 *~
-\#*
\ No newline at end of file
+\#*
+.idea
diff --git a/css/style.css b/css/style.css
index 9fbad5d..385e134 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,75 +1,97 @@
-.barchart {
-	max-width: 200px;
-	max-height: 350px;
+.server-info-wrapper {
+	max-width: 100vw;
 }
 
-.clipboardButton {
-	display: inline-block;
-	position: relative;
-	top: 2px;
-	margin-left: 5px;
+.table-wrapper {
+	overflow-x: auto;
+}
+
+.server-infos-table {
+	margin-bottom: 25px;
+}
+
+.server-infos-table td:first-child {
+	width: 120px;
 }
 
-#ocsEndPoint {
-	margin-bottom: 10px;
+.monitoring-wrapper {
+	display: -webkit-flex;
+	display: flex;
 }
 
-#monitoring-endpoint-url {
-	width: 80%;
-	max-width: 415px;
+.monitoring-wrapper > input {
+	flex: 1 0 auto;
 }
 
 .rambox {
-	padding: 0px;
-	margin: 0px;
- 	height: 10px;
- 	width: 10px;
- 	background-color: #555;
- 	border-radius: 20%;
+	height: 10px;
+	width: 10px;
+	background-color: #555;
 }
 
 .swapbox {
-  height: 10px;
-  width: 10px;
-  background-color: #222;
-  border-radius: 20%;
+	height: 10px;
+	width: 10px;
+	background-color: #222;
 }
 
 .info {
 	font-weight: bold;
-	text-color: #777777;
+	color: #777;
 }
 
 .smallinfo {
-	color: #888888;
+	color: #888;
 	font-size: 11px;
 }
 
 .infobox {
-	width: 400px;
-	border: 1px solid #DDDDDD;
-	margin: 10px 0px 20px 0px;
+	display: flex;
+	flex-wrap: nowrap;
+	align-items: center;
+
+	border: 1px solid #ddd;
 	padding: 15px;
-	color: #555555;
-	background-color: #F9F9F9;
+	margin: 15px 0;
+	color: #555;
+	background-color: #f9f9f9;
 	border-radius: 6px;
-	box-shadow: 1px 1px 9px 1px #EEEEEE;
+	box-shadow: 1px 1px 9px 1px #eee;
 }
 
-.infobox h3 {
-	color: #555555;
-	font-size: 22px;
-	font-weight: bold;
-	padding: 5px 0px 10px 0px;
-	margin: 0px;
+.diskchart-container {
+	width: 100px;
+	border: 1px black;
+}
+
+@media only screen and (max-width: 768px){
+	.infobox {
+		display: block;
+		text-align: center;
+	}
+	.diskchart-container {
+		margin: 0 auto;
+	}
+}
+
+.diskinfo-container {
+	flex: 1 0 auto;
 }
 
 .infobox h2 {
-	color: #555555;
+	color: #555;
 	font-size: 18px;
 	font-weight: bold;
-	padding: 5px 5px 5px 5px;
-	margin: 0px;
+	padding: 5px;
+	margin: 0;
+}
+
+.infobox h3 {
+	color: #555;
+	font-size: 22px;
+	font-weight: bold;
+	padding: 5px 0 10px 0;
+	margin: 0;
 }
 
 .infoicon {
@@ -79,45 +101,142 @@
 }
 
 .chart-container {
-	height:300px;
-	width: 800px;
-	margin: 5px 10px 5px 5px;
+	position: relative;
+	margin: 10px;
 }
 
-.diskchart-container {
-	position: static;
+.clipboardButton {
 	display: inline-block;
-	height:130px;
-	width:130px;
-	float:left;
-	border: 1px black;
-	margin: 5px 10px 5px 5px;
+	position: relative;
+	top: 2px;
+	margin-left: 5px;
+}
+
+/* GRID SYSTEM */
+
+.row {
+	display: -webkit-flex;
+	display: flex;
+	flex: 0 1 auto;
+	flex-direction: row;
+	flex-wrap: wrap;
+	margin-left: -15px;
+	margin-right: -15px;
+}
+
+.col {
+	flex-grow: 1;
+	flex-basis: 0;
+	max-width: 100%;
+	padding-left: 15px;
+	padding-right: 15px;
+}
+
+.col-1 {
+	flex-basis: 8.333%;
+	max-width: 8.333%;
+	min-width: 8.333%;
+}
+
+.col-2 {
+	flex-basis: 16.666%;
+	max-width: 16.666%;
+	min-width: 16.666%;
+}
+
+.col-3 {
+	flex-basis: 25%;
+	max-width: 25%;
+	min-width: 25%;
+}
+
+.col-4 {
+	flex-basis: 33.333%;
+	max-width: 33.333%;
+	min-width: 33.333%;
+}
+
+.col-5 {
+	flex-basis: 41.666%;
+	max-width: 41.666%;
+	min-width: 41.666%;
+}
+
+.col-6 {
+	flex-basis: 50%;
+	max-width: 50%;
+	min-width: 50%;
+}
+
+.col-7 {
+	flex-basis: 58.333%;
+	max-width: 58.333%;
+	min-width: 58.333%;
+}
+
+.col-8 {
+	flex-basis: 66.666%;
+	max-width: 66.666%;
+	min-width: 66.666%;
 }
 
-.wrapper {
-  overflow:hidden;
+.col-9 {
+	flex-basis: 75%;
+	max-width: 75%;
+	min-width: 75%;
 }
 
-.wrapper div {
-   min-height: 100px;
-   padding: 0px;
+.col-10 {
+	flex-basis: 83.333%;
+	max-width: 83.333%;
+	min-width: 83.333%;
 }
-#one {
-  float:left;
-  width:440px;
-  margin-right: 10px;
+
+.col-11 {
+	flex-basis: 91.666%;
+	max-width: 91.666%;
+	min-width: 91.666%;
 }
 
-#two {
-  overflow:hidden;
-  width:440px;
-  min-height:100px;
+.col-12 {
+	flex-basis: 100%;
+	max-width: 100%;
+	min-width: 100%;
 }
 
-@media screen and (max-width: 1000px) {
-   #one {
-    float: none;
-    margin-right:0;
-    width:auto;
-  }
+
+@media only screen and (max-width: 1200px) {
+	.col-xl-6 {
+		flex-basis: 50%;
+		max-width: 50%;
+		min-width: 50%;
+	}
+}
+
+@media only screen and (max-width: 1024px) {
+	.col-l-6 {
+		flex-basis: 50%;
+		max-width: 50%;
+		min-width: 50%;
+	}
+
+	.col-l-12 {
+		flex-basis: 100%;
+		max-width: 100%;
+		min-width: 100%;
+	}
+}
+
+@media only screen and (max-width: 768px) {
+	.col-m-6 {
+		flex-basis: 50%;
+		max-width: 50%;
+		min-width: 50%;
+	}
+
+	.col-m-12 {
+		flex-basis: 100%;
+		max-width: 100%;
+		min-width: 100%;
+	}
 }
diff --git a/img/folder.svg b/img/folder.svg
new file mode 100644
index 0000000..8a82c9a
--- /dev/null
+++ b/img/folder.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
+<g><g transform="translate(0.000000,511.000000) scale(0.100000,-0.100000)"><path d="M582.5,3707.6c-126.9-26.9-273.1-115.4-353.8-217.3C88.3,3311.4,97.9,3563.4,101.8-51.9l5.8-3249.9l44.2-63.5c25-34.6,73.1-76.9,105.8-96.2c57.7-30.8,296.1-32.7,3849.8-38.5c2084.5-3.8,3834.5,0,3892.1,5.8c84.6,11.5,117.3,26.9,176.9,82.7c67.3,67.3,125,213.5,901.9,2290.3C9805.2,819.2,9909,1107.7,9899.4,1175c-11.6,84.6-55.8,153.8-136.6,213.5c-50,38.5-80.8,40.4-773,46.2l-719.2,5.8v371.1v371.1l-57.7,117.3c-63.4,125-146.1,209.6-275,276.9l-80.8,44.2l-2223,5.8l-2224.9,3.9l-7.7,323.1c-5.8,284.6-11.5,330.8-48.1,407.7c-71.1,142.3-151.9,225-290.4,292.3l-128.8,63.5l-1134.6,3.9C1176.7,3723,628.7,3715.3,582.5,3707.6z M2809.3,2794.2c9.6-305.8,13.5-332.7,61.5-425c61.5-115.4,178.8-226.9,301.9-284.6l88.5-40.4l2207.6-5.8l2205.7-3.8v-298.1v-298.1h-2846c-3130.6,0-2951.8,5.8-3038.3-115.4c-19.2-26.9-271.1-678.8-559.6-1444.2C944-886.4,705.6-1517.2,701.7-1521c-3.8-3.8-7.7,1040.3-7.7,2321v2330.7l1053.8-3.8l1051.9-5.8L2809.3,2794.2z M9174.4,838.5c0-3.8-315.4-844.2-700-1871.1l-699.9-1865.3l-3472.9-3.8c-1909.5,0-3472.9,0-3472.9,1.9c0,3.8,1323,3536.4,1382.6,3690.2l21.2,51.9h3471C7613,842.3,9174.4,840.4,9174.4,838.5z"/></g></g>
+</svg>
diff --git a/img/user.svg b/img/user.svg
new file mode 100644
index 0000000..fc191da
--- /dev/null
+++ b/img/user.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M437.02,330.98c-27.883-27.882-61.071-48.523-97.281-61.018C378.521,243.251,404,198.548,404,148
+			C404,66.393,337.607,0,256,0S108,66.393,108,148c0,50.548,25.479,95.251,64.262,121.962
+			c-36.21,12.495-69.398,33.136-97.281,61.018C26.629,379.333,0,443.62,0,512h40c0-119.103,96.897-216,216-216s216,96.897,216,216
+			h40C512,443.62,485.371,379.333,437.02,330.98z M256,256c-59.551,0-108-48.448-108-108S196.449,40,256,40
+			c59.551,0,108,48.448,108,108S315.551,256,256,256z"/>
+	</g>
+</g>
+</svg>
diff --git a/js/script.js b/js/script.js
index 6aad672..2cd4620 100644
--- a/js/script.js
+++ b/js/script.js
@@ -29,15 +29,15 @@
 		sharesChart;
 
 	$(document).ready(function () {
-		var x = document.getElementById('rambox');
-		x.style.backgroundColor = OCA.Theming  ? OCA.Theming.color : 'rgb(54, 129, 195)'; 
+		var rambox = document.getElementById('rambox');
+		rambox.style.backgroundColor = OCA.Theming ? OCA.Theming.color : 'rgb(54, 129, 195)';
 
-		var x = document.getElementById('swapbox');
-		x.style.backgroundColor = 'rgba(100, 100, 100, 0.8)';
+		var swapbox = document.getElementById('swapbox');
+		swapbox.style.backgroundColor = 'rgba(100, 100, 100, 0.8)';
 
-		resizeSystemCharts();
-		updateActiveUsersStatistics();
-		updateShareStatistics();
+		var updateTimer = setInterval(updateInfo, 300);
+
+		initDiskCharts();
 
 		setHumanReadableSizeToElement("databaseSize");
 		setHumanReadableSizeToElement("phpMemLimit");
@@ -46,7 +46,7 @@
 
 		$('#ocsEndPoint span.icon-info').tooltip({placement: 'top'});
 		initMonitoringLinkToClipboard();
-		$("#monitoring-endpoint-url").on('click', function() {
+		$("#monitoring-endpoint-url").on('click', function () {
 			$(this).select();
 		});
 
@@ -64,18 +64,53 @@
 		setTimeout(updateInfo, 0)
 	});
 
+	$(window).load(function(){
+		resizeSystemCharts();
+	});
+
 	$(window).resize(function () {
 		resizeSystemCharts();
 	});
 
-	function updateCPUStatistics (cpuload) {
+	/**
+	 * Reset all canvas widths on window resize so canvas is responsive
+	 */
+	function resizeSystemCharts() {
+		var cpu_canvas = $("#cpuloadcanvas"),
+			cpu_canvas_width = cpu_canvas.parents('.infobox').width() - 30,
+			mem_canvas = $("#memorycanvas"),
+			mem_canvas_width = mem_canvas.parents('.infobox').width() - 30,
+			active_users_canvas = $("#activeuserscanvas"),
+			active_users_canvas_width = active_users_canvas.parents('.infobox').width() - 30,
+			share_canvas = $("#sharecanvas"),
+			share_canvas_width = share_canvas.parents('.infobox').width() - 30,
+			current_vw = $(window).width();
+
+		// We have to set css width AND attribute width
+		cpu_canvas.width(cpu_canvas_width);
+		cpu_canvas.attr('width', cpu_canvas_width);
+		mem_canvas.width(mem_canvas_width);
+		mem_canvas.attr('width', mem_canvas_width);
+		active_users_canvas.width(active_users_canvas_width);
+		active_users_canvas.attr('width', active_users_canvas_width);
+		share_canvas.width(share_canvas_width);
+		share_canvas.attr('width', share_canvas_width);
+
+		updateShareStatistics();
+		updateActiveUsersStatistics();
+	}
+
+	function updateCPUStatistics(cpuload) {
+		var $cpu_footer_info = $('#cpuFooterInfo');
+		var $cpu_load_canvas = $('#cpuloadcanvas');
+
 		if (cpuload === 'N/A') {
-			$('#cpuFooterInfo').text(t('serverinfo', 'CPU info not available'));
-			$('#cpuloadcanvas').addClass('hidden');
+			$cpu_footer_info.text(t('serverinfo', 'CPU info not available'));
+			$cpu_load_canvas.addClass('hidden');
 			return;
 
-		} else if ($("#cpuloadcanvas").hasClass('hidden')) {
-			$("#cpuloadcanvas").removeClass('hidden');
+		} else if ($cpu_load_canvas.hasClass('hidden')) {
+			$cpu_load_canvas.removeClass('hidden');
 		}
 
 		var cpu1 = cpuload[0],
@@ -84,29 +119,37 @@
 
 		if (typeof cpuLoadChart === 'undefined') {
 			cpuLoadChart = new SmoothieChart(
-			{
-				millisPerPixel: 100,
-				minValue: 0,
-				grid: { fillStyle: 'rgba(249,249,249,1)', strokeStyle: 'transparent' },
-				labels: { fillStyle: 'rgba(0,0,0,0.4)', fontSize: 12 }
-			});
+				{
+					millisPerPixel: 100,
+					minValue: 0,
+					grid: {fillStyle: 'rgba(249,249,249,1)', strokeStyle: 'transparent'},
+					labels: {fillStyle: 'rgba(0,0,0,0.4)', fontSize: 12},
+					responsive: true
+				});
 			cpuLoadChart.streamTo(document.getElementById("cpuloadcanvas"), 1000/*delay*/);
 			cpuLoadLine = new TimeSeries();
-			cpuLoadChart.addTimeSeries(cpuLoadLine, { lineWidth: 1, strokeStyle: 'rgb(180, 180, 180)', fillStyle: OCA.Theming  ? OCA.Theming.color : 'rgb(54, 129, 195)' });
+			cpuLoadChart.addTimeSeries(cpuLoadLine, {
+				lineWidth: 1,
+				strokeStyle: 'rgb(180, 180, 180)',
+				fillStyle: OCA.Theming ? OCA.Theming.color : 'rgb(54, 129, 195)'
+			});
 		}
 
-		$('#cpuFooterInfo').text(t('serverinfo', 'Load average')+": "+cpu1+" ("+t('serverinfo', 'Last minute')+")");
+		$cpu_footer_info.text(t('serverinfo', 'Load average') + ": " + cpu1 + " (" + t('serverinfo', 'Last minute') + ")");
 		cpuLoadLine.append(new Date().getTime(), cpu1);
 	}
 
-	function updateMemoryStatistics (memTotal, memFree, swapTotal, swapFree) {
+	function updateMemoryStatistics(memTotal, memFree, swapTotal, swapFree) {
+		var $mem_footer_info = $('#memFooterInfo');
+		var $memory_canvas = $('#memorycanvas');
+
 		if (memTotal === 'N/A' || memFree === 'N/A') {
-			$('#memFooterInfo').text(t('serverinfo', 'Memory info not available'));
-			$('#memorycanvas').addClass('hidden');
+			$mem_footer_info.text(t('serverinfo', 'Memory info not available'));
+			$memory_canvas.addClass('hidden');
 			return;
 
-		} else if ($("#memorycanvas").hasClass('hidden')) {
-			$("#memorycanvas").removeClass('hidden');
+		} else if ($memory_canvas.hasClass('hidden')) {
+			$memory_canvas.removeClass('hidden');
 		}
 
 		var memTotalBytes = memTotal * 1024,
@@ -119,38 +162,55 @@
 			swapTotalGB = swapTotal / (1024 * 1024),
 			swapUsageGB = (swapTotal - swapFree) / (1024 * 1024);
 
+		var maxValueOfChart = swapTotalGB;
 		if (memTotalGB > swapTotalGB) {
-			var maxValueOfChart = memTotalGB;
-		} else {
-			var maxValueOfChart = swapTotalGB;
+			maxValueOfChart = memTotalGB;
 		}
 
 		if (typeof memoryUsageChart === 'undefined') {
 			memoryUsageChart = new SmoothieChart(
-			{
-				millisPerPixel: 100,
-				maxValue: maxValueOfChart,
-				minValue: 0,
-				grid: { fillStyle: 'rgba(0,0,0,0)', strokeStyle: 'transparent' },
-				labels: { fillStyle: 'rgba(0,0,0,0.4)', fontSize: 12 }
-			});
+				{
+					millisPerPixel: 100,
+					maxValue: maxValueOfChart,
+					minValue: 0,
+					grid: {fillStyle: 'rgba(0,0,0,0)', strokeStyle: 'transparent'},
+					labels: {fillStyle: 'rgba(0,0,0,0.4)', fontSize: 12},
+					responsive: true
+				});
 			memoryUsageChart.streamTo(document.getElementById("memorycanvas"), 1000/*delay*/);
 			memoryUsageLine = new TimeSeries();
-			memoryUsageChart.addTimeSeries(memoryUsageLine, {lineWidth:1, strokeStyle:'rgb(180, 180, 180)', fillStyle:OCA.Theming  ? OCA.Theming.color : 'rgb(54, 129, 195)'});
+			memoryUsageChart.addTimeSeries(memoryUsageLine, {
+				lineWidth: 1,
+				strokeStyle: 'rgb(180, 180, 180)',
+				fillStyle: OCA.Theming ? OCA.Theming.color : 'rgb(54, 129, 195)'
+			});
 			swapUsageLine = new TimeSeries();
-			memoryUsageChart.addTimeSeries(swapUsageLine, {lineWidth:1, strokeStyle:'rgb(100, 100, 100)', fillStyle:'rgba(100, 100, 100, 0.2)'});
+			memoryUsageChart.addTimeSeries(swapUsageLine, {
+				lineWidth: 1,
+				strokeStyle: 'rgb(100, 100, 100)',
+				fillStyle: 'rgba(100, 100, 100, 0.2)'
+			});
 		}
 
-		$('#memFooterInfo').text("RAM: "+t('serverinfo', 'Total')+": "+OC.Util.humanFileSize(memTotalBytes)+" - "+t('serverinfo', 'Current usage')+": "+OC.Util.humanFileSize(memUsageBytes));
+		$mem_footer_info
+			.text("RAM: " + t('serverinfo', 'Total') + ": " + OC.Util.humanFileSize(memTotalBytes) + " - " + t('serverinfo', 'Current usage') + ": " + OC.Util.humanFileSize(memUsageBytes));
 		memoryUsageLine.append(new Date().getTime(), memUsageGB);
-		$('#swapFooterInfo').text("SWAP: "+t('serverinfo', 'Total')+": "+OC.Util.humanFileSize(swapTotalBytes)+" - "+t('serverinfo', 'Current usage')+": "+OC.Util.humanFileSize(swapUsageBytes));
+		$('#swapFooterInfo')
+			.text("SWAP: " + t('serverinfo', 'Total') + ": " + OC.Util.humanFileSize(swapTotalBytes) + " - " + t('serverinfo', 'Current usage') + ": " + OC.Util.humanFileSize(swapUsageBytes));
 		swapUsageLine.append(new Date().getTime(), swapUsageGB);
 	}
 
 	function updateShareStatistics () {
 
 		var shares = $('#sharecanvas').data('shares'),
-			shares_data = [shares.num_shares_user, shares.num_shares_groups, shares.num_shares_link, shares.num_shares_mail, shares.num_fed_shares_sent, shares.num_fed_shares_received, shares.num_shares_room],
+			shares_data = [shares.num_shares_user,
+				shares.num_shares_groups,
+				shares.num_shares_link,
+				shares.num_shares_mail,
+				shares.num_fed_shares_sent,
+				shares.num_fed_shares_received,
+				shares.num_shares_room
+			],
 			stepSize = 0;
 
 		if (Math.max.apply(null, shares_data) < 10) {
@@ -197,7 +257,7 @@
 					}]
 				},
 				options: {
-					legend: { display:false },
+					legend: {display: false},
 					scales: {
 						yAxes: [{
 							ticks: {
@@ -213,7 +273,7 @@
 		sharesChart.update();
 	}
 
-	function updateActiveUsersStatistics () {
+	function updateActiveUsersStatistics() {
 
 		var activeUsers = $('#activeuserscanvas').data('users'),
 			activeUsers_data = [activeUsers.last24hours, activeUsers.last1hour, activeUsers.last5minutes],
@@ -238,7 +298,7 @@
 						label: " ",
 						data: activeUsers_data,
 						fill: false,
-						borderColor: [ 'rgba(0, 0, 255, 1)' ],
+						borderColor: ['rgba(0, 0, 255, 1)'],
 						borderWidth: 1,
 						borderDashOffset: 0.0,
 						borderJoinStyle: 'miter',
@@ -277,35 +337,6 @@
 		}
 	}
 
-	function resizeSystemCharts () {
-
-		var cpu_canvas = document.getElementById("cpuloadcanvas"),
-			mem_canvas = document.getElementById("memorycanvas");
-			activeuserscanvas = document.getElementById("activeuserscanvas");
-			sharecanvas = document.getElementById("sharecanvas");
-
-		var newWidth = $('#cpuSection').width();
-			newHeight = newWidth / 4
-
-		if (newWidth <= 100) newWidth = 100;
-		if (newWidth >= 500) newWidth = 500;
-		if (newHeight > 150) newHeight = 150;
-
-
-		cpuloadcanvas.width = newWidth;
-		cpuloadcanvas.height = newHeight;
-
-		mem_canvas.width = newWidth;
-		mem_canvas.height = newHeight;
-
-		activeuserscanvas.width = 600;
-		activeuserscanvas.height = 500;
-
-		sharecanvas.width = 800;
-
-
-	}
-
 	function initMonitoringLinkToClipboard() {
 		var monAPIBox = $("#ocsEndPoint");
 		/* reused from settings/js/authtoken_view.js */
@@ -350,72 +381,70 @@
 		});
 	}
 
-})(jQuery, OC);
-
-
-$(document).ready(function(){
-	$.ajax({
-		url: OC.linkToOCS('apps/serverinfo/api/v1/', 2) + 'diskdata?format=json',
-		method: "GET",
-		success: function(response) {
-			var diskdata = response.ocs.data;
-			var x = document.querySelectorAll(".DiskChart");
-			var i;
-			for (i = 0; i < x.length; i++) {
-				var chartdata = {
-					labels: ["Used GB", "Available GB"],
-					datasets : [
-						{
-							backgroundColor: [
-								OCA.Theming  ? OCA.Theming.color : 'rgb(54, 129, 195)',
-								'rgb(249, 249, 249)',
-							],
-							borderWidth: 0,
-							data: diskdata[i]
-						}
-					]
-				};
-				var ctx = x[i];
-				var barGraph = new Chart(ctx, {
-					type: 'doughnut',
-					data: chartdata,
-					options: {
-						legend: {
-							display: false,
-						},
-						tooltips: {
-							enabled: true,
-						},
-						cutoutPercentage: 60
-					}
-				});
-			}
-		},
-		error: function(data) {
-			console.log(data);
-		}
-	});
-
-	var interval = 1000;  // 1000 = 1 second, 3000 = 3 seconds
-	function doAjax() {
+	function initDiskCharts() {
 		$.ajax({
-			url: OC.linkToOCS('apps/serverinfo/api/v1/', 2) + 'basicdata?format=json',
+			url: OC.linkToOCS('apps/serverinfo/api/v1/', 2) + 'diskdata?format=json',
 			method: "GET",
-			success: function(response) {
-				var data = response.ocs.data;
-				document.getElementById("servertime").innerHTML = data.servertime;
-				document.getElementById("uptime").innerHTML = data.uptime;
-				document.getElementById("timeservers").innerHTML = data.timeservers;
+			success: function (response) {
+				var diskdata = response.ocs.data;
+				var diskcharts = document.querySelectorAll(".DiskChart");
+				var i;
+				for (i = 0; i < diskcharts.length; i++) {
+					var chartdata = {
+						labels: ["Used GB", "Available GB"],
+						datasets: [
+							{
+								backgroundColor: [
+									OCA.Theming ? OCA.Theming.color : 'rgb(54, 129, 195)',
+									'rgb(200, 200, 200)',
+								],
+								borderWidth: 0,
+								data: diskdata[i]
+							}
+						]
+					};
+					var ctx = diskcharts[i];
+					var barGraph = new Chart(ctx, {
+						type: 'doughnut',
+						data: chartdata,
+						options: {
+							legend: {
+								display: false,
+							},
+							tooltips: {
+								enabled: true,
+							},
+							cutoutPercentage: 60,
+						}
+					});
+				}
 			},
-			error: function(data) {
+			error: function (data) {
 				console.log(data);
-			},
-			complete: function (data) {
-				setTimeout(doAjax, interval);
 			}
 		});
-	}
-	setTimeout(doAjax, interval);
 
+		var interval = 1000;  // 1000 = 1 second, 3000 = 3 seconds
+		function doAjax() {
+			$.ajax({
+				url: OC.linkToOCS('apps/serverinfo/api/v1/', 2) + 'basicdata?format=json',
+				method: "GET",
+				success: function (response) {
+					var data = response.ocs.data;
+					document.getElementById("servertime").innerHTML = data.servertime;
+					document.getElementById("uptime").innerHTML = data.uptime;
+					document.getElementById("timeservers").innerHTML = data.timeservers;
+				},
+				error: function (data) {
+					console.log(data);
+				},
+				complete: function (data) {
+					setTimeout(doAjax, interval);
+				}
+			});
+		}
+
+		setTimeout(doAjax, interval);
+	}
 
-});
+})(jQuery, OC);
diff --git a/templates/settings-admin.php b/templates/settings-admin.php
index 52b4b99..7bb1c4a 100644
--- a/templates/settings-admin.php
+++ b/templates/settings-admin.php
@@ -1,279 +1,356 @@
 <?php
-/**
- * @copyright Copyright (c) 2016 Bjoern Schiessle <bjoern@schiessle.org>
- *
- * @license GNU AGPL version 3 or any later version
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- *
- */
+	/**
+	 * @copyright Copyright (c) 2016 Bjoern Schiessle <bjoern@schiessle.org>
+	 *
+	 * @license GNU AGPL version 3 or any later version
+	 *
+	 * This program is free software: you can redistribute it and/or modify
+	 * it under the terms of the GNU Affero General Public License as
+	 * published by the Free Software Foundation, either version 3 of the
+	 * License, or (at your option) any later version.
+	 *
+	 * This program is distributed in the hope that it will be useful,
+	 * but WITHOUT ANY WARRANTY; without even the implied warranty of
+	 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	 * GNU Affero General Public License for more details.
+	 *
+	 * You should have received a copy of the GNU Affero General Public License
+	 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+	 *
+	 */
 
-script('serverinfo', 'script');
-script('serverinfo', 'smoothie');
-script('serverinfo', 'Chart.min');
+	script('serverinfo', 'script');
+	script('serverinfo', 'smoothie');
+	script('serverinfo', 'Chart.min');
 
-style('serverinfo', 'style');
+	style('serverinfo', 'style');
 
-function FormatBytes($byte) {
-	$unim  = array('B', 'KB', 'MB', 'GB', 'TB', 'PB');
-	$count = 1;
-	while ($byte >= 1024) {
-		$count++;
-		$byte = $byte / 1024;
+	function FormatBytes($byte) {
+		$unim = array('B', 'KB', 'MB', 'GB', 'TB', 'PB');
+		$count = 1;
+		while ($byte >= 1024) {
+			$count++;
+			$byte = $byte / 1024;
+		}
+
+		return number_format($byte, 2, '.', '.') . ' ' . $unim[$count];
 	}
-	return number_format($byte, 2, '.', '.') . ' ' . $unim[$count];
-}
 
 ?>
 
-<!-- SERVER INFOS -->
-<div class="section">
-	<h2>
-		<img class="infoicon" src="<?php p(image_path('serverinfo', 'server.svg'));?>">
-		<?php p($_['hostname']);?>
-	</h2>
-
-	<p>
-		<?php p($l->t('Operating System'));?>:
-		<span class="info"><?php p($_['osname']);?></span>
-	</p>
-	<p>
-		<?php p($l->t('CPU'));?>:
-		<span class="info"><?php p($_['cpu']);?></span>
-	</p>
-	<p>
-		<?php p($l->t('Memory'));?>:
-		<span class="info"><?php p($_['memory']);?></span>
-	</p>
-	<p>
-		<?php p($l->t('Server time'));?>:
-		<span class="info" id="servertime"></span>
-	</p>
-	<p>
-		<?php p($l->t('Uptime'));?>:
-		<span class="info" id="uptime"></span>
-	</p>
-	<p>
-		<?php p($l->t('Time Servers'));?>:
-		<span class="info" id="timeservers"></span>
-	</p>
-
-	<div class="wrapper">
+<div class="server-info-wrapper">
 
-		<div id="one">
-			<div class="infobox" id="cpuSection">
-				<h2><?php p($l->t('Load'));?></h2>
-				<canvas id="cpuloadcanvas" width="100" height="150"></canvas>
+	<!-- SERVER INFOS -->
+	<div class="section server-infos">
+		<div class="row">
+			<div class="col col-12">
+				<h2>
+					<img class="infoicon" src="<?php p(image_path('serverinfo', 'server.svg')); ?>">
+					<?php p($_['hostname']); ?>
+				</h2>
+				<div class="table-wrapper">
+					<table class="server-infos-table">
+						<thead>
+						</thead>
+						<tbody>
+						<tr>
+							<td><?php p($l->t('Operating System')); ?>:</td>
+							<td><?php p($_['osname']); ?></td>
+						</tr>
+						<tr>
+							<td><?php p($l->t('CPU')); ?>:</td>
+							<td>
+								<?php
+									$cpu_name_output = [];
+									$splitted_cpu_name = explode(PHP_EOL, $_['cpu']);
+									if (sizeof($splitted_cpu_name) > 0):
+										foreach ($splitted_cpu_name as $cpu_name_part):
+											if (!in_array($cpu_name_part, $cpu_name_output)):
+												if (!is_numeric($cpu_name_part)):
+													$cpu_name_output[] = $cpu_name_part;
+												endif;
+											endif;
+										endforeach;
+									endif;
+									p(implode('', $cpu_name_output));
+								?>
+							</td>
+						</tr>
+						<tr>
+							<td><?php p($l->t('Memory')); ?>:</td>
+							<td><?php p($_['memory']); ?></td>
+						</tr>
+						<tr>
+							<td><?php p($l->t('Server time')); ?>:</td>
+							<td><span class="info" id="servertime"></span></td>
+						</tr>
+						<tr>
+							<td><?php p($l->t('Uptime')); ?>:</td>
+							<td><span class="info" id="uptime"></span></td>
+						</tr>
+						<tr>
+							<td><?php p($l->t('Time Servers')); ?>:</td>
+							<td><span class="info" id="timeservers"></span></td>
+						</tr>
+						</tbody>
+					</table>
+				</div>
 			</div>
-			<p><em id="cpuFooterInfo"></em></p>
-		</div>
 
-		<div id="two">
-			<div class="infobox">
-			<h2><?php p($l->t('Memory'));?></h2>
-			<canvas id="memorycanvas" width="300" height="150"></canvas>
+			<div class="col col-6 col-l-12">
+				<h2>
+					<img class="infoicon" src="<?php p(image_path('serverinfo', 'server.svg')); ?>">
+					<?php p($l->t('Load')); ?>
+				</h2>
+				<div class="infobox" id="cpuSection">
+					<div class="cpu-wrapper">
+						<canvas id="cpuloadcanvas" style="width:100%; height:200px" width="600" height="200"></canvas>
+					</div>
+				</div>
+				<p><em id="cpuFooterInfo"></em></p>
 			</div>
-			<p><span class="rambox" id="rambox">&nbsp;&nbsp;</span>&nbsp;&nbsp;<em id="memFooterInfo"></em></p>
-			<p><span class="swapbox" id="swapbox">&nbsp;&nbsp;</span>&nbsp;&nbsp;<em id="swapFooterInfo"></em></p>
-		</div>
-
-	</div>
-</div>
 
-<!-- DISK STATUS -->
-<div class="section">
-	<h2>
-		<img class="infoicon" src="<?php p(image_path('serverinfo', 'hdd-o.svg'));?>">
-		<?php p($l->t('Disk'));?>
-	</h2>
-	<p>
-		<?php foreach ($_['diskinfo'] as $disk) {?>
-
-			<div class="infobox">
-				<div class="diskchart-container">
-					<canvas id="DiskChart" class="DiskChart" width="50" height="50"></canvas>
+			<div class="col col-6 col-l-12">
+				<h2>
+					<img class="infoicon" src="<?php p(image_path('serverinfo', 'hdd-o.svg')); ?>">
+					<?php p($l->t('Memory')); ?>
+				</h2>
+				<div class="infobox">
+					<div class="memory-wrapper">
+						<canvas id="memorycanvas" style="width:100%; height:200px" width="600" height="200"></canvas>
+					</div>
 				</div>
-
-				<h3><?php p(basename($disk['device']));?></h3>
-				<p>
-					<?php p($l->t('Mount'));?> :
-					<span class="info"><?php p($disk['mount']);?></span>
-				</p>
-				<p>
-					<?php p($l->t('Filesystem'));?> :
-					<span class="info"><?php p($disk['fs']);?></span>
-				</p>
-				<p>
-					<?php p($l->t('Size'));?> :
-					<span class="info"><?php p(FormatBytes($disk['used'] + $disk['available']));?></span>
-				</p>
-				<p>
-					<?php p($l->t('Available'));?> :
-					<span class="info"><?php p(FormatBytes($disk['available']));?></span>
-				</p>
-				<p>
-					<?php p($l->t('Used'));?> :
-					<span class="info"><?php p($disk['percent']);?></span>
-				</p>
+				<p><span class="rambox" id="rambox">&nbsp;&nbsp;</span>&nbsp;&nbsp;<em id="memFooterInfo"></em></p>
+				<p><span class="swapbox" id="swapbox">&nbsp;&nbsp;</span>&nbsp;&nbsp;<em id="swapFooterInfo"></em></p>
 			</div>
 
-		<?php }?>
+		</div>
+	</div>
 
-		<div class="smallinfo"> <?php p($l->t('You will get a notification once one of your disks is nearly full.'));?></div>
+	<!-- DISK STATUS -->
+	<div class="section disk-status">
+		<div class="row">
+			<div class="col col-12">
+				<h2>
+					<img class="infoicon" src="<?php p(image_path('serverinfo', 'hdd-o.svg')); ?>">
+					<?php p($l->t('Disk')); ?>
+				</h2>
+			</div>
+			<?php foreach ($_['diskinfo'] as $disk): ?>
+				<div class="col col-4 col-xl-6 col-m-12">
+					<div class="infobox">
+						<div class="diskchart-container">
+							<canvas id="DiskChart" class="DiskChart" style="width:100%; height:200px" width="600"
+									height="200"></canvas>
+						</div>
+						<div class="diskinfo-container">
+							<h3><?php p(basename($disk['device'])); ?></h3>
+							<?php p($l->t('Mount')); ?> :
+							<span class="info"><?php p($disk['mount']); ?></span><br>
+							<?php p($l->t('Filesystem')); ?> :
+							<span class="info"><?php p($disk['fs']); ?></span><br>
+							<?php p($l->t('Size')); ?> :
+							<span class="info"><?php p(FormatBytes($disk['used'] + $disk['available'])); ?></span><br>
+							<?php p($l->t('Available')); ?> :
+							<span class="info"><?php p(FormatBytes($disk['available'])); ?></span><br>
+							<?php p($l->t('Used')); ?> :
+							<span class="info"><?php p($disk['percent']); ?></span><br>
+						</div>
+					</div>
+				</div>
+			<?php endforeach; ?>
+		</div>
 
-		<p><?php p($l->t('Files:'));?> <em id="numFilesStorage"><?php p($_['storage']['num_files']);?></em></p>
-		<p><?php p($l->t('Storages:'));?> <em id="numFilesStorages"><?php p($_['storage']['num_storages']);?></em></p>
-		<p><?php p($l->t('Free Space:'));?> <em id="systemDiskFreeSpace"><?php p($_['system']['freespace']);?></em></p>
-	</p>
-</div>
+		<div class="smallinfo">
+			<?php p($l->t('You will get a notification once one of your disks is nearly full.')); ?>
+		</div>
 
-<!-- NETWORK -->
-<div class="section">
-	<h2>
-		<img class="infoicon" src="<?php p(image_path('serverinfo', 'sort.svg'));?>">
-		<?php p($l->t('Network'));?>
-	</h2>
-	<p>
-		<p>
-			<?php p($l->t('Hostname'));?>:
-			<span class="info"><?php p($_['networkinfo']['hostname']);?></span>
+		<p><?php p($l->t('Files:')); ?> <em id="numFilesStorage"><?php p($_['storage']['num_files']); ?></em></p>
+		<p><?php p($l->t('Storages:')); ?> <em id="numFilesStorages"><?php p($_['storage']['num_storages']); ?></em></p>
+		<p><?php p($l->t('Free Space:')); ?> <em id="systemDiskFreeSpace"><?php p($_['system']['freespace']); ?></em>
 		</p>
-		<p>
-			<?php p($l->t('DNS'));?>:
-			<span class="info"><?php p($_['networkinfo']['dns']);?></span>
-		</p>
-		<p>
-			<?php p($l->t('Gateway'));?>:
-			<span class="info"><?php p($_['networkinfo']['gateway']);?></span>
-		</p>
-		<p>
-		<?php foreach ($_['networkinterfaces'] as $interface) {?>
+	</div>
 
-			<div class="infobox">
-				<h3><?php p($interface['interface'])?></h3>
-				<p>
-					<?php p($l->t('Status'));?>:
-					<span class="info"><?php p($interface['status'])?></span>
-				</p>
-				<p>
-					<?php p($l->t('Speed'));?>:
-					<span class="info"><?php p($interface['speed'] . ' ' . $interface['duplex'])?></span>
-				</p>
-				<?php if (!empty($interface['mac'])) {?>
-					<p>
-						<?php p($l->t('MAC'));?>:
-						<span class="info"><?php p($interface['mac'])?></span>
-					</p>
-				<?php }?>
-				<p>
-					<?php p($l->t('IPv4'));?>:
-					<span class="info"><?php p($interface['ipv4'])?></span>
-				</p>
-				<p>
-					<?php p($l->t('IPv6'));?>:
-					<span class="info"><?php p($interface['ipv6'])?></span>
-				</p>
+	<!-- NETWORK -->
+	<div class="section network-infos">
+		<div class="row">
+			<div class="col col-12">
+				<h2>
+					<img class="infoicon" src="<?php p(image_path('serverinfo', 'sort.svg')); ?>">
+					<?php p($l->t('Network')); ?>
+				</h2>
 			</div>
 
-		<?php }?>
+			<div class="col col-12">
+				<?php p($l->t('Hostname')); ?>:
+				<span class="info"><?php p($_['networkinfo']['hostname']); ?></span>
+			</div>
+			<div class="col col-12">
+				<?php p($l->t('DNS')); ?>:
+				<span class="info"><?php p($_['networkinfo']['dns']); ?></span>
+			</div>
+			<div class="col col-12">
+				<?php p($l->t('Gateway')); ?>:
+				<span class="info"><?php p($_['networkinfo']['gateway']); ?></span>
+			</div>
+			<div class="col col-12">
+				<div class="row">
+					<?php foreach ($_['networkinterfaces'] as $interface): ?>
 
-	</p>
-</div>
+						<div class="col col-4 col-l-6 col-m-12">
+							<div class="infobox">
+								<div class="interface-wrapper">
+									<h3><?php p($interface['interface']) ?></h3>
+									<?php p($l->t('Status')); ?>:
+									<span class="info"><?php p($interface['status']) ?></span><br>
+									<?php p($l->t('Speed')); ?>:
+									<span
+										class="info"><?php p($interface['speed'] . ' ' . $interface['duplex']) ?></span><br>
+									<?php if (!empty($interface['mac'])): ?>
+										<?php p($l->t('MAC')); ?>:
+										<span class="info"><?php p($interface['mac']) ?></span><br>
+									<?php endif; ?>
+									<?php p($l->t('IPv4')); ?>:
+									<span class="info"><?php p($interface['ipv4']) ?></span><br>
+									<?php p($l->t('IPv6')); ?>:
+									<span class="info"><?php p($interface['ipv6']) ?></span>
+								</div>
+							</div>
+						</div>
 
-<!-- ACTIVE USERS -->
-<div class="section" id="activeUsersSection">
-	<div class="infobox">
-		<h2><?php p($l->t('Active users'));?></h2>
-		<br>
-		<div class="chart-container">
-			<canvas width="400" height="250" data-users="<?php p(json_encode($_['activeUsers']))?>" class="barchart" id="activeuserscanvas"></canvas>
+					<?php endforeach; ?>
+				</div>
+			</div>
 		</div>
-		<p>
-			<?php p($l->t('Total users:'));?>
-			<em id="numUsersStorage"><?php p($_['storage']['num_users']);?></em>
-		</p>
 	</div>
-</div>
 
-<!-- SHARES -->
-<div class="section" id="sharesSection">
-	<div class="infobox">
-		<h2><?php p($l->t('Shares'));?></h2>
-		<br>
-		<div class="chart-container">
-			<canvas data-shares="<?php p(json_encode($_['shares']))?>" class="barchart" id="sharecanvas"></canvas>
+	<!-- ACTIVE USER & SHARES-->
+	<div class="section active-users-shares">
+		<div class="row">
+
+			<div class="col col-6 col-m-12">
+				<!-- ACTIVE USERS -->
+				<h2>
+					<img class="infoicon" src="<?php p(image_path('serverinfo', 'user.svg')); ?>">
+					<?php p($l->t('Active users')); ?>
+				</h2>
+				<div class="infobox">
+					<div class="active-users-wrapper">
+						<br>
+						<div class="chart-container">
+							<canvas data-users="<?php p(json_encode($_['activeUsers'])) ?>"
+									class="barchart"
+									id="activeuserscanvas"
+									style="width:100%; height:200px"
+									width="300" height="300"
+							></canvas>
+						</div>
+						<p>
+							<?php p($l->t('Total users:')); ?>
+							<em id="numUsersStorage"><?php p($_['storage']['num_users']); ?></em>
+						</p>
+					</div>
+				</div>
+			</div>
+
+			<div class="col col-6 col-m-12">
+				<!-- SHARES -->
+				<h2>
+					<img class="infoicon" src="<?php p(image_path('serverinfo', 'folder.svg')); ?>">
+					<?php p($l->t('Shares')); ?>
+				</h2>
+				<div class="infobox">
+					<div class="shares-wrapper">
+						<br>
+						<div class="chart-container">
+							<canvas data-shares="<?php p(json_encode($_['shares'])) ?>"
+									class="barchart"
+									id="sharecanvas"
+									style="width:100%; height:200px"
+									width="300" height="300"
+							></canvas>
+						</div>
+					</div>
+				</div>
+			</div>
 		</div>
 	</div>
-</div>
 
-<!-- PHPINFO -->
-<div class="section" id="phpSection">
-	<h2>
-		<img class="infoicon" src="<?php p(image_path('serverinfo', 'hdd-o.svg'));?>">
-		<?php p($l->t('PHP'));?>
-	</h2>
-	<div class="infobox">
-		<p>
-			<?php p($l->t('Version:'));?>
-			<em id="phpVersion"><?php p($_['php']['version']);?></em>
-		</p>
-		<p>
-			<?php p($l->t('Memory Limit:'));?>
-			<em id="phpMemLimit"><?php p($_['php']['memory_limit']);?></em>
-		</p>
-		<p>
-			<?php p($l->t('Max Execution Time:'));?>
-			<em id="phpMaxExecTime"><?php p($_['php']['max_execution_time']);?></em>
-		</p>
-		<p>
-			<?php p($l->t('Upload max size:'));?>
-			<em id="phpUploadMaxSize"><?php p($_['php']['upload_max_filesize']);?></em>
-		</p>
-	</div>
-</div>
+	<!-- PHP, DATABASE -->
+	<div class="section php-database">
+		<div class="row">
+			<div class="col col-6 col-m-12">
+				<!-- PHPINFO -->
+				<h2>
+					<img class="infoicon" src="<?php p(image_path('serverinfo', 'hdd-o.svg')); ?>">
+					<?php p($l->t('PHP')); ?>
+				</h2>
+				<div class="infobox">
+					<div class="phpinfo-wrapper">
+						<p>
+							<?php p($l->t('Version:')); ?>
+							<em id="phpVersion"><?php p($_['php']['version']); ?></em>
+						</p>
+						<p>
+							<?php p($l->t('Memory Limit:')); ?>
+							<em id="phpMemLimit"><?php p($_['php']['memory_limit']); ?></em>
+						</p>
+						<p>
+							<?php p($l->t('Max Execution Time:')); ?>
+							<em id="phpMaxExecTime"><?php p($_['php']['max_execution_time']); ?></em>
+						</p>
+						<p>
+							<?php p($l->t('Upload max size:')); ?>
+							<em id="phpUploadMaxSize"><?php p($_['php']['upload_max_filesize']); ?></em>
+						</p>
+					</div>
+				</div>
+			</div>
 
-<!-- DATABASE -->
-<div class="section" id="databaseSection">
-	<h2>
-		<img class="infoicon" src="<?php p(image_path('serverinfo', 'hdd-o.svg'));?>">
-		<?php p($l->t('Database'));?>
-	</h2>
-	<div class="infobox">
-		<p>
-			<?php p($l->t('Type:'));?>
-			<em id="databaseType"><?php p($_['database']['type']);?></em>
-		</p>
-		<p>
-			<?php p($l->t('Version:'));?>
-			<em id="databaseVersion"><?php p($_['database']['version']);?></em>
-		</p>
-		<p>
-			<?php p($l->t('Size:'));?>
-			<em id="databaseSize"><?php p($_['database']['size']);?></em>
-		</p>
+			<div class="col col-6 col-m-12">
+				<!-- DATABASE -->
+				<h2>
+					<img class="infoicon" src="<?php p(image_path('serverinfo', 'hdd-o.svg')); ?>">
+					<?php p($l->t('Database')); ?>
+				</h2>
+				<div class="infobox">
+					<div class="database-wrapper">
+						<p>
+							<?php p($l->t('Type:')); ?>
+							<em id="databaseType"><?php p($_['database']['type']); ?></em>
+						</p>
+						<p>
+							<?php p($l->t('Version:')); ?>
+							<em id="databaseVersion"><?php p($_['database']['version']); ?></em>
+						</p>
+						<p>
+							<?php p($l->t('Size:')); ?>
+							<em id="databaseSize"><?php p($_['database']['size']); ?></em>
+						</p>
+					</div>
+				</div>
+			</div>
+		</div>
 	</div>
-</div>
 
-<!-- OCS ENDPOINT -->
-<div class="section" id="ocsEndPoint">
-	<h2><?php p($l->t('External monitoring tool'));?></h2>
-	<p>
-		<?php p($l->t('You can connect an external monitoring tool by using this end point:'));?>
-	</p>
-	<div>
-		<input type="text" readonly="readonly" id="monitoring-endpoint-url" value="<?php echo p($_['ocs']); ?>" />
-		<a class="clipboardButton icon icon-clippy" data-clipboard-target="#monitoring-endpoint-url"></a>
-		<span class="icon-info svg" title="" data-original-title="<?php p($l->t('Did you know?'));?> <?php p($l->t('Appending "?format=json" at the end of the URL gives you the result in JSON format!'));?>"></span>
+	<!-- EXTERNAL MONITORING-->
+	<div class="section monitoring">
+		<div class="row">
+			<div class="col col-6 col-m-12">
+				<!-- OCS ENDPOINT -->
+				<h2><?php p($l->t('External monitoring tool')); ?></h2>
+				<p>
+					<?php p($l->t('You can connect an external monitoring tool by using this end point:')); ?>
+				</p>
+				<div class="monitoring-wrapper">
+					<input type="text" readonly="readonly" id="monitoring-endpoint-url"
+						   value="<?php echo p($_['ocs']); ?>"/>
+					<a class="clipboardButton icon icon-clippy" data-clipboard-target="#monitoring-endpoint-url"></a>
+					<span class="icon-info svg" title=""
+						  data-original-title="<?php p($l->t('Did you know?')); ?> <?php p($l->t('Appending "?format=json" at the end of the URL gives you the result in JSON format!')); ?>"></span>
+				</div>
+			</div>
+		</div>
 	</div>
+
 </div>