Fixes to boost and heart animations in single and multiple columns

ronilaukkarinen · Feb 11, 2024 · ce89fde · ce89fde
1 parent d3d89c4
commit ce89fde
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,4 @@
-### 2.0.0rc14: 2024-02-10
+### 2.0.0rc15: 2024-02-11
 
 * Prepare for 4.3.0 release with SVG icons
 * Add icon support for new SVG icons, replace icons for Home, Notifications, Explore, Live feeds, Private mentions, bookmarks, Favorites, Preferences and Lists
@@ -42,6 +42,7 @@
 * Add Friendica profile icon #101 (thanks @expertmanofficial!)
 * Add an icon for genderless pronouns #101
 * Fix video aspect-ratio for embeds
+* Fixes to boost and heart animations in single and multiple columns
 
 ### 1.8.3: 2023-11-12
 

diff --git a/layout-multiple-columns.css b/layout-multiple-columns.css
@@ -1,5 +1,5 @@
 /* Mastodon Bird UI by @[email protected]
-   2.0.0rc13 */
+   2.0.0rc15 */
 
 /* CSS variables */
 :root {
@@ -4105,6 +4105,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
  * ---------------------------------------
  */
 
+.layout-multiple-columns .icon-button:has(.icon-retweet) {
+  height: 24px;
+  width: 24px;
+}
+
 @keyframes boost-animate {
   100% {
     background-position: -7770px;
@@ -4131,8 +4136,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     min-width: 42.22px;
     pointer-events: none;
     position: absolute;
-    top: -37.4px;
-    transform: scale(0.82) translateX(1px);
+    top: -38px;
+    transform: scale(0.82) translateX(0);
     width: 200px;
   }
 
@@ -4150,7 +4155,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
   /* Offset fixes for especially multiple column view */
   .layout-multiple-columns.no-reduce-motion .detailed-status__button .icon-button.active:focus .icon-retweet,
   .layout-multiple-columns.no-reduce-motion .status .icon-button.icon-button--with-counter.star-icon.activate {
-    transform: translate(2px, -2px);
+    left: -90px;
+    top: -37px;
+    transform: scale(0.82) translate(2px, -2px);
   }
 
   /* stylelint-disable-next-line */
@@ -4289,7 +4296,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 
 /* stylelint-disable-next-line */
 .layout-multiple-columns.no-reduce-motion .status .icon-button.star-icon.activate .icon-star {
-  left: -27px;
+  left: -29px;
   top: -40px;
 }
 

diff --git a/layout-single-column.css b/layout-single-column.css
@@ -1,5 +1,5 @@
 /* Mastodon Bird UI by @[email protected]
-   2.0.0rc14 */
+   2.0.0rc15 */
 
 /* CSS variables */
 :root {
@@ -4212,6 +4212,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
  * ---------------------------------------
  */
 
+.layout-single-column .icon-button:has(.icon-retweet) {
+  height: 24px;
+  width: 24px;
+}
+
 @keyframes boost-animate {
   100% {
     background-position: -7770px;
@@ -4244,14 +4249,14 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
   }
 
   /* Detailed status offset for boost animation */
-  .layout-single-column.no-reduce-motion .detailed-status__button .icon-button.active:focus .icon-retweet {
-    left: -89px;
-    top: -47px;
+  .layout-single-column.no-reduce-motion .detailed-status__button .icon-button.active:not:focus .icon-retweet {
+    left: -88px;
+    top: -38px;
   }
 
   /* Offset in numbered item */
   .layout-single-column.no-reduce-motion .status__action-bar .icon-button.icon-button--with-counter.active:focus .icon-retweet {
-    left: -84px;
+    left: -81.8550px;
   }
 
   .layout-single-column.no-reduce-motion .status__action-bar .icon-button.icon-button--with-counter.activate .icon-button__counter,
@@ -4263,6 +4268,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
   .layout-single-column.no-reduce-motion .status__action-bar .icon-button.star-icon.icon-button--with-counter.activate .icon-button__counter {
     transform: translateX(12px);
   }
+
+  @media (max-width: 890px) {
+    /* stylelint-disable-next-line */
+    .layout-single-column.no-reduce-motion .status__action-bar .icon-button.icon-button--with-counter.active:focus .icon-retweet {
+      left: -84px;
+    }
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -4378,6 +4390,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
   width: 100px;
 }
 
+@media (max-width: 890px) {
+  .layout-single-column.no-reduce-motion .icon-button.star-icon.activate .icon-star {
+    top: -40px;
+  }
+}
+
 @media (prefers-reduced-motion: no-preference) {
   .layout-single-column.no-reduce-motion .icon-button.star-icon.activate .icon-star {
     /* 28 frames */

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mastodon-bird-ui",
-  "version": "2.0.0rc14",
+  "version": "2.0.0rc15",
   "description": "",
   "main": "index.js",
   "scripts": {