Added Bulma for restyling, removed yarn because it stopped installing correctly.

This commit is contained in:
Robbie Antenesse 2016-12-28 07:26:54 -07:00
parent 7829b484c2
commit d4f4dd62c8
12 changed files with 58 additions and 3596 deletions

View File

@ -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",

View File

@ -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>
);
}
}

View File

@ -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>;
}
}

View File

@ -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' />

View File

@ -77,7 +77,7 @@ export class Header extends React.Component {
render() {
return (
<header>
<header className='header'>
<div id="headerPadder">

View File

@ -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>
);

View File

@ -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>
);

View File

@ -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>

View File

@ -17,7 +17,7 @@ td, th {
}
a {
text-decoration: underline;
// text-decoration: underline;
color: #a01000;
}

View File

@ -7,3 +7,6 @@ $max-column-width: 800px;
$button-color: #dcb078;
$dictionary-info-color: #f2d5b2;
$footer-height: 32px;
// Bulma Variables
$radius: 0;

View File

@ -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';

3550
yarn.lock

File diff suppressed because it is too large Load Diff