PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Fix position of wide images on IRC / modern layout (#8667)

Browse source 
* Move declarations related to position from _MImageBody.scss to _EventTile.scss

These declarations should not be defined as default values as position depends on other factors such as layout, etc.

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

* Move min-height and min-width declarations from _MImageBody.scss to _EventTile.scss

Since min-height and min-width have been specified for bubble layout, the declarations have been expected to be applied to the other layouts.

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

* Apply 'justify-content: center' to bubble layout only

'justify-content: center' was added for the bubble layout with 1436f23. It should not be applied to the other layouts.

In order to prevent an issue related to cascading from happening, 'justify-content: flex-start' is explicitly specified.

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>
This commit is contained in:
Suguru Hirahara 2022-05-23 07:02:13 +00:00 committed by GitHub
parent 11cb48176e
commit 5446d5d6ba
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
res/css/views/messages/_MImageBody.scss
View file

@ -62,12 +62,6 @@ $timeline-image-border-radius: 8px;
overflow: hidden; overflow: hidden;
contain: paint; contain: paint;
min-height: $font-44px;
min-width: $font-44px;
display: flex;
justify-content: center;
align-items: center;
// Override inline max-width value to avoid overflow // Override inline max-width value to avoid overflow
max-width: 100% !important; max-width: 100% !important;

9
res/css/views/rooms/_EventBubbleTile.scss
View file

@ -156,9 +156,12 @@ limitations under the License.
padding-right: 48px; padding-right: 48px;
} }
.mx_MImageBody_thumbnail_container { .mx_MImageBody {
min-height: calc(1.8rem + var(--gutterSize) + var(--gutterSize)); .mx_MImageBody_thumbnail_container {
min-width: calc(1.8rem + var(--gutterSize) + var(--gutterSize)); justify-content: center;
min-height: calc(1.8rem + var(--gutterSize) + var(--gutterSize));
min-width: calc(1.8rem + var(--gutterSize) + var(--gutterSize));
}
} }
.mx_CallEvent { .mx_CallEvent {

13
res/css/views/rooms/_EventTile.scss
View file

@ -58,6 +58,13 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
} }
} }
.mx_MImageBody {
.mx_MImageBody_thumbnail_container {
display: flex;
align-items: center; // on every layout
}
}
&[data-layout=group] { &[data-layout=group] {
.mx_EventTile_line { .mx_EventTile_line {
line-height: var(--GroupLayout-EventTile-line-height); line-height: var(--GroupLayout-EventTile-line-height);
@ -265,6 +272,12 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
.mx_MImageBody { .mx_MImageBody {
margin-right: 34px; margin-right: 34px;
.mx_MImageBody_thumbnail_container {
justify-content: flex-start;
min-height: $font-44px;
min-width: $font-44px;
}
} }
.mx_EventTile_e2eIcon { .mx_EventTile_e2eIcon {