Fix appearance and some bugs (#333)

Improved appearance and repair of text strings.

_Before change:_

![obraz](https://user-images.githubusercontent.com/47037905/139727055-e05263a1-7f60-4ddb-bd3c-9ad44828874c.png)

_After change:_

![obraz](https://user-images.githubusercontent.com/47037905/139806654-cd150768-60a4-42f5-80f6-b65e11dadc0c.png)

_In Polish 😁:_

![obraz](https://user-images.githubusercontent.com/47037905/139806684-f1eb6f30-0546-4c96-b7d4-4ed7e59b492d.png)

Solves Issue:  #324 and #232.

---

_Before change:_

![obraz](https://user-images.githubusercontent.com/47037905/139807160-a4df3351-e411-4a87-bda6-7d8f5f5d3fcc.png)

_After change:_

![obraz](https://user-images.githubusercontent.com/47037905/139807192-0817b755-7a14-4950-9a6c-e1b45124b76a.png)

---

_Before change:_

![obraz](https://user-images.githubusercontent.com/47037905/139727225-367be295-d843-4a99-be3e-801ae9472903.png)

_After change_:

![obraz](https://user-images.githubusercontent.com/47037905/139727261-b964cd42-b59c-41ca-828b-5760524109c6.png)

---

_Before change:_

![obraz](https://user-images.githubusercontent.com/47037905/139727293-a3ee4e16-5d96-4f42-ba40-1d19540da605.png)

_After change:_

![obraz](https://user-images.githubusercontent.com/47037905/139816641-3f74ff91-28ce-4f7f-b07c-a22ff6f545d9.png)

---

_Before change:_

![obraz](https://user-images.githubusercontent.com/47037905/139727341-e783bf1f-abcf-4388-9471-830b75aae973.png)

_After change:_

![obraz](https://user-images.githubusercontent.com/47037905/139727370-5d619ce9-e932-4250-8e70-a788fff8ae79.png)

---

_Before change:_

![obraz](https://user-images.githubusercontent.com/47037905/139727403-85a59cd9-7e56-46b9-ab05-c216d883d4ff.png)

_After change:_

![obraz](https://user-images.githubusercontent.com/47037905/143671623-48299c9a-0028-4f80-9d38-8d59b57ac544.png)

---

_Before change:_

![obraz](https://user-images.githubusercontent.com/47037905/139824967-31c59afd-c87c-4102-b9fe-cb8de91dff0b.png)

_After change:_

![obraz](https://user-images.githubusercontent.com/47037905/139825560-a29aa21a-37b6-45ef-8668-595c3cf5c0e5.png)

Signed-off-by: Valdnet <47037905+Valdnet@users.noreply.github.com>

3 files changed, 73 insertions, 72 deletions

diff --git a/css/style.scss b/css/style.scss
index 9a91bfc..add3d5e 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -2,21 +2,12 @@
 	max-width: 100vw;
 }
 
-.table-wrapper {
-	overflow-x: auto;
-}
-
-.server-infos-table {
-	margin-bottom: 25px;
-}
-
-.server-infos-table td:first-child {
-	width: 120px;
-}
-
 .monitoring-wrapper {
 	display: -webkit-flex;
 	display: flex;
+	position: left;
+	max-width: 50%;
+	min-width: 50%;
 }
 
 .monitoring-wrapper > input {
diff --git a/js/script.js b/js/script.js
index 519841b..6fa41ea 100644
--- a/js/script.js
+++ b/js/script.js
@@ -139,23 +139,31 @@
 			});
 		}
 
-		$cpuFooterInfo.text(t('serverinfo', 'Load average') + ": " + cpu1 + " (" + t('serverinfo', 'Last minute') + ")");
+		$cpuFooterInfo.text(t('serverinfo', 'Load average: {cpu} (last minute)', { cpu: cpu1 }));
 		cpuLoadLine.append(new Date().getTime(), cpu1);
 	}
+	
+	function isMemoryStat(memTotal, memFree) {
+		if (memTotal === 'N/A' || memFree === 'N/A') {
+			return false;
+		} else {
+			return true;
+		}
+	}
+	
+	function isSwapStat(swapTotal, swapFree) {
+		if (swapTotal === 'N/A' || swapFree === 'N/A') {
+			return false;
+		} else {
+			return true;
+		}
+	}
 
 	function updateMemoryStatistics(memTotal, memFree, swapTotal, swapFree) {
 		var $memFooterInfo = $('#memFooterInfo');
+		var $swapFooterInfo = $('#swapFooterInfo');
 		var $memoryCanvas = $('#memorycanvas');
 
-		if (memTotal === 'N/A' || memFree === 'N/A') {
-			$memFooterInfo.text(t('serverinfo', 'Memory info not available'));
-			$memoryCanvas.addClass('hidden');
-			return;
-
-		} else if ($memoryCanvas.hasClass('hidden')) {
-			$memoryCanvas.removeClass('hidden');
-		}
-
 		var memTotalBytes = memTotal * 1024,
 			memUsageBytes = (memTotal - memFree) * 1024,
 			memTotalGB = memTotal / (1024 * 1024),
@@ -196,12 +204,24 @@
 			});
 		}
 
-		$memFooterInfo
-			.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));
-		swapUsageLine.append(new Date().getTime(), swapUsageGB);
+		if (isMemoryStat(memTotal, memFree)) {
+			$memFooterInfo.text(t('serverinfo','RAM: Total: {memTotalBytes}/Current usage: {memUsageBytes}', { memTotalBytes: OC.Util.humanFileSize(memTotalBytes), memUsageBytes: OC.Util.humanFileSize(memUsageBytes) }));
+			memoryUsageLine.append(new Date().getTime(), memUsageGB);
+			
+			if ($memoryCanvas.hasClass('hidden')) {
+				$memoryCanvas.removeClass('hidden');
+			}
+		} else {
+			$memFooterInfo.text(t('serverinfo', 'RAM info not available'));
+			$memoryCanvas.addClass('hidden');
+		}
+				
+		if (isSwapStat(swapTotal, swapFree)) {
+			$swapFooterInfo.text(t('serverinfo','SWAP: Total: {swapTotalBytes}/Current usage: {swapUsageBytes}', { swapTotalBytes: OC.Util.humanFileSize(swapTotalBytes), swapUsageBytes: OC.Util.humanFileSize(swapUsageBytes) }));
+			swapUsageLine.append(new Date().getTime(), swapUsageGB);
+		} else {
+			$swapFooterInfo.text(t('serverinfo', 'SWAP info not available'));
+		}
 	}
 
 	function updateShareStatistics() {
@@ -231,7 +251,7 @@
 						t('serverinfo', 'Users'),
 						t('serverinfo', 'Groups'),
 						t('serverinfo', 'Links'),
-						t('serverinfo', 'Mails'),
+						t('serverinfo', 'Emails'),
 						t('serverinfo', 'Federated sent'),
 						t('serverinfo', 'Federated received'),
 						t('serverinfo', 'Talk conversations'),
diff --git a/templates/settings-admin.php b/templates/settings-admin.php
index 2067866..1e1ed00 100644
--- a/templates/settings-admin.php
+++ b/templates/settings-admin.php
@@ -54,36 +54,26 @@ $disks = $_['diskinfo'];
 					<img class="infoicon" src="<?php p(image_path('core', 'actions/screen.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 p($_['cpu']) ?></td>
-						</tr>
-						<tr>
-							<td><?php p($l->t('Memory')); ?>:</td>
-							<td><?php p(FormatMegabytes($memory->getMemTotal())) ?></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>
-						</tbody>
-					</table>
-				</div>
 			</div>
-
+			<div class="col col-12">			
+				<p><?php p($l->t('Operating System').':'); ?> <strong id="numFilesStorage"><?php p($_['osname']); ?></strong></p>
+				<p><?php p($l->t('CPU').':'); ?>
+				<?php if ($_['cpu'] !== 'Unknown Processor'): ?>
+				<strong id="numFilesStorage"><?php p($_['cpu']) ?></strong></p>
+				<?php else: ?>
+				<strong id="numFilesStorage"><?php p($l->t('Unknown Processor')) ?></strong></p>
+				<?php endif; ?>
+				<p><?php p($l->t('Memory').':'); ?>
+				<?php if ($memory->getMemTotal() > 0): ?> <strong id="numFilesStorage"><?php p(FormatMegabytes($memory->getMemTotal())) ?></strong></p>
+				<?php endif; ?>
+				<p><?php p($l->t('Server time').':'); ?> <strong id="numFilesStorage"><span class="info" id="servertime"></span></strong></p>
+				<p><?php p($l->t('Uptime').':'); ?> <strong id="numFilesStorage"><span class="info" id="uptime"></span></strong></p>
+			</div>
+		</div>
+	</div>
+	
+	<div class="section server-infos-two">	
+		<div class="row">
 			<div class="col col-6 col-l-12">
 				<h2>
 					<img class="infoicon" src="<?php p(image_path('core', 'actions/screen.svg')); ?>">
@@ -152,10 +142,10 @@ $disks = $_['diskinfo'];
 			<?php p($l->t('You will get a notification once one of your disks is nearly full.')); ?>
 		</div>
 
-		<p><?php p($l->t('Files:')); ?> <strong id="numFilesStorage"><?php p($_['storage']['num_files']); ?></strong></p>
-		<p><?php p($l->t('Storages:')); ?> <strong id="numFilesStorages"><?php p($_['storage']['num_storages']); ?></strong></p>
+		<p><?php p($l->t('Files').':'); ?> <strong id="numFilesStorage"><?php p($_['storage']['num_files']); ?></strong></p>
+		<p><?php p($l->t('Storages').':'); ?> <strong id="numFilesStorages"><?php p($_['storage']['num_storages']); ?></strong></p>
 		<?php if ($_['system']['freespace'] !== null): ?>
-			<p><?php p($l->t('Free Space:')); ?> <strong id="systemDiskFreeSpace"><?php p($_['system']['freespace']); ?></strong></p>
+			<p><?php p($l->t('Free Space').':'); ?> <strong id="systemDiskFreeSpace"><?php p($_['system']['freespace']); ?></strong></p>
 		<?php endif; ?>
 	</div>
 
@@ -234,7 +224,7 @@ $disks = $_['diskinfo'];
 							></canvas>
 						</div>
 						<p>
-							<?php p($l->t('Total users:')); ?>
+							<?php p($l->t('Total users').':'); ?>
 							<em id="numUsersStorage"><?php p($_['storage']['num_users']); ?></em>
 						</p>
 					</div>
@@ -276,19 +266,19 @@ $disks = $_['diskinfo'];
 				<div class="infobox">
 					<div class="phpinfo-wrapper">
 						<p>
-							<?php p($l->t('Version:')); ?>
+							<?php p($l->t('Version').':'); ?>
 							<em id="phpVersion"><?php p($_['php']['version']); ?></em>
 						</p>
 						<p>
-							<?php p($l->t('Memory Limit:')); ?>
+							<?php p($l->t('Memory limit').':'); ?>
 							<em id="phpMemLimit"><?php p($_['php']['memory_limit']); ?></em>
 						</p>
 						<p>
-							<?php p($l->t('Max Execution Time:')); ?>
+							<?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:')); ?>
+							<?php p($l->t('Upload max size').':'); ?>
 							<em id="phpUploadMaxSize"><?php p($_['php']['upload_max_filesize']); ?></em>
 						</p>
 					</div>
@@ -304,15 +294,15 @@ $disks = $_['diskinfo'];
 				<div class="infobox">
 					<div class="database-wrapper">
 						<p>
-							<?php p($l->t('Type:')); ?>
+							<?php p($l->t('Type').':'); ?>
 							<em id="databaseType"><?php p($_['database']['type']); ?></em>
 						</p>
 						<p>
-							<?php p($l->t('Version:')); ?>
+							<?php p($l->t('Version').':'); ?>
 							<em id="databaseVersion"><?php p($_['database']['version']); ?></em>
 						</p>
 						<p>
-							<?php p($l->t('Size:')); ?>
+							<?php p($l->t('Size').':'); ?>
 							<em id="databaseSize"><?php p($_['database']['size']); ?></em>
 						</p>
 					</div>
@@ -324,11 +314,11 @@ $disks = $_['diskinfo'];
 	<!-- EXTERNAL MONITORING-->
 	<div class="section monitoring">
 		<div class="row">
-			<div class="col col-6 col-m-12">
+			<div class="col 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:')); ?>
+					<?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']); ?>"/>
@@ -338,7 +328,7 @@ $disks = $_['diskinfo'];
 					<?php p($l->t('Appending "?format=json" at the end of the URL gives you the result in JSON.')); ?>
 				</p>
 				<p>
-					<?php p($l->t('To use an access token please generate one then set it using the following command:')); ?>
+					<?php p($l->t('To use an access token please generate one then set it using the following command').':'); ?>
 					<div><i>occ config:app:set serverinfo token --value yourtoken</i></div>
 				</p>
 				<p>