diff options
author | kibigo! <marrus-sh@users.noreply.github.com> | 2018-01-06 15:34:01 -0800 |
---|---|---|
committer | kibigo! <marrus-sh@users.noreply.github.com> | 2018-01-06 15:34:01 -0800 |
commit | b5874c1428d9445921db242b248798adbf7b4b9d (patch) | |
tree | 1b9803f18c521de5fa2c5902b086192d62e10f8e /app/javascript/flavours/glitch/features/drawer/search/popout | |
parent | 61ef8d643e8015361a95dbb9b9fd1440f7086bb4 (diff) |
Fixes to search dropdown
Diffstat (limited to 'app/javascript/flavours/glitch/features/drawer/search/popout')
-rw-r--r-- | app/javascript/flavours/glitch/features/drawer/search/popout/index.js | 99 |
1 files changed, 52 insertions, 47 deletions
diff --git a/app/javascript/flavours/glitch/features/drawer/search/popout/index.js b/app/javascript/flavours/glitch/features/drawer/search/popout/index.js index b5ea86ff1..6219f46ca 100644 --- a/app/javascript/flavours/glitch/features/drawer/search/popout/index.js +++ b/app/javascript/flavours/glitch/features/drawer/search/popout/index.js @@ -42,56 +42,61 @@ export default function DrawerSearchPopout ({ style }) { // The result. return ( - <Motion - defaultStyle={{ - opacity: 0, - scaleX: 0.85, - scaleY: 0.75, - }} + <div + className='drawer--search--popout' style={{ - opacity: motionSpring, - scaleX: motionSpring, - scaleY: motionSpring, + ...style, + position: 'absolute', + width: 285, }} > - {({ opacity, scaleX, scaleY }) => ( - <div - className='drawer--search--popout' - style={{ - ...style, - position: 'absolute', - width: 285, - opacity: opacity, - transform: `scale(${scaleX}, ${scaleY})`, - }} - > - <h4><FormattedMessage {...messages.format} /></h4> - <ul> - <li> - <em>#example</em> - {' '} - <FormattedMessage {...messages.hashtag} /> - </li> - <li> - <em>@username@domain</em> - {' '} - <FormattedMessage {...messages.user} /> - </li> - <li> - <em>URL</em> - {' '} - <FormattedMessage {...messages.user} /> - </li> - <li> - <em>URL</em> - {' '} - <FormattedMessage {...messages.status} /> - </li> - </ul> - <FormattedMessage {...messages.text} /> - </div> - )} - </Motion> + <Motion + defaultStyle={{ + opacity: 0, + scaleX: 0.85, + scaleY: 0.75, + }} + style={{ + opacity: motionSpring, + scaleX: motionSpring, + scaleY: motionSpring, + }} + > + {({ opacity, scaleX, scaleY }) => ( + <div + style={{ + opacity: opacity, + transform: `scale(${scaleX}, ${scaleY})`, + }} + > + <h4><FormattedMessage {...messages.format} /></h4> + <ul> + <li> + <em>#example</em> + {' '} + <FormattedMessage {...messages.hashtag} /> + </li> + <li> + <em>@username@domain</em> + {' '} + <FormattedMessage {...messages.user} /> + </li> + <li> + <em>URL</em> + {' '} + <FormattedMessage {...messages.user} /> + </li> + <li> + <em>URL</em> + {' '} + <FormattedMessage {...messages.status} /> + </li> + </ul> + <FormattedMessage {...messages.text} /> + </div> + )} + </Motion> + </div> ); } |