yummy-guide-generic-administrate 0.8.4 → 0.8.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 18c6b70d901d111ee883c8217e15eb52d5f3b7d8d6c41ef95d371ac552a78afd
-  data.tar.gz: f6de376c7ebe6876384278c8e4993ceb23485267e30c6bcedc1087b26715e278
+  metadata.gz: 3940f84fd25e7fe60419f17273656e50af22465caf4bbfa29e1ac209d03b5bd4
+  data.tar.gz: 3bc3455f747754d483ee5329c5d4991289eaac0630961a808558f551e7f9c819
 SHA512:
-  metadata.gz: 16d507455a42dd056a00470296f2387ad9725f7c2fa89e9a92b42abbe825b6063eb48d34bd91e7ba468cea86458b0baaf8d6a92f3d8185cd80395d901619effc
-  data.tar.gz: 99b43545b341e94587d5f59ed3c2ab85a70759806c3048d37bc587ff25ec2c56bcd376ea68ee5b7f38fcc3d0f3368db9ae5f55a8d567e16a4cfc4785666e8eaf
+  metadata.gz: b9843e5fdc03dd2e08330368cb267ac888fa1d5327bad40550b44a0960881d6d4cd87b77a0e2cad10f70d3d04f503d88b39192f20f82e4e3adc04910e5af3a7e
+  data.tar.gz: ba1be8f0226de1a9bd37650827529ea7b5c59d2d680f4d31066f86246fcb3085a87b9a5c1b6c91ccce5d7ffd0360e98d5f2bc281a07426f07987edef714a1503

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

@@ -71,6 +71,11 @@
     return preciseNumber(value) + 'px';
   }
 
+  function parsedPixelValue(value) {
+    var parsedValue = parseFloat(value || '0');
+    return Number.isNaN(parsedValue) ? 0 : preciseNumber(parsedValue);
+  }
+
   function measuredWidth(element) {
     if (!element) return 0;
 
@@ -307,6 +312,7 @@
       indexByColumnId: indexByColumnId
     };
     tableStates.set(table, state);
+    refreshCssStickyLeftColumns(table);
 
     return state;
   }
@@ -375,6 +381,7 @@
     table.style.setProperty(columnWidthVariable(index), widthValue);
     setAdjustedColumn(table, index, true);
     applyColgroupWidth(table, state.columnCount, index, widthValue);
+    refreshCssStickyLeftColumns(table);
   }
 
   function clearTableColumnWidth(table, columnId) {
@@ -385,6 +392,65 @@
     table.style.removeProperty(columnWidthVariable(index));
     setAdjustedColumn(table, index, false);
     clearColgroupWidth(table, state.columnCount, index);
+    refreshCssStickyLeftColumns(table);
+  }
+
+  function stickyColumnIndexes(table, className) {
+    var row = table && table.querySelector('thead tr');
+    if (!row) return [];
+
+    return directCells(row).map(function(cell, index) {
+      return cell.classList && cell.classList.contains(className) ? index : null;
+    }).filter(function(index) {
+      return index !== null;
+    });
+  }
+
+  function managedColumnWidth(table, index) {
+    var colgroup = table && table.querySelector('colgroup[data-admin-column-resizer-colgroup], colgroup[data-fixed-header-colgroup]');
+    var col = colgroup && colgroup.children[index];
+
+    return col ? parsedPixelValue(col.style.width) : 0;
+  }
+
+  function stickyColumnWidth(table, header, index, widthVariable) {
+    return measuredWidth(header) ||
+      managedColumnWidth(table, index) ||
+      parsedPixelValue(header && header.style && header.style.getPropertyValue(widthVariable));
+  }
+
+  function applyStickyColumnPosition(table, index, leftVariable, left, widthVariable, width) {
+    Array.from(table.querySelectorAll('thead tr, tbody tr, tfoot tr')).forEach(function(row) {
+      var cell = directCells(row)[index];
+      if (!cell) return;
+
+      cell.style.setProperty(leftVariable, cssPixelValue(left));
+      if (width) {
+        cell.style.setProperty(widthVariable, cssPixelValue(width));
+      }
+    });
+  }
+
+  function refreshCssStickyLeftColumnSet(table, className, leftVariable, widthVariable) {
+    var headerRow = table && table.querySelector('thead tr');
+    if (!headerRow) return;
+
+    var headerCells = directCells(headerRow);
+    var left = 0;
+
+    stickyColumnIndexes(table, className).forEach(function(index) {
+      var width = stickyColumnWidth(table, headerCells[index], index, widthVariable);
+
+      applyStickyColumnPosition(table, index, leftVariable, left, widthVariable, width);
+      left += width;
+    });
+  }
+
+  function refreshCssStickyLeftColumns(table) {
+    if (!table || table.getAttribute('aria-hidden') === 'true' || table.classList.contains(FIXED_HEADER_TABLE_CLASS)) return;
+
+    refreshCssStickyLeftColumnSet(table, 'sticky-left', '--sticky-left', '--sticky-width');
+    refreshCssStickyLeftColumnSet(table, 'sticky-left-mobile', '--sticky-mobile-left', '--sticky-mobile-width');
   }
 
   function applyColumnWidth(columnId, width, key) {

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

@@ -88,6 +88,121 @@
   overflow-x: auto;
 }
 
+.scroll-table[data-css-sticky-table],
+.home-table__wrapper[data-css-sticky-table] {
+  max-width: 100%;
+  max-height: var(--admin-sticky-table-max-height, calc(100dvh - 10rem));
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+}
+
+.scroll-table[data-css-sticky-table] table[data-fixed-columns-count],
+.home-table__wrapper[data-css-sticky-table] table[data-fixed-columns-count] {
+  width: max-content;
+  min-width: 100%;
+}
+
+.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] {
+  --sticky-col-1-width: var(--admin-sticky-col-1-width, 4rem);
+  --sticky-col-2-width: var(--admin-sticky-col-2-width, 8rem);
+  --sticky-col-3-width: var(--admin-sticky-col-3-width, 8rem);
+  --sticky-col-4-width: var(--admin-sticky-col-4-width, 8rem);
+  --sticky-col-5-width: var(--admin-sticky-col-5-width, 8rem);
+  --sticky-col-6-width: var(--admin-sticky-col-6-width, 8rem);
+  --sticky-col-1-left: 0px;
+  --sticky-col-2-left: var(--sticky-col-1-width);
+  --sticky-col-3-left: calc(var(--sticky-col-1-width) + var(--sticky-col-2-width));
+  --sticky-col-4-left: calc(var(--sticky-col-1-width) + var(--sticky-col-2-width) + var(--sticky-col-3-width));
+  --sticky-col-5-left: calc(var(--sticky-col-1-width) + var(--sticky-col-2-width) + var(--sticky-col-3-width) + var(--sticky-col-4-width));
+  --sticky-col-6-left: calc(var(--sticky-col-1-width) + var(--sticky-col-2-width) + var(--sticky-col-3-width) + var(--sticky-col-4-width) + var(--sticky-col-5-width));
+  --sticky-mobile-col-1-width: var(--admin-sticky-mobile-col-1-width, var(--sticky-col-1-width));
+  --sticky-mobile-col-2-width: var(--admin-sticky-mobile-col-2-width, var(--sticky-col-2-width));
+  --sticky-mobile-col-3-width: var(--admin-sticky-mobile-col-3-width, var(--sticky-col-3-width));
+  --sticky-mobile-col-4-width: var(--admin-sticky-mobile-col-4-width, var(--sticky-col-4-width));
+  --sticky-mobile-col-5-width: var(--admin-sticky-mobile-col-5-width, var(--sticky-col-5-width));
+  --sticky-mobile-col-6-width: var(--admin-sticky-mobile-col-6-width, var(--sticky-col-6-width));
+  --sticky-mobile-col-1-left: 0px;
+  --sticky-mobile-col-2-left: var(--sticky-mobile-col-1-width);
+  --sticky-mobile-col-3-left: calc(var(--sticky-mobile-col-1-width) + var(--sticky-mobile-col-2-width));
+  --sticky-mobile-col-4-left: calc(var(--sticky-mobile-col-1-width) + var(--sticky-mobile-col-2-width) + var(--sticky-mobile-col-3-width));
+  --sticky-mobile-col-5-left: calc(var(--sticky-mobile-col-1-width) + var(--sticky-mobile-col-2-width) + var(--sticky-mobile-col-3-width) + var(--sticky-mobile-col-4-width));
+  --sticky-mobile-col-6-left: calc(var(--sticky-mobile-col-1-width) + var(--sticky-mobile-col-2-width) + var(--sticky-mobile-col-3-width) + var(--sticky-mobile-col-4-width) + var(--sticky-mobile-col-5-width));
+}
+
+@for $count from 1 through 6 {
+  @for $index from 1 through $count {
+    .scroll-table table[data-fixed-columns-count="#{$count}"] tr > :nth-child(#{$index}):not(.sticky-left),
+    .sticky-table-scroll table[data-fixed-columns-count="#{$count}"] tr > :nth-child(#{$index}):not(.sticky-left),
+    .home-table__wrapper table[data-fixed-columns-count="#{$count}"] tr > :nth-child(#{$index}):not(.sticky-left),
+    .table-wrap table[data-fixed-columns-count="#{$count}"] tr > :nth-child(#{$index}):not(.sticky-left),
+    .af__table__content table[data-fixed-columns-count="#{$count}"] tr > :nth-child(#{$index}):not(.sticky-left) {
+      position: sticky;
+      left: var(--sticky-col-#{$index}-left);
+      box-sizing: border-box;
+      width: var(--sticky-col-#{$index}-width);
+      min-width: var(--sticky-col-#{$index}-width);
+      max-width: var(--sticky-col-#{$index}-width);
+      background-clip: padding-box;
+    }
+
+    .scroll-table table[data-fixed-columns-count="#{$count}"] th:nth-child(#{$index}),
+    .sticky-table-scroll table[data-fixed-columns-count="#{$count}"] th:nth-child(#{$index}),
+    .home-table__wrapper table[data-fixed-columns-count="#{$count}"] th:nth-child(#{$index}),
+    .table-wrap table[data-fixed-columns-count="#{$count}"] th:nth-child(#{$index}),
+    .af__table__content table[data-fixed-columns-count="#{$count}"] th:nth-child(#{$index}) {
+      z-index: 4;
+      background-color: #121012;
+    }
+
+    .scroll-table table[data-fixed-columns-count="#{$count}"] td:nth-child(#{$index}),
+    .sticky-table-scroll table[data-fixed-columns-count="#{$count}"] td:nth-child(#{$index}),
+    .home-table__wrapper table[data-fixed-columns-count="#{$count}"] td:nth-child(#{$index}),
+    .table-wrap table[data-fixed-columns-count="#{$count}"] td:nth-child(#{$index}),
+    .af__table__content table[data-fixed-columns-count="#{$count}"] td:nth-child(#{$index}) {
+      z-index: 3;
+      background-color: var(--sticky-cell-background, #fff);
+    }
+  }
+}
+
+.scroll-table table[data-fixed-columns-count] th,
+.sticky-table-scroll table[data-fixed-columns-count] th,
+.home-table__wrapper table[data-fixed-columns-count] th,
+.table-wrap table[data-fixed-columns-count] th,
+.af__table__content table[data-fixed-columns-count] th {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background-clip: padding-box;
+}
+
+.scroll-table[data-css-sticky-table] table > thead th,
+.sticky-table-scroll[data-css-sticky-table] table > thead th,
+.home-table__wrapper[data-css-sticky-table] table > thead th,
+.table-wrap[data-css-sticky-table] table > thead th,
+.af__table__content[data-css-sticky-table] table > thead th {
+  background-color: #121012;
+  color: #fff;
+}
+
+.scroll-table[data-css-sticky-table] table > thead th a,
+.scroll-table[data-css-sticky-table] table > thead th button,
+.sticky-table-scroll[data-css-sticky-table] table > thead th a,
+.sticky-table-scroll[data-css-sticky-table] table > thead th button,
+.home-table__wrapper[data-css-sticky-table] table > thead th a,
+.home-table__wrapper[data-css-sticky-table] table > thead th button,
+.table-wrap[data-css-sticky-table] table > thead th a,
+.table-wrap[data-css-sticky-table] table > thead th button,
+.af__table__content[data-css-sticky-table] table > thead th a,
+.af__table__content[data-css-sticky-table] table > thead th button {
+  color: inherit;
+}
+
 .table-fixed-header-slot {
   overflow-y: hidden;
 }
@@ -265,6 +380,11 @@ td.cell-data:hover .admin-copy-cell__button:not([disabled]),
 .home-table th.sticky-left,
 .home-table td.sticky-left {
   position: sticky;
+  left: var(--sticky-left, 0);
+  box-sizing: border-box;
+  width: var(--sticky-width, auto);
+  min-width: var(--sticky-width, auto);
+  max-width: var(--sticky-width, none);
   background-clip: padding-box;
 }
 
@@ -307,6 +427,139 @@ td.cell-data:hover .admin-copy-cell__button:not([disabled]),
   box-shadow: 6px 0 8px -8px rgba(0, 0, 0, 0.35);
 }
 
+@media (max-width: 767px) {
+  @for $count from 1 through 6 {
+    @for $index from 1 through $count {
+      .scroll-table table[data-fixed-columns-count="#{$count}"] tr > :nth-child(#{$index}),
+      .sticky-table-scroll table[data-fixed-columns-count="#{$count}"] tr > :nth-child(#{$index}),
+      .home-table__wrapper table[data-fixed-columns-count="#{$count}"] tr > :nth-child(#{$index}),
+      .table-wrap table[data-fixed-columns-count="#{$count}"] tr > :nth-child(#{$index}),
+      .af__table__content table[data-fixed-columns-count="#{$count}"] tr > :nth-child(#{$index}) {
+        position: static;
+        left: auto;
+        width: auto;
+        min-width: 0;
+        max-width: none;
+        box-shadow: none;
+      }
+    }
+  }
+
+  @for $count from 1 through 6 {
+    @for $index from 1 through $count {
+      .scroll-table table[data-mobile-fixed-columns-count="#{$count}"] tr > :nth-child(#{$index}):not(.sticky-left-mobile),
+      .sticky-table-scroll table[data-mobile-fixed-columns-count="#{$count}"] tr > :nth-child(#{$index}):not(.sticky-left-mobile),
+      .home-table__wrapper table[data-mobile-fixed-columns-count="#{$count}"] tr > :nth-child(#{$index}):not(.sticky-left-mobile),
+      .table-wrap table[data-mobile-fixed-columns-count="#{$count}"] tr > :nth-child(#{$index}):not(.sticky-left-mobile),
+      .af__table__content table[data-mobile-fixed-columns-count="#{$count}"] tr > :nth-child(#{$index}):not(.sticky-left-mobile) {
+        position: sticky;
+        left: var(--sticky-mobile-col-#{$index}-left);
+        box-sizing: border-box;
+        width: var(--sticky-mobile-col-#{$index}-width);
+        min-width: var(--sticky-mobile-col-#{$index}-width);
+        max-width: var(--sticky-mobile-col-#{$index}-width);
+        background-clip: padding-box;
+      }
+
+      .scroll-table table[data-mobile-fixed-columns-count="#{$count}"] th:nth-child(#{$index}),
+      .sticky-table-scroll table[data-mobile-fixed-columns-count="#{$count}"] th:nth-child(#{$index}),
+      .home-table__wrapper table[data-mobile-fixed-columns-count="#{$count}"] th:nth-child(#{$index}),
+      .table-wrap table[data-mobile-fixed-columns-count="#{$count}"] th:nth-child(#{$index}),
+      .af__table__content table[data-mobile-fixed-columns-count="#{$count}"] th:nth-child(#{$index}) {
+        z-index: 4;
+        background-color: #121012;
+      }
+
+      .scroll-table table[data-mobile-fixed-columns-count="#{$count}"] td:nth-child(#{$index}),
+      .sticky-table-scroll table[data-mobile-fixed-columns-count="#{$count}"] td:nth-child(#{$index}),
+      .home-table__wrapper table[data-mobile-fixed-columns-count="#{$count}"] td:nth-child(#{$index}),
+      .table-wrap table[data-mobile-fixed-columns-count="#{$count}"] td:nth-child(#{$index}),
+      .af__table__content table[data-mobile-fixed-columns-count="#{$count}"] td:nth-child(#{$index}) {
+        z-index: 3;
+        background-color: var(--sticky-cell-background, #fff);
+      }
+    }
+  }
+
+  .scroll-table table th.sticky-left,
+  .scroll-table table td.sticky-left,
+  .sticky-table-scroll table th.sticky-left,
+  .sticky-table-scroll table td.sticky-left,
+  .home-table th.sticky-left,
+  .home-table td.sticky-left {
+    position: static;
+    left: auto;
+    width: auto;
+    min-width: 0;
+    max-width: none;
+    box-shadow: none;
+  }
+
+  .scroll-table table th.sticky-left::after,
+  .scroll-table table td.sticky-left::after,
+  .sticky-table-scroll table th.sticky-left::after,
+  .sticky-table-scroll table td.sticky-left::after,
+  .home-table th.sticky-left::after,
+  .home-table td.sticky-left::after {
+    content: none;
+    display: none;
+  }
+
+  .scroll-table table th.sticky-left-mobile,
+  .scroll-table table td.sticky-left-mobile,
+  .sticky-table-scroll table th.sticky-left-mobile,
+  .sticky-table-scroll table td.sticky-left-mobile,
+  .home-table th.sticky-left-mobile,
+  .home-table td.sticky-left-mobile {
+    position: sticky;
+    left: var(--sticky-mobile-left, 0);
+    box-sizing: border-box;
+    width: var(--sticky-mobile-width, auto);
+    min-width: var(--sticky-mobile-width, auto);
+    max-width: var(--sticky-mobile-width, none);
+    background-clip: padding-box;
+  }
+
+  .scroll-table table th.sticky-left-mobile,
+  .sticky-table-scroll table th.sticky-left-mobile,
+  .home-table th.sticky-left-mobile {
+    z-index: 4;
+    background-color: #121012;
+  }
+
+  .scroll-table table td.sticky-left-mobile,
+  .sticky-table-scroll table td.sticky-left-mobile,
+  .home-table td.sticky-left-mobile {
+    z-index: 3;
+    background-color: var(--sticky-cell-background, #fff);
+  }
+
+  .scroll-table table th.sticky-left-mobile::after,
+  .scroll-table table td.sticky-left-mobile::after,
+  .sticky-table-scroll table th.sticky-left-mobile::after,
+  .sticky-table-scroll table td.sticky-left-mobile::after,
+  .home-table th.sticky-left-mobile::after,
+  .home-table td.sticky-left-mobile::after {
+    content: "";
+    position: absolute;
+    top: -1px;
+    right: -1px;
+    bottom: -1px;
+    width: 1px;
+    background-color: #fff;
+    pointer-events: none;
+  }
+
+  .scroll-table table th.sticky-left-mobile--last,
+  .scroll-table table td.sticky-left-mobile--last,
+  .sticky-table-scroll table th.sticky-left-mobile--last,
+  .sticky-table-scroll table td.sticky-left-mobile--last,
+  .home-table th.sticky-left-mobile--last,
+  .home-table td.sticky-left-mobile--last {
+    box-shadow: 6px 0 8px -8px rgba(0, 0, 0, 0.35);
+  }
+}
+
 .scroll-table table th.sticky,
 .scroll-table table td.sticky,
 .sticky-table-scroll table th.sticky,
@@ -342,6 +595,23 @@ td.cell-data:hover .admin-copy-cell__button:not([disabled]),
   z-index: 5;
 }
 
+.scroll-table[data-css-sticky-table] table th.sticky.actions-column,
+.home-table__wrapper[data-css-sticky-table] table th.sticky.actions-column {
+  position: sticky;
+  top: 0;
+  right: 0;
+  z-index: 6;
+  background-color: #121012;
+}
+
+.scroll-table[data-css-sticky-table] table td.sticky.actions-column,
+.home-table__wrapper[data-css-sticky-table] table td.sticky.actions-column {
+  position: sticky;
+  right: 0;
+  z-index: 4;
+  background-color: var(--sticky-cell-background, #fff);
+}
+
 .scroll-table table td.sticky,
 .sticky-table-scroll table td.sticky,
 .home-table td.sticky {

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

@@ -6,6 +6,7 @@ module YummyGuide
   module Administrate
     class ApplicationDashboard < ::Administrate::BaseDashboard
       INDEX_FIXED_COLUMNS_COUNT = 1
+      INDEX_FIXED_COLUMN_WIDTHS = {}.freeze
 
       def default_sorting_attribute
         :created_at
@@ -37,6 +38,16 @@ module YummyGuide
         end
       end
 
+      def self.index_fixed_column_widths
+        if const_defined?(:INDEX_FIXED_COLUMN_WIDTHS, false)
+          const_get(:INDEX_FIXED_COLUMN_WIDTHS)
+        elsif superclass.respond_to?(:index_fixed_column_widths)
+          superclass.index_fixed_column_widths
+        else
+          {}
+        end
+      end
+
       def self.collection_sortable_attributes
         if const_defined?(:COLLECTION_SORTABLE_ATTRIBUTES, false)
           const_get(:COLLECTION_SORTABLE_ATTRIBUTES)

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

@@ -7,6 +7,15 @@ module YummyGuide
         address article aside blockquote div dl dt dd fieldset figcaption figure footer
         form h1 h2 h3 h4 h5 h6 header hr li main nav ol p pre section table tr ul
       ].freeze
+      DEFAULT_FIXED_COLUMN_WIDTHS = {
+        id: "4rem",
+        month: "6rem",
+        assign_group_id: "6rem",
+        reservation_type: "7rem",
+        short_access_id: "8rem",
+        customer: "12rem"
+      }.freeze
+      DEFAULT_FIXED_COLUMN_WIDTH = "8rem"
 
       def yummy_guide_administrate_collection_table_fixed_columns_count(page:, collection_presenter:)
         yummy_guide_administrate_collection_fixed_columns_count_for(
@@ -26,6 +35,83 @@ module YummyGuide
         0
       end
 
+      def yummy_guide_administrate_collection_table_fixed_columns_count_for_names(page:, column_names:)
+        yummy_guide_administrate_collection_fixed_columns_count_for_names(
+          page: page,
+          column_names: column_names.map(&:to_sym),
+          method_name: :index_fixed_columns_count
+        )
+      end
+
+      def yummy_guide_administrate_collection_table_mobile_fixed_columns_count_for_names(page:, column_names:)
+        yummy_guide_administrate_collection_fixed_columns_count_for_names(
+          page: page,
+          column_names: column_names.map(&:to_sym),
+          method_name: :index_mobile_fixed_columns_count
+        )
+      rescue NoMethodError
+        0
+      end
+
+      def yummy_guide_administrate_collection_sticky_columns(page:, collection_presenter:, column_names:)
+        names = column_names.map(&:to_sym)
+        fixed_count = yummy_guide_administrate_collection_fixed_columns_count_for_names(
+          page: page,
+          column_names: names,
+          method_name: :index_fixed_columns_count
+        )
+        mobile_fixed_count = yummy_guide_administrate_collection_fixed_columns_count_for_names(
+          page: page,
+          column_names: names,
+          method_name: :index_mobile_fixed_columns_count
+        )
+        max_count = [fixed_count, mobile_fixed_count].max
+        return {} if max_count.zero?
+
+        widths = yummy_guide_administrate_collection_fixed_column_widths(page: page)
+        desktop_lefts = yummy_guide_administrate_collection_sticky_lefts(names.first(fixed_count), widths)
+        mobile_lefts = yummy_guide_administrate_collection_sticky_lefts(names.first(mobile_fixed_count), widths)
+
+        names.first(max_count).each_with_index.each_with_object({}) do |(name, index), sticky_columns|
+          classes = []
+          styles = []
+          width = widths.fetch(name, DEFAULT_FIXED_COLUMN_WIDTH)
+
+          if index < fixed_count
+            classes << "sticky-left"
+            classes << "sticky-left--last" if index == fixed_count - 1
+            styles << "--sticky-left: #{desktop_lefts.fetch(name)}"
+            styles << "--sticky-width: #{width}"
+          end
+
+          if index < mobile_fixed_count
+            classes << "sticky-left-mobile"
+            classes << "sticky-left-mobile--last" if index == mobile_fixed_count - 1
+            styles << "--sticky-mobile-left: #{mobile_lefts.fetch(name)}"
+            styles << "--sticky-mobile-width: #{width}"
+          end
+
+          sticky_columns[name] = {
+            class: classes.join(" "),
+            style: styles.join("; ")
+          }
+        end
+      end
+
+      def yummy_guide_administrate_collection_sticky_table_style(page:, column_names:)
+        widths = yummy_guide_administrate_collection_fixed_column_widths(page: page)
+
+        column_names.map(&:to_sym).first(6).each_with_index.flat_map do |name, index|
+          width = widths.fetch(name, DEFAULT_FIXED_COLUMN_WIDTH)
+          column_number = index + 1
+
+          [
+            "--admin-sticky-col-#{column_number}-width: #{width}",
+            "--admin-sticky-mobile-col-#{column_number}-width: #{width}"
+          ]
+        end.join("; ")
+      end
+
       def yummy_guide_administrate_collection_column_id(collection_presenter, column_name)
         [
           collection_presenter.resource_name,
@@ -116,6 +202,48 @@ module YummyGuide
         0
       end
 
+      def yummy_guide_administrate_collection_fixed_columns_count_for_names(page:, column_names:, 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?
+
+        [fixed_columns_count, column_names.size].min
+      rescue NoMethodError
+        0
+      end
+
+      def yummy_guide_administrate_collection_fixed_column_widths(page:)
+        configured_widths =
+          if page.respond_to?(:instance_variable_defined?) && page.instance_variable_defined?(:@dashboard)
+            dashboard = page.instance_variable_get(:@dashboard)
+            dashboard.class.index_fixed_column_widths if dashboard&.class&.respond_to?(:index_fixed_column_widths)
+          end
+
+        DEFAULT_FIXED_COLUMN_WIDTHS.merge(
+          (configured_widths || {}).to_h.transform_keys(&:to_sym).transform_values(&:to_s)
+        )
+      end
+
+      def yummy_guide_administrate_collection_sticky_lefts(column_names, widths)
+        current_parts = []
+
+        column_names.each_with_object({}) do |name, lefts|
+          lefts[name] = yummy_guide_administrate_collection_css_sum(current_parts)
+          current_parts << widths.fetch(name, DEFAULT_FIXED_COLUMN_WIDTH)
+        end
+      end
+
+      def yummy_guide_administrate_collection_css_sum(parts)
+        return "0px" if parts.empty?
+        return parts.first if parts.one?
+
+        "calc(#{parts.join(" + ")})"
+      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/views/yummy_guide/administrate/administrate/application/_collection.html.erb

@@ -1,5 +1,14 @@
 <% column_width_storage_scope = local_assigns[:column_width_storage_scope].presence %>
-<div class="scroll-table" data-fixed-header-scroll>
+<% sticky_columns = yummy_guide_administrate_collection_sticky_columns(
+     page: page,
+     collection_presenter: collection_presenter,
+     column_names: collection_presenter.attribute_types.keys
+   ) %>
+<% sticky_table_style = yummy_guide_administrate_collection_sticky_table_style(
+     page: page,
+     column_names: collection_presenter.attribute_types.keys
+   ) %>
+<div class="scroll-table" data-css-sticky-table>
   <table
     aria-labelledby="<%= table_title %>"
     data-fixed-columns-count="<%= yummy_guide_administrate_collection_table_fixed_columns_count(page: page, collection_presenter: collection_presenter) %>"
@@ -7,13 +16,17 @@
     <% if column_width_storage_scope %>
       data-column-resizer-storage-scope="<%= column_width_storage_scope %>"
     <% end %>
-    data-fixed-header-source
+    <% if sticky_table_style.present? %>
+      style="<%= sticky_table_style %>"
+    <% end %>
   >
     <thead>
       <tr>
         <% collection_presenter.attribute_types.each do |attr_name, attr_type| %>
+          <% sticky_column = sticky_columns[attr_name.to_sym] || {} %>
           <th
-            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}" %>"
+            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}" %> <%= sticky_column[:class] %>"
+            <% if sticky_column[:style].present? %>style="<%= sticky_column[:style] %>"<% end %>
             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) %>"
@@ -49,6 +62,8 @@
       <% resources.each do |resource| %>
         <tr class="js-table-row">
           <% collection_presenter.attributes_for(resource).each do |attribute| %>
+            <% attribute_name = attribute.respond_to?(:name) ? attribute.name : attribute.attribute %>
+            <% sticky_column = sticky_columns[attribute_name.to_sym] || {} %>
             <% cell_href = yummy_guide_administrate_collection_attribute_path(attribute: attribute, resource: resource, namespace: namespace) %>
             <% cell = yummy_guide_administrate_build_collection_cell(
                  content: render_field(attribute),
@@ -56,7 +71,10 @@
                  reference_link: yummy_guide_administrate_collection_reference_link?(attribute),
                  text_link: yummy_guide_administrate_collection_text_link?(attribute)
                ) %>
-            <td class="cell-data cell-data--<%= attribute.html_class %><%= " cell-data--link" if cell[:linkable] %>">
+            <td
+              class="cell-data cell-data--<%= attribute.html_class %><%= " cell-data--link" if cell[:linkable] %> <%= sticky_column[:class] %>"
+              <% if sticky_column[:style].present? %>style="<%= sticky_column[:style] %>"<% end %>
+            >
               <%= cell[:content] %>
             </td>
           <% end %>

data/lib/yummy_guide/administrate/engine.rb

@@ -14,10 +14,8 @@ module YummyGuide
           yummy_guide_administrate/fixed_submit_actions.js
           yummy_guide_administrate/filter_controls.js
           yummy_guide_administrate/filter_form.js
-          yummy_guide_administrate/sticky_left_columns.js
           yummy_guide_administrate/tooltips.js
           yummy_guide_administrate/resizable_navigation.js
-          yummy_guide_administrate/sticky_table_headers.js
         ]
       end
 

data/lib/yummy_guide/administrate/version.rb

@@ -2,6 +2,6 @@
 
 module YummyGuide
   module Administrate
-    VERSION = "0.8.4"
+    VERSION = "0.8.5"
   end
 end

data/spec/yummy_guide/administrate/application_dashboard_spec.rb

@@ -42,6 +42,23 @@ RSpec.describe YummyGuide::Administrate::ApplicationDashboard do
     end
   end
 
+  describe ".index_fixed_column_widths" do
+    # 固定列幅はサブクラスの定数で上書きできることを確認する
+    it "returns the subclass fixed column widths when defined" do
+      subclass = Class.new(described_class)
+      subclass.const_set(:INDEX_FIXED_COLUMN_WIDTHS, { id: "5rem" })
+
+      expect(subclass.index_fixed_column_widths).to eq({ id: "5rem" })
+    end
+
+    # 固定列幅の指定がない場合は親クラスの値にフォールバックすることを確認する
+    it "falls back to the superclass fixed column widths" do
+      subclass = Class.new(described_class)
+
+      expect(subclass.index_fixed_column_widths).to eq({})
+    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

@@ -54,6 +54,138 @@ RSpec.describe YummyGuide::Administrate::CollectionHelper do
     end
   end
 
+  describe "#yummy_guide_administrate_collection_table_fixed_columns_count_for_names" do
+    # owner向け一覧のように表示列を手動で絞った場合も、実表示列数で固定列数が打ち止めになることを確認する
+    it "caps the fixed column count by the provided column names" do
+      dashboard_class = Class.new do
+        def self.index_fixed_columns_count
+          5
+        end
+      end
+
+      page = Object.new
+      page.instance_variable_set(:@dashboard, dashboard_class.new)
+
+      expect(
+        helper_host.yummy_guide_administrate_collection_table_fixed_columns_count_for_names(
+          page: page,
+          column_names: %i[month start_datetime]
+        )
+      ).to eq(2)
+    end
+  end
+
+  describe "#yummy_guide_administrate_collection_table_mobile_fixed_columns_count_for_names" do
+    # モバイル固定列数も手動指定した表示列数を超えないことを確認する
+    it "caps the mobile fixed column count by the provided column names" 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)
+
+      expect(
+        helper_host.yummy_guide_administrate_collection_table_mobile_fixed_columns_count_for_names(
+          page: page,
+          column_names: %i[month start_datetime customer]
+        )
+      ).to eq(3)
+    end
+  end
+
+  describe "#yummy_guide_administrate_collection_sticky_columns" do
+    # 固定列のclassとCSS変数が表示列順から生成されることを確認する
+    it "builds sticky column classes and offsets from the rendered column order" do
+      dashboard_class = Class.new do
+        def self.index_fixed_columns_count
+          2
+        end
+
+        def self.index_mobile_fixed_columns_count
+          1
+        end
+
+        def self.index_fixed_column_widths
+          { customer: "14rem" }
+        end
+      end
+
+      page = Object.new
+      page.instance_variable_set(:@dashboard, dashboard_class.new)
+      collection_presenter = Struct.new(:attribute_types).new({ id: :integer, customer: :belongs_to, note: :text })
+
+      sticky_columns = helper_host.yummy_guide_administrate_collection_sticky_columns(
+        page: page,
+        collection_presenter: collection_presenter,
+        column_names: %i[id customer note]
+      )
+
+      expect(sticky_columns[:id]).to eq(
+        class: "sticky-left sticky-left-mobile sticky-left-mobile--last",
+        style: "--sticky-left: 0px; --sticky-width: 4rem; --sticky-mobile-left: 0px; --sticky-mobile-width: 4rem"
+      )
+      expect(sticky_columns[:customer]).to eq(
+        class: "sticky-left sticky-left--last",
+        style: "--sticky-left: 4rem; --sticky-width: 14rem"
+      )
+      expect(sticky_columns).not_to have_key(:note)
+    end
+
+    # owner向け一覧のように実際の描画列が変わっても、その列リストを基準に固定列を計算することを確認する
+    it "uses the provided column names instead of all dashboard attributes" do
+      dashboard_class = Class.new do
+        def self.index_fixed_columns_count
+          3
+        end
+
+        def self.index_mobile_fixed_columns_count
+          2
+        end
+      end
+
+      page = Object.new
+      page.instance_variable_set(:@dashboard, dashboard_class.new)
+      collection_presenter = Struct.new(:attribute_types).new({ id: :integer, customer: :belongs_to, note: :text })
+
+      sticky_columns = helper_host.yummy_guide_administrate_collection_sticky_columns(
+        page: page,
+        collection_presenter: collection_presenter,
+        column_names: %i[month start_datetime]
+      )
+
+      expect(sticky_columns.keys).to eq(%i[month start_datetime])
+      expect(sticky_columns[:start_datetime][:class]).to include("sticky-left--last")
+      expect(sticky_columns[:start_datetime][:class]).to include("sticky-left-mobile--last")
+    end
+  end
+
+  describe "#yummy_guide_administrate_collection_sticky_table_style" do
+    # nth-child fallback が参照するテーブル単位の固定列幅CSS変数を生成できることを確認する
+    it "builds table-level width variables for fixed column fallbacks" do
+      dashboard_class = Class.new do
+        def self.index_fixed_column_widths
+          { customer: "14rem" }
+        end
+      end
+
+      page = Object.new
+      page.instance_variable_set(:@dashboard, dashboard_class.new)
+
+      style = helper_host.yummy_guide_administrate_collection_sticky_table_style(
+        page: page,
+        column_names: %i[id customer note]
+      )
+
+      expect(style).to include("--admin-sticky-col-1-width: 4rem")
+      expect(style).to include("--admin-sticky-mobile-col-1-width: 4rem")
+      expect(style).to include("--admin-sticky-col-2-width: 14rem")
+      expect(style).to include("--admin-sticky-col-3-width: 8rem")
+    end
+  end
+
   describe "#yummy_guide_administrate_collection_column_id" do
     let(:collection_presenter) { Struct.new(:resource_name).new("external_reservation") }
 

data/spec/yummy_guide/administrate/column_resizer_asset_spec.rb

@@ -9,12 +9,8 @@ RSpec.describe "column resizer assets" do
     File.read(File.expand_path("../../../app/assets/stylesheets/yummy_guide_administrate/_column_resizer.scss", __dir__))
   end
 
-  let(:sticky_table_headers_source) do
-    File.read(File.expand_path("../../../app/assets/javascripts/yummy_guide_administrate/sticky_table_headers.js", __dir__))
-  end
-
-  let(:sticky_left_columns_source) do
-    File.read(File.expand_path("../../../app/assets/javascripts/yummy_guide_administrate/sticky_left_columns.js", __dir__))
+  let(:components_source) do
+    File.read(File.expand_path("../../../app/assets/stylesheets/yummy_guide_administrate/components.scss", __dir__))
   end
 
   # 未調整列は内容幅で表示され、調整済み列だけが幅固定されることを静的に確認する
@@ -116,68 +112,46 @@ RSpec.describe "column resizer assets" do
     expect(stylesheet_source).to include("width: 36px")
   end
 
-  # 幅適用後の固定ヘッダー追従が全体rebuildではなく対象カラム同期を優先することを静的に確認する
-  it "uses targeted fixed header synchronization after applying a width" do
-    expect(javascript_source).to include("window.YummyGuideAdministrateStickyTableHeaders")
-    expect(javascript_source).to include("api.refreshColumnWidth({")
-    expect(sticky_table_headers_source).to include("window.YummyGuideAdministrateStickyTableHeaders = {")
-    expect(sticky_table_headers_source).to include("refreshColumnWidth: refreshColumnWidth")
-    expect(sticky_table_headers_source).to include("refreshTable: refreshTable")
-    expect(sticky_table_headers_source).to include("function refreshColumnWidth(options)")
-    expect(sticky_table_headers_source).to include("applySourceColumnMinWidth(sourceTable, columnIndex, columnCount, width)")
-    expect(sticky_table_headers_source).to include("applyFixedHeaderCellWidth(fixedTable, columnIndex, width)")
-    expect(sticky_table_headers_source).to include("suppressResizeBuild(scroll)")
-  end
-
-  # 幅適用後の固定左列追従もResizeObserverの重複再計算に頼らないことを静的に確認する
-  it "refreshes sticky left columns directly after applying a width" do
-    expect(javascript_source).to include("window.YummyGuideAdministrateStickyLeftColumns")
-    expect(javascript_source).to include("api.refreshColumnWidth({")
-    expect(javascript_source).to include("sourceTable: pendingWidth.sourceTable")
-    expect(javascript_source).to include("columnId: pendingWidth.columnId")
-    expect(javascript_source).to include("width: pendingWidth.width")
-    expect(javascript_source).to include("api.refreshTable(sourceTable)")
-    expect(javascript_source).to include("refreshStickyLeftColumns(pendingWidth.sourceTable)")
-    expect(sticky_left_columns_source).to include("window.YummyGuideAdministrateStickyLeftColumns = {")
-    expect(sticky_left_columns_source).to include("refreshColumnWidth: refreshColumnWidth")
-    expect(sticky_left_columns_source).to include("refreshTable: refreshTable")
-    expect(sticky_left_columns_source).to include("function refreshTable(table)")
-    expect(sticky_left_columns_source).to include("function refreshColumnWidth(options)")
-    expect(sticky_left_columns_source).to include("suppressResizeApply(table)")
-  end
-
-  # 固定5列の4列目を調整した直後に5列目のleftが古い幅で残らないことを静的に確認する
-  it "uses the resized fixed column width when recalculating sticky-left offsets" do
-    expect(sticky_left_columns_source).to include("function widthOverride(headerCells, options)")
-    expect(sticky_left_columns_source).to include("columnIndex(headerCells, settings.columnId)")
-    expect(sticky_left_columns_source).to include("width: preciseNumber(width)")
-    expect(sticky_left_columns_source).to include("var hasMeasuredWidth = widths.some(Boolean)")
-    expect(sticky_left_columns_source).to include("applyWidthOverride(widths, override)")
-    expect(sticky_left_columns_source).to include("var offsets = stickyOffsets(table, count, options)")
-  end
-
-  # 幅リセット時は明示幅がないため、クリア後に通常の固定左列再計算へ戻すことを静的に確認する
-  it "recalculates sticky-left offsets after clearing a column width" do
-    expect(javascript_source).to include("clearColumnWidth(columnId, key)")
-    expect(javascript_source).to include("refreshStickyHeaderTable(sourceTable, function()")
-    expect(javascript_source).to include("refreshStickyLeftColumns(sourceTable)")
+  # CSSだけで固定ヘッダーと固定左列の初期表示に必要なスタイルがあることを静的に確認する
+  it "defines CSS-only sticky table styles" do
+    expect(components_source).to include("[data-css-sticky-table]")
+    expect(components_source).to include("max-height: var(--admin-sticky-table-max-height")
+    expect(components_source).to include("top: 0")
+    expect(components_source).to include("--sticky-col-1-width")
+    expect(components_source).to include("left: var(--sticky-left, 0)")
+    expect(components_source).to include("left: var(--sticky-mobile-left, 0)")
+    expect(components_source).to include(":not(.sticky-left)")
+    expect(components_source).to include(":not(.sticky-left-mobile)")
+    expect(components_source).to include("th.sticky.actions-column")
+    expect(components_source).to include("td.sticky.actions-column")
+    expect(components_source).to include(".scroll-table[data-css-sticky-table] table > thead th")
+    expect(components_source).to include("background-color: #121012")
+    expect(components_source).to include("color: #fff")
+    expect(components_source).to include(".scroll-table[data-css-sticky-table] table > thead th a")
+    expect(components_source).to include("color: inherit")
+    expect(components_source).to include("z-index: 6")
+  end
+
+  # 固定列リサイズ後にCSS変数のleftと幅を再計算する処理があることを静的に確認する
+  it "recalculates CSS sticky-left offsets after applying column widths" do
+    expect(javascript_source).to include("function refreshCssStickyLeftColumns(table)")
+    expect(javascript_source).to include("refreshCssStickyLeftColumnSet(table, 'sticky-left', '--sticky-left', '--sticky-width')")
+    expect(javascript_source).to include("refreshCssStickyLeftColumnSet(table, 'sticky-left-mobile', '--sticky-mobile-left', '--sticky-mobile-width')")
+    expect(javascript_source).to include("cell.style.setProperty(leftVariable, cssPixelValue(left))")
+    expect(javascript_source).to include("refreshCssStickyLeftColumns(table)")
+  end
+
+  # 固定ヘッダー複製APIがなくても幅適用後の完了処理に進めることを静的に確認する
+  it "keeps a resize fallback when fixed header JavaScript is absent" do
+    expect(javascript_source).to include("var api = window.YummyGuideAdministrateStickyTableHeaders")
+    expect(javascript_source).to include("if (api && typeof api.refreshColumnWidth === 'function')")
+    expect(javascript_source).to include("scheduleStickyRefresh(callback)")
   end
 
-  # ダブルクリックで幅リセットした時も、固定列同期が完了するまで待機カーソルを表示することを静的に確認する
-  it "shows a wait cursor while resetting a column width" do
+  # 幅リセット時も固定列のCSS変数を再計算することを静的に確認する
+  it "recalculates CSS sticky-left offsets after clearing a column width" do
     expect(javascript_source).to include("clearColumnWidth(columnId, key)")
-    expect(javascript_source).to include("startApplyingWidth()")
-    expect(javascript_source).to include("stopApplyingWidth(null)")
-    expect(javascript_source).to include("scheduleStickyRefresh(function()")
-  end
-
-  # 幅リセット時は固定ヘッダーの管理幅を先に作り直してから固定左列を再計算することを静的に確認する
-  it "rebuilds fixed headers before refreshing sticky-left columns after clearing a width" do
-    expect(javascript_source).to include("function refreshStickyHeaderTable(sourceTable, callback)")
-    expect(javascript_source).to include("api.refreshTable(sourceTable, callback)")
-    expect(javascript_source).to include("scheduleStickyRefresh(callback)")
-    expect(sticky_table_headers_source).to include("function refreshTable(sourceTable, callback)")
-    expect(sticky_table_headers_source).to include("initializeFixedHeaderForScroll(scroll)")
-    expect(sticky_table_headers_source).to include("window.requestAnimationFrame(callback)")
+    expect(javascript_source).to include("clearTableColumnWidth(table, columnId)")
+    expect(javascript_source).to include("refreshCssStickyLeftColumns(table)")
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: yummy-guide-generic-administrate
 version: !ruby/object:Gem::Version
-  version: 0.8.4
+  version: 0.8.5
 platform: ruby
 authors:
 - akatsuki-kk
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-06-09 00:00:00.000000000 Z
+date: 2026-06-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: administrate