css consolidation #185

app/assets/stylesheets/app.scss

@@ -77,27 +77,6 @@ label {
   }
 }
 
-.vframe {
-  display: flex;
-  position: relative;
-  overflow: hidden;
-  backface-visibility: hidden;
-  flex-flow: column nowrap;
-  align-items: stretch;
-  justify-content: flex-start;
-  min-height: 90vh;
-
-  > .vframe__section {
-    flex-shrink: 0;
-    flex-grow: 1;
-  }
-
-  > .vframe__section--shrink {
-    flex-shrink: 1;
-    flex-grow: 0;
-  }
-}
-
 .marginLeft1rem {
   margin-left: 1rem;
 }

app/components/elements/ReplyEditor.jsx

@@ -283,28 +283,24 @@ class ReplyEditor extends React.Component {
             </div>
         }
 
-        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 className={vframe_class}
+                    <form
                         onSubmit={handleSubmit(data => {
                             const loadingCallback = () => this.setState({loading: true, postError: undefined})
                             reply({ ...data, ...replyParams, loadingCallback })
                         })}
                         onChange={() => {this.setState({ postError: null })}}
                     >
-                        <div className={vframe_section_shrink_class}>
+                        <div>
                             {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 ' + (rte ? `rte ${vframe_section_class}` : vframe_section_shrink_class)}>
+                        <div className="ReplyEditor__body">
                             {!body.value && isStory &&
                                 <div className="float-right secondary" style={{marginRight: '1rem'}}>
                                     {rte && <a href="#" onClick={this.toggleRte}>Markdown</a>}
@@ -321,20 +317,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 className={vframe_section_shrink_class}>
+                        <div>
                             <div className="error">{body.touched && body.error && body.error !== 'Required' && body.error}</div>
                         </div>
 
-                        <div className={vframe_section_shrink_class} style={{marginTop: '0.5rem'}}>
+                        <div style={{marginTop: '0.5rem'}}>
                             {hasCategory && <span>
                                 <CategorySelector {...category} disabled={loading} isEdit={isEdit} tabIndex={3} />
                                 <div className="error">{category.touched && category.error && category.error}&nbsp;</div>
                             </span>}
                         </div>
-                        <div className={vframe_section_shrink_class}>
+                        <div>
                             {postError && <div className="error">{postError}</div>}
                         </div>
-                        <div className={vframe_section_shrink_class}>
+                        <div>
                             {!loading && <button type="submit" className="button" disabled={submitting || invalid} tabIndex={4}>{isEdit ? 'Update Post' : postLabel}</button>}
                             {loading && <span><br /><LoadingIndicator type="circle" /></span>}
                             &nbsp; {!loading && this.props.onCancel &&
@@ -358,7 +354,7 @@ class ReplyEditor extends React.Component {
                                 </label>
                             </div>}
                         </div>
-                        {!loading && !rte && body.value && <div className={'Preview ' + vframe_section_shrink_class}>
+                        {!loading && !rte && body.value && <div className="Preview">
                             {<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} />

app/components/elements/ReplyEditor.scss

 .ReplyEditor {
-  max-width: 50rem;
+  max-width: 54rem;
   margin-bottom: 0.5rem;
-  .rte {
-    clear: right;
-  }
+}
 
-  .vframe {
-    display: block;
-    .public-DraftEditor-content {
-      height: 20em;
-      resize: vertical;
-    }
-  }
+.ReplyEditor form {
+  max-width: 52rem;
 }
 
-.ReplyEditor .Markdown {
+.ReplyEditor .Preview .Markdown {
   border: 1px solid $light-gray;
   padding: 0 1rem;
 }
 
 .ReplyEditor__body {
   margin-top: 1rem;
-  border-radius: 4px;
-  > div {
-    border: none;
-  }
-}
-
-.ReplyEditor__body.rte {
-  border: 1px solid $medium-gray;
 }
 
 .ReplyEditor__options {
@@ -45,33 +30,3 @@
     text-transform: none;
   }
 }
-
-.medium-editor-element {
-    background-color: inherit !important;
-}
-.medium-editor-toolbar-actions button {
-    margin-right: 0 !important;
-}
-// .medium-insert-images.medium-insert-images-grid.small-grid figure {
-//     width: 10%;
-// }
-// @media (max-width: 750px) {
-//     .medium-insert-images.medium-insert-images-grid.small-grid figure {
-//         width: 20%;
-//     }
-// }
-// @media (max-width: 450px) {
-//     .medium-insert-images.medium-insert-images-grid.small-grid figure {
-//         width: 25%;
-//     }
-// }
-// .editable {
-//     outline: none;
-//     min-height: 38px;
-//     margin: 0 0 20px 0;
-//     padding: 0 0 20px 0;
-// }
-
-.RichTextEditor__root___33zoV button {
-  margin-right: 0 !important;
-}

app/components/elements/SlateEditor.scss

 .SlateEditor {
   padding: 1rem;
+  border: 1px solid $medium-gray;
+  border-radius: 8px;
+}
+
+.SlateEditor.Markdown {
+  a {border-bottom: 1px dotted #00f;}
 }
 
 .SlateEditor > * > * + * {