Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: fix long image titles in experimental lightbox (#22883)

This commit is contained in:
Kris 2023-07-31 18:36:33 -04:00 committed by GitHub
parent 03bc9b2569
commit 6bf0c0a52e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 26 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -231,7 +231,7 @@ html.has-lightbox {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
height: 100%; height: 100dvh;
width: 100%; width: 100%;
z-index: z("max"); z-index: z("max");
} }
@ -315,6 +315,7 @@ html.has-lightbox {
&__footer { &__footer {
z-index: 1; z-index: 1;
padding: 0.25em 1px; padding: 0.25em 1px;
min-width: 0;
box-sizing: border-box; box-sizing: border-box;
color: var(--d-lightbox-primary); color: var(--d-lightbox-primary);
background: linear-gradient( background: linear-gradient(
@ -322,32 +323,37 @@ html.has-lightbox {
var(--d-lightbox-secondary), var(--d-lightbox-secondary),
transparent transparent
); );
position: relative; position: relative;
}
&__main-title { &__main-title {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 0.25em;
word-break: break-word; word-break: break-word;
max-width: 100%; max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
// right/left padding to align with buttons // right/left padding to align with buttons
padding: 0 0.65em; padding: 0 0.65em;
border: 1px solid transparent; border: 1px solid transparent;
width: 100%;
min-width: 0;
overflow: hidden;
&:focus-visible { &:focus-visible {
outline: none; outline: none;
border: 1px solid var(--tertiary); border: 1px solid var(--tertiary);
border-radius: 1px; border-radius: 1px;
} }
} }
&__item-title {
display: block;
@include ellipsis;
} }
&__item-file-details { &__item-file-details {
font-size: var(--font-down-2); font-size: var(--font-down-2);
opacity: 0.5; color: var(--primary-600);
padding: 0.25em 0;
white-space: nowrap; white-space: nowrap;
} }
} }