Change number of panels

[chadallenmx]

How would I change the number for panels from the default 10 to say, 20?
I thought this would do it but no dice.

$(document).ready ( function(){
var myDoormat = new Doormat();
"panels": 10
});

Thanks.

[jh3y]

Hi @chadallenmx ,

Sorry for the delayed response. The amount of panels is actually config driven at build time.

The default is 10 defined in doormat.config.json. The output regarding panels is;

.dm__pnl:nth-of-type(1) {
  z-index: 998;
}
.dm__pnl:nth-of-type(2) {
  z-index: 997;
}
.dm__pnl:nth-of-type(3) {
  z-index: 996;
}

Merely a z-indexing issue on the CSS side. There are two options that spring to mind. One could be to roll out a custom build of doormat providing a higher number of panels. The other would be to add the remaining z-index declaration to your CSS or using a for loop with the preprocessor of your choice etc.

.dm__pnl:nth-of-type(11) {
  z-index: 988;
}
.dm__pnl:nth-of-type(12) {
  z-index: 987;
}
.dm__pnl:nth-of-type(13) {
  z-index: 986;
}

Stylus loop;

for i in (10..20)
  &:nth-of-type({i})
    z-index 999 - i

@jh3y