fix #137

matt8707 · Nov 27, 2022 · 30fc6cb · 30fc6cb · lichenophile · Nov 27, 2022
1 parent 5d721da
commit 30fc6cb
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 18 deletions.
diff --git a/button_card_templates/base.yaml b/button_card_templates/base.yaml
@@ -50,6 +50,38 @@ base:
             });
         }
       ]]]
+    card_bounce: |
+      [[[
+        // duration
+        let duration = 800;
+
+        // animate
+        this.style.animation = `card_bounce ${duration}ms cubic-bezier(0.22, 1, 0.36, 1)`;
+
+        // reset
+        window.setTimeout(() => { this.style.animation = "none"; }, duration + 100)
+
+        // add animation
+        if (this.getElementsByTagName("style").length === 0) {
+
+            // phone condition
+            let mq = window.matchMedia('(max-width: 800px)').matches;
+
+            let style = document.createElement('style');
+
+            style.innerHTML = `
+                @keyframes card_bounce {
+                    0%   { transform: scale(1);    }
+                    10%  { transform: scale(${mq ? "0.92" : "0.94"}); }
+                    25%  { transform: scale(1);    }
+                    30%  { transform: scale(${mq ? "0.96" : "0.98"}); }
+                    100% { transform: scale(1);    }
+                }
+            `;
+
+            this.appendChild(style);
+        }
+      ]]]
     action: toggle
     haptic: medium
   double_tap_action:
@@ -66,6 +98,7 @@ base:
       - grid-template-rows: auto repeat(2, min-content)
       - gap: 1.3%
       - align-items: start
+      - will-change: transform
     name:
       - justify-self: start
       - line-height: 121%

diff --git a/button_card_templates/loader.yaml b/button_card_templates/loader.yaml
@@ -21,24 +21,9 @@ loader:
     custom_fields:
       loader:
         - display: none
-        - top: >
-            [[[
-              return variables.tilt_enable
-                  ? '-6%'
-                  : '6%';
-            ]]]
-        - right: >
-            [[[
-              return variables.tilt_enable
-                  ? '-3.5%'
-                  : '6.5%';
-            ]]]
-        - width: >
-            [[[
-              return variables.tilt_enable
-                  ? '52%'
-                  : '42%';
-            ]]]
+        - top: -6%
+        - right: -3.5%
+        - width: 52%
         - position: absolute
         - opacity: 0.5
         - pointer-events: none