OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix file button and audio player overflowing from message bubble (#8666) 

* Fix file button and audio player overflowing from message bubble

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Move '.mx_EventTile_image' to '.mx_EventTile_mediaLine'

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* yarn run lint:style --fix

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use class names for now, adding a TODO comment

Remove unset as it is no longer required.

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
pull/28788/head^2
Suguru Hirahara 2022-05-24 07:06:04 +00:00 committed by GitHub
parent ef977146c3
commit 9f1bffcd34
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
res/css/views/rooms/_EventBubbleTile.scss
View File

@ -284,29 +284,37 @@ limitations under the License.
z-index: 3; // above media and location share maps z-index: 3; // above media and location share maps
} }
&.mx_EventTile_mediaLine .mx_MVoiceMessageBody { &.mx_EventTile_mediaLine {
// allow the event to be collapsed, this causes the waveform to get cropped // TODO: Use a common class name instead
min-width: 0; .mx_MFileBody,
} .mx_MAudioBody {
max-width: 100%; // avoid overflow
// we put the timestamps for media (other than stickers) atop the media
// for images we also apply a linear gradient and change the timestamp colour to aid readability
&.mx_EventTile_mediaLine.mx_EventTile_image {
.mx_MessageTimestamp {
color: #ffffff; // regardless of theme, always visible on the below gradient
} }
// linear gradient to make the timestamp more visible .mx_MVoiceMessageBody {
.mx_MImageBody::before { // allow the event to be collapsed, this causes the waveform to get cropped
content: ""; min-width: 0;
position: absolute; }
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
z-index: 1; // we put the timestamps for media (other than stickers) atop the media
top: 0; // for images we also apply a linear gradient and change the timestamp colour to aid readability
bottom: 0; &.mx_EventTile_image {
left: 0; .mx_MessageTimestamp {
right: 0; color: #ffffff; // regardless of theme, always visible on the below gradient
pointer-events: none; }
// linear gradient to make the timestamp more visible
.mx_MImageBody::before {
content: "";
position: absolute;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
z-index: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
pointer-events: none;
}
} }
} }

4
res/css/views/rooms/_EventTile.scss
View File

@ -903,10 +903,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
.mx_EventTile_line.mx_EventTile_mediaLine { .mx_EventTile_line.mx_EventTile_mediaLine {
padding: 0; padding: 0;
max-width: 100%; max-width: 100%;
.mx_MFileBody {
width: 100%;
}
} }
&[data-self=true] { &[data-self=true] {