From 51ebe643d5de3f96cf888ac96b65a3f546b8cc06 Mon Sep 17 00:00:00 2001 From: Yuki Joou Date: Wed, 2 Aug 2023 12:45:18 +0200 Subject: [PATCH] components: Honour 'prefers reduced motion' setting in many components This helps accessibility for motion-sensitive people such as myself, and can improve battery life in "battery saving" mode on most devices --- src/components/favorite_button/favorite_button.vue | 3 +++ src/components/mobile_nav/mobile_nav.vue | 3 +++ src/components/retweet_button/retweet_button.vue | 3 +++ src/components/side_drawer/side_drawer.vue | 4 ++++ src/components/status_body/status_body.scss | 3 +++ src/components/timeline_menu/timeline_menu.vue | 6 ++++++ 6 files changed, 22 insertions(+) diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue index 7d23572e..16bf441e 100644 --- a/src/components/favorite_button/favorite_button.vue +++ b/src/components/favorite_button/favorite_button.vue @@ -55,6 +55,9 @@ .interactive { .svg-inline--fa { + @media (prefers-reduced-motion: reduce) { + animation: unset; + } animation-duration: 0.6s; } diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue index e6a8e694..f5917d57 100644 --- a/src/components/mobile_nav/mobile_nav.vue +++ b/src/components/mobile_nav/mobile_nav.vue @@ -157,6 +157,9 @@ box-shadow: var(--panelShadow); transition-property: transform; transition-duration: 0.25s; + @media (prefers-reduced-motion: reduce) { + transition: unset; + } transform: translateX(0); z-index: 1001; -webkit-overflow-scrolling: touch; diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue index c574f4cb..ae044f23 100644 --- a/src/components/retweet_button/retweet_button.vue +++ b/src/components/retweet_button/retweet_button.vue @@ -74,6 +74,9 @@ .interactive { .svg-inline--fa { + @media (prefers-reduced-motion: reduce) { + animation: unset; + } animation-duration: 0.6s; } diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue index 86943e27..d031a21e 100644 --- a/src/components/side_drawer/side_drawer.vue +++ b/src/components/side_drawer/side_drawer.vue @@ -268,6 +268,10 @@ .side-drawer { overflow-x: hidden; transition-timing-function: cubic-bezier(0, 1, 0.5, 1); + @media (prefers-reduced-motion: reduce) { + transition-timing-function: unset; + transition: unset; + } transition: 0.35s; transition-property: transform; margin: 0 0 0 -100px; diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss index d618f65e..434cb482 100644 --- a/src/components/status_body/status_body.scss +++ b/src/components/status_body/status_body.scss @@ -17,6 +17,9 @@ .emoji:hover { transform: scale(1.4); + @media (prefers-reduced-motion: reduce) { + transition: unset; + } transition: 0.05s; } diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue index 61119482..2dd52346 100644 --- a/src/components/timeline_menu/timeline_menu.vue +++ b/src/components/timeline_menu/timeline_menu.vue @@ -62,6 +62,9 @@ border-top-right-radius: 0; border-top-left-radius: 0; transform: translateY(-100%); + @media (prefers-reduced-motion: reduce) { + transition: unset; + } transition: transform 100ms; } @@ -89,6 +92,9 @@ svg { margin-left: 0.6em; + @media (prefers-reduced-motion: reduce) { + transition: unset; + } transition: transform 100ms; }