Statistics: improved layout (#3797)

* css grid layout

* Update repartition.phtml

* scrolling the canvas if it does not fit

4 files changed, 135 insertions, 103 deletions

diff --git a/app/views/stats/index.phtml b/app/views/stats/index.phtml
index dd7faa72c..ced0544c7 100644
--- a/app/views/stats/index.phtml
+++ b/app/views/stats/index.phtml
@@ -7,80 +7,82 @@
 
 	<h1><?= _t('admin.stats.main') ?></h1>
 
-	<div class="stat half">
-		<h2><?= _t('admin.stats.entry_repartition') ?></h2>
-		<table>
-			<thead>
-				<tr>
-					<th> </th>
-					<th><?= _t('admin.stats.main_stream') ?></th>
-					<th><?= _t('admin.stats.all_feeds') ?></th>
-				</tr>
-			</thead>
-			<tbody>
-				<tr>
-					<th><?= _t('admin.stats.status_total') ?></th>
-					<td class="numeric"><?= format_number($this->repartition['main_stream']['total']) ?></td>
-					<td class="numeric"><?= format_number($this->repartition['all_feeds']['total']) ?></td>
-				</tr>
-				<tr>
-					<th><?= _t('admin.stats.status_read') ?></th>
-					<td class="numeric"><?= format_number($this->repartition['main_stream']['count_reads']) ?></td>
-					<td class="numeric"><?= format_number($this->repartition['all_feeds']['count_reads']) ?></td>
-				</tr>
-				<tr>
-					<th><?= _t('admin.stats.status_unread') ?></th>
-					<td class="numeric"><?= format_number($this->repartition['main_stream']['count_unreads']) ?></td>
-					<td class="numeric"><?= format_number($this->repartition['all_feeds']['count_unreads']) ?></td>
-				</tr>
-				<tr>
-					<th><?= _t('admin.stats.status_favorites') ?></th>
-					<td class="numeric"><?= format_number($this->repartition['main_stream']['count_favorites']) ?></td>
-					<td class="numeric"><?= format_number($this->repartition['all_feeds']['count_favorites']) ?></td>
-				</tr>
-			</tbody>
-		</table>
-	</div><!--
+	<div class="stat-grid">
+		<div class="stat half">
+			<h2><?= _t('admin.stats.entry_repartition') ?></h2>
+			<table>
+				<thead>
+					<tr>
+						<th> </th>
+						<th><?= _t('admin.stats.main_stream') ?></th>
+						<th><?= _t('admin.stats.all_feeds') ?></th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<th><?= _t('admin.stats.status_total') ?></th>
+						<td class="numeric"><?= format_number($this->repartition['main_stream']['total']) ?></td>
+						<td class="numeric"><?= format_number($this->repartition['all_feeds']['total']) ?></td>
+					</tr>
+					<tr>
+						<th><?= _t('admin.stats.status_read') ?></th>
+						<td class="numeric"><?= format_number($this->repartition['main_stream']['count_reads']) ?></td>
+						<td class="numeric"><?= format_number($this->repartition['all_feeds']['count_reads']) ?></td>
+					</tr>
+					<tr>
+						<th><?= _t('admin.stats.status_unread') ?></th>
+						<td class="numeric"><?= format_number($this->repartition['main_stream']['count_unreads']) ?></td>
+						<td class="numeric"><?= format_number($this->repartition['all_feeds']['count_unreads']) ?></td>
+					</tr>
+					<tr>
+						<th><?= _t('admin.stats.status_favorites') ?></th>
+						<td class="numeric"><?= format_number($this->repartition['main_stream']['count_favorites']) ?></td>
+						<td class="numeric"><?= format_number($this->repartition['all_feeds']['count_favorites']) ?></td>
+					</tr>
+				</tbody>
+			</table>
+		</div><!--
 
-	--><div class="stat half">
-		<h2><?= _t('admin.stats.top_feed') ?></h2>
-		<table>
-			<thead>
-				<tr>
-					<th><?= _t('admin.stats.feed') ?></th>
-					<th><?= _t('admin.stats.category') ?></th>
-					<th><?= _t('admin.stats.entry_count') ?></th>
-					<th><?= _t('admin.stats.percent_of_total') ?></th>
-				</tr>
-			</thead>
-			<tbody>
-				<?php foreach ($this->topFeed as $feed) { ?>
+		--><div class="stat half">
+			<h2><?= _t('admin.stats.top_feed') ?></h2>
+			<table>
+				<thead>
 					<tr>
-						<td><a href="<?= _url('stats', 'repartition', 'id', $feed['id']) ?>"><?= $feed['name'] ?></a></td>
-						<td><?= $feed['category'] ?></td>
-						<td class="numeric"><?= format_number($feed['count']) ?></td>
-						<td class="numeric"><?= format_number($feed['count'] / $this->repartition['all_feeds']['total'] * 100, 1) ?></td>
+						<th><?= _t('admin.stats.feed') ?></th>
+						<th><?= _t('admin.stats.category') ?></th>
+						<th><?= _t('admin.stats.entry_count') ?></th>
+						<th><?= _t('admin.stats.percent_of_total') ?></th>
 					</tr>
-				<?php } ?>
-			</tbody>
-		</table>
-	</div>
+				</thead>
+				<tbody>
+					<?php foreach ($this->topFeed as $feed) { ?>
+						<tr>
+							<td><a href="<?= _url('stats', 'repartition', 'id', $feed['id']) ?>"><?= $feed['name'] ?></a></td>
+							<td><?= $feed['category'] ?></td>
+							<td class="numeric"><?= format_number($feed['count']) ?></td>
+							<td class="numeric"><?= format_number($feed['count'] / $this->repartition['all_feeds']['total'] * 100, 1) ?></td>
+						</tr>
+					<?php } ?>
+				</tbody>
+			</table>
+		</div>
 
-	<div class="stat">
-		<h2><?= _t('admin.stats.entry_per_day') ?></h2>
-		<div id="statsEntryPerDay" class="statGraph"></div>
-	</div>
+		<div class="stat">
+			<h2><?= _t('admin.stats.entry_per_day') ?></h2>
+			<div id="statsEntryPerDay" class="statGraph"></div>
+		</div>
 
-	<div class="stat half">
-		<h2><?= _t('admin.stats.feed_per_category') ?></h2>
-		<div id="statsFeedPerCategory" class="statGraph"></div>
-		<div id="statsFeedPerCategoryLegend"></div>
-	</div>
+		<div class="stat half">
+			<h2><?= _t('admin.stats.feed_per_category') ?></h2>
+			<div id="statsFeedPerCategory" class="statGraph"></div>
+			<div id="statsFeedPerCategoryLegend"></div>
+		</div>
 
-	<div class="stat half">
-		<h2><?= _t('admin.stats.entry_per_category') ?></h2>
-		<div id="statsEntryPerCategory" class="statGraph"></div>
-		<div id="statsEntryPerCategoryLegend"></div>
+		<div class="stat half">
+			<h2><?= _t('admin.stats.entry_per_category') ?></h2>
+			<div id="statsEntryPerCategory" class="statGraph"></div>
+			<div id="statsEntryPerCategoryLegend"></div>
+		</div>
 	</div>
 </div>
 
diff --git a/app/views/stats/repartition.phtml b/app/views/stats/repartition.phtml
index e04418614..e30a02edc 100644
--- a/app/views/stats/repartition.phtml
+++ b/app/views/stats/repartition.phtml
@@ -33,36 +33,38 @@
 		</a>
 	<?php }?>
 
-	<div class="stat">
-		<table>
-		<tr>
-			<th><?= _t('admin.stats.status_total') ?></th>
-			<th><?= _t('admin.stats.status_read') ?></th>
-			<th><?= _t('admin.stats.status_unread') ?></th>
-			<th><?= _t('admin.stats.status_favorites') ?></th>
-		</tr>
-		<tr>
-			<td class="numeric"><?= $this->repartition['total'] ?></td>
-			<td class="numeric"><?= $this->repartition['count_reads'] ?></td>
-			<td class="numeric"><?= $this->repartition['count_unreads'] ?></td>
-			<td class="numeric"><?= $this->repartition['count_favorites'] ?></td>
-		</tr>
-		</table>
-	</div>
+	<div class="stat-grid">
+		<div class="stat">
+			<table>
+			<tr>
+				<th><?= _t('admin.stats.status_total') ?></th>
+				<th><?= _t('admin.stats.status_read') ?></th>
+				<th><?= _t('admin.stats.status_unread') ?></th>
+				<th><?= _t('admin.stats.status_favorites') ?></th>
+			</tr>
+			<tr>
+				<td class="numeric"><?= $this->repartition['total'] ?></td>
+				<td class="numeric"><?= $this->repartition['count_reads'] ?></td>
+				<td class="numeric"><?= $this->repartition['count_unreads'] ?></td>
+				<td class="numeric"><?= $this->repartition['count_favorites'] ?></td>
+			</tr>
+			</table>
+		</div>
 
-	<div class="stat">
-		<h2><?= _t('admin.stats.entry_per_hour', $this->averageHour) ?></h2>
-		<div id="statsEntryPerHour" class="statGraph"></div>
-	</div>
+		<div class="stat">
+			<h2><?= _t('admin.stats.entry_per_hour', $this->averageHour) ?></h2>
+			<div id="statsEntryPerHour" class="statGraph"></div>
+		</div>
 
-	<div class="stat half">
-		<h2><?= _t('admin.stats.entry_per_day_of_week', $this->averageDayOfWeek) ?></h2>
-		<div id="statsEntryPerDayOfWeek" class="statGraph"></div>
-	</div>
+		<div class="stat half">
+			<h2><?= _t('admin.stats.entry_per_day_of_week', $this->averageDayOfWeek) ?></h2>
+			<div id="statsEntryPerDayOfWeek" class="statGraph"></div>
+		</div>
 
-	<div class="stat half">
-		<h2><?= _t('admin.stats.entry_per_month', $this->averageMonth) ?></h2>
-		<div id="statsEntryPerMonth" class="statGraph"></div>
+		<div class="stat half">
+			<h2><?= _t('admin.stats.entry_per_month', $this->averageMonth) ?></h2>
+			<div id="statsEntryPerMonth" class="statGraph"></div>
+		</div>
 	</div>
 </div>
 
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index 8d851d508..1c63fac46 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -957,14 +957,20 @@ br {
 }
 
 /*=== Statistiques */
+.stat-grid {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	grid-gap: 20px;
+}
+
 .stat {
-	margin: 15px 0;
+	grid-column: 1 / span 2;
+	overflow-x: auto;
+	overflow-y: hidden;
 }
 
 .stat.half {
-	padding: 0 2%;
-	display: inline-block;
-	width: 46%;
+	grid-column: auto;
 }
 
 .stat > table {
@@ -975,6 +981,10 @@ br {
 	height: 300px;
 }
 
+.stat .flotr-legend-label{
+	padding-left: 0;
+}
+
 /*=== LOGIN VIEW */
 /*================*/
 .formLogin .header > .item {
@@ -1364,6 +1374,10 @@ input:checked + .slide-container .properties {
 		line-height: 50px;
 		border-bottom: 1px solid #ddd;
 	}
+
+	.stat.half {
+		grid-column: 1 / span 2;
+	}
 }
 
 /*=== PRINTER */
diff --git a/p/themes/base-theme/template.rtl.css b/p/themes/base-theme/template.rtl.css
index 3c19047d4..927f92def 100644
--- a/p/themes/base-theme/template.rtl.css
+++ b/p/themes/base-theme/template.rtl.css
@@ -957,14 +957,20 @@ br {
 }
 
 /*=== Statistiques */
+.stat-grid {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	grid-gap: 20px;
+}
+
 .stat {
-	margin: 15px 0;
+	grid-column: 1 / span 2;
+	overflow-x: auto;
+	overflow-y: hidden;
 }
 
 .stat.half {
-	padding: 0 2%;
-	display: inline-block;
-	width: 46%;
+	grid-column: auto;
 }
 
 .stat > table {
@@ -975,6 +981,10 @@ br {
 	height: 300px;
 }
 
+.stat .flotr-legend-label{
+	padding-left: 0;
+}
+
 /*=== LOGIN VIEW */
 /*================*/
 .formLogin .header > .item {
@@ -1364,6 +1374,10 @@ input:checked + .slide-container .properties {
 		line-height: 50px;
 		border-bottom: 1px solid #ddd;
 	}
+
+	.stat.half {
+		grid-column: 1 / span 2;
+	}
 }
 
 /*=== PRINTER */