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 2015, 2016 OpenMarket Ltd
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with 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; overflow-x: hidden;
flex: 0 0 auto; flex: 0 0 auto;
position: relative; position: relative;
min-width: 250px; min-width: 264px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }

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

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