Gridstack.js: Предложение по улучшению

Я обновил README вашим фрагментом. Спасибо.

Поздно к разговору, но вы также можете захотеть иметь переменную ширины, либо в процентах, либо в пикселях, поскольку гибкость и гибкость не всегда работают рука об руку ... Одно дело - иметь адаптивный контейнер, а другое - иметь отзывчивый виджет, поэтому иногда иметь размеры в пикселях - неплохая идея.

Таким образом, если вы поместите эту логику в медиа-запрос, у вас могут быть разные размеры виджетов на основе пикселей / процентов.

$gridstack-columns: 12;
$resolution: 1440px;

<strong i="7">@media</strong> (min-width: 1440px) {
   .container {
      .grid-stack {
         .grid-stack-item {
            position: absolute !important;

            <strong i="8">@for</strong> $i from 1 through $gridstack-columns {
               &[data-gs-width='#{$i}'] { width: ($resolution / $gridstack-columns) * $i; }
               &[data-gs-x='#{$i}'] { left: ($resolution / $gridstack-columns) * $i; }
               &.grid-stack-item[data-gs-min-width='#{$i}'] { min-width: ($resolution / $gridstack-columns) * $i; }
               &.grid-stack-item[data-gs-max-width='#{$i}'] { max-width: ($resolution / $gridstack-columns) * $i; }
            }
         }
      }
   }
}

Вот версия с меньшим количеством css:

<strong i="6">@columns</strong>: 6;
.gs-item(@n) when (<strong i="7">@n</strong> > 0) {
  .gs-item(<strong i="8">@n</strong> - 1);

  &[data-gs-width="@{n}"] { width: (100% / @columns) * @n; }
  &[data-gs-x="@{n}"] { left: (100% / @columns) * @n; }
  &[data-gs-min-width="@{n}"] { min-width: (100% / @columns) * @n; }
  &[data-gs-max-width="@{n}"] { max-width: (100% / @columns) * @n; }
}

.grid-stack-item {
  .gs-item(@columns);
}

@ascendantofrain @cspeer @troolee @radiolips это все еще работает?
Я сделал столбцы как 36, запустил sass, использовал его в коде, теперь ширина использует% s на основе 36 столбцов, но перетаскивание / падение имеет нежелательный опыт. Я не могу перетаскивать сетку из 36 столбцов, она продолжает двигаться то тут, то там. Нужны ли нам и js-изменения? Не похоже ...

@mandys @ascendantofrain Я думаю, это из-за основных стилей gridstack.css. Вы должны переопределить их:

.grid-stack > .grid-stack-item {

    $gridstack-columns: 200;

    <strong i="8">@for</strong> $i from 1 through $gridstack-columns {
        &[data-gs-width='#{$i}'] { width: (100% / $gridstack-columns) * $i; }
        &[data-gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
        &.grid-stack-item[data-gs-min-width='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
        &.grid-stack-item[data-gs-max-width='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
    }
}

Но решить проблему с перекрытием элементов пока не удалось.

Мне также пришлось добавить min-width чтобы он работал в версии 0.3 (которую я использую для решения проблемы перекрытия, кстати.)

.grid-stack > .grid-stack-item {

    $gridstack-columns: 36;

    <strong i="7">@for</strong> $i from 1 through $gridstack-columns {
        &[data-gs-width='#{$i}'] { 
          width: (100% / $gridstack-columns) * $i;
          min-width: (100% / $gridstack-columns) * $i; 
        }
        &[data-gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
        &.grid-stack-item[data-gs-min-width='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
        &.grid-stack-item[data-gs-max-width='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
    }
}