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/28788/head^2
							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
	
	 Suguru Hirahara
						Suguru Hirahara