mirror of https://github.com/vector-im/riot-web
Fix timestamp's position on the chat panel with a maximized widget in IRC layout (#8464)
Fix avatar's position on the chat panel with a maximized widget in IRC layout Fix timestamp's position on Message Edits history modal window Also: - Align DisambiguatedProfile with reactions row and thread summary with a variable - Add width property as default - Use the global variable on _IRCLayout.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>pull/28217/head
parent
34471ba855
commit
c86040b77a
|
@ -55,6 +55,12 @@ limitations under the License.
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.mx_EventTile {
|
||||
.mx_MessageTimestamp {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile_line, .mx_EventTile_content {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
|
|
@ -18,4 +18,5 @@ limitations under the License.
|
|||
color: $event-timestamp-color;
|
||||
font-size: $font-10px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
width: $MessageTimestamp_width;
|
||||
}
|
||||
|
|
|
@ -52,31 +52,39 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_EventTile:not([data-layout="bubble"]) {
|
||||
$left-gutter: 36px;
|
||||
|
||||
.mx_EventTile_line {
|
||||
padding-left: 36px;
|
||||
padding-right: 36px;
|
||||
padding-inline-start: $left-gutter;
|
||||
padding-inline-end: 36px;
|
||||
}
|
||||
|
||||
.mx_DisambiguatedProfile,
|
||||
.mx_ReactionsRow,
|
||||
.mx_ThreadSummary {
|
||||
margin-inline-start: $left-gutter;
|
||||
}
|
||||
|
||||
.mx_ReactionsRow {
|
||||
padding: 0;
|
||||
|
||||
// See margin setting of ReactionsRow on _EventTile.scss
|
||||
margin-left: 36px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.mx_ThreadSummary {
|
||||
margin-left: 36px;
|
||||
margin-right: 0;
|
||||
max-width: min(calc(100% - 36px), 600px);
|
||||
}
|
||||
|
||||
.mx_EventTile_avatar {
|
||||
position: absolute; // for IRC layout
|
||||
top: 12px;
|
||||
left: -3px;
|
||||
}
|
||||
|
||||
.mx_MessageTimestamp {
|
||||
position: absolute; // for modern layout and IRC layout
|
||||
right: -4px;
|
||||
left: auto;
|
||||
}
|
||||
|
@ -87,7 +95,7 @@ limitations under the License.
|
|||
|
||||
&.mx_EventTile_info {
|
||||
.mx_EventTile_line {
|
||||
padding-left: 36px;
|
||||
padding-left: $left-gutter;
|
||||
}
|
||||
|
||||
.mx_EventTile_avatar {
|
||||
|
|
|
@ -30,8 +30,7 @@ $left-gutter: 64px;
|
|||
}
|
||||
|
||||
.mx_MessageTimestamp {
|
||||
position: absolute;
|
||||
width: $MessageTimestamp_width;
|
||||
position: absolute; // for modern layout
|
||||
}
|
||||
|
||||
.mx_EventTile_line, .mx_EventTile_reply {
|
||||
|
|
|
@ -15,7 +15,6 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
$icon-width: 14px;
|
||||
$timestamp-width: 45px;
|
||||
$right-padding: 5px;
|
||||
$irc-line-height: $font-18px;
|
||||
|
||||
|
@ -28,7 +27,7 @@ $irc-line-height: $font-18px;
|
|||
// timestamps are links which shouldn't be underlined
|
||||
> a {
|
||||
text-decoration: none;
|
||||
min-width: 45px;
|
||||
min-width: $MessageTimestamp_width;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
|
@ -85,7 +84,6 @@ $irc-line-height: $font-18px;
|
|||
|
||||
.mx_MessageTimestamp {
|
||||
font-size: $font-10px;
|
||||
width: $timestamp-width;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
@ -141,7 +139,7 @@ $irc-line-height: $font-18px;
|
|||
|
||||
.mx_GenericEventListSummary {
|
||||
> .mx_EventTile_line {
|
||||
padding-left: calc(var(--name-width) + $icon-width + $timestamp-width + 3 * $right-padding); // 15 px of padding
|
||||
padding-left: calc(var(--name-width) + $icon-width + $MessageTimestamp_width + 3 * $right-padding); // 15 px of padding
|
||||
}
|
||||
|
||||
.mx_GenericEventListSummary_avatars {
|
||||
|
|
Loading…
Reference in New Issue