Rubicon/tutu
1
0
Fork 0
Code Issues 19 Pull requests Projects Activity Actions

Masonry: remove built-in column number condition

Browse source
This commit is contained in:
thislight 2024-11-23 13:53:10 +08:00
parent fbbac36b4a
commit bb3ba32dc5
No known key found for this signature in database
GPG key ID: FCFE5192241CCD4E
3 changed files with 12 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/platform/Masonry.css
View file

@ -5,12 +5,7 @@
@supports (grid-template-rows: masonry) { @supports (grid-template-rows: masonry) {
.NativeMasonry { .NativeMasonry {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(44px, min-content)); grid-template-columns: repeat(auto-fit, minmax(33%, min-content));
grid-template-rows: masonry; grid-template-rows: masonry;
&:has(> :last-child:nth-child(2n)) {
grid-template-columns: repeat(2, minmax(auto, min-content));
}
} }
} }

7
src/platform/Masonry.tsx
View file

@ -144,6 +144,13 @@ function MasonryNative<T extends MasonryContainer>(
* and fallback to masonry-layout if not supported. The children * and fallback to masonry-layout if not supported. The children
* must have specified width and height. * must have specified width and height.
* *
* Testing native behaviour:
* - Firefox: in `about:config`, search for `layout.css.grid-template-masonry-value.enabled`
*
* Class `NativeMasonry` will be added to the element if it's under the
* css masonry layout, otherwise it's `CompatMasonry`. `Masonry` is always
* added.
*
* **Children Changes** As the children changed, reflow will be triggered, * **Children Changes** As the children changed, reflow will be triggered,
* and there is might be a blink (or transition) for user. If it's not your * and there is might be a blink (or transition) for user. If it's not your
* intention, don't remove/add the direct children. Instead wraps them under * intention, don't remove/add the direct children. Instead wraps them under

8
src/timelines/toots/MediaAttachmentGrid.css
View file

@ -6,7 +6,7 @@
contain: layout style; contain: layout style;
gap: 4px; gap: 4px;
> * { >* {
max-height: 35vh; max-height: 35vh;
min-height: 40px; min-height: 40px;
min-width: 40px; min-width: 40px;
@ -26,16 +26,16 @@
} }
} }
> * > * { >*>* {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
> * > :where(img, video) { >*> :where(img, video) {
object-fit: contain; object-fit: contain;
} }
> * >.sensitive-placeholder { >*>.sensitive-placeholder {
display: inline-flex; display: inline-flex;
display: inline flex; display: inline flex;
align-items: center; align-items: center;