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
Luke Barnard 2017-06-07 10:19:58 +01:00
parent 13c780c7c5
commit 784e52f249
2 changed files with 7 additions and 7 deletions

View File

@ -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',

View File

@ -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;
} }
/* /*