summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--webapp/components/admin_console/reset_password_modal.jsx2
-rw-r--r--webapp/components/audio_video_preview.jsx4
-rw-r--r--webapp/components/channel_header.jsx27
-rw-r--r--webapp/components/post_view/components/post_attachment_opengraph.jsx22
-rw-r--r--webapp/components/search_bar.jsx5
-rw-r--r--webapp/components/view_image.jsx12
-rw-r--r--webapp/sass/components/_modal.scss2
-rw-r--r--webapp/sass/components/_popover.scss9
-rw-r--r--webapp/sass/components/_tooltip.scss6
-rw-r--r--webapp/sass/layout/_forms.scss5
-rw-r--r--webapp/sass/layout/_headers.scss6
-rw-r--r--webapp/sass/layout/_post.scss10
-rw-r--r--webapp/sass/layout/_webhooks.scss16
-rw-r--r--webapp/sass/responsive/_mobile.scss6
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;
}
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-06-02 18:36:12 +0000