mirror of https://github.com/vector-im/riot-web
Align message timestamp centrally about the avatar mid-point
Tested visually against any unintended changes to the alignment of e2e icons, with timestamps on 12h and 24h mode.pull/4219/head
parent
13c780c7c5
commit
784e52f249
|
@ -16,8 +16,8 @@ limitations under the License.
|
||||||
|
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
const React = require('react');
|
import React from 'react';
|
||||||
const DateUtils = require('matrix-react-sdk/lib/DateUtils');
|
import DateUtils from 'matrix-react-sdk/lib/DateUtils';
|
||||||
|
|
||||||
module.exports = React.createClass({
|
module.exports = React.createClass({
|
||||||
displayName: 'MessageTimestamp',
|
displayName: 'MessageTimestamp',
|
||||||
|
|
|
@ -63,7 +63,9 @@ limitations under the License.
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
color: $event-timestamp-color;
|
color: $event-timestamp-color;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
left: 8px;
|
left: 0px;
|
||||||
|
width: 46px; /* 8 + 30 (avatar) + 8 */
|
||||||
|
text-align: center;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -189,6 +191,7 @@ limitations under the License.
|
||||||
|
|
||||||
.mx_EventTile_selected .mx_MessageTimestamp {
|
.mx_EventTile_selected .mx_MessageTimestamp {
|
||||||
left: 3px;
|
left: 3px;
|
||||||
|
width: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_EventTile_editButton {
|
.mx_EventTile_editButton {
|
||||||
|
@ -271,10 +274,6 @@ limitations under the License.
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_EventTile_12hr .mx_MessageTimestamp {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
|
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
|
||||||
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
|
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
|
||||||
padding-left: 60px;
|
padding-left: 60px;
|
||||||
|
@ -296,6 +295,7 @@ limitations under the License.
|
||||||
.mx_EventTile:hover.mx_EventTile_verified .mx_MessageTimestamp,
|
.mx_EventTile:hover.mx_EventTile_verified .mx_MessageTimestamp,
|
||||||
.mx_EventTile:hover.mx_EventTile_unverified .mx_MessageTimestamp {
|
.mx_EventTile:hover.mx_EventTile_unverified .mx_MessageTimestamp {
|
||||||
left: 3px;
|
left: 3px;
|
||||||
|
width: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
Loading…
Reference in New Issue