reorganise dashboard blocks
This commit is contained in:
parent
61d5345730
commit
75c19d7024
|
@ -28,8 +28,6 @@ const Readed = (props) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
setBooks(yearbooks);
|
setBooks(yearbooks);
|
||||||
|
|
||||||
functions.initDataTable();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
@ -38,17 +36,11 @@ const Readed = (props) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<div style={{ display: 'block' }} className="modal modal-books" tabIndex="-1" role="dialog">
|
|
||||||
<div className="modal-dialog" role="document">
|
|
||||||
<div className="modal-content">
|
|
||||||
<button type="button" onClick={() => { setShowModal(false) }} className="close" data-dismiss="modal" aria-label="Close">
|
|
||||||
<i className="fas fa-times-circle"></i>
|
|
||||||
</button>
|
|
||||||
<div className="DataTable_Container">
|
<div className="DataTable_Container">
|
||||||
<table id="DataTable" className="showHead table responsive nowrap" width="100%">
|
<table id="DataTable" className="table responsive nowrap" width="100%">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Gelezen boeken</th>
|
<th></th>
|
||||||
<th></th>
|
<th></th>
|
||||||
<th></th>
|
<th></th>
|
||||||
<th></th>
|
<th></th>
|
||||||
|
@ -70,32 +62,16 @@ const Readed = (props) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<tr key={book.id}>
|
<tr key={book.id}>
|
||||||
<td>
|
<td><div className="dotgenre" style={{background: dotcolor }}></div> {book.name}</td>
|
||||||
<div className="dotgenre" style={{ display: 'inline-block', verticalAlign: 'top', marginTop: '5px', marginRight: '10px', width: '10px', height: '10px', borderRadius: '100%', background: dotcolor }}></div>
|
<td>{book.author}</td>
|
||||||
<div className="book-info" style={{ display: 'inline-block', verticalAlign: 'top' }}>
|
|
||||||
{book.name}
|
|
||||||
<div style={{ color: '#777' }} className="book-author">{book.author}</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td><i className='fas fa-star'></i> {book.rating}</td>
|
<td><i className='fas fa-star'></i> {book.rating}</td>
|
||||||
<td>{moment(book.readed).format("MMMM")}</td>
|
<td>{moment(book.readed).format("MMMM")}</td>
|
||||||
<td style={{ textAlign: 'right' }}>
|
|
||||||
<button onClick={() => delBook(book.id)} type="button" className="btn btn-danger"><i className="fa fa-trash"></i></button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<div className="legenda" style={{ textAlign: 'center' }}>
|
|
||||||
<div className="dotgenre" style={{ display: 'inline-block', verticalAlign: 'top', marginTop: '3px', marginRight: '5px', width: '10px', height: '10px', borderRadius: '100%', background: "#404e67" }}></div><span style={{ marginRight: '10px' }}>Thriller</span>
|
|
||||||
<div className="dotgenre" style={{ display: 'inline-block', verticalAlign: 'top', marginTop: '3px', marginRight: '5px', width: '10px', height: '10px', borderRadius: '100%', background: "#01a9ac" }}></div><span style={{ marginRight: '10px' }}>Roman</span>
|
|
||||||
<div className="dotgenre" style={{ display: 'inline-block', verticalAlign: 'top', marginTop: '3px', marginRight: '5px', width: '10px', height: '10px', borderRadius: '100%', background: "#64c5b1" }}></div><span style={{ marginRight: '10px' }}>Non-fictie</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -60,6 +60,7 @@ const Dashboard = (props) => {
|
||||||
<div className="col-md-6">
|
<div className="col-md-6">
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<Books year={year} />
|
<Books year={year} />
|
||||||
|
{/* <Readed year={year} /> */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -72,8 +73,6 @@ const Dashboard = (props) => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{showModal && (<Readed year={year} />)}
|
|
||||||
</div>
|
</div>
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
)
|
)
|
||||||
|
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue