diff options
Diffstat (limited to 'app/assets/javascripts/components/features/ui')
7 files changed, 15 insertions, 73 deletions
diff --git a/app/assets/javascripts/components/features/ui/components/boost_modal.jsx b/app/assets/javascripts/components/features/ui/components/boost_modal.jsx index e33239be7..3bd82ceee 100644 --- a/app/assets/javascripts/components/features/ui/components/boost_modal.jsx +++ b/app/assets/javascripts/components/features/ui/components/boost_modal.jsx @@ -40,13 +40,13 @@ class BoostModal extends React.PureComponent { <div className='modal-root__modal boost-modal'> <div className='boost-modal__container'> <div className='status light'> - <div style={{ fontSize: '15px' }}> - <div style={{ float: 'right', fontSize: '14px' }}> + <div className='boost-modal__status-header'> + <div className='boost-modal__status-time'> <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'><RelativeTimestamp timestamp={status.get('created_at')} /></a> </div> - <a onClick={this.handleAccountClick} href={status.getIn(['account', 'url'])} className='status__display-name' style={{ display: 'block', maxWidth: '100%', paddingRight: '25px' }}> - <div className='status__avatar' style={{ position: 'absolute', left: '10px', top: '10px', width: '48px', height: '48px' }}> + <a onClick={this.handleAccountClick} href={status.getIn(['account', 'url'])} className='status__display-name'> + <div className='status__avatar'> <Avatar src={status.getIn(['account', 'avatar'])} staticSrc={status.getIn(['account', 'avatar_static'])} size={48} /> </div> diff --git a/app/assets/javascripts/components/features/ui/components/column_header.jsx b/app/assets/javascripts/components/features/ui/components/column_header.jsx index c4e6b4afa..7ccd72e0b 100644 --- a/app/assets/javascripts/components/features/ui/components/column_header.jsx +++ b/app/assets/javascripts/components/features/ui/components/column_header.jsx @@ -17,7 +17,7 @@ class ColumnHeader extends React.PureComponent { let icon = ''; if (this.props.icon) { - icon = <i className={`fa fa-fw fa-${this.props.icon}`} style={{ display: 'inline-block', marginRight: '5px' }} />; + icon = <i className={`fa fa-fw fa-${this.props.icon} column-header__icon`} />; } return ( diff --git a/app/assets/javascripts/components/features/ui/components/column_link.jsx b/app/assets/javascripts/components/features/ui/components/column_link.jsx index 32fd329d4..77a9b3bd8 100644 --- a/app/assets/javascripts/components/features/ui/components/column_link.jsx +++ b/app/assets/javascripts/components/features/ui/components/column_link.jsx @@ -1,29 +1,18 @@ import PropTypes from 'prop-types'; import { Link } from 'react-router'; -const outerStyle = { - padding: '15px', - fontSize: '16px', - textDecoration: 'none' -}; - -const iconStyle = { - display: 'inline-block', - marginRight: '5px' -}; - const ColumnLink = ({ icon, text, to, href, method, hideOnMobile }) => { if (href) { return ( <a href={href} style={outerStyle} className={`column-link ${hideOnMobile ? 'hidden-on-mobile' : ''}`} data-method={method}> - <i className={`fa fa-fw fa-${icon}`} style={iconStyle} /> + <i className={`fa fa-fw fa-${icon} column-link__icon`} /> {text} </a> ); } else { return ( - <Link to={to} style={outerStyle} className={`column-link ${hideOnMobile ? 'hidden-on-mobile' : ''}`}> - <i className={`fa fa-fw fa-${icon}`} style={iconStyle} /> + <Link to={to} className={`column-link ${hideOnMobile ? 'hidden-on-mobile' : ''}`}> + <i className={`fa fa-fw fa-${icon} column-link__icon`} /> {text} </Link> ); diff --git a/app/assets/javascripts/components/features/ui/components/columns_area.jsx b/app/assets/javascripts/components/features/ui/components/columns_area.jsx index 06f6427ab..360a759ae 100644 --- a/app/assets/javascripts/components/features/ui/components/columns_area.jsx +++ b/app/assets/javascripts/components/features/ui/components/columns_area.jsx @@ -1,16 +1,10 @@ import PropTypes from 'prop-types'; -const style = { - display: 'flex', - flex: '1 1 auto', - overflowX: 'auto' -}; - class ColumnsArea extends React.PureComponent { render () { return ( - <div className='columns-area' style={style}> + <div className='columns-area'> {this.props.children} </div> ); diff --git a/app/assets/javascripts/components/features/ui/components/media_modal.jsx b/app/assets/javascripts/components/features/ui/components/media_modal.jsx index 8ed6afa6c..02a577500 100644 --- a/app/assets/javascripts/components/features/ui/components/media_modal.jsx +++ b/app/assets/javascripts/components/features/ui/components/media_modal.jsx @@ -10,40 +10,6 @@ const messages = defineMessages({ close: { id: 'lightbox.close', defaultMessage: 'Close' } }); -const leftNavStyle = { - position: 'absolute', - background: 'rgba(0, 0, 0, 0.5)', - padding: '30px 15px', - cursor: 'pointer', - fontSize: '24px', - top: '0', - left: '-61px', - boxSizing: 'border-box', - height: '100%', - display: 'flex', - alignItems: 'center' -}; - -const rightNavStyle = { - position: 'absolute', - background: 'rgba(0, 0, 0, 0.5)', - padding: '30px 15px', - cursor: 'pointer', - fontSize: '24px', - top: '0', - right: '-61px', - boxSizing: 'border-box', - height: '100%', - display: 'flex', - alignItems: 'center' -}; - -const closeStyle = { - position: 'absolute', - top: '4px', - right: '4px' -}; - class MediaModal extends React.PureComponent { constructor (props, context) { @@ -99,8 +65,8 @@ class MediaModal extends React.PureComponent { leftNav = rightNav = content = ''; if (media.size > 1) { - leftNav = <div role='button' tabIndex='0' style={leftNavStyle} className='modal-container__nav' onClick={this.handlePrevClick}><i className='fa fa-fw fa-chevron-left' /></div>; - rightNav = <div role='button' tabIndex='0' style={rightNavStyle} className='modal-container__nav' onClick={this.handleNextClick}><i className='fa fa-fw fa-chevron-right' /></div>; + leftNav = <div role='button' tabIndex='0' className='modal-container__nav modal-container__nav--left' onClick={this.handlePrevClick}><i className='fa fa-fw fa-chevron-left' /></div>; + rightNav = <div role='button' tabIndex='0' className='modal-container__nav modal-container__nav--right' onClick={this.handleNextClick}><i className='fa fa-fw fa-chevron-right' /></div>; } if (attachment.get('type') === 'image') { @@ -113,8 +79,8 @@ class MediaModal extends React.PureComponent { <div className='modal-root__modal media-modal'> {leftNav} - <div> - <IconButton title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={16} style={closeStyle} /> + <div className='media-modal__content'> + <IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={16} /> {content} </div> diff --git a/app/assets/javascripts/components/features/ui/components/modal_root.jsx b/app/assets/javascripts/components/features/ui/components/modal_root.jsx index 7b84ef3c8..f9e173222 100644 --- a/app/assets/javascripts/components/features/ui/components/modal_root.jsx +++ b/app/assets/javascripts/components/features/ui/components/modal_root.jsx @@ -65,7 +65,7 @@ class ModalRoot extends React.PureComponent { return ( <div key={key}> - <div role='presentation' className='modal-root__overlay' style={{ opacity: style.opacity, transform: `translateZ(0px)` }} onClick={onClose} /> + <div role='presentation' className='modal-root__overlay' style={{ opacity: style.opacity }} onClick={onClose} /> <div className='modal-root__container' style={{ opacity: style.opacity, transform: `translateZ(0px) scale(${style.scale})` }}> <SpecificComponent {...props} onClose={onClose} /> </div> diff --git a/app/assets/javascripts/components/features/ui/components/video_modal.jsx b/app/assets/javascripts/components/features/ui/components/video_modal.jsx index adbab0494..d98b42882 100644 --- a/app/assets/javascripts/components/features/ui/components/video_modal.jsx +++ b/app/assets/javascripts/components/features/ui/components/video_modal.jsx @@ -9,13 +9,6 @@ const messages = defineMessages({ close: { id: 'lightbox.close', defaultMessage: 'Close' } }); -const closeStyle = { - position: 'absolute', - zIndex: '100', - top: '4px', - right: '4px' -}; - class VideoModal extends React.PureComponent { render () { @@ -26,7 +19,7 @@ class VideoModal extends React.PureComponent { return ( <div className='modal-root__modal media-modal'> <div> - <div style={closeStyle}><IconButton title={intl.formatMessage(messages.close)} icon='times' overlay onClick={onClose} /></div> + <div className='media-modal__close'><IconButton title={intl.formatMessage(messages.close)} icon='times' overlay onClick={onClose} /></div> <ExtendedVideoPlayer src={url} muted={false} controls={true} time={time} /> </div> </div> |