IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-25 10:20:58 -06:00
Code Issues Packages Projects Releases Wiki Activity

FIX: remove background image from lightbox backdrop (#24225)

Browse Source 
This change removes the background image (which is the small version of the uploaded image) from the lightbox backdrop.

Now a solid color (dark grey) is used for the backdrop so we can distinguish between the lightbox's head, body and footer.
This commit is contained in:
David Battersby 2023-11-03 16:10:04 +08:00 committed by GitHub
parent 47e58357b6
commit b2ec92390a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/assets/javascripts/discourse/app/components/d-lightbox.js
View File

@ -65,7 +65,7 @@ export default class DLightbox extends Component {
return htmlSafe(variables.join(""));
}
const { width, height, aspectRatio, dominantColor, fullsizeURL, smallURL } =
const { width, height, aspectRatio, dominantColor, fullsizeURL } =
this.currentItem;
variables.push(
@ -74,8 +74,7 @@ export default class DLightbox extends Component {
`${base}-height: ${height}px`,
`${base}-aspect-ratio: ${aspectRatio}`,
`${base}-dominant-color: #${dominantColor}`,
`${base}-full-size-url: url(${encodeURI(fullsizeURL)})`,
`${base}-small-url: url(${encodeURI(smallURL)})`
`${base}-full-size-url: url(${encodeURI(fullsizeURL)})`
);
return htmlSafe(variables.filter(Boolean).join(";"));

7
app/assets/stylesheets/common/components/d-lightbox.scss
View File

@ -19,6 +19,7 @@ html.has-lightbox {
--d-lightbox-primary: #ffffff;
--d-lightbox-secondary: #000000;
--d-lightbox-secondary-translucent: rgba(0, 0, 0, 0.25);
--d-lightbox-tertiary: #222222;
}
/* Lightbox element*/
@ -280,11 +281,7 @@ html.has-lightbox {
left: 0;
height: 100%;
width: 100%;
background-size: cover;
background-position: center;
filter: blur(15px) brightness(0.25);
background-color: var(--d-lightbox-secondary);
background-image: var(--d-lightbox-image-small-url);
background-color: var(--d-lightbox-tertiary);
}
&__main-image {