(#50) Add warning message if user has reduce motion enabled

Difegue · Nov 20, 2024 · 83dc355 · 83dc355
1 parent 075fb0c
commit 83dc355
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/WebContent/WEB-INF/templates/collection.html b/WebContent/WEB-INF/templates/collection.html
@@ -68,11 +68,15 @@
 		<i class="material-icons">play_arrow</i></a>
 </div>
 <div class="tap-target" data-target="playbtn">
-	<div class="tap-target-content">
-		<h5 style="font-family: warioware;">Fancy a game?</h5>
-		<p>You can play all the games in this collection randomly thrown at you, (mostly*) just like the real thing.
-			<br>4 lives and you're out!
+	<div class="tap-target-content" style="padding-bottom: 0px; padding-left: 0px; text-align:right">
+		<h5 style="font-family: warioware">Fancy a game?</h5>
+		<p style="padding-left: 60px;">You can play all the games in this collection randomly thrown at you, (mostly*) just like the real thing.
+			4 lives and you're out!
 			<br><sub>* Some games may be unwinnable or behave weirdly.</sub>
+			<br>
+		</p>
+		<p class="motionless__banner yellow-text">
+			You seem to have <b>reduced motion</b> enabled on your browser/operating system. This will affect animations during gameplay transitions.
 		</p>
 	</div>
 </div>

diff --git a/WebContent/css/style.css b/WebContent/css/style.css
@@ -335,6 +335,18 @@ label.active {
     transition: none !important;
 }
 
+.motionless__banner {
+    display: none;
+}
+
+/* Show the banner if the user disables animations in the OS level */
+@media (print),
+(prefers-reduced-motion: reduce) {
+    .motionless__banner {
+        display: block;
+    }
+}
+
 .score-counter {
     position: absolute;
     text-align: center;