mirror of https://github.com/vector-im/riot-web
Move style rules of MatrixChat_useCompactLayout from _GroupLayout.scss to _EventTile.scss and _RoomView.scss (#8725)
* Move mx_RoomView_MessageList h2 block from _GroupLayout.scss to _RoomView.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move mx_MatrixChat_useCompactLayout block from _GroupLayout.scss to _EventTile.scss This block is not related to the group layout. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include EventTile_continuation block in EventTile_emote Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use logical properties for the padding values Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Sort declarations for maintainability - EventTile_avatar - EventTile_line - EventTile_reply 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> * Separate selectors of .markdown-body Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>pull/28217/head
Suguru Hirahara
GitHub
parent
b5ed051ecc
commit
228abb6f07
|
|
@ -272,6 +272,10 @@ hr.mx_RoomView_myReadMarker {
|
|||
.mx_MatrixChat_useCompactLayout {
|
||||
.mx_RoomView_MessageList {
|
||||
margin-bottom: 4px;
|
||||
|
||||
h2 {
|
||||
margin-top: 6px; // TODO: Use a spacing variable
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomView_statusAreaBox {
|
||||
|
|
|
|||
|
|
@ -610,6 +610,86 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
|
|||
}
|
||||
}
|
||||
|
||||
/* Compact layout overrides */
|
||||
|
||||
.mx_MatrixChat_useCompactLayout {
|
||||
.mx_EventTile {
|
||||
padding-top: $spacing-4;
|
||||
|
||||
&.mx_EventTile_info {
|
||||
padding-top: 0; // same as the padding for non-compact .mx_EventTile.mx_EventTile_info
|
||||
font-size: $font-13px;
|
||||
|
||||
.mx_EventTile_avatar {
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.mx_EventTile_line,
|
||||
.mx_EventTile_reply {
|
||||
line-height: $font-20px;
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_EventTile_emote {
|
||||
padding-top: $spacing-8; // add a bit more space for emotes so that avatars don't collide
|
||||
|
||||
&.mx_EventTile_continuation {
|
||||
padding-top: 0;
|
||||
|
||||
.mx_EventTile_line,
|
||||
.mx_EventTile_reply {
|
||||
padding-block: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile_avatar {
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.mx_EventTile_line,
|
||||
.mx_EventTile_reply {
|
||||
padding-top: 0px;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile_avatar {
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.mx_EventTile_line,
|
||||
.mx_EventTile_reply {
|
||||
padding-block: 0;
|
||||
}
|
||||
|
||||
.mx_EventTile_e2eIcon {
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
.mx_DisambiguatedProfile {
|
||||
font-size: $font-13px;
|
||||
}
|
||||
|
||||
.mx_ReadReceiptGroup {
|
||||
// This aligns the avatar with the last line of the
|
||||
// message. We want to move it one line up - 2rem
|
||||
top: -2rem;
|
||||
}
|
||||
|
||||
.mx_EventTile_content .markdown-body {
|
||||
p,
|
||||
ul,
|
||||
ol,
|
||||
dl,
|
||||
blockquote,
|
||||
pre,
|
||||
table {
|
||||
margin-bottom: $spacing-4; // 1/4 of the non-compact margin-bottom
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* end of overrides */
|
||||
|
||||
.mx_EventTile_keyRequestInfo {
|
||||
|
|
|
|||
|
|
@ -46,85 +46,3 @@ $left-gutter: 64px;
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Compact layout overrides */
|
||||
|
||||
.mx_MatrixChat_useCompactLayout {
|
||||
.mx_EventTile {
|
||||
padding-top: 4px;
|
||||
|
||||
.mx_EventTile_line,
|
||||
.mx_EventTile_reply {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&.mx_EventTile_info {
|
||||
// same as the padding for non-compact .mx_EventTile.mx_EventTile_info
|
||||
padding-top: 0px;
|
||||
font-size: $font-13px;
|
||||
|
||||
.mx_EventTile_line,
|
||||
.mx_EventTile_reply {
|
||||
line-height: $font-20px;
|
||||
}
|
||||
|
||||
.mx_EventTile_avatar {
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_DisambiguatedProfile {
|
||||
font-size: $font-13px;
|
||||
}
|
||||
|
||||
&.mx_EventTile_emote {
|
||||
// add a bit more space for emotes so that avatars don't collide
|
||||
padding-top: 8px;
|
||||
|
||||
.mx_EventTile_avatar {
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.mx_EventTile_line,
|
||||
.mx_EventTile_reply {
|
||||
padding-top: 0px;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_EventTile_emote.mx_EventTile_continuation {
|
||||
padding-top: 0;
|
||||
|
||||
.mx_EventTile_line,
|
||||
.mx_EventTile_reply {
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile_avatar {
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.mx_EventTile_e2eIcon {
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
.mx_ReadReceiptGroup {
|
||||
// This aligns the avatar with the last line of the
|
||||
// message. We want to move it one line up - 2rem
|
||||
top: -2rem;
|
||||
}
|
||||
|
||||
.mx_EventTile_content .markdown-body {
|
||||
p, ul, ol, dl, blockquote, pre, table {
|
||||
margin-bottom: 4px; // 1/4 of the non-compact margin-bottom
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomView_MessageList h2 {
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue