OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

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 <andrei@shevchuk.co>
pull/4776/head
Andrei Shevchuk 2017-08-10 17:50:09 +03:00 committed by GitHub
parent 535e33509b
commit 68dd47aa7b
1 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss
View File

@ -18,6 +18,13 @@ limitations under the License.
padding: 10px 0px; padding: 10px 0px;
} }
.mx_MemberDeviceInfo.mx_DeviceVerifyButtons {
width: 100%;
padding: 6px 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.mx_MemberDeviceInfo_textButton { .mx_MemberDeviceInfo_textButton {
color: $accent-fg-color; color: $accent-fg-color;
@ -26,12 +33,11 @@ limitations under the License.
text-align: center; text-align: center;
padding-left: 1em; padding-left: 1em;
padding-right: 1em; padding-right: 1em;
width: 95px;
border: 0px; border: 0px;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
display: inline; margin: 2px;
flex: 1;
} }
.mx_MemberDeviceInfo_deviceId { .mx_MemberDeviceInfo_deviceId {
@ -44,11 +50,6 @@ limitations under the License.
border-bottom: 1px solid rgba(0,0,0,0.1); 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 /* "Unblacklist" is too long for a regular button: make it wider and
reduce the padding. */ reduce the padding. */
.mx_EncryptedEventDialog .mx_MemberDeviceInfo_blacklist, .mx_EncryptedEventDialog .mx_MemberDeviceInfo_blacklist,