diff options
Diffstat (limited to 'webapp')
-rw-r--r-- | webapp/components/admin_console/reset_password_modal.jsx | 2 | ||||
-rw-r--r-- | webapp/components/audio_video_preview.jsx | 4 | ||||
-rw-r--r-- | webapp/components/channel_header.jsx | 27 | ||||
-rw-r--r-- | webapp/components/post_view/components/post_attachment_opengraph.jsx | 22 | ||||
-rw-r--r-- | webapp/components/search_bar.jsx | 5 | ||||
-rw-r--r-- | webapp/components/view_image.jsx | 12 | ||||
-rw-r--r-- | webapp/sass/components/_modal.scss | 2 | ||||
-rw-r--r-- | webapp/sass/components/_popover.scss | 9 | ||||
-rw-r--r-- | webapp/sass/components/_tooltip.scss | 6 | ||||
-rw-r--r-- | webapp/sass/layout/_forms.scss | 5 | ||||
-rw-r--r-- | webapp/sass/layout/_headers.scss | 6 | ||||
-rw-r--r-- | webapp/sass/layout/_post.scss | 10 | ||||
-rw-r--r-- | webapp/sass/layout/_webhooks.scss | 16 | ||||
-rw-r--r-- | webapp/sass/responsive/_mobile.scss | 6 |
14 files changed, 76 insertions, 56 deletions
diff --git a/webapp/components/admin_console/reset_password_modal.jsx b/webapp/components/admin_console/reset_password_modal.jsx index 757f85517..1b9e5b37a 100644 --- a/webapp/components/admin_console/reset_password_modal.jsx +++ b/webapp/components/admin_console/reset_password_modal.jsx @@ -61,7 +61,7 @@ class ResetPasswordModal extends React.Component { if (this.state.serverError) { urlClass += ' has-error'; - serverError = <div className='form-group has-error'><p className='input__help error'>{this.state.serverError}</p></div>; + serverError = <div className='has-error'><p className='input__help error'>{this.state.serverError}</p></div>; } let title; diff --git a/webapp/components/audio_video_preview.jsx b/webapp/components/audio_video_preview.jsx index 4956900a9..9a55e4835 100644 --- a/webapp/components/audio_video_preview.jsx +++ b/webapp/components/audio_video_preview.jsx @@ -94,7 +94,6 @@ export default class AudioVideoPreview extends React.Component { <video key={this.props.fileInfo.id} ref='video' - style={{maxHeight: this.props.maxHeight}} data-setup='{}' controls='controls' width={width} @@ -111,6 +110,5 @@ export default class AudioVideoPreview extends React.Component { AudioVideoPreview.propTypes = { fileInfo: React.PropTypes.object.isRequired, - fileUrl: React.PropTypes.string.isRequired, - maxHeight: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]).isRequired + fileUrl: React.PropTypes.string.isRequired }; diff --git a/webapp/components/channel_header.jsx b/webapp/components/channel_header.jsx index 3d7ec000c..120846b8d 100644 --- a/webapp/components/channel_header.jsx +++ b/webapp/components/channel_header.jsx @@ -241,7 +241,10 @@ export default class ChannelHeader extends React.Component { ); const flaggedTooltip = ( - <Tooltip id='flaggedTooltip'> + <Tooltip + id='flaggedTooltip' + className='text-nowrap' + > <FormattedMessage id='channel_header.flagged' defaultMessage='Flagged Posts' @@ -676,19 +679,27 @@ export default class ChannelHeader extends React.Component { headerText = channel.header; } - const toggleFavoriteTooltip = ( - <Tooltip id='favoriteTooltip'> - {this.state.isFavorite ? + let toggleFavoriteTooltip; + if (this.state.isFavorite) { + toggleFavoriteTooltip = ( + <Tooltip id='favoriteTooltip'> <FormattedMessage id='channelHeader.removeFromFavorites' defaultMessage='Remove from Favorites' - /> : + /> + </Tooltip> + ); + } else { + toggleFavoriteTooltip = ( + <Tooltip id='favoriteTooltip'> <FormattedMessage id='channelHeader.addToFavorites' defaultMessage='Add to Favorites' - />} - </Tooltip> - ); + /> + </Tooltip> + ); + } + const toggleFavorite = ( <OverlayTrigger delayShow={Constants.OVERLAY_TIME_DELAY} diff --git a/webapp/components/post_view/components/post_attachment_opengraph.jsx b/webapp/components/post_view/components/post_attachment_opengraph.jsx index b1ebf0a4b..13171202a 100644 --- a/webapp/components/post_view/components/post_attachment_opengraph.jsx +++ b/webapp/components/post_view/components/post_attachment_opengraph.jsx @@ -32,7 +32,6 @@ export default class PostAttachmentOpenGraph extends React.Component { this.onImageLoad = this.onImageLoad.bind(this); this.onImageError = this.onImageError.bind(this); this.truncateText = this.truncateText.bind(this); - this.setImageWidth = this.setImageWidth.bind(this); } IMAGE_LOADED = { @@ -75,20 +74,16 @@ export default class PostAttachmentOpenGraph extends React.Component { componentDidMount() { OpenGraphStore.addUrlDataChangeListener(this.onOpenGraphMetadataChange); - this.setImageWidth(); - window.addEventListener('resize', this.setImageWidth); } componentDidUpdate() { if (this.props.childComponentDidUpdateFunction) { this.props.childComponentDidUpdateFunction(); } - this.setImageWidth(); } componentWillUnmount() { OpenGraphStore.removeUrlDataChangeListener(this.onOpenGraphMetadataChange); - window.removeEventListener('resize', this.setImageWidth); } onOpenGraphMetadataChange(url) { @@ -163,9 +158,6 @@ export default class PostAttachmentOpenGraph extends React.Component { return ( <div className='attachment__image__container--openraph' - style={{ - width: (this.imageDimentions.height * this.imageRatio) + this.smallImageContainerLeftPadding - }} // Initially set the width accordinly to max image heigh, ie 80px. Later on it would be modified according to actul height of image. ref={(div) => { this.smallImageContainer = div; }} @@ -216,20 +208,6 @@ export default class PostAttachmentOpenGraph extends React.Component { return element; } - setImageWidth() { - if ( - this.state.imageLoaded === this.IMAGE_LOADED.YES && - this.smallImageContainer && - this.smallImageElement - ) { - this.smallImageContainer.style.width = ( - (this.smallImageElement.offsetHeight * this.imageRatio) + - this.smallImageContainerLeftPadding + - 'px' - ); - } - } - truncateText(text, maxLength = this.textMaxLenght, ellipsis = this.textEllipsis) { if (text.length > maxLength) { return text.substring(0, maxLength - ellipsis.length) + ellipsis; diff --git a/webapp/components/search_bar.jsx b/webapp/components/search_bar.jsx index 1c9f607e6..b88e67a11 100644 --- a/webapp/components/search_bar.jsx +++ b/webapp/components/search_bar.jsx @@ -216,7 +216,10 @@ export default class SearchBar extends React.Component { ); const flaggedTooltip = ( - <Tooltip id='flaggedTooltip'> + <Tooltip + id='flaggedTooltip' + className='text-nowrap' + > <FormattedMessage id='channel_header.flagged' defaultMessage='Flagged Posts' diff --git a/webapp/components/view_image.jsx b/webapp/components/view_image.jsx index 385138d54..e5c3caa0a 100644 --- a/webapp/components/view_image.jsx +++ b/webapp/components/view_image.jsx @@ -185,7 +185,6 @@ export default class ViewImageModal extends React.Component { <ImagePreview fileInfo={fileInfo} fileUrl={fileUrl} - maxHeight={this.state.imgHeight} /> ); } else if (fileType === 'video' || fileType === 'audio') { @@ -193,7 +192,6 @@ export default class ViewImageModal extends React.Component { <AudioVideoPreview fileInfo={fileInfo} fileUrl={fileUrl} - maxHeight={this.state.imgHeight} /> ); } else if (PDFPreview.supports(fileInfo)) { @@ -344,7 +342,7 @@ LoadingImagePreview.propTypes = { loading: React.PropTypes.string }; -function ImagePreview({fileInfo, fileUrl, maxHeight}) { +function ImagePreview({fileInfo, fileUrl}) { let previewUrl; if (fileInfo.has_preview_image) { previewUrl = FileStore.getFilePreviewUrl(fileInfo.id); @@ -359,16 +357,12 @@ function ImagePreview({fileInfo, fileUrl, maxHeight}) { rel='noopener noreferrer' download={true} > - <img - style={{maxHeight}} - src={previewUrl} - /> + <img src={previewUrl}/> </a> ); } ImagePreview.propTypes = { fileInfo: React.PropTypes.object.isRequired, - fileUrl: React.PropTypes.string.isRequired, - maxHeight: React.PropTypes.number.isRequired + fileUrl: React.PropTypes.string.isRequired }; diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss index 03a8ad1e8..3698e8dc9 100644 --- a/webapp/sass/components/_modal.scss +++ b/webapp/sass/components/_modal.scss @@ -345,7 +345,7 @@ } img { - max-height: 100%; + max-height: calc(100vh - 200px); max-width: 100%; } diff --git a/webapp/sass/components/_popover.scss b/webapp/sass/components/_popover.scss index 6b1c57725..93b567ad3 100644 --- a/webapp/sass/components/_popover.scss +++ b/webapp/sass/components/_popover.scss @@ -209,6 +209,15 @@ .more-modal__row { min-height: inherit; } + + .more-modal__details { + line-height: 32px; + } + + .more-modal__actions { + line-height: 31px; + margin: 0; + } } .popover-content { diff --git a/webapp/sass/components/_tooltip.scss b/webapp/sass/components/_tooltip.scss index 0049fe1b8..6953dad58 100644 --- a/webapp/sass/components/_tooltip.scss +++ b/webapp/sass/components/_tooltip.scss @@ -7,6 +7,12 @@ padding: 3px 10px 4px; word-break: break-word; } + + &.text-nowrap { + .tooltip-inner { + white-space: nowrap; + } + } } #webrtcTooltip { diff --git a/webapp/sass/layout/_forms.scss b/webapp/sass/layout/_forms.scss index 7552290d8..64c74b0a5 100644 --- a/webapp/sass/layout/_forms.scss +++ b/webapp/sass/layout/_forms.scss @@ -62,7 +62,6 @@ .has-error { .help-block, - .control-label, .radio, .checkbox, .radio-inline, @@ -70,6 +69,10 @@ color: $red; } + .control-label { + color: inherit; + } + &.radio, &.checkbox, &.radio-inline, diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss index d38819d03..f8211d433 100644 --- a/webapp/sass/layout/_headers.scss +++ b/webapp/sass/layout/_headers.scss @@ -9,10 +9,10 @@ .member-popover__trigger, .pinned-posts-button { + cursor: pointer; display: inline-block; + margin-left: 7px; min-width: 30px; - cursor: pointer; - margin-left: 10px; text-align: center; white-space: nowrap; @@ -65,7 +65,7 @@ } &:last-child { - padding-right: 8px; + padding-right: 6px; width: 8.9%; } } diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index debcd70e7..8d14bfafc 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -359,6 +359,10 @@ } .post-create__container { + label { + font-weight: normal; + } + form { margin: 0 auto; padding: .5em 15px 0; @@ -523,6 +527,7 @@ .col__reply { min-width: 0; } + .dropdown { margin-right: 0; } @@ -749,6 +754,7 @@ line-height: 1.6em; margin: 0; white-space: pre-wrap; + word-break: break-word; } .post__header--info { @@ -786,7 +792,7 @@ .flag-icon__container { left: 36px; - margin-left: 5px; + margin-left: 7px; position: absolute; top: 8px; } @@ -1358,6 +1364,8 @@ .post__pinned-badge { margin-left: 7px; + position: relative; + top: -1px; } .permalink-text { diff --git a/webapp/sass/layout/_webhooks.scss b/webapp/sass/layout/_webhooks.scss index f3a8c6fd3..c36edb8a2 100644 --- a/webapp/sass/layout/_webhooks.scss +++ b/webapp/sass/layout/_webhooks.scss @@ -41,6 +41,7 @@ &.attachment--opengraph { max-width: 800px; } + .attachment__content { border-radius: 4px; border-style: solid; @@ -71,16 +72,18 @@ &.attachment__container--danger { border-left-color: #e40303; } + &.attachment__container--opengraph { display: table; - table-layout: fixed; - width: 100%; margin: 0; padding-bottom: 13px; + width: 100%; + div { margin: 0; } } + .sitename { color: #A3A3A3; } @@ -89,8 +92,8 @@ .attachment__body__wrap { &.attachment__body__wrap--opengraph { display: table-cell; - width: 100%; vertical-align: top; + width: 100%; } } @@ -104,6 +107,7 @@ &.attachment__body--no_thumb { width: 100%; } + &.attachment__body--opengraph { float: none; padding-right: 0; @@ -142,6 +146,7 @@ margin-top: 10px; max-height: 200px; max-width: 400px; + width: 100%; &.loading { height: 150px; @@ -164,16 +169,17 @@ &.has-link { color: #2f81b7; - text-overflow: ellipsis; overflow: hidden; + text-overflow: ellipsis; white-space: nowrap; } &.attachment__title--opengraph { height: auto; word-wrap: break-word; + &.is-url { - word-break: break-all + word-break: break-all; } } } diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index ec406c405..66c288a48 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -1,6 +1,10 @@ @charset 'UTF-8'; @media screen and (max-width: 768px) { + .table-responsive { + border: none; + } + .multi-select__container { .btn { display: block; @@ -1336,7 +1340,7 @@ a { border-bottom: 1px solid; - line-height: 50px; + line-height: 45px; position: relative; text-align: center; } |