Added Bulma for restyling, removed yarn because it stopped installing correctly.
This commit is contained in:
parent
7829b484c2
commit
d4f4dd62c8
|
@ -22,11 +22,13 @@
|
|||
"homepage": "https://github.com/Alamantus/Lexiconga#readme",
|
||||
"dependencies": {
|
||||
"babel-polyfill": "^6.13.0",
|
||||
"bulma": "^0.2.3",
|
||||
"json-query": "^2.2.0",
|
||||
"marked": "^0.3.6",
|
||||
"papaparse": "^4.1.2",
|
||||
"react": "^15.3.2",
|
||||
"react-dom": "^15.3.2"
|
||||
"react-dom": "^15.3.2",
|
||||
"react-select": "^1.0.0-rc.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-core": "^6.14.0",
|
||||
|
|
|
@ -8,7 +8,7 @@ export class Button extends React.Component {
|
|||
|
||||
// Always give the Button a 'clickable' class and then add any others.
|
||||
processClasses() {
|
||||
var classes = 'clickable';
|
||||
var classes = 'button is-small';
|
||||
|
||||
if (this.props.classes) {
|
||||
classes += ' ' + this.props.classes;
|
||||
|
@ -19,12 +19,12 @@ export class Button extends React.Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<span
|
||||
<a
|
||||
id={this.props.id}
|
||||
className={this.processClasses()}
|
||||
onClick={this.props.action}>
|
||||
{this.props.label}
|
||||
</span>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -27,7 +27,7 @@ export class Dictionary extends React.Component {
|
|||
|
||||
return <div>{words}</div>;
|
||||
} else {
|
||||
return <h3>No words yet!</h3>;
|
||||
return <h3 className='title is-3'>No words yet!</h3>;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -18,20 +18,20 @@ export class FixedPage extends React.Component {
|
|||
|
||||
conditionalDisplay() {
|
||||
if (this.state.display) {
|
||||
let contentClass = 'fixed-page-content';
|
||||
let contentClass = 'modal-content fixed-page-content';
|
||||
|
||||
if (this.props.contentClass) {
|
||||
contentClass += ' ' + this.props.contentClass;
|
||||
}
|
||||
|
||||
return (
|
||||
<div id={this.props.id} className='fixed-page-container'>
|
||||
<div id={this.props.id} className='modal is-active'>
|
||||
|
||||
<div className='fixed-page-background-fade' onClick={this.hide}></div>
|
||||
<div className='modal-background' onClick={this.hide}></div>
|
||||
|
||||
<div className={contentClass}>
|
||||
|
||||
<Button classes='right-button'
|
||||
<Button classes='modal-close'
|
||||
action={this.hide}
|
||||
label='Close' />
|
||||
|
||||
|
|
|
@ -77,7 +77,7 @@ export class Header extends React.Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<header>
|
||||
<header className='header'>
|
||||
|
||||
<div id="headerPadder">
|
||||
|
||||
|
|
|
@ -40,7 +40,7 @@ export class Input extends React.Component {
|
|||
if (this.props.helperLink) {
|
||||
if (this.props.helperLink.url) {
|
||||
return (
|
||||
<a className='clickable inline-button' href={this.props.helperLink.url} target='_blank' title={this.props.helperLink.hover}>
|
||||
<a className='button is-small inline-button' href={this.props.helperLink.url} target='_blank' title={this.props.helperLink.hover}>
|
||||
{this.props.helperLink.label}
|
||||
</a>
|
||||
);
|
||||
|
|
|
@ -34,7 +34,7 @@ export class Word extends React.Component {
|
|||
|
||||
showName() {
|
||||
return (
|
||||
<div className='name'>
|
||||
<div className='title is-4 name'>
|
||||
{this.props.name}
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -246,45 +246,50 @@ class Lexiconga extends React.Component {
|
|||
return (
|
||||
<div>
|
||||
<Header />
|
||||
|
||||
<div className='left-column'>
|
||||
<div className='floating-form'>
|
||||
<WordForm
|
||||
partsOfSpeech={this.state.settings.partsOfSpeech}
|
||||
addWord={(wordObject) => this.addWord(wordObject)}
|
||||
submitLabel='Add Word' />
|
||||
<section className='section columns'>
|
||||
<div className='column is-one-third'>
|
||||
<div className='floating-form'>
|
||||
<WordForm
|
||||
partsOfSpeech={this.state.settings.partsOfSpeech}
|
||||
addWord={(wordObject) => this.addWord(wordObject)}
|
||||
submitLabel='Add Word' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='center-column'>
|
||||
<Button
|
||||
action={() => this.saveLocalDictionary()}
|
||||
label='Save Dictionary' />
|
||||
<div className='column is-half'>
|
||||
<Button
|
||||
action={() => this.saveLocalDictionary()}
|
||||
label='Save Dictionary' />
|
||||
|
||||
<Button
|
||||
action={() => this.loadLocalDictionary()}
|
||||
label='Load Dictionary' />
|
||||
<Button
|
||||
action={() => this.loadLocalDictionary()}
|
||||
label='Load Dictionary' />
|
||||
|
||||
<EditDictionaryForm
|
||||
details={this.state.details}
|
||||
settings={this.state.settings}
|
||||
saveChanges={(changesObject) => this.saveChanges(changesObject)} />
|
||||
<EditDictionaryForm
|
||||
details={this.state.details}
|
||||
settings={this.state.settings}
|
||||
saveChanges={(changesObject) => this.saveChanges(changesObject)} />
|
||||
|
||||
<h1 className="dictionary-name">
|
||||
{this.state.details.name} {this.state.details.listTypeName}
|
||||
</h1>
|
||||
<h1 className="title is-1 dictionary-name">
|
||||
{this.state.details.name} {this.state.details.listTypeName}
|
||||
</h1>
|
||||
|
||||
<InfoDisplay
|
||||
details={this.state.details}
|
||||
numberOfWords={this.state.words.length}
|
||||
isComplete={this.state.settings.isComplete} />
|
||||
<InfoDisplay
|
||||
details={this.state.details}
|
||||
numberOfWords={this.state.words.length}
|
||||
isComplete={this.state.settings.isComplete} />
|
||||
|
||||
<Dictionary
|
||||
details={this.state.details}
|
||||
words={this.state.words}
|
||||
settings={this.state.settings}
|
||||
updateWord={(wordId, wordObject) => this.updateWord(wordId, wordObject)} />
|
||||
</div>
|
||||
<Dictionary
|
||||
details={this.state.details}
|
||||
words={this.state.words}
|
||||
settings={this.state.settings}
|
||||
updateWord={(wordId, wordObject) => this.updateWord(wordId, wordObject)} />
|
||||
</div>
|
||||
|
||||
<div className='column ad-column'>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
|
|
|
@ -17,7 +17,7 @@ td, th {
|
|||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
// text-decoration: underline;
|
||||
color: #a01000;
|
||||
}
|
||||
|
||||
|
|
|
@ -7,3 +7,6 @@ $max-column-width: 800px;
|
|||
$button-color: #dcb078;
|
||||
$dictionary-info-color: #f2d5b2;
|
||||
$footer-height: 32px;
|
||||
|
||||
// Bulma Variables
|
||||
$radius: 0;
|
||||
|
|
|
@ -1,4 +1,6 @@
|
|||
@import 'variables';
|
||||
@import '../../node_modules/bulma/bulma';
|
||||
@import 'styles';
|
||||
@import 'lexiconga';
|
||||
@import 'mobile';
|
||||
@import 'mobile';
|
||||
@import '../../node_modules/react-select/dist/react-select';
|
Loading…
Reference in New Issue