From afb6f788fa9c90817c9bd21e91993f4ddb462621 Mon Sep 17 00:00:00 2001
From: maTh <1645099+math-GH@users.noreply.github.com>
Date: Tue, 21 Jan 2025 23:45:22 +0100
Subject: Improve stats page layout (#7243)

* New stats box layout

* repartition: table overview improved with links and icons

* Show selected feed name in title

* i18n string: overview

* fix

* fix

* fix

* delete unused stat in frss

* Update app/i18n/fr/admin.php

---------

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>
---
 p/themes/base-theme/frss.css     | 77 +++++++++++++++++++++++++++-------------
 p/themes/base-theme/frss.rtl.css | 77 +++++++++++++++++++++++++++-------------
 2 files changed, 104 insertions(+), 50 deletions(-)

(limited to 'p')

diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index 09ccd129b..bc5e8a9a1 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -933,13 +933,34 @@ input[type="checkbox"]:focus-visible {
 
 /*=== Boxes */
 .box {
-	margin: 20px 20px 20px 0;
+	margin: 1.25rem 1.25rem 1.25rem 0;
 	display: inline-block;
 	max-width: 95%;
 	width: 30rem;
 	vertical-align: top;
 }
 
+.box.double-width,
+.box:target {
+	width: 61.25rem;
+}
+
+.box .target-hidden {
+	display: initial;
+}
+
+.box:target .target-hidden {
+	display: none;
+}
+
+.box .target-visible {
+	display: none;
+}
+
+.box:target .target-visible {
+	display: initial;
+}
+
 .box.visible-semi {
 	border-style: dashed;
 	opacity: 0.5;
@@ -972,6 +993,18 @@ input[type="checkbox"]:focus-visible {
 	overflow: auto;
 }
 
+.box .box-content table {
+	width: calc(100% - 1.25rem);
+}
+
+.box.double-height .box-content {
+	max-height: 520px;
+}
+
+.box:target .box-content {
+	max-height: fit-content;
+}
+
 .box .box-content .feed.item {
 	font-size: 0.9rem;
 	line-height: 1.5;
@@ -1865,26 +1898,13 @@ a.website:hover .favicon {
 }
 
 /*=== Statistiques */
-.stat-grid {
-	display: grid;
-	grid-template-columns: 1fr 1fr;
-	grid-gap: 20px;
-}
-
-.stat {
-	grid-column: 1 / span 2;
-}
-
-.stat.half {
-	grid-column: auto;
-}
-
-.stat > table {
-	width: 100%;
-}
-
-.statGraph {
-	height: 300px;
+.box .box-title .btn {
+	position: absolute;
+	right: 1rem;
+	line-height: 1;
+	min-height: 1rem;
+	padding: 0.25rem;
+	text-align: center;
 }
 
 /*=== GLOBAL VIEW */
@@ -2292,10 +2312,21 @@ html.slider-active {
 .nav_menu {
 	padding-top: var(--frss-padding-top-bottom);
 	padding-bottom: var(--frss-padding-top-bottom);
+	padding-left: 0.5rem;
+	padding-right: 0.5rem;
 	background: inherit;
 	text-align: center;
 }
 
+.nav_menu .stick {
+	max-width: 500px;
+}
+
+.nav_menu select {
+	max-width: 300px;
+	width: 60%;
+}
+
 .nav_mobile {
 	display: none;
 }
@@ -2692,10 +2723,6 @@ html.slider-active {
 	#slider.active:target + #close-slider {
 		display: none;
 	}
-
-	.stat.half {
-		grid-column: 1 / span 2;
-	}
 }
 
 /*=== PRINTER */
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index fcb0ce05d..8f90de8b7 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -933,13 +933,34 @@ input[type="checkbox"]:focus-visible {
 
 /*=== Boxes */
 .box {
-	margin: 20px 0 20px 20px;
+	margin: 1.25rem 0 1.25rem 1.25rem;
 	display: inline-block;
 	max-width: 95%;
 	width: 30rem;
 	vertical-align: top;
 }
 
+.box.double-width,
+.box:target {
+	width: 61.25rem;
+}
+
+.box .target-hidden {
+	display: initial;
+}
+
+.box:target .target-hidden {
+	display: none;
+}
+
+.box .target-visible {
+	display: none;
+}
+
+.box:target .target-visible {
+	display: initial;
+}
+
 .box.visible-semi {
 	border-style: dashed;
 	opacity: 0.5;
@@ -972,6 +993,18 @@ input[type="checkbox"]:focus-visible {
 	overflow: auto;
 }
 
+.box .box-content table {
+	width: calc(100% - 1.25rem);
+}
+
+.box.double-height .box-content {
+	max-height: 520px;
+}
+
+.box:target .box-content {
+	max-height: fit-content;
+}
+
 .box .box-content .feed.item {
 	font-size: 0.9rem;
 	line-height: 1.5;
@@ -1865,26 +1898,13 @@ a.website:hover .favicon {
 }
 
 /*=== Statistiques */
-.stat-grid {
-	display: grid;
-	grid-template-columns: 1fr 1fr;
-	grid-gap: 20px;
-}
-
-.stat {
-	grid-column: 1 / span 2;
-}
-
-.stat.half {
-	grid-column: auto;
-}
-
-.stat > table {
-	width: 100%;
-}
-
-.statGraph {
-	height: 300px;
+.box .box-title .btn {
+	position: absolute;
+	left: 1rem;
+	line-height: 1;
+	min-height: 1rem;
+	padding: 0.25rem;
+	text-align: center;
 }
 
 /*=== GLOBAL VIEW */
@@ -2292,10 +2312,21 @@ html.slider-active {
 .nav_menu {
 	padding-top: var(--frss-padding-top-bottom);
 	padding-bottom: var(--frss-padding-top-bottom);
+	padding-right: 0.5rem;
+	padding-left: 0.5rem;
 	background: inherit;
 	text-align: center;
 }
 
+.nav_menu .stick {
+	max-width: 500px;
+}
+
+.nav_menu select {
+	max-width: 300px;
+	width: 60%;
+}
+
 .nav_mobile {
 	display: none;
 }
@@ -2692,10 +2723,6 @@ html.slider-active {
 	#slider.active:target + #close-slider {
 		display: none;
 	}
-
-	.stat.half {
-		grid-column: 1 / span 2;
-	}
 }
 
 /*=== PRINTER */
-- 
cgit v1.2.3