yummy-guide-generic-administrate 0.7.0 → 0.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cef007572ee8fc90b0579c0e6261263bb568d192702eb92ee418976a06404ffc
-  data.tar.gz: be42920844cf830f365d2297e21605ad5191257d5a3f37ba2dd9f364ae16c768
+  metadata.gz: b23f3b7fd7d17420fdeaf7325f51f1f70b93fb86497bcdb6621b617b5086d926
+  data.tar.gz: 38004b14e38a03b882d6e84253fc63ad1a2e8480ab287ee27ced1d13e81239a7
 SHA512:
-  metadata.gz: 1f9203647f13a0974af5bd4b0de54ff23c2a8991ce0eb3e065a3c0d561b1f88898c9bc470642c294bf786f5250eab2f9d5780c91b35d3f6b3cc1da9f36e2a305
-  data.tar.gz: b5d15a4f6ca3e708542fab9b1ce320ee76e45f3774bf775394cbff9548f4aca75f945259ef5e1a4c703a5ac5a3baa604a6933a6171868e83633f203698119866
+  metadata.gz: ecc7d99ccc8f23f5b4d0dd9288a9d6f870f95dc9c2d19256865828fa9a3d1f10d322fd37d627d2e85d648e13ab1fb128fb2d0430035451147fa2f4b72739bbb4
+  data.tar.gz: 05b2097517ad48edd1e8f54230bd3f2d1ea5e591dccc733d0397e1ec89d7d3b855920066296b4119c6c4b7b46572413ca07730dae2663e584cf403d1bc0f6cc9

data/README.md

@@ -138,7 +138,8 @@ engine の共通 partial に委譲します。
 
 gem 付属の collection partial をそのまま使う場合、table wrapper と table 本体に
 必要な `data-*` 属性はすでに入っています。そのため、JS / CSS を読み込めば固定
-ヘッダーは自動で有効になります。
+ヘッダーとカラム幅調整は自動で有効になります。カラム幅調整を使う場合は
+`yummy_guide_administrate/column_resizer.js` も読み込んでください。
 
 内部的には以下のような構造になります。
 
@@ -154,6 +155,8 @@ gem 付属の collection partial をそのまま使う場合、table wrapper と
 </div>
 ```
 
+複数画面で幅設定を共有したい場合は、render local に `column_width_storage_scope: "admin.reservations"` のような任意の scope 名を渡してください。
+
 #### 2. ヘッダー位置を明示したい場合
 
 固定ヘッダーの表示位置をページ上部の特定箇所に合わせたい場合は、

data/app/assets/javascripts/yummy_guide_administrate/column_resizer.js

@@ -0,0 +1,610 @@
+(function() {
+  var TABLE_SELECTOR = 'table[data-fixed-columns-count]';
+  var HANDLE_CLASS = 'admin-column-resizer__handle';
+  var HEADER_CLASS = 'admin-column-resizer__header';
+  var TABLE_CLASS = 'admin-column-resizer__table';
+  var DRAGGING_BODY_CLASS = 'admin-column-resizer--dragging';
+  var FIXED_HEADER_TABLE_CLASS = 'table-fixed-header__table';
+  var STORAGE_PREFIX = 'yummyGuideAdminColumnWidths:v1:';
+  var STYLE_ELEMENT_ID = 'admin-column-resizer-rules';
+  var WIDTH_VAR_PREFIX = '--admin-column-resizer-col-';
+  var MIN_WIDTH = 48;
+  var STICKY_REFRESH_INTERVAL = 120;
+
+  var dragState = null;
+  var dragApplyFrame = null;
+  var generatedRuleCount = 0;
+  var initializedHandles = new WeakSet();
+  var tableStates = new WeakMap();
+  var stickyRefreshFrame = null;
+  var stickyRefreshTimer = null;
+  var lastStickyRefreshAt = 0;
+
+  function storageScopeForTable(table) {
+    var sourceTable = matchingSourceTable(table);
+    var scopedTable = sourceTable || table;
+    var scope = scopedTable && scopedTable.getAttribute('data-column-resizer-storage-scope');
+
+    return scope || window.location.pathname;
+  }
+
+  function storageKeyForTable(table) {
+    return STORAGE_PREFIX + storageScopeForTable(table);
+  }
+
+  function parsedWidths(rawWidths) {
+    if (!rawWidths) return {};
+
+    var widths = JSON.parse(rawWidths);
+    return widths && typeof widths === 'object' && !Array.isArray(widths) ? widths : {};
+  }
+
+  function safeReadWidths(key) {
+    try {
+      return parsedWidths(window.localStorage.getItem(key));
+    } catch (_error) {
+      return {};
+    }
+  }
+
+  function safeWriteWidths(key, widths) {
+    try {
+      if (Object.keys(widths).length === 0) {
+        window.localStorage.removeItem(key);
+      } else {
+        window.localStorage.setItem(key, JSON.stringify(widths));
+      }
+    } catch (_error) {
+      // localStorage may be unavailable in private browsing or restricted contexts.
+    }
+  }
+
+  function preciseNumber(value) {
+    return Math.round(value * 1000) / 1000;
+  }
+
+  function cssPixelValue(value) {
+    return preciseNumber(value) + 'px';
+  }
+
+  function measuredWidth(element) {
+    if (!element) return 0;
+
+    var rectWidth = element.getBoundingClientRect().width;
+    return preciseNumber(rectWidth || element.offsetWidth || 0);
+  }
+
+  function normalizedIdentifier(value) {
+    return (value || '').toString().trim().toLowerCase()
+      .replace(/[^a-z0-9]+/g, '_')
+      .replace(/^_+|_+$/g, '')
+      .slice(0, 80) || 'column';
+  }
+
+  function directCells(row) {
+    return Array.from(row.children).filter(function(cell) {
+      return cell.tagName === 'TH' || cell.tagName === 'TD';
+    });
+  }
+
+  function columnHeaders(table) {
+    var row = table.querySelector('thead tr');
+    if (!row) return [];
+
+    return directCells(row).filter(function(cell) {
+      return cell.tagName === 'TH';
+    });
+  }
+
+  function headerLabel(header) {
+    return (header.getAttribute('aria-label') || header.getAttribute('title') || header.textContent || '')
+      .trim()
+      .replace(/\s+/g, ' ');
+  }
+
+  function headerSignature(table) {
+    return columnHeaders(table).map(function(header, index) {
+      return normalizedIdentifier(header.dataset.columnId || headerLabel(header) || ('column_' + (index + 1)));
+    }).join('__');
+  }
+
+  function matchingSourceTable(table) {
+    if (!table) return null;
+    if (!table.classList.contains(FIXED_HEADER_TABLE_CLASS)) return null;
+
+    var signature = headerSignature(table);
+    return sourceTables().find(function(sourceTable) {
+      return headerSignature(sourceTable) === signature;
+    }) || null;
+  }
+
+  function tableIdentifier(table) {
+    if (table.dataset.adminColumnResizerTableId) return table.dataset.adminColumnResizerTableId;
+
+    var sourceTable = matchingSourceTable(table);
+    if (sourceTable) {
+      table.dataset.adminColumnResizerTableId = tableIdentifier(sourceTable);
+      return table.dataset.adminColumnResizerTableId;
+    }
+
+    var tableLabel = table.id ||
+      table.getAttribute('aria-labelledby') ||
+      table.getAttribute('data-admin-column-resizer-table') ||
+      table.getAttribute('data-fixed-header-source');
+
+    if (!tableLabel) {
+      var index = sourceTables().indexOf(table);
+      tableLabel = 'table_' + (index >= 0 ? index + 1 : allTrackedTables().indexOf(table) + 1);
+    }
+
+    table.dataset.adminColumnResizerTableId = normalizedIdentifier(tableLabel);
+    return table.dataset.adminColumnResizerTableId;
+  }
+
+  function fallbackColumnId(table, header, index) {
+    return [
+      'fallback',
+      tableIdentifier(table),
+      index + 1,
+      normalizedIdentifier(headerLabel(header))
+    ].join('.');
+  }
+
+  function headerColumnId(header) {
+    return header.dataset.adminColumnResizerColumnId || header.dataset.columnId || '';
+  }
+
+  function assignHeaderColumnId(table, header, index) {
+    if (header.colSpan && header.colSpan > 1) return '';
+
+    var columnId = header.dataset.columnId || fallbackColumnId(table, header, index);
+    header.dataset.adminColumnResizerColumnId = columnId;
+    return columnId;
+  }
+
+  function columnWidthVariable(index) {
+    return WIDTH_VAR_PREFIX + (index + 1);
+  }
+
+  function columnRule(index) {
+    var nthChild = index + 1;
+    var variableName = columnWidthVariable(index);
+    var selector = [
+      '.' + TABLE_CLASS + ' > thead > tr > :nth-child(' + nthChild + ')',
+      '.' + TABLE_CLASS + ' > tbody > tr > :nth-child(' + nthChild + ')',
+      '.' + TABLE_CLASS + ' > tfoot > tr > :nth-child(' + nthChild + ')'
+    ].join(', ');
+
+    return selector + ' { box-sizing: border-box !important; width: var(' + variableName + ') !important; min-width: var(' + variableName + ') !important; max-width: var(' + variableName + ') !important; }';
+  }
+
+  function ensureStyleElement() {
+    var styleElement = document.getElementById(STYLE_ELEMENT_ID);
+    if (styleElement) return styleElement;
+
+    styleElement = document.createElement('style');
+    styleElement.id = STYLE_ELEMENT_ID;
+    document.head.appendChild(styleElement);
+
+    return styleElement;
+  }
+
+  function ensureColumnRules(columnCount) {
+    if (columnCount <= generatedRuleCount) return;
+
+    var rules = [];
+    for (var index = generatedRuleCount; index < columnCount; index += 1) {
+      rules.push(columnRule(index));
+    }
+
+    ensureStyleElement().appendChild(document.createTextNode(rules.join('\n') + '\n'));
+    generatedRuleCount = columnCount;
+  }
+
+  function tablesFromRoot(root) {
+    var tables = [];
+
+    function appendTable(table) {
+      if (table && tables.indexOf(table) === -1) {
+        tables.push(table);
+      }
+    }
+
+    if (root.closest) {
+      appendTable(root.closest(TABLE_SELECTOR));
+    }
+
+    if (root.matches && root.matches(TABLE_SELECTOR)) {
+      appendTable(root);
+    }
+
+    if (root.querySelectorAll) {
+      root.querySelectorAll(TABLE_SELECTOR).forEach(appendTable);
+    }
+
+    return tables;
+  }
+
+  function shouldInitializeForAddedNode(node) {
+    if (!node.matches) return false;
+    if (node.matches(TABLE_SELECTOR) || (node.querySelector && node.querySelector(TABLE_SELECTOR))) return true;
+    if (!node.closest || !node.closest(TABLE_SELECTOR)) return false;
+
+    return !!node.closest('thead') || node.matches('colgroup, col');
+  }
+
+  function allTrackedTables() {
+    return Array.from(document.querySelectorAll(TABLE_SELECTOR));
+  }
+
+  function sourceTables() {
+    return allTrackedTables().filter(function(table) {
+      return table.getAttribute('aria-hidden') !== 'true' && !table.classList.contains(FIXED_HEADER_TABLE_CLASS);
+    });
+  }
+
+  function stateForTable(table) {
+    return tableStates.get(table) || configureTable(table);
+  }
+
+  function ensureManagedColgroup(table, columnCount) {
+    var fixedHeaderColgroup = table.querySelector('colgroup[data-fixed-header-colgroup]');
+    var colgroup = fixedHeaderColgroup || table.querySelector('colgroup[data-admin-column-resizer-colgroup]');
+
+    if (!colgroup) {
+      colgroup = document.createElement('colgroup');
+      colgroup.setAttribute('data-admin-column-resizer-colgroup', 'true');
+      table.insertBefore(colgroup, table.firstChild);
+    }
+
+    while (colgroup.children.length < columnCount) {
+      colgroup.appendChild(document.createElement('col'));
+    }
+
+    return colgroup;
+  }
+
+  function configureTable(table) {
+    var headers = columnHeaders(table);
+    if (headers.length === 0) return null;
+
+    var indexByColumnId = Object.create(null);
+
+    headers.forEach(function(header, index) {
+      var columnId = assignHeaderColumnId(table, header, index);
+      if (!columnId) return;
+
+      if (indexByColumnId[columnId] === undefined) {
+        indexByColumnId[columnId] = index;
+      }
+
+      ensureHandle(header);
+    });
+
+    table.classList.add(TABLE_CLASS);
+    ensureColumnRules(headers.length);
+    ensureManagedColgroup(table, headers.length);
+
+    var state = {
+      columnCount: headers.length,
+      indexByColumnId: indexByColumnId
+    };
+    tableStates.set(table, state);
+
+    return state;
+  }
+
+  function columnIndex(table, columnId) {
+    var state = stateForTable(table);
+    if (!state || state.indexByColumnId[columnId] === undefined) return -1;
+
+    return state.indexByColumnId[columnId];
+  }
+
+  function columnHeader(table, columnId) {
+    var index = columnIndex(table, columnId);
+    if (index < 0) return null;
+
+    return columnHeaders(table)[index] || null;
+  }
+
+  function applyColgroupWidth(table, columnCount, index, widthValue) {
+    var colgroup = ensureManagedColgroup(table, columnCount);
+    if (!colgroup || !colgroup.children[index]) return;
+
+    colgroup.children[index].style.width = widthValue;
+  }
+
+  function clearColgroupWidth(table, columnCount, index) {
+    var colgroup = ensureManagedColgroup(table, columnCount);
+    if (!colgroup || !colgroup.children[index]) return;
+
+    colgroup.children[index].style.removeProperty('width');
+  }
+
+  function applyTableColumnWidth(table, columnId, width) {
+    var state = stateForTable(table);
+    var index = state && state.indexByColumnId[columnId];
+    if (!state || index === undefined) return;
+
+    var widthValue = cssPixelValue(width);
+    table.style.setProperty(columnWidthVariable(index), widthValue);
+    applyColgroupWidth(table, state.columnCount, index, widthValue);
+  }
+
+  function clearTableColumnWidth(table, columnId) {
+    var state = stateForTable(table);
+    var index = state && state.indexByColumnId[columnId];
+    if (!state || index === undefined) return;
+
+    table.style.removeProperty(columnWidthVariable(index));
+    clearColgroupWidth(table, state.columnCount, index);
+  }
+
+  function applyColumnWidth(columnId, width, key) {
+    allTrackedTables().forEach(function(table) {
+      if (key && storageKeyForTable(table) !== key) return;
+
+      applyTableColumnWidth(table, columnId, width);
+    });
+  }
+
+  function clearColumnWidth(columnId, key) {
+    allTrackedTables().forEach(function(table) {
+      if (key && storageKeyForTable(table) !== key) return;
+
+      clearTableColumnWidth(table, columnId);
+    });
+  }
+
+  function applyStoredWidthsToTable(table, widths) {
+    Object.keys(widths).forEach(function(columnId) {
+      var width = parseFloat(widths[columnId]);
+      if (Number.isNaN(width) || width < MIN_WIDTH) return;
+
+      applyTableColumnWidth(table, columnId, width);
+    });
+  }
+
+  function applyStoredWidthsToTables(tables) {
+    if (dragState) return;
+
+    var widthsByStorageKey = Object.create(null);
+
+    tables.forEach(function(table) {
+      var key = storageKeyForTable(table);
+      widthsByStorageKey[key] = widthsByStorageKey[key] || safeReadWidths(key);
+
+      applyStoredWidthsToTable(table, widthsByStorageKey[key]);
+    });
+  }
+
+  function dispatchStickyRefresh() {
+    stickyRefreshFrame = null;
+    lastStickyRefreshAt = Date.now();
+    window.dispatchEvent(new Event('resize'));
+  }
+
+  function scheduleStickyRefresh(immediate) {
+    if (stickyRefreshFrame || stickyRefreshTimer) return;
+
+    var elapsed = Date.now() - lastStickyRefreshAt;
+    var delay = immediate ? 0 : Math.max(0, STICKY_REFRESH_INTERVAL - elapsed);
+
+    stickyRefreshTimer = window.setTimeout(function() {
+      stickyRefreshTimer = null;
+      stickyRefreshFrame = window.requestAnimationFrame(dispatchStickyRefresh);
+    }, delay);
+  }
+
+  function columnNeedsDragRefresh(header) {
+    return header.classList.contains('sticky') ||
+      header.classList.contains('sticky-left') ||
+      header.classList.contains('actions-column');
+  }
+
+  function sourceTableForHandle(handle) {
+    var header = handle.closest('th');
+    if (!header) return null;
+
+    var table = handle.closest(TABLE_SELECTOR);
+    var columnId = headerColumnId(header);
+
+    if (table && table.getAttribute('aria-hidden') !== 'true' && !table.classList.contains(FIXED_HEADER_TABLE_CLASS)) {
+      return table;
+    }
+
+    return sourceTables().find(function(sourceTable) {
+      return columnHeader(sourceTable, columnId);
+    }) || matchingSourceTable(table) || null;
+  }
+
+  function flushDragWidth() {
+    if (!dragState) return;
+
+    if (dragApplyFrame) {
+      window.cancelAnimationFrame(dragApplyFrame);
+      dragApplyFrame = null;
+    }
+
+    applyColumnWidth(dragState.columnId, dragState.currentWidth || dragState.startWidth, dragState.storageKey);
+  }
+
+  function scheduleDragWidth(width) {
+    dragState.currentWidth = width;
+    dragState.moved = dragState.moved || Math.abs(width - dragState.startWidth) > 2;
+
+    if (dragApplyFrame) return;
+
+    dragApplyFrame = window.requestAnimationFrame(function() {
+      dragApplyFrame = null;
+      if (!dragState) return;
+
+      applyColumnWidth(dragState.columnId, dragState.currentWidth, dragState.storageKey);
+      if (dragState.refreshDuringDrag) scheduleStickyRefresh(false);
+    });
+  }
+
+  function startDrag(event) {
+    if (event.button !== 0) return;
+
+    var handle = event.currentTarget;
+    var header = handle.closest('th');
+    if (!header) return;
+
+    var columnId = headerColumnId(header);
+    if (!columnId) return;
+
+    var sourceTable = sourceTableForHandle(handle);
+    if (!sourceTable) return;
+
+    var sourceHeader = columnHeader(sourceTable, columnId) || header;
+    var startWidth = measuredWidth(sourceHeader) || measuredWidth(header);
+    if (!startWidth) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    dragState = {
+      columnId: columnId,
+      storageKey: storageKeyForTable(sourceTable),
+      startX: event.clientX,
+      startWidth: startWidth,
+      currentWidth: startWidth,
+      moved: false,
+      refreshDuringDrag: columnNeedsDragRefresh(sourceHeader)
+    };
+
+    document.body.classList.add(DRAGGING_BODY_CLASS);
+    document.addEventListener('pointermove', handleDragMove);
+    document.addEventListener('pointerup', finishDrag);
+    document.addEventListener('pointercancel', finishDrag);
+  }
+
+  function handleDragMove(event) {
+    if (!dragState) return;
+
+    event.preventDefault();
+
+    scheduleDragWidth(Math.max(MIN_WIDTH, dragState.startWidth + event.clientX - dragState.startX));
+  }
+
+  function finishDrag(event) {
+    if (!dragState) return;
+
+    if (event) {
+      event.preventDefault();
+    }
+
+    flushDragWidth();
+
+    var widths = safeReadWidths(dragState.storageKey);
+    var width = Math.max(MIN_WIDTH, dragState.currentWidth || dragState.startWidth);
+    widths[dragState.columnId] = preciseNumber(width);
+    safeWriteWidths(dragState.storageKey, widths);
+
+    dragState = null;
+    document.body.classList.remove(DRAGGING_BODY_CLASS);
+    document.removeEventListener('pointermove', handleDragMove);
+    document.removeEventListener('pointerup', finishDrag);
+    document.removeEventListener('pointercancel', finishDrag);
+    scheduleStickyRefresh(true);
+  }
+
+  function resetColumn(event) {
+    var handle = event.currentTarget;
+    var header = handle.closest('th');
+    if (!header) return;
+
+    var columnId = headerColumnId(header);
+    if (!columnId) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    var sourceTable = sourceTableForHandle(handle);
+    var key = storageKeyForTable(sourceTable || handle.closest(TABLE_SELECTOR));
+    var widths = safeReadWidths(key);
+    delete widths[columnId];
+    safeWriteWidths(key, widths);
+    clearColumnWidth(columnId, key);
+    scheduleStickyRefresh(true);
+  }
+
+  function stopHandleClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
+  function ensureHandle(header) {
+    if (!headerColumnId(header)) return;
+
+    header.classList.add(HEADER_CLASS);
+
+    var handle = Array.from(header.children).find(function(child) {
+      return child.classList && child.classList.contains(HANDLE_CLASS);
+    });
+
+    if (!handle) {
+      handle = document.createElement('span');
+      handle.className = HANDLE_CLASS;
+      handle.setAttribute('aria-hidden', 'true');
+      header.appendChild(handle);
+    }
+
+    if (initializedHandles.has(handle)) return;
+
+    initializedHandles.add(handle);
+    handle.addEventListener('pointerdown', startDrag);
+    handle.addEventListener('dblclick', resetColumn);
+    handle.addEventListener('click', stopHandleClick);
+  }
+
+  function initializeTable(table) {
+    return configureTable(table);
+  }
+
+  function initializeColumnResizer(root) {
+    if (!root.querySelectorAll) return;
+
+    var configuredTables = tablesFromRoot(root).filter(function(table) {
+      return !!initializeTable(table);
+    });
+
+    applyStoredWidthsToTables(configuredTables);
+  }
+
+  function initializeFromDocument() {
+    initializeColumnResizer(document);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeFromDocument);
+  } else {
+    initializeFromDocument();
+  }
+
+  document.addEventListener('turbo:load', initializeFromDocument);
+  window.addEventListener('resize', initializeFromDocument);
+
+  if (window.MutationObserver) {
+    var mutationObserver = new MutationObserver(function(mutations) {
+      mutations.forEach(function(mutation) {
+        mutation.addedNodes.forEach(function(node) {
+          if (node.nodeType !== Node.ELEMENT_NODE) return;
+          if (!shouldInitializeForAddedNode(node)) return;
+
+          initializeColumnResizer(node);
+        });
+      });
+    });
+
+    mutationObserver.observe(document.documentElement, {
+      childList: true,
+      subtree: true
+    });
+  }
+
+  setTimeout(initializeFromDocument, 100);
+  setTimeout(initializeFromDocument, 300);
+})();

data/app/assets/javascripts/yummy_guide_administrate/sticky_left_columns.js

@@ -1,5 +1,6 @@
 (function() {
   var TABLE_SELECTOR = "table[data-fixed-columns-count]";
+  var MOBILE_MEDIA_QUERY = "(max-width: 767px)";
   var resizeObservers = new WeakMap();
 
   function directCells(row) {
@@ -31,10 +32,20 @@
   }
 
   function fixedColumnsCount(table) {
-    var parsedCount = parseInt(table.dataset.fixedColumnsCount || "0", 10);
+    var rawCount = table.dataset.fixedColumnsCount || "0";
+
+    if (isMobile() && table.dataset.mobileFixedColumnsCount) {
+      rawCount = table.dataset.mobileFixedColumnsCount;
+    }
+
+    var parsedCount = parseInt(rawCount, 10);
     return Number.isNaN(parsedCount) ? 0 : Math.max(parsedCount, 0);
   }
 
+  function isMobile() {
+    return window.matchMedia && window.matchMedia(MOBILE_MEDIA_QUERY).matches;
+  }
+
   function stickyOffsets(table, count) {
     var headerRow = table.querySelector("thead tr");
     if (!headerRow) return [];

data/app/assets/javascripts/yummy_guide_administrate/sticky_table_headers.js

@@ -1,6 +1,7 @@
 (function() {
   var TABLE_SELECTOR = 'table[data-fixed-columns-count]';
   var WRAPPER_SELECTOR = '[data-fixed-header-scroll], .scroll-table, .home-table__wrapper, .table-wrap, .af__table__content';
+  var MOBILE_MEDIA_QUERY = '(max-width: 767px)';
   var resizeObservers = new WeakMap();
   var observedScrolls = new WeakMap();
   var observedFixedScrolls = new WeakMap();
@@ -36,10 +37,20 @@
   }
 
   function fixedColumnsCount(table) {
-    var parsedCount = parseInt(table.dataset.fixedColumnsCount || '0', 10);
+    var rawCount = table.dataset.fixedColumnsCount || '0';
+
+    if (isMobile() && table.dataset.mobileFixedColumnsCount) {
+      rawCount = table.dataset.mobileFixedColumnsCount;
+    }
+
+    var parsedCount = parseInt(rawCount, 10);
     return Number.isNaN(parsedCount) ? 0 : Math.max(parsedCount, 0);
   }
 
+  function isMobile() {
+    return window.matchMedia && window.matchMedia(MOBILE_MEDIA_QUERY).matches;
+  }
+
   function stickyOffsets(widths) {
     var offsets = [];
     var currentLeft = 0;
@@ -555,6 +566,7 @@
 
     fixedTable.className = fixedHeaderTableClassName(sourceTable);
     fixedTable.dataset.fixedColumnsCount = sourceTable.dataset.fixedColumnsCount || '0';
+    fixedTable.dataset.mobileFixedColumnsCount = sourceTable.dataset.mobileFixedColumnsCount || fixedTable.dataset.fixedColumnsCount;
     fixedTable.style.width = '';
     fixedTable.innerHTML = sourceHead.outerHTML;
 

data/app/assets/stylesheets/yummy_guide_administrate/_column_resizer.scss

@@ -0,0 +1,64 @@
+.admin-column-resizer__header {
+  position: relative;
+}
+
+.admin-column-resizer__handle {
+  position: absolute;
+  top: 0;
+  right: -5px;
+  bottom: 0;
+  z-index: 20;
+  width: 12px;
+  cursor: col-resize;
+  touch-action: none;
+}
+
+.admin-column-resizer__handle::after {
+  content: "";
+  position: absolute;
+  top: 20%;
+  right: 3px;
+  bottom: 20%;
+  width: 1px;
+  background: rgba(255, 255, 255, 0.45);
+  opacity: 0;
+  transition: opacity 0.15s ease, background-color 0.15s ease;
+}
+
+.admin-column-resizer__header:hover > .admin-column-resizer__handle::after,
+.admin-column-resizer__handle:focus-visible::after,
+.admin-column-resizer--dragging .admin-column-resizer__handle::after {
+  opacity: 1;
+}
+
+.admin-column-resizer__handle:hover::after,
+.admin-column-resizer__handle:focus-visible::after {
+  background: rgba(255, 255, 255, 0.8);
+}
+
+.admin-column-resizer--dragging,
+.admin-column-resizer--dragging * {
+  cursor: col-resize !important;
+  user-select: none !important;
+}
+
+[data-fixed-table-header] .admin-column-resizer__handle {
+  pointer-events: auto;
+}
+
+[data-fixed-table-header] .table-fixed-header__table th.admin-column-resizer__header:not(.sticky):not(.sticky-left) {
+  position: relative;
+}
+
+@media (pointer: coarse), screen and (max-width: 767px) {
+  .admin-column-resizer__handle {
+    right: -10px;
+    width: 28px;
+  }
+
+  .admin-column-resizer__handle::after {
+    right: 13px;
+    background: rgba(255, 255, 255, 0.75);
+    opacity: 1;
+  }
+}

data/app/assets/stylesheets/yummy_guide_administrate/_resizable_navigation.scss

@@ -48,7 +48,7 @@
     z-index: 2;
 
     &::after {
-      background-color: transparent;
+      background-color: #d1d5db;
       bottom: 0;
       content: "";
       left: 3px;
@@ -59,10 +59,14 @@
     }
 
     &:hover::after {
-      background-color: #9aa8ba;
+      background-color: #4b5563;
     }
   }
 
+  .admin-navigation--resizing .admin-navigation-resize-handle::after {
+    background-color: #374151;
+  }
+
   .admin-navigation-scroll-area {
     max-height: inherit;
     overflow-x: hidden;
@@ -70,10 +74,6 @@
     overscroll-behavior: contain;
   }
 
-  .admin-navigation--resizing .admin-navigation-resize-handle::after {
-    background-color: #5d7596;
-  }
-
   .admin-navigation-scroll-area .menubar,
   .admin-navigation-scroll-area .menubar a,
   .admin-navigation-scroll-area .menubar__group-label,
@@ -99,6 +99,10 @@
     width: 100%;
   }
 
+  .admin-navigation-scroll-area .navigation__link--indented {
+    text-indent: 16px;
+  }
+
   .admin-navigation-scroll-area .menubar li.menubar__item a {
     padding-left: 36px;
   }

data/app/assets/stylesheets/yummy_guide_administrate/components.scss

@@ -1,5 +1,6 @@
 @import "fixed_submit_actions";
 @import "datetime_input";
+@import "column_resizer";
 
 @media screen and (min-width: 768px) {
   .app-container {
@@ -661,6 +662,27 @@ table[data-fixed-columns-count] [data-fixed-header-column-min-width] {
 }
 
 @media (max-width: 767px) {
+  .scroll-table,
+  .sticky-table-scroll,
+  .home-table__wrapper,
+  .table-wrap,
+  .af__table__content {
+    max-width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior-x: contain;
+    touch-action: pan-x pan-y;
+  }
+
+  .scroll-table table[data-fixed-columns-count],
+  .sticky-table-scroll table[data-fixed-columns-count],
+  .home-table__wrapper table[data-fixed-columns-count],
+  .table-wrap table[data-fixed-columns-count],
+  .af__table__content table[data-fixed-columns-count] {
+    min-width: max-content;
+  }
+
   .yummy-guide-administrate-filter-form__title {
     padding: 16px 16px 12px;
   }

data/app/dashboards/yummy_guide/administrate/application_dashboard.rb

@@ -25,6 +25,18 @@ module YummyGuide
         end
       end
 
+      def self.index_mobile_fixed_columns_count
+        if const_defined?(:INDEX_MOBILE_FIXED_COLUMNS_COUNT, false)
+          const_get(:INDEX_MOBILE_FIXED_COLUMNS_COUNT)
+        elsif const_defined?(:INDEX_FIXED_COLUMNS_COUNT, false)
+          [index_fixed_columns_count.to_i, 1].min
+        elsif superclass.respond_to?(:index_mobile_fixed_columns_count)
+          superclass.index_mobile_fixed_columns_count
+        else
+          [index_fixed_columns_count.to_i, 1].min
+        end
+      end
+
       def self.collection_sortable_attributes
         if const_defined?(:COLLECTION_SORTABLE_ATTRIBUTES, false)
           const_get(:COLLECTION_SORTABLE_ATTRIBUTES)
@@ -43,4 +55,3 @@ module YummyGuide
     end
   end
 end
-

data/app/helpers/yummy_guide/administrate/collection_helper.rb

@@ -9,20 +9,34 @@ module YummyGuide
       ].freeze
 
       def yummy_guide_administrate_collection_table_fixed_columns_count(page:, collection_presenter:)
-        return 0 unless page.respond_to?(:instance_variable_defined?) && page.instance_variable_defined?(:@dashboard)
-
-        dashboard = page.instance_variable_get(:@dashboard)
-        return 0 unless dashboard&.class&.respond_to?(:index_fixed_columns_count)
-
-        fixed_columns_count = dashboard.class.index_fixed_columns_count.to_i
-        fixed_columns_count = 0 if fixed_columns_count.negative?
+        yummy_guide_administrate_collection_fixed_columns_count_for(
+          page: page,
+          collection_presenter: collection_presenter,
+          method_name: :index_fixed_columns_count
+        )
+      end
 
-        attribute_count = collection_presenter.attribute_types.size
-        [fixed_columns_count, attribute_count].min
+      def yummy_guide_administrate_collection_table_mobile_fixed_columns_count(page:, collection_presenter:)
+        yummy_guide_administrate_collection_fixed_columns_count_for(
+          page: page,
+          collection_presenter: collection_presenter,
+          method_name: :index_mobile_fixed_columns_count
+        )
       rescue NoMethodError
         0
       end
 
+      def yummy_guide_administrate_collection_column_id(collection_presenter, column_name)
+        [
+          collection_presenter.resource_name,
+          column_name
+        ].map { |segment| segment.to_s.parameterize(separator: "_") }.join(".")
+      end
+
+      def yummy_guide_administrate_collection_actions_column_id(collection_presenter)
+        yummy_guide_administrate_collection_column_id(collection_presenter, :actions)
+      end
+
       def yummy_guide_administrate_build_collection_cell(content:, present_path: nil, target: nil, reference_link: false, text_link: false, leading_actions: nil, copy_text: nil, copy_text_transform: nil)
         normalized_content = yummy_guide_administrate_collection_cell_content(content)
 
@@ -87,6 +101,21 @@ module YummyGuide
 
       private
 
+      def yummy_guide_administrate_collection_fixed_columns_count_for(page:, collection_presenter:, method_name:)
+        return 0 unless page.respond_to?(:instance_variable_defined?) && page.instance_variable_defined?(:@dashboard)
+
+        dashboard = page.instance_variable_get(:@dashboard)
+        return 0 unless dashboard&.class&.respond_to?(method_name)
+
+        fixed_columns_count = dashboard.class.public_send(method_name).to_i
+        fixed_columns_count = 0 if fixed_columns_count.negative?
+
+        attribute_count = collection_presenter.attribute_types.size
+        [fixed_columns_count, attribute_count].min
+      rescue NoMethodError
+        0
+      end
+
       def yummy_guide_administrate_collection_link(content, href:, target: nil, html_class: "action-show", aria: nil, data: nil)
         return content if href.blank?
 

data/app/helpers/yummy_guide/administrate/filter_controls_helper.rb

@@ -17,7 +17,8 @@ module YummyGuide
         extra_actions: [],
         button_label: "Filter",
         title: "Filter Options",
-        submit_label: "Filter"
+        submit_label: "Filter",
+        close_label: "Close"
       )
         dashboard ||= admin_filter_dashboard_from_page(page)
         scope = form.to_s
@@ -63,7 +64,8 @@ module YummyGuide
                 locals: locals,
                 extra_actions: extra_actions,
                 title: title,
-                submit_label: submit_label
+                submit_label: submit_label,
+                close_label: close_label
               )
             ])
           end
@@ -104,7 +106,7 @@ module YummyGuide
           .select { |field| field.visible?(self, locals) }
       end
 
-      def admin_filter_form(fields:, scope:, path:, clear_path:, method:, current_values:, hidden_fields:, root_hidden_fields:, locals:, extra_actions:, title:, submit_label:)
+      def admin_filter_form(fields:, scope:, path:, clear_path:, method:, current_values:, hidden_fields:, root_hidden_fields:, locals:, extra_actions:, title:, submit_label:, close_label:)
         form_with(
           url: path,
           scope: scope,
@@ -119,7 +121,7 @@ module YummyGuide
         ) do |f|
           safe_join([
             admin_filter_hidden_fields(scope, hidden_fields, root_hidden_fields),
-            content_tag(:h2, title, class: "filter-form__title"),
+            admin_filter_form_header(title: title, close_label: close_label),
             content_tag(:div, class: "filter-form__body") do
               content_tag(:table, class: "filter_table") do
                 safe_join(fields.map { |field| field.row(self, f, scope, current_values, locals) })
@@ -136,6 +138,22 @@ module YummyGuide
         end
       end
 
+      def admin_filter_form_header(title:, close_label:)
+        content_tag(:div, class: "filter-form__header") do
+          safe_join([
+            content_tag(:h2, title, class: "filter-form__title"),
+            button_tag(
+              "x",
+              type: "button",
+              class: "filter-form__close",
+              data: { behavior: "filter-form-close" },
+              aria: { label: close_label },
+              title: close_label
+            )
+          ])
+        end
+      end
+
       def admin_filter_hidden_fields(scope, hidden_fields, root_hidden_fields)
         root_tags = admin_filter_evaluated_hash(root_hidden_fields).map do |key, value|
           hidden_field_tag(key, value)

data/app/views/yummy_guide/administrate/administrate/application/_collection.html.erb

@@ -1,7 +1,12 @@
+<% column_width_storage_scope = local_assigns[:column_width_storage_scope].presence %>
 <div class="scroll-table" data-fixed-header-scroll>
   <table
     aria-labelledby="<%= table_title %>"
     data-fixed-columns-count="<%= yummy_guide_administrate_collection_table_fixed_columns_count(page: page, collection_presenter: collection_presenter) %>"
+    data-mobile-fixed-columns-count="<%= yummy_guide_administrate_collection_table_mobile_fixed_columns_count(page: page, collection_presenter: collection_presenter) %>"
+    <% if column_width_storage_scope %>
+      data-column-resizer-storage-scope="<%= column_width_storage_scope %>"
+    <% end %>
     data-fixed-header-source
   >
     <thead>
@@ -11,6 +16,7 @@
             class="cell-label cell-label--<%= attr_type.html_class %> cell-label--<%= collection_presenter.ordered_html_class(attr_name) %> cell-label--<%= "#{collection_presenter.resource_name}_#{attr_name}" %>"
             scope="col"
             aria-sort="<%= sort_order(collection_presenter.ordered_html_class(attr_name)) %>"
+            data-column-id="<%= yummy_guide_administrate_collection_column_id(collection_presenter, attr_name) %>"
           >
             <%= link_to(sanitized_order_params(page, collection_field_name).merge(
                   collection_presenter.order_params_for(attr_name, key: collection_field_name)

data/lib/yummy_guide/administrate/engine.rb

@@ -9,6 +9,7 @@ module YummyGuide
         app.config.assets.precompile += %w[
           yummy_guide_administrate/components.css
           yummy_guide_administrate/clipboards.js
+          yummy_guide_administrate/column_resizer.js
           yummy_guide_administrate/datetime_input.js
           yummy_guide_administrate/fixed_submit_actions.js
           yummy_guide_administrate/filter_controls.js

data/lib/yummy_guide/administrate/version.rb

@@ -2,6 +2,6 @@
 
 module YummyGuide
   module Administrate
-    VERSION = "0.7.0"
+    VERSION = "0.8.0"
   end
 end

data/spec/yummy_guide/administrate/application_dashboard_spec.rb

@@ -18,6 +18,30 @@ RSpec.describe YummyGuide::Administrate::ApplicationDashboard do
     end
   end
 
+  describe ".index_mobile_fixed_columns_count" do
+    it "uses the subclass mobile constant when defined" do
+      subclass = Class.new(described_class)
+      subclass.const_set(:INDEX_FIXED_COLUMNS_COUNT, 5)
+      subclass.const_set(:INDEX_MOBILE_FIXED_COLUMNS_COUNT, 2)
+
+      expect(subclass.index_mobile_fixed_columns_count).to eq(2)
+    end
+
+    it "caps a subclass desktop fixed column count to one by default" do
+      subclass = Class.new(described_class)
+      subclass.const_set(:INDEX_FIXED_COLUMNS_COUNT, 5)
+
+      expect(subclass.index_mobile_fixed_columns_count).to eq(1)
+    end
+
+    it "keeps zero fixed columns on mobile when desktop fixed columns are zero" do
+      subclass = Class.new(described_class)
+      subclass.const_set(:INDEX_FIXED_COLUMNS_COUNT, 0)
+
+      expect(subclass.index_mobile_fixed_columns_count).to eq(0)
+    end
+  end
+
   describe ".collection_attribute_sortable?" do
     it "uses collection attributes when explicit sortable attributes are absent" do
       subclass = Class.new(described_class)

data/spec/yummy_guide/administrate/collection_helper_spec.rb

@@ -37,6 +37,46 @@ RSpec.describe YummyGuide::Administrate::CollectionHelper do
     end
   end
 
+  describe "#yummy_guide_administrate_collection_table_mobile_fixed_columns_count" do
+    # dashboard のモバイル固定列数も表示列数を超えないことを確認する
+    it "caps the mobile fixed column count by the number of visible attributes" do
+      dashboard_class = Class.new do
+        def self.index_mobile_fixed_columns_count
+          4
+        end
+      end
+
+      page = Object.new
+      page.instance_variable_set(:@dashboard, dashboard_class.new)
+      collection_presenter = Struct.new(:attribute_types).new({ id: :integer, name: :string })
+
+      expect(helper_host.yummy_guide_administrate_collection_table_mobile_fixed_columns_count(page: page, collection_presenter: collection_presenter)).to eq(2)
+    end
+  end
+
+  describe "#yummy_guide_administrate_collection_column_id" do
+    let(:collection_presenter) { Struct.new(:resource_name).new("external_reservation") }
+
+    # 一覧カラム幅の保存に使う ID が列順ではなくリソース名と属性名から決まることを確認する
+    it "builds a stable id from the resource name and attribute name" do
+      expect(helper_host.yummy_guide_administrate_collection_column_id(collection_presenter, :customer_name)).to eq("external_reservation.customer_name")
+    end
+
+    # 手書き追加カラムも同じ形式の ID で保存対象にできることを確認する
+    it "normalizes custom column names" do
+      expect(helper_host.yummy_guide_administrate_collection_column_id(collection_presenter, "Article Pages")).to eq("external_reservation.article_pages")
+    end
+  end
+
+  describe "#yummy_guide_administrate_collection_actions_column_id" do
+    # actions 列も通常カラムと同じ保存キー体系に入ることを確認する
+    it "builds the actions column id" do
+      collection_presenter = Struct.new(:resource_name).new("reservation")
+
+      expect(helper_host.yummy_guide_administrate_collection_actions_column_id(collection_presenter)).to eq("reservation.actions")
+    end
+  end
+
   describe "#yummy_guide_administrate_build_collection_cell" do
     let(:present_path) { "/admin/articles/test-article" }
 

data/spec/yummy_guide/administrate/filter_controls_helper_spec.rb

@@ -42,8 +42,12 @@ RSpec.describe YummyGuide::Administrate::FilterControlsHelper do
         search_options: { keyword: "tokyo", status: "closed" }
       )
       document = fragment(html)
+      close_button = document.at_css('button.filter-form__close[data-behavior="filter-form-close"]')
 
       expect(document.at_css("#reserv-filter-options > a.button").text).to eq("Filter")
+      expect(document.at_css(".filter-form__header .filter-form__title").text).to eq("Filter Options")
+      expect(close_button["aria-label"]).to eq("Close")
+      expect(close_button["type"]).to eq("button")
       expect(document.at_css("form.filter-form")["action"]).to eq("/admin/resources")
       expect(document.at_css('input[name="search_options[keyword]"]')["value"]).to eq("tokyo")
       expect(document.at_css('select[name="search_options[status]"] option[selected]')["value"]).to eq("closed")

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: yummy-guide-generic-administrate
 version: !ruby/object:Gem::Version
-  version: 0.7.0
+  version: 0.8.0
 platform: ruby
 authors:
 - akatsuki-kk
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-05-29 00:00:00.000000000 Z
+date: 2026-06-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: administrate
@@ -91,6 +91,7 @@ files:
 - Rakefile
 - app/assets/images/yummy_guide_administrate/icon-copy.svg
 - app/assets/javascripts/yummy_guide_administrate/clipboards.js
+- app/assets/javascripts/yummy_guide_administrate/column_resizer.js
 - app/assets/javascripts/yummy_guide_administrate/datetime_input.js
 - app/assets/javascripts/yummy_guide_administrate/filter_controls.js
 - app/assets/javascripts/yummy_guide_administrate/filter_form.js
@@ -98,6 +99,7 @@ files:
 - app/assets/javascripts/yummy_guide_administrate/resizable_navigation.js
 - app/assets/javascripts/yummy_guide_administrate/sticky_left_columns.js
 - app/assets/javascripts/yummy_guide_administrate/sticky_table_headers.js
+- app/assets/stylesheets/yummy_guide_administrate/_column_resizer.scss
 - app/assets/stylesheets/yummy_guide_administrate/_datetime_input.scss
 - app/assets/stylesheets/yummy_guide_administrate/_fixed_submit_actions.scss
 - app/assets/stylesheets/yummy_guide_administrate/_resizable_navigation.scss