reorganise dashboard blocks
This commit is contained in:
parent
895c7c9ff5
commit
61d5345730
|
@ -82,7 +82,7 @@ export const initChart = (data, year) => {
|
||||||
datasets: dataSet
|
datasets: dataSet
|
||||||
},
|
},
|
||||||
options: {
|
options: {
|
||||||
maintainAspectRatio: false,
|
maintainAspectRatio: true,
|
||||||
responsive: true,
|
responsive: true,
|
||||||
showTooltips: true,
|
showTooltips: true,
|
||||||
legend: {
|
legend: {
|
||||||
|
|
|
@ -38,6 +38,15 @@ const Dashboard = (props) => {
|
||||||
<div className="topbar">
|
<div className="topbar">
|
||||||
<img className="logo" src="/static/images/logo_white.png" />
|
<img className="logo" src="/static/images/logo_white.png" />
|
||||||
|
|
||||||
|
<div className="chooseYear">
|
||||||
|
<select className="yearselector" value={year} onChange={(event) => setYear(event.target.value)}>
|
||||||
|
{readingYears.map((year, i) => {
|
||||||
|
return (<option key={i} value={year}>{year}</option>)
|
||||||
|
})}
|
||||||
|
{!readingYears.includes(currentyear) ? <option key={currentyear} value={currentyear}>{currentyear}</option> : ''}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="topbar_right">
|
<div className="topbar_right">
|
||||||
<ul>
|
<ul>
|
||||||
<li className="currentUser"><i class="fas fa-user-circle"></i> {localStorage.getItem('name')}</li>
|
<li className="currentUser"><i class="fas fa-user-circle"></i> {localStorage.getItem('name')}</li>
|
||||||
|
@ -48,32 +57,18 @@ const Dashboard = (props) => {
|
||||||
<div className="content">
|
<div className="content">
|
||||||
<div className="container-fluid">
|
<div className="container-fluid">
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-md-9">
|
<div className="col-md-6">
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-md-4 col-sm-4">
|
<Books year={year} />
|
||||||
<div className="stat-block">
|
|
||||||
<i className="fa fa-calendar"></i>
|
|
||||||
<span className="stats-label">Selecteer jaar:</span>
|
|
||||||
<span className="stats-number">
|
|
||||||
<select className="yearselector" value={year} onChange={(event) => setYear(event.target.value)}>
|
|
||||||
{readingYears.map((year, i) => {
|
|
||||||
return (<option key={i} value={year}>{year}</option>)
|
|
||||||
})}
|
|
||||||
{!readingYears.includes(currentyear) ? <option key={currentyear} value={currentyear}>{currentyear}</option> : ''}
|
|
||||||
</select>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Stats year={year} />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Books year={year} />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-md-3">
|
<div className="col-md-3">
|
||||||
<Languages year={year} />
|
|
||||||
<Genres year={year} />
|
<Genres year={year} />
|
||||||
|
</div>
|
||||||
|
<div className="col-md-3">
|
||||||
<Ratings year={year} />
|
<Ratings year={year} />
|
||||||
|
<Languages year={year} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -356,7 +356,7 @@ html, body{
|
||||||
}
|
}
|
||||||
|
|
||||||
.chooseYear{
|
.chooseYear{
|
||||||
padding: 15px 25px;
|
padding: 15px 15px;
|
||||||
color:#fff;
|
color:#fff;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue