commit: 33b9e8d4612765ec53a5ea02a86a18f3e2da5a07
parent: f025cc67827a5b1b1faf10dec9d5a1e14e67fa5f
Author: Stephen Burgess <stephenburgess8@gmail.com>
Date: Mon, 1 May 2017 12:13:10 -0400
fix(dropdowns): Allow for dropdowns to fill full column (#2684)
* fix(dropdowns): Allow for dropdowns to fill full column
When the text inside a dropdown is longer than it is for English, the text is truncated which can result in a less-than-usable experience for languages such as German with longer words. This commit addresses the following:
* Allow the dropdown to expand to the entire width of the column based on the length of the text in the dropdown
* Align active dropdown arrow in relation to the trigger rather than the dropdown
* Show the right hand side of the dropdown which was previously hidden (could not see border radius)
* Ensure the three places dropdowns of status, account, and emoji appear well in Chrome, Firefox, Safari
* fix(emoji-dropdown): Restore emoji dropdown caret
Diffstat:
2 files changed, 40 insertions(+), 27 deletions(-)
diff --git a/app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx b/app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx
@@ -97,7 +97,7 @@ class EmojiPickerDropdown extends React.PureComponent {
<img draggable="false" className="emojione" alt="🙂" src="/emoji/1f602.svg" />
</DropdownTrigger>
- <DropdownContent className='dropdown__left light'>
+ <DropdownContent className='dropdown__left'>
<EmojiPicker emojione={settings} onChange={this.handleChange} searchPlaceholder={intl.formatMessage(messages.emoji_search)} categories={categories} search={true} />
</DropdownContent>
</Dropdown>
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
@@ -181,6 +181,19 @@
color: $color4;
}
+.dropdown--active:after {
+ content: "";
+ display: block;
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-style: solid;
+ border-width: 0 4.5px 7.8px 4.5px;
+ border-color: transparent transparent $color2 transparent;
+ bottom: 8px;
+ right: 104px;
+}
+
.invisible {
font-size: 0;
line-height: 0;
@@ -317,6 +330,12 @@
.compose-form__autosuggest-wrapper {
position: relative;
+
+ .dropdown--active:after {
+ border-color: transparent transparent $color5 transparent;
+ bottom: -1px;
+ right: 8px;
+ }
}
.compose-form__publish {
@@ -563,7 +582,6 @@ a.status__content__spoiler-link {
align-items: center;
display: flex;
margin-top: 10px;
- overflow: hidden;
}
.status__action-bar-button-wrapper {
@@ -737,6 +755,20 @@ a.status__content__spoiler-link {
.account__action-bar-dropdown {
flex: 1 1 auto;
padding: 10px;
+
+ .dropdown--active {
+ .dropdown__content.dropdown__right {
+ left: 6px;
+ right: initial;
+ }
+
+ &:after {
+ bottom: initial;
+ margin-left: 11px;
+ margin-top: -7px;
+ right: initial;
+ }
+ }
}
.account__action-bar-links {
@@ -1009,28 +1041,11 @@ a.status__content__spoiler-link {
.dropdown--active .dropdown__content {
display: block;
line-height: 18px;
+ max-width: 311px;
+ right: 0;
text-align: left;
z-index: 9999;
- &:before {
- content: "";
- display: block;
- position: absolute;
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 4.5px 7.8px 4.5px;
- border-color: transparent transparent $color2 transparent;
- top: -7px;
- left: 8px;
- }
-
- &.light {
- &:before {
- border-color: transparent transparent $color5 transparent;
- }
- }
-
& > ul {
list-style: none;
background: $color2;
@@ -1039,17 +1054,16 @@ a.status__content__spoiler-link {
box-shadow: 0 0 15px rgba($color8, 0.4);
min-width: 140px;
position: relative;
- left: -10px;
+ }
+
+ &.dropdown__right {
+ right: 0;
}
&.dropdown__left {
& > ul {
left: -98px;
}
-
- & > .emoji-dialog {
- left: -210px;
- }
}
& > ul > li > a {
@@ -1058,7 +1072,6 @@ a.status__content__spoiler-link {
display: block;
padding: 4px 14px;
box-sizing: border-box;
- width: 140px;
text-decoration: none;
background: $color2;
color: $color1;