mirror of
https://github.com/discourse/discourse.git
synced 2024-12-02 03:23:43 +08:00
3c490b2db8
Improves the layout of most grids in posts, by using `object-fit: cover` for most images. This allows images to better fill up the space, without changing their aspect ratio.
103 lines
2.1 KiB
SCSS
103 lines
2.1 KiB
SCSS
.d-image-grid:not([data-disabled]) {
|
|
$grid-column-gap: 6px;
|
|
|
|
&[data-columns] {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
&[data-columns="2"] > * {
|
|
flex-basis: calc(50% - ($grid-column-gap / 2));
|
|
margin-right: $grid-column-gap;
|
|
}
|
|
|
|
&[data-columns="3"] > * {
|
|
flex-basis: calc(33.33% - ($grid-column-gap * 0.667));
|
|
margin-right: $grid-column-gap;
|
|
}
|
|
|
|
.d-image-grid-column {
|
|
box-sizing: border-box;
|
|
// use flex layout, flex-grow and object-fit: cover
|
|
// to better have the images fill their containers
|
|
// and line up vertically (it's not perfect!)
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
|
|
> div,
|
|
> span {
|
|
flex-grow: 1;
|
|
overflow: hidden;
|
|
// hardcoded max-height here prevents extra tall images
|
|
// from having an outsized effect on the grid
|
|
max-height: 1200px;
|
|
|
|
img:not(.thumbnail):not(.ytp-thumbnail-image):not(.emoji) {
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
> img,
|
|
> div {
|
|
margin-bottom: $grid-column-gap;
|
|
}
|
|
|
|
// Forces images in the grid to fill each column width-wise
|
|
img,
|
|
> .lightbox-wrapper,
|
|
> .lightbox-wrapper > .lightbox {
|
|
width: 100%;
|
|
}
|
|
|
|
.lightbox-wrapper {
|
|
.meta .informations {
|
|
display: none;
|
|
}
|
|
.meta .filename {
|
|
flex-grow: 3;
|
|
}
|
|
// full-height lightbox element in container
|
|
> .lightbox {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
// when staging edits
|
|
.image-wrapper {
|
|
display: block;
|
|
margin-bottom: $grid-column-gap;
|
|
padding-bottom: 0em;
|
|
}
|
|
}
|
|
|
|
.d-editor-preview & {
|
|
.image-wrapper {
|
|
margin-bottom: $grid-column-gap;
|
|
padding-bottom: 0em;
|
|
.button-wrapper {
|
|
.scale-btn-container,
|
|
&[editing] .wrap-image-grid-button {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.mobile-view .d-editor-preview & {
|
|
.image-wrapper {
|
|
.button-wrapper {
|
|
opacity: 0;
|
|
}
|
|
&:hover .button-wrapper {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|