[feature/frontend] Hide "engagement" stats, edits, and other info under a little drop down to unclutter status info bar (#4021)

* dick about with stats a bit

* more dicking abuot

* lil tweaks

* more about-dicking

* weee

* comments

* fixie uppie

web/source/css/_media-wrapper.css

@@ -29,7 +29,6 @@
 	border-radius: $br;
 	position: relative;
 	overflow: hidden;
-	z-index: 2;
 
 	img {
 		width: 100%;
@@ -59,8 +58,8 @@
 			position: absolute;
 			height: 100%;
 			width: 100%;
-			z-index: 3;
 			overflow: hidden;
+			z-index: 1;
 
 			display: grid;
 			padding: 1rem;

web/source/css/status.css

@@ -28,8 +28,6 @@
 	padding-top: 0.75rem;
 
 	a {
-		position: relative;
-		z-index: 1;
 		color: inherit;
 		text-decoration: none;
 	}
@@ -109,11 +107,6 @@
 		gap: 0.5rem;
 	}
 
-	.text-spoiler > summary, .text {
-		position: relative;
-		z-index: 2;
-	}
-
 	.text-spoiler > summary {
 		list-style: none;
 		display: flex;
@@ -193,7 +186,6 @@
 
 		.poll {
 			background-color: $gray2;
-			z-index: 2;
 			
 			display: flex;
 			flex-direction: column;
@@ -260,59 +252,150 @@
 			display: flex;
 			gap: 1rem;
 
-			.stats-grouping {
+			.stats-grouping,
+			.stats-more-info-content {
 				display: flex;
 				flex-wrap: wrap;
-				column-gap: 1rem;
+			}
 
-				.edited-at {
-					font-size: smaller;
-				}
+			.stats-grouping {
+				column-gap: 1rem;
+				row-gap: 0.25rem;
 			}
 
 			.stats-item {
 				display: flex;
 				gap: 0.4rem;
+				width: fit-content;
 			}
 
-			.stats-item.published-at {
-				text-decoration: underline;
+			details.stats-more-info {
+				margin-left: auto;
+				
+				& > summary {
+					display: flex;
+
+					/*
+						Make it easy to touch.
+					*/
+					width: 3rem;
+					height: 2rem;
+					margin: -0.25rem -0.5rem;
+
+					/*
+						Remove details/summary
+						arrow and use our own.
+					*/
+					list-style: none;
+					&::-webkit-details-marker {
+						display: none; /* Safari */
+					}
+
+					/*
+						Don't display the
+						"hide" button initially.
+					*/
+					i.hide {
+						display: none;
+					}
+
+					/*
+						Normalize fa
+						icon alignment.
+					*/
+					align-items: center;
+					i.fa {
+						text-align: center;
+					}
+
+					cursor: pointer;
+					border-radius: $br-inner;
+					&:focus-visible {
+						outline: $button-focus-outline;
+					}
+
+					&:hover {
+						outline: 0.1rem solid $fg-reduced;
+					}
+				}
+
+				@keyframes fade-in {
+					0%    {opacity: 0}
+					100%  {opacity: 1}
+				}
+
+				&[open] {
+					.stats-more-info-content {
+						animation: fade-in .1s;
+					}
+
+					& > summary i.show {
+						display: none;
+					}
+
+					& > summary i.hide {
+						display: block;
+					}
+				}
 			}
 
-			.stats-item:not(.published-at):not(.edited-at) {
-				z-index: 1;
+			.stats-more-info-content {
+				position: absolute;
+				right: 0;
+				z-index: 2;
+				
+				flex-direction: column;
+				max-width: 100%;
+				row-gap: 0.5rem;
+
+				background: $status-info-bg;
+				padding: 0.5rem 0.75rem;
+				border: $boxshadow-border;
+				box-shadow: $boxshadow;
+
+				opacity: 1;
+
+				.stats-grouping {
+					width: 100%;
+					justify-content: space-between;
+				}
+			}
+
+			.stats-item.published-at dd a {
+				time.dt-published {
+					text-decoration: underline;
+				}
+
+				&:focus-visible {
+					outline: 0;
+					time.dt-published {
+						outline: $link-focus-outline;
+						outline-offset: -0.25rem;
+					}
+				}
+			}
+
+			.stats-item:not(.published-at):not(.edit-timeline) {
 				user-select: none;
 			}
 
-			.language {
-				margin-left: auto;
+			.stats-item.edit-timeline {
+				flex-direction: column;
+				width: 100%;
+				border-top: $boxshadow-border;
+				padding-top: 0.4rem;
+				
+				dd {
+					display: flex;
+					align-items: center;
+					gap: 0.4rem;
+				}
 			}
 		}
 
 		grid-column: span 3;
 	}
 
-	.status-link {
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		overflow: hidden;
-		text-indent: 100%;
-		white-space: nowrap;
-
-		position: absolute;
-		z-index: 0;
-
-		&:focus-visible {
-			/*
-				Inset focus to compensate for themes where
-				statuses have a really thick border.
-			*/
-			outline-offset: -0.25rem;
-		}
-	}
-
 	&:first-child {
 		/* top left, top right */
 		border-top-left-radius: $br;
@@ -327,7 +410,8 @@
 
 	&.expanded {
 		background: $status-focus-bg;
-		.status-info {
+		.status-info,
+		.status-info .status-stats .stats-more-info-content {
 			background: $status-focus-info-bg;
 		}
 	}

web/source/css/thread.css

@@ -79,9 +79,18 @@
 		&.indent-3,
 		&.indent-4,
 		&.indent-5 {
-			.status-link {
-				margin-left: -0.5rem;
+			/*
+				Show a stripey line to the left of
+				indented statuses for better legibility.
+			*/
+			&::before {
+				content: "";
+				position: absolute;
+				left: 0;
+				top: 0;
+				height: 100%;
 				border-left: 0.15rem dashed $border-accent;
+				margin-left: -0.5rem;
 			}
 		}