Rewrite statistics UI mobile-first (#3490)

* Enable "click outside to close" top bar dropdowns

* Rewrite statistics UI mobile-first

* Include quota

---------

Co-authored-by: Jaap Marcus <9754650+jaapmarcus@users.noreply.github.com>

web/css/src/themes/dark.css

@@ -418,40 +418,20 @@ strong {
 	color: #fff !important;
 }
 
-.l-unit--suspended .l-unit__name,
 .l-unit--suspended b,
-.l-unit--outdated .l-unit__name,
 .l-unit--outdated b {
 	color: #606060;
 }
 
-.l-unit--outdated .l-unit__name {
-}
-
 .l-unit--outdated b {
 	color: #d4d4d4;
 }
 
-.l-unit--suspended .l-percent {
-}
-
-.l-unit--suspended .l-percent__fill {
-}
-
-.l-unit--suspended.selected .l-unit__name,
-.l-unit--suspended.selected .l-unit__name span {
-	color: #707070;
-}
-
 .l-unit--suspended.selected {
 	background-color: #454545 !important;
 	color: #707070 !important;
 }
 
-.l-unit__name {
-	color: #dadada;
-}
-
 .l-unit__stat-col--left {
 	& a,
 	& a:visited {
@@ -463,6 +443,30 @@ strong {
 	}
 }
 
+/* Statistics
+   ========================================================================== */
+
+.stats-item {
+	border-bottom-color: #404040;
+
+	@media (--viewport-large) {
+		&:hover {
+			background-color: #353535;
+			border-left-color: #353535;
+			border-right-color: #353535;
+			box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
+		}
+	}
+}
+
+.stats-item-header-title {
+	color: #eee;
+}
+
+.stats-item-summary-title {
+	border-bottom-color: #585858;
+}
+
 /* Forms
    ========================================================================== */
 
@@ -833,19 +837,6 @@ strong {
 	background: #282828;
 }
 
-.l-percent {
-	border-bottom: 2px solid #585858 !important;
-}
-
-.body-stats .l-unit__name {
-	color: #eee !important;
-}
-
-.statistics-count {
-	border-bottom: 1px dotted #707070;
-	border-right: 1px dotted #707070;
-}
-
 .body-stats .units .l-unit {
 	background-color: #282828;
 	border-bottom: 1px solid #404040;

web/css/src/themes/default.css

@@ -974,10 +974,6 @@
 	background-color: #eff5fc;
 }
 
-.units .l-unit.focus .l-unit__name {
-	color: #36b3a9;
-}
-
 .units .l-unit.focus .l-unit-toolbar__col--right {
 	display: block;
 }
@@ -1012,34 +1008,15 @@
 	color: #da1010;
 }
 
-.l-unit--suspended .l-unit__name,
 .l-unit--suspended b,
-.l-unit--outdated .l-unit__name,
 .l-unit--outdated b {
 	color: #c0c0c0;
 }
 
-.l-unit--outdated .l-unit__name {
-	color: #333;
-}
-
 .l-unit--outdated b {
 	color: #4b4b4b;
 }
 
-.l-unit--suspended .l-percent {
-	border-color: #fff;
-}
-
-.l-unit--suspended .l-percent__fill {
-	background-color: #fff;
-}
-
-.l-unit--suspended .l-unit__name,
-.l-unit--suspended .l-unit__name span {
-	color: #adadad;
-}
-
 .l-unit--suspended.selected {
 	background-color: #f2eab8 !important;
 	color: #b2ac87 !important;
@@ -1052,19 +1029,10 @@
 }
 
 .l-unit--suspended.selected b,
-.l-unit--outdated.selected .l-unit__name,
-.l-unit--outdated.selected b,
-.l-unit--suspended.selected .l-percent,
-.l-unit--suspended.selected .l-percent__fill,
-.l-unit--suspended.selected .l-unit__name,
-.l-unit--suspended.selected .l-unit__name span {
+.l-unit--outdated.selected b {
 	color: #333 !important;
 }
 
-.l-unit.selected .l-percent {
-	border-bottom: 1px dotted #777;
-}
-
 .l-unit--selected {
 	background-color: #d1eddc;
 }
@@ -1089,15 +1057,6 @@
 	padding-bottom: 10px;
 }
 
-.l-unit__col--left {
-	width: 110px;
-	padding-right: 10px;
-}
-
-.units.compact .l-unit__col--left {
-	vertical-align: top;
-}
-
 .l-unit__col--right.total {
 	padding-left: 16px;
 }
@@ -1120,75 +1079,6 @@
 	display: block;
 }
 
-.l-unit__name {
-	color: #414141;
-	font-size: 1.4rem;
-	margin-top: 10px;
-	margin-bottom: 10px;
-	font-weight: 500;
-	letter-spacing: -0.02em;
-}
-
-.l-unit__servername {
-	color: #414141;
-	font-size: 1.7rem;
-	margin-bottom: 10px;
-	font-weight: 300;
-	letter-spacing: -0.02em;
-}
-
-.l-unit__stats.separate,
-.l-unit__name.separate {
-	padding-bottom: 15px;
-}
-
-.body-stats .l-unit__name {
-	margin-left: -42px;
-	margin-top: 12px;
-	color: #606060;
-}
-
-.l-unit__name span {
-	color: #999;
-	margin-left: 30px;
-	font-style: italic;
-
-	&:first-of-type {
-		margin-left: 39px;
-	}
-}
-
-.l-unit__name b {
-	font-weight: normal;
-	font-style: italic;
-}
-
-.l-unit__stats {
-	margin-bottom: 10px;
-	margin-left: 15%;
-	border-left: 1px solid transparent;
-	border-right: 1px solid transparent;
-
-	&:hover {
-		border-left: 1px solid transparent;
-		border-right: 1px solid transparent;
-		box-shadow: none;
-		background: none;
-	}
-
-	& table {
-		table-layout: fixed;
-		margin-top: -54px;
-		margin-left: -20px;
-	}
-
-	& td {
-		height: 32px;
-		padding-bottom: 4px;
-		vertical-align: middle;
-	}
-}
-
 .body-stats .l-unit__stat-col--left {
 	width: 180px;
 }
@@ -1352,37 +1242,142 @@
 	display: inline-block;
 }
 
-.l-unit__stat-cols {
-	padding-right: 10px;
+/* Statistics
+   ========================================================================== */
+
+.stats {
 }
 
-.l-unit__stat-cols.last {
-	padding-right: 0;
+.stats-item {
+	padding-top: 20px;
+	padding-bottom: 20px;
+	border-bottom: 1px solid #ddd;
+
+	&:last-child {
+		border-bottom: none;
+	}
+
+	@media (--viewport-large) {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		padding: 30px 20px;
+
+		&:hover {
+			background-color: #f8f8f8;
+			border-left: 1px solid #ddd;
+			border-right: 1px solid #ddd;
+			box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
+		}
+	}
 }
 
-.l-unit__stat-cols.graph {
-	width: 242px;
+.stats-item-header {
+	display: flex;
+	align-items: center;
+	margin-bottom: 15px;
+
+	@media (--viewport-large) {
+		padding-left: 10px;
+		margin-right: 60px;
+	}
+}
+
+.stats-item-header-icon {
+	font-size: 3em;
+}
+
+.stats-item-header-title {
+	color: #606060;
+	font-size: 1.4rem;
+	font-weight: 500;
+}
+
+.stats-item-content {
+	@media (--viewport-medium) {
+		display: grid;
+		grid-template-columns: 1fr 2fr;
+		grid-gap: 20px;
+		align-items: flex-start;
+	}
+
+	@media (--viewport-large) {
+		flex-grow: 1;
+	}
 }
 
-.l-percent {
+.stats-item-summary {
+}
+
+.stats-item-summary-title {
+	font-size: 0.8rem;
+	display: flex;
+	justify-content: space-between;
 	border-bottom: 3px solid #e6e6e6;
-	margin-top: 2px;
-	width: 242px;
+	padding-bottom: 5px;
+	margin-bottom: 10px;
 }
 
-.l-percent__fill {
-	background-color: #54e000;
-	height: 3px;
-	position: relative;
-	bottom: -3px;
+.stats-item-summary-list {
+	font-size: 0.75rem;
+}
+
+.stats-item-summary-list-item {
+	display: flex;
+	justify-content: space-between;
+}
+
+.stats-item-list {
+	font-size: 0.75rem;
+	margin-top: 10px;
+
+	@media (--viewport-small) {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		grid-gap: 5px 40px;
+	}
+
+	@media (--viewport-medium) {
+		font-size: 0.8rem;
+		grid-row-gap: 20px;
+		margin-top: 0;
+	}
+}
+
+.stats-item-list-item {
+	display: flex;
+	justify-content: space-between;
+	margin-bottom: 5px;
+
+	&:last-child {
+		margin-bottom: 0;
+	}
+
+	@media (--viewport-small) {
+		margin-bottom: 0;
+	}
 }
 
-.statistics-count {
-	min-width: 24px;
+.stats-item-list-item-label {
+	font-style: italic;
+
+	@media (--viewport-medium) {
+		flex-grow: 1;
+		text-align: right;
+	}
+}
+
+.stats-item-list-item-value {
+	font-weight: 700;
 	text-align: right;
-	border-bottom: 1px dotted #ddd;
+	min-width: 25px;
+	padding-right: 5px;
 	border-right: 1px dotted #ddd;
-	padding-right: 4px;
+	border-bottom: 1px dotted #ddd;
+
+	@media (--viewport-medium) {
+		margin-left: 40px;
+	}
 }
 
 /* Forms

web/css/src/themes/flat.css

@@ -82,6 +82,17 @@ strong {
 	box-shadow: none;
 }
 
+/* Statistics
+   ========================================================================== */
+
+.stats-item {
+	@media (--viewport-large) {
+		&:hover {
+			box-shadow: none;
+		}
+	}
+}
+
 /* Badge component
    ========================================================================== */
 

web/css/src/themes/vestia.css

@@ -233,8 +233,15 @@ strong {
 	box-shadow: none;
 }
 
-.l-unit__name {
-	letter-spacing: 0 !important;
+/* Statistics
+   ========================================================================== */
+
+.stats-item {
+	@media (--viewport-large) {
+		&:hover {
+			box-shadow: none;
+		}
+	}
 }
 
 /* Buttons

web/css/src/utilities.css

@@ -39,6 +39,10 @@
 	font-style: italic !important;
 }
 
+.u-text-bold {
+	font-weight: bold !important;
+}
+
 .u-truncate {
 	overflow: hidden !important;
 	text-overflow: ellipsis !important;

web/css/themes/flat.min.css

@@ -1 +1 @@
-:root{--alert-box-shadow:none;--alert-text-shadow:none}b,strong{font-weight:600}.top-bar{background:#5070a6;box-shadow:none}.top-bar-usage-inner{text-shadow:none}.top-bar-notifications-list{border:1px solid #ccc;box-shadow:none}.top-bar-menu-link{text-shadow:none}.top-bar-menu-link:active,.top-bar-menu-link:hover{background:#fff;box-shadow:none}.top-bar-menu-link.active{background:#fff}.toolbar-sorting-menu{background-color:#fff;border-color:#ccc;box-shadow:none}.table-header{background:#fafafa}.l-unit:hover,.table-header{box-shadow:none}.l-unit__stat-col--left a,.l-unit__stat-col--left a:hover,.l-unit__stat-col--left a:visited{color:#5f7eb3}.badge,.l-unit:hover,.units .l-unit:hover{box-shadow:none}.collapse-header{background:#fafafa;box-shadow:none}.button,.form-control,.form-select{box-shadow:none}.button{background:linear-gradient(180deg,#ebf3f9 0,#dfebf5)}.button:hover{background:linear-gradient(180deg,#f1f8fd 0,#e3f0fb);box-shadow:none;color:#6986b7}.button:active{background:linear-gradient(180deg,#d2e8fa 0,#c2e0f8);box-shadow:none}.button-secondary{background:linear-gradient(180deg,#fafafa 0,#f1f1f1);box-shadow:none}.button-danger:hover{background:#fcd3cf;border-color:#f27e71;color:#f4301a}.button-danger:active{background:#a91200;border-color:#f4301a;color:#fff}.modal{box-shadow:0 2px 11px 0 rgba(0,0,0,.5)}.body-login,.body-reset{background:#5f7eb3}@media (min-width:480px){.login{background-color:hsla(0,0%,100%,.8);box-shadow:0 2px 10px rgba(0,0,0,.3),inset 0 0 2px #fff}}
+:root{--alert-box-shadow:none;--alert-text-shadow:none}b,strong{font-weight:600}.top-bar{background:#5070a6;box-shadow:none}.top-bar-usage-inner{text-shadow:none}.top-bar-notifications-list{border:1px solid #ccc;box-shadow:none}.top-bar-menu-link{text-shadow:none}.top-bar-menu-link:active,.top-bar-menu-link:hover{background:#fff;box-shadow:none}.top-bar-menu-link.active{background:#fff}.toolbar-sorting-menu{background-color:#fff;border-color:#ccc;box-shadow:none}.table-header{background:#fafafa}.l-unit:hover,.table-header{box-shadow:none}.l-unit__stat-col--left a,.l-unit__stat-col--left a:hover,.l-unit__stat-col--left a:visited{color:#5f7eb3}.l-unit:hover,.units .l-unit:hover{box-shadow:none}@media (min-width:1024px){.stats-item:hover{box-shadow:none}}.badge{box-shadow:none}.collapse-header{background:#fafafa;box-shadow:none}.button,.form-control,.form-select{box-shadow:none}.button{background:linear-gradient(180deg,#ebf3f9 0,#dfebf5)}.button:hover{background:linear-gradient(180deg,#f1f8fd 0,#e3f0fb);box-shadow:none;color:#6986b7}.button:active{background:linear-gradient(180deg,#d2e8fa 0,#c2e0f8);box-shadow:none}.button-secondary{background:linear-gradient(180deg,#fafafa 0,#f1f1f1);box-shadow:none}.button-danger:hover{background:#fcd3cf;border-color:#f27e71;color:#f4301a}.button-danger:active{background:#a91200;border-color:#f4301a;color:#fff}.modal{box-shadow:0 2px 11px 0 rgba(0,0,0,.5)}.body-login,.body-reset{background:#5f7eb3}@media (min-width:480px){.login{background-color:hsla(0,0%,100%,.8);box-shadow:0 2px 10px rgba(0,0,0,.3),inset 0 0 2px #fff}}

web/templates/includes/panel.php

@@ -69,6 +69,7 @@
 						<ul
 							x-cloak
 							x-show="open"
+							x-on:click.outside="open = false"
 							class="top-bar-notifications-list"
 						>
 							<template x-if="initialized && notifications.length == 0">
@@ -130,7 +131,7 @@
 						</span>
 					</button>
 
-					<ul x-cloak x-show="open" class="top-bar-menu-list">
+					<ul x-cloak x-show="open" x-on:click.outside="open = false" class="top-bar-menu-list">
 
 						<!-- File Manager -->
 						<?php if (isset($_SESSION["FILE_MANAGER"]) && !empty($_SESSION["FILE_MANAGER"]) && $_SESSION["FILE_MANAGER"] == "true") { ?>

web/templates/pages/list_stats.php

@@ -48,179 +48,187 @@
 <div class="container units">
 
 	<!-- Begin statistics list item loop -->
-	<?php foreach ($data as $key => $value) {
- 	++$i; ?>
-		<div class="header animate__animated animate__fadeIn">
-			<div class="l-unit">
-				<div class="l-unit-toolbar clearfix">
-					<div class="l-unit-toolbar__col l-unit-toolbar__col--left">
-					</div>
-					<div class="l-unit-toolbar__col l-unit-toolbar__col--right">
-						<div class="actions-panel clearfix">
-						</div>
-					</div>
-				</div>
-				<div class="l-unit__col l-unit__col--left clearfix">
-					<i class="fas fa-chart-bar icon-dim" style="font-size: 3em;margin-left: 20px;margin-top: 10px;"></i>
-				</div>
-				<div class="l-unit__col l-unit__col--right">
-					<div class="l-unit__name separate">
+	<div class="stats">
+		<?php foreach ($data as $key => $value) {
+		++$i; ?>
+			<div class="stats-item">
+
+				<div class="stats-item-header">
+					<i class="fas fa-chart-bar icon-dim stats-item-header-icon u-mr10"></i>
+					<h2 class="stats-item-header-title">
 						<?php $date = new DateTime($key);
 						echo _($date -> format('M')) .' '.$date -> format('Y') ?>
+					</h2>
+				</div>
+
+				<div class="stats-item-content">
+
+					<div class="stats-item-summary">
+						<h3 class="stats-item-summary-title">
+							<span class="u-text-bold">
+								<i class="fas fa-right-left icon-dim icon-large u-mr5" title="<?= _("Bandwidth") ?>"></i>
+								<?= _("Bandwidth") ?>
+							</span>
+							<span class="u-mr10">
+								<span class="u-text-bold"><?= humanize_usage_size($data[$key]["U_BANDWIDTH"]) ?></span>
+								<?= humanize_usage_measure($data[$key]["U_BANDWIDTH"]) ?> / <span class="u-text-bold"><?= humanize_usage_size($data[$key]["BANDWIDTH"]) ?></span>
+									<?= humanize_usage_measure($data[$key]["BANDWIDTH"]) ?>
+							</span>
+						</h3>
+						<ul class="stats-item-summary-list u-mb10">
+							<li class="stats-item-summary-list-item">
+								<span>
+									<?php if ($_SESSION["userContext"] === "admin" || ($_SESSION["userContext"] === "user" && $data[$key]["IP_OWNED"] != "0")) { ?>
+										<?= _("IP Addresses") ?>:
+									<?php } ?>
+								</span>
+								<span>
+									<span class="u-text-bold"><?= $data[$key]["IP_OWNED"] ?></span>
+									<?= _("IPs") ?>
+								</span>
+							</li>
+						</ul>
+						<h3 class="stats-item-summary-title">
+							<span class="u-text-bold">
+								<i class="fas fa-hard-drive icon-dim icon-large u-mr5" title="Disk"></i>
+								<?= _("Disk") ?>
+							</span>
+							<span class="u-mr10">
+								<span class="u-text-bold"><?= humanize_usage_size($data[$key]["U_DISK"]) ?></span>
+								<?= humanize_usage_measure($data[$key]["U_DISK"]) ?> / <span class="u-text-bold"><?= humanize_usage_size($data[$key]["DISK_QUOTA"]) ?></span>
+										<?= humanize_usage_measure($data[$key]["DISK_QUOTA"]) ?>
+								</span>
+							</span>
+						</h3>
+						<ul class="stats-item-summary-list">
+							<li class="stats-item-summary-list-item">
+								<span>
+									<?= _("Web") ?>:
+								</span>
+								<span>
+									<span class="u-text-bold"><?= humanize_usage_size($data[$key]["U_DISK_WEB"]) ?></span>
+									<?= humanize_usage_measure($data[$key]["U_DISK_WEB"]) ?>
+								</span>
+							</li>
+							<li class="stats-item-summary-list-item u-mb5">
+								<span>
+									<?= _("Databases") ?>:
+								</span>
+								<span>
+									<span class="u-text-bold"><?= humanize_usage_size($data[$key]["U_DISK_DB"]) ?></span>
+									<?= humanize_usage_measure($data[$key]["U_DISK_DB"]) ?>
+								</span>
+							</li>
+							<li class="stats-item-summary-list-item">
+								<span>
+									<?= _("Mail") ?>:
+								</span>
+								<span>
+									<span class="u-text-bold"><?= humanize_usage_size($data[$key]["U_DISK_MAIL"]) ?></span>
+									<?= humanize_usage_measure($data[$key]["U_DISK_MAIL"]) ?>
+								</span>
+							</li>
+							<li class="stats-item-summary-list-item">
+								<span>
+									<?= _("User Directories") ?>:
+								</span>
+								<span>
+									<span class="u-text-bold"><?= humanize_usage_size($data[$key]["U_DISK_DIRS"]) ?></span>
+									<?= humanize_usage_measure($data[$key]["U_DISK_DIRS"]) ?>
+								</span>
+							</li>
+						</ul>
 					</div>
-					<div class="l-unit__stats">
-						<table>
-							<tr>
-								<td>
-									<div class="l-unit__stat-cols clearfix">
-										<div class="l-unit__stat-cols clearfix graph">
-											<div class="l-unit__stat-col l-unit__stat-col--left">
-												<i class="fas fa-right-left icon-dim icon-large u-mr5" title="<?= _("Bandwidth") ?>"></i><b><?= _("Bandwidth") ?></b>
-											</div>
-											<div class="l-unit__stat-col l-unit__stat-col--right u-text-right">
-												<b><?= humanize_usage_size($data[$key]["U_BANDWIDTH"]) ?></b> <?= humanize_usage_measure($data[$key]["U_BANDWIDTH"]) ?>
-											</div>
-										</div>
-										<div class="l-percent">
-											<div class="l-percent__fill" style="width: <?= get_percentage($data[$key]["U_BANDWIDTH"], $data[$key]["BANDWIDTH"]) ?>%"></div>
-										</div>
-									</div>
-								</td>
-								<td>
-									<div class="l-unit__stat-cols clearfix">
-										<div class="l-unit__stat-col l-unit__stat-col--left u-text-right u-text-italic u-mr5"><?= _("Web Domains") ?>:</div>
-										<div class="l-unit__stat-col l-unit__stat-col--right statistics-count">
-											<b><?= $data[$key]["U_WEB_DOMAINS"] ?></b>
-										</div>
-									</div>
-								</td>
-								<td>
-									<div class="l-unit__stat-cols clearfix last">
-										<div class="l-unit__stat-col l-unit__stat-col--left u-text-right u-text-italic u-mr5"><?= _("Mail Domains") ?>:</div>
-										<div class="l-unit__stat-col l-unit__stat-col--right statistics-count">
-											<b><?= $data[$key]["U_MAIL_DOMAINS"] ?></b>
-										</div>
-									</div>
-								</td>
-							</tr>
-							<tr>
-								<td>
-									<div class="l-unit__stat-cols clearfix u-text-small">
-										<div class="u-text-right">
-											<?php if ($_SESSION["userContext"] === "admin" || ($_SESSION["userContext"] === "user" && $data[$key]["IP_OWNED"] != "0")) { ?>
-												<span style="float: left;font-weight:500;"><?= _("IP Addresses") ?>:</span><b><?= $data[$key]["IP_OWNED"] ?></b> <?= _("IPs") ?></span>
-											<?php } ?>
-										</div>
-									</div>
-								</td>
-								<td>
-									<div class="l-unit__stat-cols clearfix">
-										<div class="l-unit__stat-col l-unit__stat-col--left u-text-right u-text-italic u-mr5"><?= _("SSL Domains") ?>:</div>
-										<div class="l-unit__stat-col l-unit__stat-col--right statistics-count">
-											<b><?= $data[$key]["U_WEB_SSL"] ?></b>
-										</div>
-									</div>
-								</td>
-								<td>
-									<div class="l-unit__stat-cols clearfix last">
-										<div class="l-unit__stat-col l-unit__stat-col--left u-text-right u-text-italic u-mr5"><?= _("Mail Accounts") ?>:</div>
-										<div class="l-unit__stat-col l-unit__stat-col--right statistics-count">
-											<b><?= $data[$key]["U_MAIL_ACCOUNTS"] ?></b>
-										</div>
-									</div>
-								</td>
-							</tr>
-							<tr>
-								<td>
-									<div class="l-unit__stat-cols clearfix graph">
-										<div class="l-unit__stat-col l-unit__stat-col--left"><i class="fas fa-hard-drive icon-dim icon-large u-mr5" title="<?= _("Disk") ?>"></i><b><?= _("Disk") ?></b></div>
-										<div class="l-unit__stat-col l-unit__stat-col--right u-text-right">
-											<b><?= humanize_usage_size($data[$key]["U_DISK"]) ?></b> <?= humanize_usage_measure($data[$key]["U_DISK"]) ?>
-										</div>
-									</div>
-									<div class="l-percent">
-										<div class="l-percent__fill" style="width: <?= get_percentage($data[$key]["U_DISK"], $data[$key]["DISK_QUOTA"]) ?>%"></div>
-									</div>
-								</td>
-								<td>
-									<div class="l-unit__stat-cols clearfix">
-										<div class="l-unit__stat-col l-unit__stat-col--left u-text-right u-text-italic u-mr5"><?= _("Web Aliases") ?>:</div>
-										<div class="l-unit__stat-col l-unit__stat-col--right statistics-count">
-											<b><?= $data[$key]["U_WEB_ALIASES"] ?></b>
-										</div>
-									</div>
-								</td>
-								<td>
-									<div class="l-unit__stat-cols clearfix last">
-										<div class="l-unit__stat-col l-unit__stat-col--left u-text-right u-text-italic u-mr5"><?= _("Databases") ?>:</div>
-										<div class="l-unit__stat-col l-unit__stat-col--right statistics-count">
-											<b><?= $data[$key]["U_DATABASES"] ?></b>
-										</div>
-									</div>
-								</td>
-							</tr>
-							<tr>
-								<td>
-									<div class="l-unit__stat-cols clearfix u-text-small">
-										<div class="u-text-right">
-											<span style="float: left;font-weight:500;"><?= _("Web") ?>:</span> <b><?= humanize_usage_size($data[$key]["U_DISK_WEB"]) ?></b> <?= humanize_usage_measure($data[$key]["U_DISK_WEB"]) ?>
-										</div>
-										<div class="u-text-right">
-											<span style="float: left;font-weight:500;"><?= _("Databases") ?>:</span> <b><?= humanize_usage_size($data[$key]["U_DISK_DB"]) ?></b> <?= humanize_usage_measure($data[$key]["U_DISK_DB"]) ?>
-										</div>
-									</div>
-								</td>
-								<td>
-									<div class="l-unit__stat-cols clearfix">
-										<div class="l-unit__stat-col l-unit__stat-col--left u-text-right u-text-italic u-mr5"><?= _("DNS domains") ?>:</div>
-										<div class="l-unit__stat-col l-unit__stat-col--right statistics-count">
-											<b><?= $data[$key]["U_DNS_DOMAINS"] ?></b>
-										</div>
-									</div>
-								</td>
-								<td>
-									<div class="l-unit__stat-cols clearfix last">
-										<div class="l-unit__stat-col l-unit__stat-col--left u-text-right u-text-italic u-mr5"><?= _("Cron Jobs") ?>:</div>
-										<div class="l-unit__stat-col l-unit__stat-col--right statistics-count">
-											<b><?= $data[$key]["U_CRON_JOBS"] ?></b>
-										</div>
-									</div>
-								</td>
-							</tr>
-							<tr>
-								<td>
-									<div class="l-unit__stat-cols clearfix u-text-small">
-										<div class="u-text-right">
-											<span style="float: left;font-weight:500;"><?= _("Mail") ?>:</span> <b><?= humanize_usage_size($data[$key]["U_DISK_MAIL"]) ?></b> <?= humanize_usage_measure($data[$key]["U_DISK_MAIL"]) ?>
-										</div>
-										<div class="u-text-right">
-											<span style="float: left;font-weight:500;"><?= _("User Directories") ?>:</span> <b><?= humanize_usage_size($data[$key]["U_DISK_DIRS"]) ?></b> <?= humanize_usage_measure($data[$key]["U_DISK_DIRS"]) ?>
-										</div>
-									</div>
-								</td>
-								<td>
-									<div class="l-unit__stat-cols clearfix">
-										<div class="l-unit__stat-col l-unit__stat-col--left u-text-right u-text-italic u-mr5"><?= _("DNS records") ?>:</div>
-										<div class="l-unit__stat-col l-unit__stat-col--right statistics-count">
-											<b><?= $data[$key]["U_DNS_RECORDS"] ?></b>
-										</div>
-									</div>
-								</td>
-								<td>
-									<div class="l-unit__stat-cols clearfix last">
-										<div class="l-unit__stat-col l-unit__stat-col--left u-text-right u-text-italic u-mr5"><?= _("Backups") ?>:</div>
-										<div class="l-unit__stat-col l-unit__stat-col--right statistics-count">
-											<b><?= $data[$key]["U_BACKUPS"] ?></b>
-										</div>
-									</div>
-								</td>
-							</tr>
-						</table>
-					</div>
+
+					<ul class="stats-item-list">
+						<li class="stats-item-list-item">
+							<span class="stats-item-list-item-label">
+								<?= _("Web Domains") ?>:
+							</span>
+							<span class="stats-item-list-item-value">
+								<?= $data[$key]["U_WEB_DOMAINS"] ?>
+							</span>
+						</li>
+						<li class="stats-item-list-item">
+							<span class="stats-item-list-item-label">
+								<?= _("Mail Domains") ?>:
+							</span>
+							<span class="stats-item-list-item-value">
+								<?= $data[$key]["U_MAIL_DOMAINS"] ?>
+							</span>
+						</li>
+						<li class="stats-item-list-item">
+							<span class="stats-item-list-item-label">
+								<?= _("SSL Domains") ?>:
+							</span>
+							<span class="stats-item-list-item-value">
+								<?= $data[$key]["U_WEB_SSL"] ?>
+							</span>
+						</li>
+						<li class="stats-item-list-item">
+							<span class="stats-item-list-item-label">
+								<?= _("Mail Accounts") ?>:
+							</span>
+							<span class="stats-item-list-item-value">
+								<?= $data[$key]["U_MAIL_ACCOUNTS"] ?>
+							</span>
+						</li>
+						<li class="stats-item-list-item">
+							<span class="stats-item-list-item-label">
+								<?= _("Web Aliases") ?>:
+							</span>
+							<span class="stats-item-list-item-value">
+								<?= $data[$key]["U_WEB_ALIASES"] ?>
+							</span>
+						</li>
+						<li class="stats-item-list-item">
+							<span class="stats-item-list-item-label">
+								<?= _("Databases") ?>:
+							</span>
+							<span class="stats-item-list-item-value">
+								<?= $data[$key]["U_DATABASES"] ?>
+							</span>
+						</li>
+						<li class="stats-item-list-item">
+							<span class="stats-item-list-item-label">
+								<?= _("DNS domains") ?>:
+							</span>
+							<span class="stats-item-list-item-value">
+								<?= $data[$key]["U_DNS_DOMAINS"] ?>
+							</span>
+						</li>
+						<li class="stats-item-list-item">
+							<span class="stats-item-list-item-label">
+								<?= _("Cron Jobs") ?>:
+							</span>
+							<span class="stats-item-list-item-value">
+								<?= $data[$key]["U_CRON_JOBS"] ?>
+							</span>
+						</li>
+						<li class="stats-item-list-item">
+							<span class="stats-item-list-item-label">
+								<?= _("DNS records") ?>:
+							</span>
+							<span class="stats-item-list-item-value">
+								<?= $data[$key]["U_DNS_RECORDS"] ?>
+							</span>
+						</li>
+						<li class="stats-item-list-item">
+							<span class="stats-item-list-item-label">
+								<?= _("Backups") ?>:
+							</span>
+							<span class="stats-item-list-item-value">
+								<?= $data[$key]["U_BACKUPS"] ?>
+							</span>
+						</li>
+					</ul>
+
 				</div>
+
 			</div>
-		</div>
-	<?php } ?>
+		<?php } ?>
+	</div>
+
 </div>
 
 <footer class="app-footer">