Gridstack.js: Sugestão de Melhoria

Criado em 2 mar. 2015 · 6Comentários · Fonte: gridstack/gridstack.js

Apenas uma coisinha que fiz para meu próprio projeto usando este framework.

Eu uso o SASS com meu aplicativo e usar este pequeno trecho torna o ajuste das grades MUITO mais fácil.

.grid-stack-item {

    $gridstack-columns: 12;

    <strong i="7">@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; }
    }
}

Fonte

ascendantofrain

❤1 👍1

Todos 6 comentários

Eu atualizei o README com seu snippet. Obrigada.

troolee em 2 mar. 2015

Tarde para a conversa, mas você também pode querer ter a variável de largura, seja em porcentagem ou pixels, já que ser ágil e ágil nem sempre funciona lado a lado ... Uma coisa é ter um container responsivo, e outra é ter um widget responsivo, então às vezes ter dimensões em pixels não é uma má ideia.

Portanto, se você colocar essa lógica dentro de uma consulta de mídia, poderá ter diferentes tamanhos de widgets baseados em pixel / porcentagem.

$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; }
            }
         }
      }
   }
}

abologna-r7 em 28 abr. 2015

👍1

Aqui está uma versão menos 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);
}

cspeer em 9 dez. 2015

@ascendantofrain @cspeer @troolee @radiolips isso ainda funciona?
Fiz colunas como 36, executei sass, usei no código, as larguras agora usam% s com base em 36 colunas, mas arrastar / soltar tem uma experiência indesejada. Não consigo arrastar e soltar em uma grade de 36 colunas, ela continua se movendo aqui e ali. Precisamos de mudanças no js também? Não parece ...

mandys em 15 mai. 2017

👍1

@mandys @ascendantofrain Acho que é por causa dos estilos principais do gridstack.css. Você deve substituí-los:

.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; }
    }
}

Mas eu não consegui resolver o problema de itens sobrepostos ainda.

mrmowji em 10 fev. 2018

Tive que adicionar min-width também para que funcionasse na versão 0.3 (que uso para resolver o problema de sobreposição, aliás.)

.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; }
    }
}