logo

mastofe

My custom branche(s) on git.pleroma.social/pleroma/mastofe
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:

Mapp/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx2+-
Mapp/assets/stylesheets/components.scss65+++++++++++++++++++++++++++++++++++++++--------------------------
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;