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

Remove 100% min-width hack from mx_GenericEventListSummary[data-layout=bubble][data-expanded=false] (#8992)

pull/28788/head^2
Suguru Hirahara 2022-07-06 10:16:24 +00:00 committed by GitHub
parent 6f21a155a4
commit 2706f14456
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
res/css/views/elements/_GenericEventListSummary.scss
View File

@ -43,8 +43,8 @@ limitations under the License.
&[data-expanded=false] { &[data-expanded=false] {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: space-between;
padding: 0 49px; // Align with left edge of bubble tiles column-gap: 5px;
} }
// ideally we'd use display=contents here for the layout to all work regardless of the *ELS but // ideally we'd use display=contents here for the layout to all work regardless of the *ELS but
@ -68,15 +68,14 @@ limitations under the License.
.mx_GenericEventListSummary_toggle { .mx_GenericEventListSummary_toggle {
margin-block: 0; margin-block: 0;
margin-inline-end: 55px;
&[aria-expanded=false] { &[aria-expanded=false] {
order: 9; order: 9;
margin-inline-start: 5px;
} }
&[aria-expanded=true] { &[aria-expanded=true] {
margin-inline-start: auto; // reduce clickable area margin-inline-start: auto; // reduce clickable area
margin-inline-end: var(--EventTile_bubble-margin-inline-end); // as the parent has zero margin
} }
} }

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

@ -28,12 +28,16 @@ limitations under the License.
--gutterSize: 11px; --gutterSize: 11px;
--cornerRadius: 12px; --cornerRadius: 12px;
--maxWidth: 70%; --maxWidth: 70%;
margin-right: 60px;
// For both event tile and event list summary
--EventTile_bubble-margin-inline-start: 49px;
--EventTile_bubble-margin-inline-end: 60px;
margin-inline-start: var(--EventTile_bubble-margin-inline-start);
margin-inline-end: var(--EventTile_bubble-margin-inline-end);
} }
.mx_EventTile[data-layout=bubble] { .mx_EventTile[data-layout=bubble] {
--EventTile_bubble-margin-inline-start: 49px;
--EventTile_bubble-margin-inline-end: 60px;
--EventTile_bubble_line-margin-inline-start: -9px; --EventTile_bubble_line-margin-inline-start: -9px;
--EventTile_bubble_line-margin-inline-end: -12px; --EventTile_bubble_line-margin-inline-end: -12px;
--EventTile_bubble_gap-inline: 5px; --EventTile_bubble_gap-inline: 5px;
@ -579,6 +583,13 @@ limitations under the License.
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
.mx_EventTile_line,
.mx_EventTile_info {
min-width: 100%;
// Preserve alignment with left edge of text in bubbles
margin: 0;
}
} }
.mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble], .mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble],
@ -594,13 +605,6 @@ limitations under the License.
margin-inline-end: var(--EventTile_bubble_gap-inline); // Same spacing between E2E icon and a hidden event margin-inline-end: var(--EventTile_bubble_gap-inline); // Same spacing between E2E icon and a hidden event
} }
.mx_EventTile_line,
.mx_EventTile_info {
min-width: 100%;
// Preserve alignment with left edge of text in bubbles
margin: 0;
}
.mx_EventTile_e2eIcon { .mx_EventTile_e2eIcon {
margin-inline-start: 0; // mx_EventTile_avatar has margin-inline-end, so margin is not needed here margin-inline-start: 0; // mx_EventTile_avatar has margin-inline-end, so margin is not needed here
align-self: center; align-self: center;