diff --git a/app/components/elements/ReplyEditor.jsx b/app/components/elements/ReplyEditor.jsx index 570fd6a13f3e39f2e8ddb65b677b67364bc716f0..7dc50578a91f4bde2b615a27a8e037f4a2162a58 100644 --- a/app/components/elements/ReplyEditor.jsx +++ b/app/components/elements/ReplyEditor.jsx @@ -283,24 +283,29 @@ class ReplyEditor extends React.Component { </div> } + // TODO: remove all references to these vframe classes. Removed from css and no longer needed. + const vframe_class = isStory ? 'vframe' : ''; + const vframe_section_class = isStory ? 'vframe__section' : ''; + const vframe_section_shrink_class = isStory ? 'vframe__section--shrink' : ''; + return ( <div className="ReplyEditor row"> <div className="column small-12"> - <form + <form className={vframe_class} onSubmit={handleSubmit(data => { const loadingCallback = () => this.setState({loading: true, postError: undefined}) reply({ ...data, ...replyParams, loadingCallback }) })} onChange={() => {this.setState({ postError: null })}} > - <div> + <div className={vframe_section_shrink_class}> {isStory && <span> <input type="text" {...cleanReduxInput(title)} onChange={onTitleChange} disabled={loading} placeholder="Title" autoComplete="off" ref="titleRef" tabIndex={1} /> {titleError} </span>} </div> - <div className="ReplyEditor__body"> + <div className={'ReplyEditor__body ' + (rte ? `rte ${vframe_section_class}` : vframe_section_shrink_class)}> {!body.value && isStory && <div className="float-right secondary" style={{marginRight: '1rem'}}> {rte && <a href="#" onClick={this.toggleRte}>Markdown</a>} @@ -315,20 +320,20 @@ class ReplyEditor extends React.Component { <textarea {...cleanReduxInput(body)} disabled={loading} rows={isStory ? 10 : 3} placeholder={isStory ? 'Write your story...' : 'Reply'} autoComplete="off" ref="postRef" tabIndex={2} /> } </div> - <div> + <div className={vframe_section_shrink_class}> <div className="error">{body.touched && body.error && body.error !== 'Required' && body.error}</div> </div> - <div style={{marginTop: '0.5rem'}}> + <div className={vframe_section_shrink_class} style={{marginTop: '0.5rem'}}> {hasCategory && <span> <CategorySelector {...category} disabled={loading} isEdit={isEdit} tabIndex={3} /> <div className="error">{category.touched && category.error && category.error} </div> </span>} </div> - <div> + <div className={vframe_section_shrink_class}> {postError && <div className="error">{postError}</div>} </div> - <div> + <div className={vframe_section_shrink_class}> {!loading && <button type="submit" className="button" disabled={submitting || invalid} tabIndex={4}>{isEdit ? 'Update Post' : postLabel}</button>} {loading && <span><br /><LoadingIndicator type="circle" /></span>} {!loading && this.props.onCancel && @@ -352,7 +357,7 @@ class ReplyEditor extends React.Component { </label> </div>} </div> - {!loading && !rte && body.value && <div className="Preview"> + {!loading && !rte && body.value && <div className={'Preview ' + vframe_section_shrink_class}> {<div className="float-right"><a target="_blank" href="https://guides.github.com/features/mastering-markdown/">Styling with Markdown is supported.</a></div>} <h6>Preview</h6> <MarkdownViewer formId={formId} text={body.value} canEdit jsonMetadata={jsonMetadata} large={isStory} noImage={noImage} />