CSS improvements for all screen sizes

src/components/contentTopBar.js

@@ -32,10 +32,10 @@ export const EditModeTopBar = ({editorState, onToolButtonClick, disabled}) =>
 
 export const AnnotateModeTopBar = ({onNewAnnotationClick, onRemoveAnnotationClick, addDisabled, removeDisabled}) =>
 	<div className='row'>
-		<div className='col-md-5'>
+		<div className='col--5'>
 			<AnnotatorNewButton onClick={onNewAnnotationClick} disabled={addDisabled}/>
 		</div>
-		<div className='col-md-5 offset-md-2'>
+		<div className='col-5 offset-2'>
 			<AnnotatorRemoveButton onClick={onRemoveAnnotationClick} disabled={removeDisabled} />
 		</div>	
 	</div>

src/components/editorAnnotateMode.js

@@ -27,7 +27,7 @@ const EditorAnnotateMode = ({
 			}
 			<DocumentTitle docType={docType} currentDocument={currentDocument} />
 		</div>
-		<div id='editor_topbar'>
+		<div id='editor_topbar' className='annotate_mode'>
 			<AnnotateModeTopBar 
 				onNewAnnotationClick={onNewAnnotationClick}
 				onRemoveAnnotationClick={onRemoveAnnotationClick}
@@ -35,7 +35,7 @@ const EditorAnnotateMode = ({
 				removeDisabled={(editorState.getSelection().isCollapsed() ) ? true : false}
 			/>
 		</div>	
-		<div id='editor_content' className={docType === 'tags' ? 'short_editor' : 'tall_editor'}>
+		<div id='editor_content' className={'annotate_mode ' + docType}>
 			<Editor editorState={editorState} onChange={onChangeEditorState} keyBindingFn={annotateKeyBindings} />
 		</div>
 		<div id='editor_bottombar'>

src/components/editorEditMode.js

@@ -40,14 +40,14 @@ const EditorEditMode = ({
 				disabled={!currentDocument.id ? true : false}
 			/>
 		</div>	
-		<div id='editor_content' className={docType === 'tags' ? 'short_editor' : 'tall_editor'}>
+		<div id='editor_content' className={'edit_mode ' + docType}>
 			<Editor 
 				editorState={editorState} 
 				handleKeyCommand={handleKeyCommand}
 				onChange={onChangeEditorState}
 			/>	
 		</div>
-		<div id='editor_attributes'>
+		<div id='editor_attributes' className={'edit_mode ' + docType}>
 			{docType === 'tags' &&
 				<TagColorPicker input={inputs.colorPicker} onChange={onColorPickerInputChange} onColorSwatchClick={onColorSwatchClick}/>
 			}

src/components/editorReadMode.js

@@ -24,7 +24,7 @@ const EditorReadMode = ({
 		<div id='editor_topbar'>
 			<ReadModeTopBar docType={docType} setMode={setMode} />
 		</div>	
-		<div id='editor_content' className={docType === 'tags' ? 'short_editor' : 'tall_editor'}>
+		<div id='editor_content' className={'read_mode ' + docType}>
 			<Editor editorState={editorState} readOnly={true}/>
 		</div>
 	</div>

src/components/tagColorPicker.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import defaultTagColors from '../modules/editorSettings'
+import { defaultTagColors } from '../modules/editorSettings'
 
 const TagColorPicker = ({input, onChange, onColorSwatchClick}) =>
 	<div className='input-group'>

src/stylesheets/_navbar.scss

@@ -1,6 +1,9 @@
 @import "variables";
 
+
+
 nav.navbar {
+	height: 9vh;
 	background-color: rgba(10,10,10,1);
 	background: -webkit-linear-gradient(0, $nav_gradient1, $nav_gradient2); /* For Safari 5.1 to 6.0 */
 	background: -o-linear-gradient(0, $nav_gradient1, $nav_gradient2); /* For Opera 11.1 to 12.0 */

src/stylesheets/_sidebar.scss

@@ -2,8 +2,7 @@
 @import "mixin";
 
 #sidebar {
-    height: 100%;
-    max-height: 45em;
+    max-height: 90vh;
     background-color: rgba(250,250,250,.8);
     margin: -1% 2% 1.5% 2%;
     padding: 1%;
@@ -12,6 +11,10 @@
     box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.3);
 }
 
+.mobile_sidebar {
+    height: 7vh;
+}
+
 #highlight_button > button {
 	width: 100%;    
 }
@@ -86,6 +89,15 @@ button {
 
 @include respond-above(sm) {
     .mobile_sidebar {
-        display: none;
+        display: none !important;
+    }
+}
+
+@include respond-below(xs) {
+    .mobile_sidebar {
+        height: 10vh;
+        button {
+            font-size: .8rem;
+        }
     }
 }

src/stylesheets/_texteditor.scss

@@ -1,10 +1,12 @@
 @import "variables";
+@import "mixin";
 
 #editor_content {
+    height: 72vh;
     overflow-y: auto;
     background-color: rgba(256,256,256,.8);
     box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.3);
-    margin: 1.3% 0;
+    margin: 1vh 0;
     border: 1px solid $border_color;
     border-radius: 5px;
     padding: 2% 5%;
@@ -21,15 +23,93 @@
     }
 }
 
-.tall_editor {
-	height: 43em;
+@include respond-below(sm) {
+    #content_window {
+    	height: 84vh;
+    }
+
+    #editor_container {
+    	height: 84vh;
+    }
+    #editor_content {
+        height: 74vh;
+    }
+    #editor_read_mode {
+    	height: 84vh;
+    }
+}
+
+@include respond-below(xs) {
+	div#editor_container {
+		height: 81vh;
+	}
+	div#editor_container > div {
+		height: 81vh;
+	}	
+	div#content_window {
+		height: 81vh;
+	}
+	div#editor_container {
+		height: 81vh;
+	}
+	div#editor_read_mode {
+		height: 81vh;
+	}
+	div#editor_metadata > h4 {
+		font-size: 1.3rem;
+	}
+	div#editor_topbar {
+		height: 5.5vh;
+	}
+	div#editor_topbar.annotate_mode button {
+		font-size: .6rem;
+	}
+	div#editor_content {
+		height: 70vh;
+	}
+	div#editor_content.edit_mode {
+		height: 62.5vh;
+	}
+	div#editor_content.annotate_mode {
+		height: 62.5vh;
+	}
+}
+
+#editor_content.edit_mode {
+	height: 66vh;
+}
+
+#editor_content.edit_mode.tags {
+	height: 61vh;
+}
+
+
+#editor_content.annotate_mode {
+	height: 66vh;
+}
+
+#editor_attributes.tags {
+	height: 5vh;
 }
 
 .short_editor {
 	height: 30em;
 }
 
+#editor_container {
+    height: 82vh;	
+}
+
+#editor_container > div {
+    height: 82vh;	
+}
+
+#editor_read_mode {
+	height: 82vh;
+}
+
 #editor_metadata {
+    height: 5vh;
 	h4 {
 		font-size: 1.75rem
 	}
@@ -40,6 +120,7 @@
 }
 
 #editor_topbar {	
+    height: 4vh;	
 	button {
 		width: 100%;
 	}	
@@ -52,7 +133,8 @@
 }
 
 #editor_bottombar {
-	margin: 0.8% 0;
+	height: 4vh;
+	margin: 0.5vh 0;
 	button {
 		width: 100%;
 	}

src/stylesheets/_window.scss

@@ -17,16 +17,16 @@ html body {
 }
 
 #wrapper {
-	height: 100%;
+	height: 100vh;
 }
 
 #wrapper > div {
-	height: 100%;
+	height: 100vh;
 	overflow: hidden;
 }
 
 #content_window {
-    height: 44em;
+    height: 88vh;
     overflow: hidden;
     background-color: rgba(250,250,250,.8);
     margin: 0 2% 1.5% 2%;

src/stylesheets/joyce.scss

@@ -20,7 +20,7 @@ $fa-font-path: "../../node_modules/@fortawesome/fontawesome-free/webfonts";
 #joyce_reader {
 	overflow: hidden;
 	width: 95%;
-    height: 100%;
+    height: 91vh;
     background-color: rgba(256,256,256,0.5);
     border-left: 1px solid $border_color;
     border-right: 1px solid $border_color;	
@@ -65,8 +65,9 @@ $fa-font-path: "../../node_modules/@fortawesome/fontawesome-free/webfonts";
     }
 }
 
-#joyce_reader > div {
-	margin-top: 0.5em;
+#content_container {
+    height: 90vh;
+    margin-top: 1vh;    
 }
 
 #joyce_search {