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

Finally uses container queries for defining masonry columns. #872.

This commit is contained in:
mateuswetah 2024-05-05 17:52:56 -03:00
parent 21075e1e29
commit 6238589c69
2 changed files with 67 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,31 +14,61 @@
list-style: none;
animation-name: appear;
animation-duration: 0.5s;
@supports (contain: inline-size) {
container-type: inline-size;
}
&:not(.tainacan-masonry-container--legacy){
&>li,
&>.tainacan-masonry-grid-sizer {
list-style-type: none;
width: calc(14.285% - 25px);
@media screen and (max-width: 2560px) {
width: calc(12.5% - 25px);
@container (max-width: 2380px) {
width: calc(14.285% - 25px);
}
@container (max-width: 1980px) {
width: calc(16.666% - 25px);
}
@media screen and (max-width: 1920px) {
@container (max-width: 1480px) {
width: calc(20% - 25px);
}
@media screen and (max-width: 1740px) {
@container (max-width: 1240px) {
width: calc(25% - 25px);
}
@media screen and (max-width: 1440px) {
@container (max-width: 940px) {
width: calc(33.333% - 25px);
}
@media screen and (max-width: 1024px) {
@container (max-width: 720px) {
width: calc(50% - 25px);
}
@media screen and (max-width: 620px) {
@container (max-width: 380px) {
width: calc(100% - 25px);
}
@supports not (contain: inline-size) {
width: calc(14.285% - 25px);
@media screen and (max-width: 2560px) {
width: calc(16.666% - 25px);
}
@media screen and (max-width: 1920px) {
width: calc(20% - 25px);
}
@media screen and (max-width: 1740px) {
width: calc(25% - 25px);
}
@media screen and (max-width: 1440px) {
width: calc(33.333% - 25px);
}
@media screen and (max-width: 1024px) {
width: calc(50% - 25px);
}
@media screen and (max-width: 620px) {
width: calc(100% - 25px);
}
}
}
}
&.tainacan-masonry-container--legacy {

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

@ -4,6 +4,7 @@
}
.tainacan-records-container {
list-style: none;
margin-left: 30px;
padding: 0;
display: flex;
flex-wrap: wrap;
@ -12,42 +13,48 @@
justify-content: space-evenly;
animation-name: appear;
animation-duration: 0.5s;
container-type: inline-size;
@supports (contain: inline-size) {
container-type: inline-size;
}
&>li,
.tainacan-records-grid-sizer {
width: calc(20% - 30px);
width: calc(16.666% - 30px);
@container (max-width: 2560px) {
width: calc(25% - 30px);
width: calc(20% - 30px);
}
@container (max-width: 1920px) {
width: calc(33.333% - 30px);
width: calc(25% - 30px);
}
@container (max-width: 1360px) {
width: calc(50% - 30px);
width: calc(33.333% - 30px);
}
@container (max-width: 1024px) {
width: calc(50% - 30px);
}
@container (max-width: 768px) {
width: 100%;
}
}
// &>li,
// .tainacan-records-grid-sizer {
// width: calc(20% - 30px);
// @media screen and (max-width: 2560px) {
// width: calc(25% - 30px);
// }
// @media screen and (max-width: 1920px) {
// width: calc(33.333% - 30px);
// }
// @media screen and (max-width: 1360px) {
// width: calc(50% - 30px);
// }
// @media screen and (max-width: 1024px) {
// width: 100%;
// }
// }
@supports not (contain: inline-size) {
width: calc(20% - 30px);
@media screen and (max-width: 2560px) {
width: calc(25% - 30px);
}
@media screen and (max-width: 1920px) {
width: calc(33.333% - 30px);
}
@media screen and (max-width: 1360px) {
width: calc(50% - 30px);
}
@media screen and (max-width: 1024px) {
width: 100%;
}
}
}
.tainacan-record {
background-color: rgba(126, 126, 126, 0.05);
padding: 0px;