[chore/frontend] Refactor status templates slightly, put polls behind CWs if present (#2419)

* [chore/frontend] Reorder templates, allow polls to be inside content warnings

* show when multiple-choice

1 files changed, 71 insertions, 70 deletions

diff --git a/web/source/css/status.css b/web/source/css/status.css
index 49ae63641..d2aa658f1 100644
--- a/web/source/css/status.css
+++ b/web/source/css/status.css
@@ -113,10 +113,17 @@ main {
 		gap: 0.5rem;
 	}
 
-	details > summary {
+	.text-spoiler > summary, .text {
+		position: relative;
+		z-index: 2;
+	}
+
+	.text-spoiler > summary {
 		display: inline-block;
 		list-style: none;
 
+		padding-bottom: 0.5rem;
+
 		&::-webkit-details-marker {
 			display: none; /* Safari */
 		}
@@ -124,6 +131,8 @@ main {
 		.button {
 			white-space: nowrap;
 			cursor: pointer;
+			padding: 0.2rem 0.3rem;
+			font-size: 1rem;
 		}
 	}
 
@@ -132,20 +141,12 @@ main {
 		grid-row: span 1;
 		grid-column: 1 / span 3;
 
-		position: relative;
-		z-index: 2;
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
 
 		width: 100%;
 
-		details > summary {
-			padding-bottom: 0.5rem;
-
-			.button {
-				padding: 0.2rem 0.3rem;
-				font-size: 1rem;
-			}
-		}
-
 		a {
 			color: $link-fg;
 			text-decoration: underline;
@@ -239,6 +240,64 @@ main {
 			border: $boxshadow-border;
 			border-radius: $br-inner;
 		}
+
+		.poll {
+			background-color: $gray2;
+			z-index: 2;
+			
+			display: flex;
+			flex-direction: column;
+			border-radius: $br;
+			padding: 0.5rem;
+			margin: 0;
+			gap: 1rem;
+	
+			.poll-options {
+				margin: 0;
+				padding: 0;
+				display: flex;
+				flex-direction: column;
+				gap: 1rem;
+	
+				.poll-option {
+					display: flex;
+					flex-direction: column;
+					gap: 0.1rem;
+		
+					label {
+						cursor: default;
+					}
+		
+					meter {
+						width: 100%;
+					}
+		
+					.poll-vote-summary {
+						display: flex;
+						flex-wrap: wrap;
+						justify-content: space-between;
+						white-space: nowrap;
+					}
+				}
+			}
+	
+			.poll-info {
+				background-color: $gray4;
+				display: flex;
+				flex-wrap: wrap;
+				justify-content: space-between;
+				border-radius: $br-inner;
+				padding: 0.25rem;
+				gap: 0.25rem;
+	
+				span {
+					justify-self: center;
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
+			}
+		}
 	}
 
 	.media {
@@ -391,64 +450,6 @@ main {
 		}
 	}
 
-	.poll {
-		background-color: $gray2;
-		z-index: 2;
-		
-		display: flex;
-		flex-direction: column;
-		border-radius: $br;
-		padding: 0.5rem;
-		margin: 0;
-		gap: 1rem;
-
-		.poll-options {
-			margin: 0;
-			padding: 0;
-			display: flex;
-			flex-direction: column;
-			gap: 1rem;
-
-			.poll-option {
-				display: flex;
-				flex-direction: column;
-				gap: 0.1rem;
-	
-				label {
-					cursor: default;
-				}
-	
-				meter {
-					width: 100%;
-				}
-	
-				.poll-vote-summary {
-					display: flex;
-					flex-wrap: wrap;
-					justify-content: space-between;
-					white-space: nowrap;
-				}
-			}
-		}
-
-		.poll-info {
-			background-color: $gray4;
-			display: flex;
-			flex-wrap: wrap;
-			justify-content: space-between;
-			border-radius: $br-inner;
-			padding: 0.25rem;
-			gap: 0.25rem;
-
-			span {
-				justify-self: center;
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-			}
-		}
-	}
-
 	.info {
 		display: flex;
 		background: $toot-info-bg;