Arsharth/hydrogen-web
1
0
Fork 0
forked from mystiq/hydrogen-web
Code Issues Pull requests Projects Releases Packages Wiki Activity

don't use position: absolute for scaling images in the timeline

Browse source 
as it bleeds through the lightbox on IE11, and is a bad idea anyway
This commit is contained in:
Bruno Windels 2020-10-30 22:50:59 +01:00
parent 581dc95c53
commit a21765757d
2 changed files with 30 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/platform/web/ui/css/themes/element/theme.css
View file

@ -505,11 +505,6 @@ ul.Timeline > li.messageStatus .message-container > p {
--avatar-size: 25px; --avatar-size: 25px;
} }
.message-container img.picture {
margin-top: 4px;
border-radius: 4px;
}
.TextMessageView.continuation .message-container { .TextMessageView.continuation .message-container {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
@ -538,6 +533,33 @@ ul.Timeline > li.messageStatus .message-container > p {
color: #aaa; color: #aaa;
} }
.message-container a.picture {
display: grid;
text-decoration: none;
overflow: hidden;
margin-top: 4px;
border-radius: 4px;
}
.message-container a.picture > img {
grid-row: 1 / 2;
grid-column: 1 / 2;
}
.message-container a.picture > time {
grid-row: 1 / 2;
grid-column: 1 / 2;
align-self: end;
justify-self: end;
color: #2e2f32;
display: block;
padding: 2px;
margin: 4px;
background-color: rgba(255, 255, 255, 0.75);
border-radius: 4px;
}
.TextMessageView.pending .message-container { .TextMessageView.pending .message-container {
color: #ccc; color: #ccc;
} }

15
src/platform/web/ui/css/timeline.css
View file

@ -37,23 +37,14 @@ limitations under the License.
margin: 5px 0; margin: 5px 0;
} }
.message-container a { .message-container a.picture {
display: block; display: block;
position: relative;
max-width: 100%;
/* width and padding-top set inline to maintain aspect ratio,
replace with css aspect-ratio once supported */
} }
.message-container img.picture { .message-container a.picture > img {
display: block; display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%; width: 100%;
height: 100%; height: auto;
} }
.TextMessageView { .TextMessageView {