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

Fixes skeleton compatibility with container queries in masonry and records view modes.

This commit is contained in:
mateuswetah 2024-05-07 18:33:32 -03:00
parent bf58d02ec7
commit 5636a5db8b
2 changed files with 90 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,15 @@
.theme-items-list .tainacan-masonry-container, .theme-items-list,
.items-list-area .tainacan-masonry-container { .items-list-area {
min-height: 50vh; .tainacan-masonry-container,
.tainacan-masonry-container--skeleton {
min-height: 50vh;
}
}
.table-wrapper {
@supports (contain: inline-size) {
container-type: inline-size;
container-name: tablewrapper;
}
} }
.tainacan-masonry-container { .tainacan-masonry-container {
list-style: none; list-style: none;
@ -14,10 +23,6 @@
list-style: none; list-style: none;
animation-name: appear; animation-name: appear;
animation-duration: 0.5s; animation-duration: 0.5s;
@supports (contain: inline-size) {
container-type: inline-size;
}
&:not(.tainacan-masonry-container--legacy){ &:not(.tainacan-masonry-container--legacy){
&>li, &>li,
@ -25,25 +30,25 @@
list-style-type: none; list-style-type: none;
width: calc(12.5% - 25px); width: calc(12.5% - 25px);
@container (max-width: 2380px) { @container tablewrapper (max-width: 2380px) {
width: calc(14.285% - 25px); width: calc(14.285% - 25px);
} }
@container (max-width: 1980px) { @container tablewrapper (max-width: 1980px) {
width: calc(16.666% - 25px); width: calc(16.666% - 25px);
} }
@container (max-width: 1480px) { @container tablewrapper (max-width: 1480px) {
width: calc(20% - 25px); width: calc(20% - 25px);
} }
@container (max-width: 1240px) { @container tablewrapper (max-width: 1240px) {
width: calc(25% - 25px); width: calc(25% - 25px);
} }
@container (max-width: 940px) { @container tablewrapper (max-width: 940px) {
width: calc(33.333% - 25px); width: calc(33.333% - 25px);
} }
@container (max-width: 720px) { @container tablewrapper (max-width: 720px) {
width: calc(50% - 25px); width: calc(50% - 25px);
} }
@container (max-width: 380px) { @container tablewrapper (max-width: 380px) {
width: calc(100% - 25px); width: calc(100% - 25px);
} }
@ -231,7 +236,6 @@
} }
.tainacan-masonry-container--skeleton { .tainacan-masonry-container--skeleton {
display: block; display: block;
min-height: 50vh;
padding-left: 25px; padding-left: 25px;
padding-right: 25px; padding-right: 25px;
column-gap: 25px; column-gap: 25px;
@ -246,27 +250,50 @@
&:not(.tainacan-masonry-container--legacy) { &:not(.tainacan-masonry-container--legacy) {
column-count: 8; column-count: 8;
@media screen and (max-width: 2380px) { @container tablewrapper (max-width: 2380px) {
column-count: 7; column-count: 7;
} }
@media screen and (max-width: 1980px) { @container tablewrapper (max-width: 1980px) {
column-count: 6; column-count: 6;
} }
@media screen and (max-width: 1480px) { @container tablewrapper (max-width: 1480px) {
column-count: 5; column-count: 5;
} }
@media screen and (max-width: 1240px) { @container tablewrapper (max-width: 1240px) {
column-count: 4; column-count: 4;
} }
@media screen and (max-width: 940px) { @container tablewrapper (max-width: 940px) {
column-count: 3; column-count: 3;
} }
@media screen and (max-width: 720px) { @container tablewrapper (max-width: 720px) {
column-count: 2; column-count: 2;
} }
@media screen and (max-width: 380px) { @container tablewrapper (max-width: 380px) {
column-count: 1; column-count: 1;
} }
@supports not (contain: inline-size) {
column-count: 7;
@media screen and (max-width: 2560px) {
column-count: 6;
}
@media screen and (max-width: 1920px) {
column-count: 5;
}
@media screen and (max-width: 1740px) {
column-count: 4;
}
@media screen and (max-width: 1440px) {
column-count: 3;
}
@media screen and (max-width: 1024px) {
column-count: 2;
}
@media screen and (max-width: 620px) {
column-count: 1;
}
}
} }
&.tainacan-masonry-container--legacy { &.tainacan-masonry-container--legacy {
column-count: 7; column-count: 7;

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

@ -1,6 +1,15 @@
.theme-items-list .tainacan-records-container, .theme-items-list,
.items-list-area .tainacan-records-container { .items-list-area {
min-height: 50vh; .tainacan-records-container--skeleton,
.tainacan-records-container {
min-height: 50vh;
}
}
.table-wrapper {
@supports (contain: inline-size) {
container-type: inline-size;
container-name: tablewrapper;
}
} }
.tainacan-records-container { .tainacan-records-container {
list-style: none; list-style: none;
@ -14,27 +23,23 @@
animation-name: appear; animation-name: appear;
animation-duration: 0.5s; animation-duration: 0.5s;
@supports (contain: inline-size) {
container-type: inline-size;
}
&>li, &>li,
.tainacan-records-grid-sizer { .tainacan-records-grid-sizer {
width: calc(16.666% - 30px); width: calc(16.666% - 30px);
@container (max-width: 2560px) { @container tablewrapper (max-width: 2560px) {
width: calc(20% - 30px); width: calc(20% - 30px);
} }
@container (max-width: 1920px) { @container tablewrapper (max-width: 1920px) {
width: calc(25% - 30px); width: calc(25% - 30px);
} }
@container (max-width: 1320px) { @container tablewrapper (max-width: 1320px) {
width: calc(33.333% - 30px); width: calc(33.333% - 30px);
} }
@container (max-width: 1000px) { @container tablewrapper (max-width: 1000px) {
width: calc(50% - 30px); width: calc(50% - 30px);
} }
@container (max-width: 740px) { @container tablewrapper (max-width: 740px) {
width: 100%; width: 100%;
} }
@ -240,34 +245,51 @@
} }
.tainacan-records-container--skeleton { .tainacan-records-container--skeleton {
display: block; display: block;
min-height: 50vh;
padding-left: 30px; padding-left: 30px;
padding-right: 30px; padding-right: 30px;
column-gap: 30px; column-gap: 30px;
height: auto !important; height: auto !important;
column-count: 6;
.skeleton { .skeleton {
width: 100%; width: 100%;
margin-bottom: 30px; margin-bottom: 30px;
break-inside: avoid; break-inside: avoid;
} }
column-count: 6;
@media screen and (max-width: 2560px) { @container tablewrapper (max-width: 2560px) {
column-count: 5; column-count: 5;
} }
@media screen and (max-width: 1920px) { @container tablewrapper (max-width: 1920px) {
column-count: 4; column-count: 4;
} }
@media screen and (max-width: 1320px) { @container tablewrapper (max-width: 1320px) {
column-count: 3; column-count: 3;
} }
@media screen and (max-width: 1000px) { @container tablewrapper (max-width: 1000px) {
column-count: 2; column-count: 2;
} }
@media screen and (max-width: 748px) { @container tablewrapper (max-width: 740px) {
column-count: 1; column-count: 1;
} }
@supports not (contain: inline-size) {
column-count: 5;
@media screen and (max-width: 2560px) {
column-count: 4;
}
@media screen and (max-width: 1920px) {
column-count: 3;
}
@media screen and (max-width: 1360px) {
column-count: 2;
}
@media screen and (max-width: 1024px) {
column-count: 1;
}
}
} }