PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Truncate SAS emoji labels to fit

Browse source 
This keeps the layout of the emoji fixed as much as possible.

Other changes:
 * Fix width of each emoji container to static 52px
 * Bump minimum width of right panel from 250px to 264px to match the
   width in the figma
 * Use normal font-weight for labels as per design
 * Smaller vertical gap between emojis, again to match design
This commit is contained in:
David Baker 2020-01-31 15:28:58 +00:00
parent 11008cfabf
commit 29024c5172
2 changed files with 8 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
res/css/structures/_RightPanel.scss
View file

@ -1,5 +1,6 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -18,7 +19,7 @@ limitations under the License.
overflow-x: hidden;
flex: 0 0 auto;
position: relative;
min-width: 250px;
min-width: 264px;
display: flex;
flex-direction: column;
}

16
res/css/views/verification/_VerificationShowSas.scss
View file

@ -1,5 +1,6 @@
/*
Copyright 2019 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -36,11 +37,9 @@ limitations under the License.
.mx_VerificationShowSas_emojiSas_block {
display: inline-block;
margin-bottom: 30px;
margin-bottom: 16px;
position: relative;
// allow the blocks to grow to space themselves evenly up to a limit of 100px
flex-grow: 1;
max-width: 100px;
width: 52px;
}
.mx_VerificationShowSas_emojiSas_emoji {
@ -52,12 +51,9 @@ limitations under the License.
}
.mx_VerificationShowSas_emojiSas_label {
font-weight: bold;
// allow the text to overflow the parent by 15px on each side
// this is to keep the width of the parent consistent for spacing centrally via flexbox
position: absolute;
left: -15px;
right: -15px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.mx_VerificationShowSas_emojiSas_break {