Fix: Converted inline item width to CSS variable (fixes #158) (#159)

cgkineo · Jan 28, 2025 · 3c4c988 · 3c4c988
1 parent 1ddd416
commit 3c4c988
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/js/HotgridView.js b/js/HotgridView.js
@@ -12,6 +12,8 @@ class HotgridView extends ComponentView {
     this.onItemClicked = this.onItemClicked.bind(this);
 
     this.setUpViewData();
+    this.setUpEventListeners();
+    this.setItemWidth();
   }
 
   remove() {
@@ -28,6 +30,24 @@ class HotgridView extends ComponentView {
     this._isPopupOpen = false;
   }
 
+  setUpEventListeners() {
+    this.listenTo(Adapt, 'device:changed', this.setItemWidth);
+  }
+
+  setItemWidth() {
+    const columns = this.model.get('_columns');
+    const fallbackColumns = 2;
+    const shouldCalculateColumns = Boolean(columns && device.isScreenSizeMin('medium'));
+    this.$el
+      .toggleClass(`has-${columns}-columns`, shouldCalculateColumns)
+      .toggleClass(`has-${fallbackColumns}-columns`, !shouldCalculateColumns);
+    const calculatedColumns = shouldCalculateColumns
+      ? columns
+      : fallbackColumns;
+    const width = `${100 / calculatedColumns}%`;
+    this.el.style.setProperty('--adapt-hotgrid-item-width', width);
+  }
+
   postRender() {
     this.$('.hotgrid__widget').imageready(this.setReadyStatus.bind(this));
 

diff --git a/less/hotgrid.less b/less/hotgrid.less
@@ -7,7 +7,7 @@
   }
 
   &__item {
-    width: 50%;
+    width: var(--adapt-hotgrid-item-width);
     line-height: 0;
   }
 

diff --git a/templates/hotgrid.jsx b/templates/hotgrid.jsx
@@ -61,9 +61,6 @@ export default function Hotgrid(props) {
               ])}
               role="listitem"
               key={_index}
-              style={(_columns && hasColumnLayout) ?
-                { width: `${100 / _columns}%` } :
-                null}
             >
 
               <button className={classes([