Fixing and refactoring reactive changes

src/components/contentTopBar.js

@@ -6,11 +6,11 @@ import { ReaderAnnotateButton, ReaderEditButton, EditorToolButton, EditorDeleteT
 export const ReadModeTopBar = ({docType, setMode}) =>
 	<div className='row'>
 		{['chapters', 'notes'].indexOf(docType) >= 0 &&
-			<div className='col-5'>
+			<div className='topbar_button col-5'>
 				<ReaderAnnotateButton onClick={()=>setMode('ANNOTATE_MODE')}/>
 			</div>
 		}
-		<div className='col-5 ml-auto'>
+		<div className='topbar_button col-5 ml-auto'>
 			<ReaderEditButton onClick={()=>setMode('EDIT_MODE')} />
 		</div>
 	</div>

src/components/dropdown.js

@@ -21,7 +21,7 @@ export const DocListDropdown = ({currentDocument, docs, docType, onDocumentClick
 		<button className='btn btn-primary btn-md dropdown-toggle' type='button' id='doc_type_select' data-toggle='dropdown'>
 			{docType==='chapters' && currentDocument.number ? currentDocument.number + '. ' : ''}{currentDocument.title}
 		</button>
-		<div className='dropdown-menu'>
+		<div id='doc_list_dropdown' className='dropdown-menu'>
 	    	{docs.map(doc =>
 				<a key={doc.id} className='dropdown-item' onClick={()=>onDocumentClick(doc.id, docType)}>
 					{docType==='tags' &&

src/components/editorEditMode.js

@@ -31,7 +31,7 @@ const EditorEditMode = ({
 			{toggles.loading === true &&
 				<LoadingSpinner />
 			}
-			<input type='text' value={inputs.documentTitle} onChange={onDocumentTitleChange}/>
+			<input type='text' value={inputs.documentTitle} placeholder='Document Title' onChange={onDocumentTitleChange}/>
 		</div>
 		<div id='editor_topbar'>
 			<EditModeTopBar 

src/components/mobileSidebarOptions.js

@@ -7,20 +7,20 @@ import { DocListDropdown } from './dropdown'
 
 export const ReaderSidebarOptions = ({docs, currentDocument, highlightToggle, docType, onHighlightClick, onDocumentClick}) =>
 	<div id='mobile_reader_sidebar' className='mobile_sidebar row'>
-		<div className='col-6 d-block d-md-none'>
+		<div id='mobile_highlight_options' className='col-6 d-block d-md-none'>
 			<HighlightButton toggle={highlightToggle} onClick={onHighlightClick} size='md'/>
 		</div>
-		<div className='col-6 d-block d-md-none'>
+		<div id='mobile_read_options' className='mobile_list_options col-6 d-block d-md-none'>
 			<DocListDropdown currentDocument={currentDocument} docs={docs} docType={docType} onDocumentClick={onDocumentClick}/>
 		</div>
 	</div>
 
 export const EditorSidebarOptions = ({docType, setDocType, currentDocument, docs, onDocumentClick, onNewDocumentClick}) =>
 	<div id='mobile_editor_sidebar' className='mobile_sidebar row'>
-		<div className='col-6 d-block d-md-none'>
+		<div id='mobile_doctype_options' className='col-6 d-block d-md-none'>
 			<DocTypeDropdown docType={docType} setDocType={setDocType} size='md'/>
 		</div>
-		<div className='col-6 d-block d-md-none'>
+		<div id='mobile_edit_options' className='mobile_list_options col-6 d-block d-md-none'>
 			<DocListDropdown currentDocument={currentDocument} docs={docs} docType={docType} onDocumentClick={onDocumentClick} editMode={true} onNewDocumentClick={onNewDocumentClick}/>
 		</div>
 	</div>

src/containers/editorPageContainer.js

@@ -37,17 +37,17 @@ const EditorPage = ({
 	userErrors,
 }) =>
 	<div id='joyce_reader' className='container-fluid'>
-		<EditorSidebarOptions
-			docs={helpers.documentsOfDocType(docType, chapters, notes, tags)}
-			currentDocument={currentDocument}
-			docType={docType}
-			setDocType={setDocType}
-			onDocumentClick={onDocumentClick}
-			onNewDocumentClick={()=>onNewDocumentClick(docType)}
-		/>	
 		<div id='content_container' className="row">
 			<EditorSidebarContainer />
 			<Content>
+				<EditorSidebarOptions
+					docs={helpers.documentsOfDocType(docType, chapters, notes, tags)}
+					currentDocument={currentDocument}
+					docType={docType}
+					setDocType={setDocType}
+					onDocumentClick={onDocumentClick}
+					onNewDocumentClick={()=>onNewDocumentClick(docType)}
+				/>				
 				{toggles.loading === true &&
 					<LoadingSpinner size={4} />
 				}

src/containers/readerContentContainer.js

@@ -21,6 +21,8 @@ const ReaderContent = ({
 		<br />
 		<br />
 		<Editor editorState={editorState} readOnly={true} />
+		<br />
+		<br />		
 	</div>
 
 const mapStateToProps = state => {

src/containers/readerPageContainer.js

@@ -26,17 +26,17 @@ const ReaderPage = ({
 	onHighlightClick,
 }) =>
 	<div id='joyce_reader' className='container-fluid'>
-		<ReaderSidebarOptions
-			docs={helpers.documentsOfDocType(docType, chapters, notes, tags)}
-			currentDocument={currentDocument}
-			highlightToggle={toggles.highlights}
-			docType={docType}
-			onHighlightClick={onHighlightClick}
-			onDocumentClick={onDocumentClick}
-		/>
 		<div id='content_container' className='row'>
 			<ReaderSidebarContainer />
 			<Content>
+				<ReaderSidebarOptions
+					docs={helpers.documentsOfDocType(docType, chapters, notes, tags)}
+					currentDocument={currentDocument}
+					highlightToggle={toggles.highlights}
+					docType={docType}
+					onHighlightClick={onHighlightClick}
+					onDocumentClick={onDocumentClick}
+				/>			
 				{toggles.loading === true &&
 					<LoadingSpinner size={4} />
 				}

src/stylesheets/_sidebar.scss

@@ -83,6 +83,11 @@ button {
     overflow-y: auto;
 }
 
+#doc_list_dropdown {
+    overflow: scroll;
+    height: 80vh;
+}
+
 #new_document_button > button {
     width: 100%;
 }
@@ -93,11 +98,19 @@ button {
     }
 }
 
+#mobile_editor_sidebar > div {
+    padding: 0 1em;
+}
+
 @include respond-below(xs) {
     .mobile_sidebar {
-        height: 10vh;
+        height: 8vh;
         button {
             font-size: .8rem;
         }
     }
+}
+
+.topbar_button {
+    padding: 0 1em;
 }

src/stylesheets/_texteditor.scss

@@ -25,7 +25,8 @@
 
 @include respond-below(sm) {
     #content_window {
-    	height: 84vh;
+    	height: 91vh;
+    	margin: 0;
     }
 
     #editor_container {
@@ -47,7 +48,7 @@
 		height: 81vh;
 	}	
 	div#content_window {
-		height: 81vh;
+		height: 91vh;
 	}
 	div#editor_container {
 		height: 81vh;

src/stylesheets/joyce.scss

@@ -50,8 +50,7 @@ $fa-font-path: "../../node_modules/@fortawesome/fontawesome-free/webfonts";
     .mobile_sidebar {
     	background-color: rgba(255, 255, 255, 0.8);
 		margin-top: 0 !important;
-    	padding-top: 1em;
-    	padding-bottom: .5em;
+    	padding: 1vh 0;
     }
 
     #editor_metadata {