tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

(Finally) container queries for masonry items.

This commit is contained in:
mateuswetah 2024-05-07 15:53:44 -03:00
parent e7791f0500
commit 6c37dce230
2 changed files with 20 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/views/admin/scss/_view-mode-masonry.scss
View File

@ -244,24 +244,27 @@
}
&:not(.tainacan-masonry-container--legacy) {
column-count: 7;
column-count: 8;
@media screen and (max-width: 2560px) {
@media screen and (max-width: 2380px) {
column-count: 7;
}
@media screen and (max-width: 1980px) {
column-count: 6;
}
@media screen and (max-width: 1920px) {
@media screen and (max-width: 1480px) {
column-count: 5;
}
@media screen and (max-width: 1740px) {
@media screen and (max-width: 1240px) {
column-count: 4;
}
@media screen and (max-width: 1440px) {
@media screen and (max-width: 940px) {
column-count: 3;
}
@media screen and (max-width: 1024px) {
@media screen and (max-width: 720px) {
column-count: 2;
}
@media screen and (max-width: 620px) {
@media screen and (max-width: 380px) {
column-count: 1;
}
}

17
src/views/admin/scss/_view-mode-records.scss
View File

@ -28,13 +28,13 @@
@container (max-width: 1920px) {
width: calc(25% - 30px);
}
@container (max-width: 1360px) {
@container (max-width: 1320px) {
width: calc(33.333% - 30px);
}
@container (max-width: 1024px) {
@container (max-width: 1000px) {
width: calc(50% - 30px);
}
@container (max-width: 768px) {
@container (max-width: 740px) {
width: 100%;
}
@ -245,7 +245,7 @@
padding-right: 30px;
column-gap: 30px;
height: auto !important;
column-count: 5;
column-count: 6;
.skeleton {
width: 100%;
@ -254,15 +254,18 @@
}
@media screen and (max-width: 2560px) {
column-count: 4;
column-count: 5;
}
@media screen and (max-width: 1920px) {
column-count: 4;
}
@media screen and (max-width: 1320px) {
column-count: 3;
}
@media screen and (max-width: 1360px) {
@media screen and (max-width: 1000px) {
column-count: 2;
}
@media screen and (max-width: 1024px) {
@media screen and (max-width: 748px) {
column-count: 1;
}
}