satchlj
/
joyce
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

CSS refactoring

This commit is contained in:
Alex Hunt 2018-12-26 11:06:49 -07:00
parent a68b428443
commit 91be248aea
21 changed files with 305 additions and 304 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/content.js
View File

@ -1,7 +1,7 @@
import React from 'react'
const Content = (props) =>
<div id='content_window' className='col-md-8 order-2 order-xs-1 order-md-2'>
<div id='content_wrapper' className='col-md-8 order-2 order-xs-1 order-md-2'>
{props.children}
</div>

2
src/components/contentTopBar.js
View File

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

2
src/components/editorAnnotateMode.js
View File

@ -20,7 +20,7 @@ const EditorAnnotateMode = ({
cancelEdit,
onSubmitClick,
}) =>
<div>
<div id='editor_annotate_mode' className='editor_wrapper'>
<div id='editor_metadata'>
{toggles.loading === true &&
<LoadingSpinner />

2
src/components/editorEditMode.js
View File

@ -26,7 +26,7 @@ const EditorEditMode = ({
onColorSwatchClick,
userErrors,
}) =>
<div>
<div id='editor_read_mode' className='editor_wrapper'>
<div id='editor_metadata'>
{toggles.loading === true &&
<LoadingSpinner />

2
src/components/editorReadMode.js
View File

@ -14,7 +14,7 @@ const EditorReadMode = ({
toggles,
setMode
}) =>
<div id='editor_read_mode'>
<div id='editor_read_mode' className='editor_wrapper'>
<div id='editor_metadata'>
{toggles.loading === true &&
<LoadingSpinner />

4
src/components/welcome.js
View File

@ -1,13 +1,13 @@
import React from 'react'
export const ReaderWelcome = () =>
<div id='page'>
<div id='reader_container'>
<p>Welcome to Joyce, an interactive reader and annotator for literature.</p>
<p>You can use the Edit page to add a book and start annotating.</p>
</div>
export const EditorWelcome = () =>
<div id='page'>
<div id='reader_container'>
<p>This is the Editor tool.</p>
<p>Use the menu on the right to start adding chapters and notes.</p>
<p>Now you can use Annotate mode to links to your notes, either in the chapter text or in other notes.</p>

24
src/containers/editorPageContainer.js
View File

@ -23,6 +23,7 @@ const EditorPage = ({
editorState,
modalEditorState,
docType,
mode,
tags,
toggles,
setDocType,
@ -36,18 +37,20 @@ const EditorPage = ({
selectionState,
userErrors,
}) =>
<div id='joyce_reader' className='container-fluid'>
<div id='content_container' className="row">
<div id='joyce_page' className='container-fluid'>
<div id='page_wrapper' className="row">
<EditorSidebarContainer />
<Content>
<EditorSidebarOptions
docs={helpers.documentsOfDocType(docType, chapters, notes, tags)}
currentDocument={currentDocument}
docType={docType}
setDocType={setDocType}
onDocumentClick={onDocumentClick}
onNewDocumentClick={()=>onNewDocumentClick(docType)}
/>
{mode === 'READ_MODE' &&
<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} />
}
@ -80,6 +83,7 @@ const mapStateToProps = state => {
chapters: state.chapters,
notes: state.notes,
tags: state.tags,
mode: state.mode,
currentDocument: state.currentDocument,
annotationNote: state.annotationNote,
annotationTag: state.annotationTag,

2
src/containers/editorSidebarContainer.js
View File

@ -19,7 +19,7 @@ const EditorSidebar = ({
onNewDocumentClick,
setDocType,
}) =>
<div className="col-md-3 d-none d-md-block" id="sidebar">
<div id='sidebar' className='col-md-3 d-none d-md-block'>
<div>
<DocTypeDropdown docType={docType} setDocType={setDocType} />
<SidebarSpacer />

2
src/containers/readerContentContainer.js
View File

@ -11,7 +11,7 @@ const ReaderContent = ({
editorState,
toggles,
}) =>
<div id="page" className={toggles.highlights ? 'annotations' : 'hidden_annotations'}>
<div id="reader_container" className={toggles.highlights ? 'annotations' : 'hidden_annotations'}>
{toggles.loading === true &&
<LoadingSpinner />
}

4
src/containers/readerPageContainer.js
View File

@ -25,8 +25,8 @@ const ReaderPage = ({
onDocumentClick,
onHighlightClick,
}) =>
<div id='joyce_reader' className='container-fluid'>
<div id='content_container' className='row'>
<div id='joyce_page' className='container-fluid'>
<div id='page_wrapper' className='row'>
<ReaderSidebarContainer />
<Content>
<ReaderSidebarOptions

2
src/containers/readerSidebarContainer.js
View File

@ -17,7 +17,7 @@ const ReaderSidebar = ({
onDocumentClick,
onHighlightClick,
}) =>
<div className='col-md-3 d-none d-md-block' id='sidebar'>
<div id='sidebar' className='col-md-3 d-none d-md-block'>
<div>
<HighlightButton toggle={toggles.highlights} onClick={onHighlightClick}/>
<SidebarSpacer />

4
src/containers/searchPageContainer.js
View File

@ -4,8 +4,8 @@ import { connect } from 'react-redux'
import SearchContentContainer from '../containers/searchContentContainer'
const SearchPage = () =>
<div id='joyce_reader' className='container-fluid'>
<div id='content_window' className='row'>
<div id='joyce_page' className='container-fluid'>
<div id='content_wrapper' className='row'>
<SearchContentContainer />
</div>
</div>

2
src/joyce.js
View File

@ -31,7 +31,7 @@ store.dispatch(actions.getDocumentList({docType: 'tags'}))
ReactDOM.render(
<Provider store={store}>
<ConnectedRouter history={history}>
<div>
<div id='inner_wrapper'>
<AdminHeaderContainer />
<Navbar />
<Switch>

69
src/stylesheets/_button.scss
View File

@ -1,5 +1,67 @@
@import "variables";
button {
background-color: rgba(250, 250, 250, 0.8);
}
#highlight_button > button {
width: 100%;
}
%sidebar_button {
width: 100%;
box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.3);
}
.note_button > button {
@extend %sidebar_button;
white-space: normal;
margin: 0.325% 0;
padding: 0.5rem;
font-size: 0.8rem;
text-align: left;
}
.chapter_button > button {
@extend %sidebar_button;
margin: 0.25% 0;
padding: 0.2rem 0;
font-size: 1.5vw;
}
.tag_button > button {
@extend %sidebar_button;
white-space: normal;
margin: 0.325% 0;
padding: 0.5rem;
font-size: 0.8rem;
text-align: left;
}
.chapter_button > button.inactive_button:not(:hover) {
background-color: rgba(250, 250, 250, 1);
}
.note_button > button.inactive_button:not(:hover) {
background-color: rgba(250, 250, 250, 0.8);
}
.tag_button > button.inactive_button:not(:hover) {
background-color: rgba(250, 250, 250, 0.8);
}
.dropdown > button {
width: 100%;
}
.topbar_button {
padding: 0 1em;
}
#new_document_button > button {
width: 100%;
}
.color_preview {
display: block;
height: 2em;
@ -13,4 +75,11 @@
display: inline-flex;
margin-right: 0.5em;
border: 1px solid black;
}
button.caret-off::before {
display: none;
}
button.caret-off::after {
display: none;
}

219
src/stylesheets/_texteditor.scss → src/stylesheets/_editor.scss
View File

@ -1,112 +1,13 @@
@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: 1vh 0;
border: 1px solid $border_color;
border-radius: 5px;
padding: 2% 5%;
font-size: 0.8em;
// Expand top-level DraftJS components to focus on click
> div {
height: 100%;
> div {
height: 100%;
> div {
height: 100%;
}
}
}
}
@include respond-below(sm) {
#content_window {
height: 91vh;
margin: 0;
}
#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: 91vh;
}
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_wrapper {
height: 82vh;
padding-top: 1vh;
}
#editor_metadata {
@ -133,6 +34,46 @@
}
}
#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: 1vh 0;
border: 1px solid $border_color;
border-radius: 5px;
padding: 2% 5%;
font-size: 0.8em;
// Expand top-level DraftJS components to focus on click
> div {
height: 100%;
> div {
height: 100%;
> div {
height: 100%;
}
}
}
}
#editor_content.edit_mode {
height: 73vh;
}
#editor_content.edit_mode.tags {
height: 68vh;
}
#editor_content.annotate_mode {
height: 73vh;
}
#editor_attributes.tags {
height: 5vh;
}
#editor_bottombar {
height: 4vh;
margin: 0.5vh 0;
@ -141,13 +82,73 @@
}
}
button.caret-off::before {
display: none;
}
button.caret-off::after {
display: none;
// Media queries
@include respond-below(sm) {
#content_wrapper {
height: 91vh;
margin: 0;
}
#editor_container {
height: 84vh;
}
#editor_content {
height: 74vh;
}
#editor_read_mode {
height: 84vh;
}
#editor_metadata {
width: 95%;
margin: 0 auto;
}
#editor_topbar {
width: 95%;
margin: 0 auto;
}
}
.user_error_message {
color: map-get($theme_colors, "danger");
@include respond-below(xs) {
div#editor_container {
height: 81vh;
}
div#editor_container > div {
height: 81vh;
}
div#content_wrapper {
height: 91vh;
}
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;
border-radius: 0;
border-left: none;
border-right: none;
border-bottom: none;
}
div#editor_content.edit_mode {
height: 67vh;
}
div#editor_content.edit_mode.tags {
height: 64vh;
}
div#editor_content.annotate_mode {
height: 67vh;
}
}

43
src/stylesheets/_window.scss → src/stylesheets/_layout.scss
View File

@ -1,4 +1,5 @@
@import "variables";
@import "mixin";
html {
height: 100%;
@ -20,12 +21,26 @@ html body {
height: 100vh;
}
#wrapper > div {
#inner_wrapper {
height: 100vh;
overflow: hidden;
}
#content_window {
#joyce_page {
overflow: hidden;
width: 95%;
height: 91vh;
background-color: rgba(256,256,256,0.5);
border-left: 1px solid $border_color;
border-right: 1px solid $border_color;
}
#page_wrapper {
height: 90vh;
margin-top: 1vh;
}
#content_wrapper {
height: 88vh;
overflow: hidden;
background-color: rgba(250,250,250,.8);
@ -36,12 +51,22 @@ html body {
box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.3);
}
.fa_inline {
padding-left: 0.5rem;
}
// Media queries
.loading_spinner {
margin: 0 auto;
text-align:center;
color: $nav_gradient1
@include respond-below(sm) {
#joyce_page {
width: 100%;
}
#page_wrapper {
margin-top: 0 !important;
}
#content_wrapper {
margin-left: 0;
margin-right: 0;
padding: 0;
box-shadow: none;
border: none;
}
}

16
src/stylesheets/_navbar.scss
View File

@ -1,9 +1,8 @@
@import "variables";
@import "mixin";
nav.navbar {
height: 9vh;
min-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 */
@ -22,9 +21,8 @@ nav a:hover {
color: #b7b7b7;
}
// Bootstrap override
// .collapsing {
// -webkit-transition: none;
// transition: none;
// display: none;
// }
@include respond-below(xs) {
a.navbar-brand{
font-size: 1.5em;
}
}

13
src/stylesheets/_page.scss → src/stylesheets/_reader.scss
View File

@ -1,6 +1,7 @@
@import "variables";
@import "mixin";
#page {
#reader_container {
height: 100%;
overflow-y: auto;
background-color: rgba(256,256,256,.8);
@ -41,8 +42,14 @@
text-decoration: none;
}
to {
// color: map-get($theme_colors, "primary");
// background-color: #f2e9de;
border-radius: 3px;
}
}
// Media queries
@include respond-below(sm) {
#reader_container {
border: none;
}
}

23
src/stylesheets/_search.scss Normal file
View File

@ -0,0 +1,23 @@
@import "variables";
@import "mixin";
#search_input {
width: 100%;
}
#search_results_box {
overflow-y: auto;
margin-top: 3%;
height: 75vh;
border: 1px solid $border_color;
border-radius: 5px;
background-color: $search_box_bg;
}
.result_type_group {
background-color: rgba(250, 250, 250, 0.9);
margin: 0 -2%;
padding: 2%;
border-radius: 5px;
border: 1px solid $border_color;
}

70
src/stylesheets/_sidebar.scss
View File

@ -15,8 +15,8 @@
height: 7vh;
}
#highlight_button > button {
width: 100%;
#mobile_editor_sidebar > div {
padding: 0 1em;
}
.sidebar_spacer {
@ -24,56 +24,6 @@
border: 1px solid $border_color;
}
button {
background-color: rgba(250, 250, 250, 0.8);
}
%sidebar_button {
width: 100%;
box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.3);
}
.note_button > button {
@extend %sidebar_button;
white-space: normal;
margin: 0.325% 0;
padding: 0.5rem;
font-size: 0.8rem;
text-align: left;
}
.chapter_button > button {
@extend %sidebar_button;
margin: 0.25% 0;
padding: 0.2rem 0;
font-size: 1.5vw;
}
.tag_button > button {
@extend %sidebar_button;
white-space: normal;
margin: 0.325% 0;
padding: 0.5rem;
font-size: 0.8rem;
text-align: left;
}
.chapter_button > button.inactive_button:not(:hover) {
background-color: rgba(250, 250, 250, 1);
}
.note_button > button.inactive_button:not(:hover) {
background-color: rgba(250, 250, 250, 0.8);
}
.tag_button > button.inactive_button:not(:hover) {
background-color: rgba(250, 250, 250, 0.8);
}
.dropdown > button {
width: 100%;
}
#document_list > div {
padding: 1%;
border: 1px solid $border_color;
@ -88,9 +38,7 @@ button {
height: 80vh;
}
#new_document_button > button {
width: 100%;
}
// Media queries
@include respond-above(sm) {
.mobile_sidebar {
@ -98,8 +46,12 @@ button {
}
}
#mobile_editor_sidebar > div {
padding: 0 1em;
@include respond-below(sm) {
.mobile_sidebar {
background-color: rgba(255, 255, 255, 0.8);
margin-top: 0 !important;
padding: 1vh 2.5% 0 2.5%;
}
}
@include respond-below(xs) {
@ -109,8 +61,4 @@ button {
font-size: .8rem;
}
}
}
.topbar_button {
padding: 0 1em;
}

102
src/stylesheets/joyce.scss
View File

@ -1,104 +1,30 @@
@import "variables";
@import "window";
@import "mixin";
@import "layout";
@import "navbar";
@import "sidebar";
@import "mixin";
@import "page";
@import "texteditor";
@import "reader";
@import "search";
@import "editor";
@import "button";
@import "modal";
@import "dev";
@import "node_modules/bootstrap/scss/bootstrap";
// $fa-font-path: "../../node_modules/font-awesome/fonts";
// @import "node_modules/font-awesome/scss/font-awesome";
$fa-font-path: "../../node_modules/@fortawesome/fontawesome-free/webfonts";
@import "node_modules/bootstrap/scss/bootstrap";
@import "node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
@import "node_modules/@fortawesome/fontawesome-free/scss/solid";
#joyce_reader {
overflow: hidden;
width: 95%;
height: 91vh;
background-color: rgba(256,256,256,0.5);
border-left: 1px solid $border_color;
border-right: 1px solid $border_color;
.fa_inline {
padding-left: 0.5rem;
}
@include respond-below(sm) {
#joyce_reader {
width: 100%;
}
#content_container {
margin-top: 0 !important;
}
#content_window {
margin-left: 0;
margin-right: 0;
padding: 0;
box-shadow: none;
border: none;
}
#page {
border: none;
}
.mobile_sidebar {
background-color: rgba(255, 255, 255, 0.8);
margin-top: 0 !important;
padding: 1vh 0;
}
#editor_metadata {
width: 95%;
margin: 0 auto;
}
#editor_topbar {
width: 95%;
margin: 0 auto;
}
.loading_spinner {
margin: 0 auto;
text-align:center;
color: $nav_gradient1
}
#content_container {
height: 90vh;
margin-top: 1vh;
}
#joyce_search {
overflow: hidden;
width: 95%;
height: 100%;
background-color: rgba(256,256,256,0.5);
border-left: 1px solid $border_color;
border-right: 1px solid $border_color;
}
#joyce_search > div {
margin-top: 20px;
}
#search_input {
width: 100%;
}
#search_results_box {
overflow-y: auto;
margin-top: 3%;
height: 75vh;
border: 1px solid $border_color;
border-radius: 5px;
background-color: $search_box_bg;
}
.result_type_group {
background-color: rgba(250, 250, 250, 0.9);
margin: 0 -2%;
padding: 2%;
border-radius: 5px;
border: 1px solid $border_color;
.user_error_message {
color: map-get($theme_colors, "danger");
}