diff --git a/src/views/admin/scss/_view-mode-masonry.scss b/src/views/admin/scss/_view-mode-masonry.scss index 1a551891d..c3a5e8855 100644 --- a/src/views/admin/scss/_view-mode-masonry.scss +++ b/src/views/admin/scss/_view-mode-masonry.scss @@ -1,6 +1,15 @@ -.theme-items-list .tainacan-masonry-container, -.items-list-area .tainacan-masonry-container { - min-height: 50vh; +.theme-items-list, +.items-list-area { + .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 { list-style: none; @@ -14,10 +23,6 @@ list-style: none; animation-name: appear; animation-duration: 0.5s; - - @supports (contain: inline-size) { - container-type: inline-size; - } &:not(.tainacan-masonry-container--legacy){ &>li, @@ -25,25 +30,25 @@ list-style-type: none; width: calc(12.5% - 25px); - @container (max-width: 2380px) { + @container tablewrapper (max-width: 2380px) { width: calc(14.285% - 25px); } - @container (max-width: 1980px) { + @container tablewrapper (max-width: 1980px) { width: calc(16.666% - 25px); } - @container (max-width: 1480px) { + @container tablewrapper (max-width: 1480px) { width: calc(20% - 25px); } - @container (max-width: 1240px) { + @container tablewrapper (max-width: 1240px) { width: calc(25% - 25px); } - @container (max-width: 940px) { + @container tablewrapper (max-width: 940px) { width: calc(33.333% - 25px); } - @container (max-width: 720px) { + @container tablewrapper (max-width: 720px) { width: calc(50% - 25px); } - @container (max-width: 380px) { + @container tablewrapper (max-width: 380px) { width: calc(100% - 25px); } @@ -231,7 +236,6 @@ } .tainacan-masonry-container--skeleton { display: block; - min-height: 50vh; padding-left: 25px; padding-right: 25px; column-gap: 25px; @@ -246,27 +250,50 @@ &:not(.tainacan-masonry-container--legacy) { column-count: 8; - @media screen and (max-width: 2380px) { + @container tablewrapper (max-width: 2380px) { column-count: 7; } - @media screen and (max-width: 1980px) { + @container tablewrapper (max-width: 1980px) { column-count: 6; } - @media screen and (max-width: 1480px) { + @container tablewrapper (max-width: 1480px) { column-count: 5; } - @media screen and (max-width: 1240px) { + @container tablewrapper (max-width: 1240px) { column-count: 4; } - @media screen and (max-width: 940px) { + @container tablewrapper (max-width: 940px) { column-count: 3; } - @media screen and (max-width: 720px) { + @container tablewrapper (max-width: 720px) { column-count: 2; } - @media screen and (max-width: 380px) { + @container tablewrapper (max-width: 380px) { 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 { column-count: 7; diff --git a/src/views/admin/scss/_view-mode-records.scss b/src/views/admin/scss/_view-mode-records.scss index 8b53c114e..6d58fcfb1 100644 --- a/src/views/admin/scss/_view-mode-records.scss +++ b/src/views/admin/scss/_view-mode-records.scss @@ -1,6 +1,15 @@ -.theme-items-list .tainacan-records-container, -.items-list-area .tainacan-records-container { - min-height: 50vh; +.theme-items-list, +.items-list-area { + .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 { list-style: none; @@ -14,27 +23,23 @@ animation-name: appear; animation-duration: 0.5s; - @supports (contain: inline-size) { - container-type: inline-size; - } - &>li, .tainacan-records-grid-sizer { width: calc(16.666% - 30px); - @container (max-width: 2560px) { + @container tablewrapper (max-width: 2560px) { width: calc(20% - 30px); } - @container (max-width: 1920px) { + @container tablewrapper (max-width: 1920px) { width: calc(25% - 30px); } - @container (max-width: 1320px) { + @container tablewrapper (max-width: 1320px) { width: calc(33.333% - 30px); } - @container (max-width: 1000px) { + @container tablewrapper (max-width: 1000px) { width: calc(50% - 30px); } - @container (max-width: 740px) { + @container tablewrapper (max-width: 740px) { width: 100%; } @@ -240,34 +245,51 @@ } .tainacan-records-container--skeleton { display: block; - min-height: 50vh; padding-left: 30px; padding-right: 30px; column-gap: 30px; height: auto !important; - column-count: 6; .skeleton { width: 100%; margin-bottom: 30px; break-inside: avoid; } + + column-count: 6; - @media screen and (max-width: 2560px) { + @container tablewrapper (max-width: 2560px) { column-count: 5; } - @media screen and (max-width: 1920px) { + @container tablewrapper (max-width: 1920px) { column-count: 4; } - @media screen and (max-width: 1320px) { + @container tablewrapper (max-width: 1320px) { column-count: 3; } - @media screen and (max-width: 1000px) { + @container tablewrapper (max-width: 1000px) { column-count: 2; } - @media screen and (max-width: 748px) { + @container tablewrapper (max-width: 740px) { 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; + } + } }