[frontend] Sensitive media spoilers (#752)

* sensitive media spoilers

* small tweaks, use pointer-events (thanks @owl!)

* allow hiding all media

* add button roles

* add tabindices

* s/Show media/Show sensitive media/

* show hovering alt-text on hidden sensitive images

Co-authored-by: tobi <31960611+tsmethurst@users.noreply.github.com>

3 files changed, 112 insertions, 27 deletions

diff --git a/web/source/css/_colors.css b/web/source/css/_colors.css
index 5390f13d2..1544e6ad0 100644
--- a/web/source/css/_colors.css
+++ b/web/source/css/_colors.css
@@ -68,6 +68,9 @@ $status_focus_bg: $bg_accent;
 $status_unfocus_bg: $sloth_gray2_darker3;
 $status_info_fg: #CBCBD7;
 
+$bg_no_img_desc: $sloth_orange2;
+$bg_sensitive: $sloth_gray2_darker15;
+
 $boxshadow: 0 0.4rem 1rem -0.1rem rgba(0,0,0,0.15);
 $boxshadow_border: 0.08rem solid $sloth_gray2_darker5;
 
diff --git a/web/source/css/status.css b/web/source/css/status.css
index dd7ed174c..945aa2c4c 100644
--- a/web/source/css/status.css
+++ b/web/source/css/status.css
@@ -173,7 +173,7 @@ main {
 
 	.media {
 		margin-top: 0.6rem;
-		border-radius: 0.2rem;
+		border-radius: $br;
 		grid-column: span 3;
 		display: grid;
 		grid-template-columns: 50% 50%;
@@ -181,24 +181,101 @@ main {
 		overflow: hidden;
 		gap: 0.3rem;
 
-		a {
+		.media-wrapper {
 			position: relative;
 		}
 
+		&.single .media-wrapper {
+			grid-column: span 2;
+		}
+
+		&.odd .media-wrapper:first-child, &.double .media-wrapper {
+			grid-row: span 2;
+		}
+
+		.open, .open .button {
+			display: none;
+		}
+
+		.closed {
+			z-index: 2;
+		}
+
+		input.sensitive-checkbox:checked { /* Media is shown */
+			& ~ .sensitive {
+				.closed {
+					transition: 0.8s;
+					pointer-events: none;
+					opacity: 0;
+
+					& > * {
+						display: none;
+					}
+				}
+
+				.open {
+					display: flex;
+					justify-content: flex-start;
+
+					.button {
+						align-self: flex-start;
+						display: initial;
+						z-index: 4;
+					}
+				}
+			}
+		}
+
+		.sensitive {
+			position: absolute;
+			height: 100%;
+			width: 100%;
+
+			.open, .closed {
+				display: flex;
+				position: absolute;
+				height: 100%;
+				width: 100%;
+				justify-content: center;
+				padding: 1rem;
+
+				label {
+					z-index: 3;
+				}
+			}
+
+			.closed {
+				transition: 0.3s;
+				background: $bg_sensitive;
+				@supports (backdrop-filter: blur(2rem)) {
+					background: transparent;
+					backdrop-filter: blur(2rem);
+				}
+
+				.button {
+					align-self: center;
+					justify-self: center;
+				}
+			}
+		}
+
 		.no-image-desc {
+			color: $button_fg;
 			display: flex;
 			position: absolute;
 			bottom: 0.1rem;
 			right: 0.4rem;
-			color: white;
-			background: $blue;
-			padding: 0.2rem 0.4rem;
+			margin-bottom: 0.4rem;
+			margin-right: 0.4rem;
+			background: $bg_no_img_desc;
+			padding: 0.1rem 0.45rem;
 			border-radius: 100%;
+			border: 0.2rem solid $button_fg;
 			z-index: 3;
 
 			i.fa {
 				display: block;
-				line-height: 1.3rem;
+				line-height: 1.6rem;
 			}
 
 			span {
@@ -219,14 +296,6 @@ main {
 			height: 100%;
 			object-fit: cover;
 		}
-
-		&.single a {
-			grid-column: span 2;
-		}
-
-		&.odd a:first-child, &.double a {
-			grid-row: span 2;
-		}
 	}
 
 	.info {
@@ -244,7 +313,7 @@ main {
 		}
 
 		grid-column: span 3;
-		margin-top: 0.5rem;
+		margin-top: 1.5rem;
 		flex-wrap: wrap;
 
 		div.stats::after {
@@ -313,8 +382,8 @@ main {
 		}
 
 		.media {
-			grid-auto-rows: 1fr;
-			max-height: 120rem;
+			/* grid-auto-rows: 1fr; */
+			/* max-height: 120rem; */
 		}
 	}
 }
diff --git a/web/template/status.tmpl b/web/template/status.tmpl
index 2216b48d5..decad4764 100644
--- a/web/template/status.tmpl
+++ b/web/template/status.tmpl
@@ -7,7 +7,7 @@
 		<input class="spoiler" id="hideSpoiler-{{.ID}}" type="checkbox" style="display: none" aria-hidden="true" checked="true" />
 		<div class="spoiler">
 			<span class="spoiler-text">{{.SpoilerText}}</span>
-			<label class="button spoiler-label" for="hideSpoiler-{{.ID}}">Toggle visibility</label>
+			<label class="button spoiler-label" for="hideSpoiler-{{.ID}}" tabindex="0">Toggle visibility</label>
 		</div>
 		{{end}}
 		<div class="content">
@@ -15,16 +15,29 @@
 		</div>
 	</div>
 	{{with .MediaAttachments}}
-		<div class="media photoswipe-gallery {{(len .) | oddOrEven }}{{if eq (len .) 1}} single{{end}}{{if eq (len .) 2}} double{{end}}">
-			{{range .}}
-				<a href="{{.URL}}" target="_blank" title="{{.Description}}" data-pswp-width="{{.Meta.Original.Width}}px" data-pswp-height="{{.Meta.Original.Height}}px">
-						{{if not .Description}}
-			 			<div class="no-image-desc" aria-hidden="true" ><i class="fa fa-info-circle"></i><span>Missing image description</span></div>
-					{{end}}
-					<img src="{{.PreviewURL}}" alt="{{.Description}}"/>
-				</a>
-			{{end}}
+	<div class="media photoswipe-gallery {{(len .) | oddOrEven }}{{if eq (len .) 1}} single{{end}}{{if eq (len .) 2}} double{{end}}">
+		{{range .}}
+		<div class="media-wrapper">
+			{{if not .Description}}
+			<div class="no-image-desc" aria-hidden="true" ><i class="fa fa-info-circle"></i><span>Missing image description</span></div>
+			{{end}}	
+			<input type="checkbox" id="sensitiveMedia-{{.ID}}" class="sensitive-checkbox hidden" {{if not $.Sensitive}}checked{{end}}/>
+			<div class="sensitive">
+				<div class="open">
+					<label for="sensitiveMedia-{{.ID}}" class="button" role="button" tabindex="0">
+						<i class="fa fa-eye-slash" title="Hide sensitive media"></i>
+					</label>
+				</div>
+				<div class="closed" {{if .Description}}title="{{.Description}}"{{end}}>
+					<label for="sensitiveMedia-{{.ID}}" class="button" role="button" tabindex="0">Show sensitive media</label>
+				</div>
+			</div>
+			<a href="{{.URL}}" target="_blank" {{if .Description}}title="{{.Description}}"{{end}} data-pswp-width="{{.Meta.Original.Width}}px" data-pswp-height="{{.Meta.Original.Height}}px">
+				<img src="{{.PreviewURL}}" {{if .Description}}alt="{{.Description}}"{{end}} data-blurhash="{{.Blurhash}}"/>
+			</a>
 		</div>
+		{{end}}
+	</div>
 	{{end}}
 </div>
 <div class="info">