Галерея Susy с AngularJS (ng-repeat) - не заполняет пробелы из ng-hide

Question

Я использую инструмент галереи Susy для отображения элементов в формате сетки. Угловые скрываются или отображают эти элементы сетки «на лету», в зависимости от выбора пользователя. Когда Angular скрывает элемент в сетке, он присоединяет к нему класс ng-hide. Это, в свою очередь, устанавливает CSS для display:none !important.

Проблема заключается в том, что Susy вычисляет положение каждого элемента и не принимает во внимание элементы, установленные на display:none, - это оставляет пробелы в сетке, когда эти элементы скрыты.

Возможно ли получить Susy до игнорировать скрытые элементы при их выкладке?

Я попытался с помощью :not() селектор CSS, без успеха - есть еще пробелы в макете:

.results__result:not(.ng-hide) { 
    @include gallery(3 of 12); 
} 

Answer 1

Sass ничего о DOM не знаю, так что Сюзи не либо. Чтобы создать макет галереи, susy должен полагаться на селектора nth-child - которые не очень хорошо работают в случае использования, о котором вы говорите. Начните с простого:

.results__result { 
    @include span(3 of 12); 
} 

Если вы используете split, inside или inside-static желобов - что нужно просто работать. В противном случае вам нужно каким-то образом настроить таргетинг на элемент last в каждой строке сетки. CSS не имеет возможности нацеливать nth-visible, поэтому для вашей разметки/js потребуется дополнительная логика. Учитывая класс last каждый 4-й видимый результат, вы можете добавить:

.last { 
    @include last; 
}