enhance imageview grid

This commit is contained in:
Faris Ansari 2017-03-06 20:57:22 +05:30
parent e3d4e8b108
commit aab2a2f5ba
2 changed files with 38 additions and 17 deletions

View file

@ -334,6 +334,23 @@
border-bottom: 1px solid #EBEFF2;
}
}
.image-view-container.three-column .image-view-item {
flex: 0 0 33.33333333%;
}
.image-view-container.three-column .image-view-item:nth-child(3n) {
border-right: none;
}
.image-view-container.three-column .image-view-item:nth-last-child(-n + 3):nth-child(3n + 1),
.image-view-container.three-column .image-view-item:nth-last-child(-n + 3):nth-child(3n + 1) ~ .image-view-item {
border-bottom: none;
}
.image-view-container.three-column .image-view-item:nth-child(4n) {
border-right: 1px solid #EBEFF2;
}
.image-view-container.three-column .image-view-item:nth-last-child(-n + 4):nth-child(4n + 1),
.image-view-container.three-column .image-view-item:nth-last-child(-n + 4):nth-child(4n + 1) ~ .image-view-item {
border-bottom: 1px solid #EBEFF2;
}
.pswp--svg .pswp__button,
.pswp--svg .pswp__button--arrow--left:before,
.pswp--svg .pswp__button--arrow--right:before {

View file

@ -398,25 +398,29 @@
// 3 columns for small screen
@media(max-width: @screen-sm) {
.image-view-item {
flex: 0 0 100%/3;
}
.image-view-container.three-column;
}
}
.image-view-item:nth-child(3n) {
border-right: none;
}
.image-view-item:nth-last-child(-n + 3):nth-child(3n + 1),
.image-view-item:nth-last-child(-n + 3):nth-child(3n + 1) ~ .image-view-item {
border-bottom: none;
}
.image-view-container.three-column {
.image-view-item {
flex: 0 0 100%/3;
}
.image-view-item:nth-child(4n) {
border-right: 1px solid @light-border-color;
}
.image-view-item:nth-last-child(-n + 4):nth-child(4n + 1),
.image-view-item:nth-last-child(-n + 4):nth-child(4n + 1) ~ .image-view-item {
border-bottom: 1px solid @light-border-color;
}
.image-view-item:nth-child(3n) {
border-right: none;
}
.image-view-item:nth-last-child(-n + 3):nth-child(3n + 1),
.image-view-item:nth-last-child(-n + 3):nth-child(3n + 1) ~ .image-view-item {
border-bottom: none;
}
.image-view-item:nth-child(4n) {
border-right: 1px solid @light-border-color;
}
.image-view-item:nth-last-child(-n + 4):nth-child(4n + 1),
.image-view-item:nth-last-child(-n + 4):nth-child(4n + 1) ~ .image-view-item {
border-bottom: 1px solid @light-border-color;
}
}