From 68dd47aa7bdc4a9262fc0996be9bf7731bd60bf9 Mon Sep 17 00:00:00 2001 From: Andrei Shevchuk Date: Thu, 10 Aug 2017 17:50:09 +0300 Subject: [PATCH 1/2] Make member device info buttons fluid and stackable with flexbox Buttons with short text stay as they are, buttons with long text don't get overflowed, but just grow and wrap on a new line if needed, still remaining aligned with others (see screenshot in PR comments) Signed-off-by: Andrei Shevchuk --- .../views/rooms/_MemberDeviceInfo.scss | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss index f1584d4e00..4d0db6c169 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss @@ -18,6 +18,13 @@ limitations under the License. padding: 10px 0px; } +.mx_MemberDeviceInfo.mx_DeviceVerifyButtons { + width: 100%; + padding: 6px 0; + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} .mx_MemberDeviceInfo_textButton { color: $accent-fg-color; @@ -26,12 +33,11 @@ limitations under the License. text-align: center; padding-left: 1em; padding-right: 1em; - width: 95px; border: 0px; font-size: 14px; - cursor: pointer; - display: inline; + margin: 2px; + flex: 1; } .mx_MemberDeviceInfo_deviceId { @@ -44,11 +50,6 @@ limitations under the License. border-bottom: 1px solid rgba(0,0,0,0.1); } -.mx_MemberDeviceInfo_blacklist, -.mx_MemberDeviceInfo_unblacklist { - float: right; -} - /* "Unblacklist" is too long for a regular button: make it wider and reduce the padding. */ .mx_EncryptedEventDialog .mx_MemberDeviceInfo_blacklist, From a72fc80ef6ad65a0b4d74c8d7901da897aed16aa Mon Sep 17 00:00:00 2001 From: Andrei Shevchuk Date: Thu, 10 Aug 2017 20:08:46 +0300 Subject: [PATCH 2/2] Remove width 100% from device info buttons wrapper --- .../css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss index 4d0db6c169..2a5be3250d 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss @@ -19,7 +19,6 @@ limitations under the License. } .mx_MemberDeviceInfo.mx_DeviceVerifyButtons { - width: 100%; padding: 6px 0; display: flex; flex-wrap: wrap;