CSS improvements

jalibu · Jan 21, 2024 · 3b08d5d · 3b08d5d
1 parent ea0289f
commit 3b08d5d
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 27 deletions.
diff --git a/MMM-Jast.css b/MMM-Jast.css
@@ -1,9 +1,13 @@
 @keyframes tickerh {
   0% {
-    transform: translate(0, 0);
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+    will-change: transform;
   }
   100% {
-    transform: translate(-100%, 0);
+    -webkit-transform: translateX(-100%);
+    transform: translateX(-100%);
+    will-change: transform;
   }
 }
 .jast-wrapper {

diff --git a/MMM-Jast.js b/MMM-Jast.js
diff --git a/node_helper.js b/node_helper.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mmm-jast",
-  "version": "2.9.1",
+  "version": "2.9.2",
   "description": "A minimalistic stock ticker based on Yahoo's finance API for the MagicMirror² platform.",
   "main": "MMM-Jast.js",
   "repository": {

diff --git a/templates/StockList.njk b/templates/StockList.njk
@@ -2,16 +2,16 @@
   {% for stock in stocks %}
     {% if not stock.meta.hidden or config.showHiddenStocks %}
       <li class="jast-stock">
-        <span>{{ utils.getStockName(stock) }}:</span>
+        <span class="jast-stock-name">{{ utils.getStockName(stock) }}:</span>
         {% if utils.getStockChange(stock) > 0 %}
           {% set colorClass = "high" %}
         {% elif utils.getStockChange(stock) < 0 %}
           {% set colorClass = "low" %}
         {% else %}
           {% set colorClass = "" %}
         {% endif %}
-        <span class="{{ colorClass }}">
-          <span>{{ utils.getCurrentValueAsString(stock, config) }}</span>
+        <span class="jast-values-wrapper {{ colorClass }}">
+          <span class="jast-change-wrapper">{{ utils.getCurrentValueAsString(stock, config) }}</span>
           {% if colorClass and (config.showChangeValue or config.showChangePercent) %}
             <span class="jast-change">
               ({% if config.showChangeValue %}<span class="jast-change-value">{% if colorClass == "high" %}+{%endif%}{{ utils.getStockChangeAsString(stock, config) }}</span>{% endif %}
@@ -27,7 +27,7 @@
         {% else %}
           {% set colorClassPerformance = "" %}
         {% endif %}
-        <span class="{{ colorClassPerformance }}">
+          <span class="jast-performance {{ colorClassPerformance }}">
           {% if colorClassPerformance and (config.showStockPerformanceValue or config.showStockPerformancePercent) %}
             <span class="jast-change">
               (
@@ -37,8 +37,7 @@
               )
             </span>
           {% endif %}
-        </span>
-
+          </span>
       </li>
     {% endif %}
   {% endfor %}