UI design changes
This commit is contained in:
Jordy van Zeeland
parent
ecbfe6f09a
commit
91c530bcd5
|
|
@ -199,7 +199,7 @@ export default class App extends Component {
|
|||
label: '# of Tomatoes',
|
||||
data: counts,
|
||||
backgroundColor: [
|
||||
'#6f52ec', '#ff4c62', '#33d69f', '#fdb700', '#4cb7ff'
|
||||
'#8066ee', '#58c8d6', '#fe4c62', '#49b8fd', '#ffbe0e'
|
||||
],
|
||||
borderWidth: 0,
|
||||
borderColor: '#1f2940',
|
||||
|
|
@ -226,7 +226,7 @@ export default class App extends Component {
|
|||
}]
|
||||
},
|
||||
options: {
|
||||
cutout: '50%',
|
||||
cutout: '80%',
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
|
|
@ -254,6 +254,16 @@ export default class App extends Component {
|
|||
return this.height += 30;
|
||||
}
|
||||
}
|
||||
},{
|
||||
afterDraw: chart => {
|
||||
var ctx = chart.ctx;
|
||||
ctx.save();
|
||||
var image = new Image();
|
||||
image.src = 'https://www.iconsdb.com/icons/preview/gray/book-xxl.png';
|
||||
var imageSize = 80;
|
||||
ctx.drawImage(image, chart.width / 2 - imageSize / 2, chart.height / 2 - imageSize / 6, imageSize, imageSize);
|
||||
ctx.restore();
|
||||
}
|
||||
}],
|
||||
});
|
||||
}
|
||||
|
|
@ -270,7 +280,7 @@ export default class App extends Component {
|
|||
|
||||
var colors = [
|
||||
// '#696ffc', '#7596fa', '#92adfe', '#abc0ff'
|
||||
'#6f52ec', '#ff4c62', '#33d69f', '#fdb700', '#4cb7ff'
|
||||
'#8066ee', '#58c8d6', '#fe4c62', '#49b8fd', '#ffbe0e'
|
||||
]
|
||||
|
||||
var dataSet = [];
|
||||
|
|
@ -459,11 +469,24 @@ export default class App extends Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
console.log(this.state);
|
||||
var url = window.location.href.split("/");
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className="sidebar"></div>
|
||||
<div className="sidebar">
|
||||
<div className={`menu-item ${ url && url[3] == "" ? 'selected' : ''}`}>
|
||||
<i class="fa fa-chart-bar"></i>
|
||||
</div>
|
||||
<div className={`menu-item ${ url && url[3] == "books" ? 'selected' : ''}`}>
|
||||
<i class="fa fa-book"></i>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="content">
|
||||
|
||||
<h1>Dashboard</h1>
|
||||
<h2>Leesanalyse van Jordy van Zeeland</h2>
|
||||
|
||||
<div className="books-stats">
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -23,9 +23,6 @@
|
|||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
|
||||
|
|
@ -41,8 +38,25 @@
|
|||
font-family: 'Source Sans Pro', sans-serif;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
padding: 0 10px 0px 10px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
h2{
|
||||
padding-left: 10px;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #a7adbd;
|
||||
display: block;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
|
||||
.content{
|
||||
padding-left: 120px;
|
||||
padding: 50px 50px 50px 110px;
|
||||
}
|
||||
|
||||
.filter{
|
||||
|
|
@ -69,16 +83,39 @@
|
|||
|
||||
.sidebar{
|
||||
background: #363a53;
|
||||
width: 100px;
|
||||
width: 70px;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
margin: -20px 0 0 0;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.sidebar .menu-item{
|
||||
text-align: center;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.sidebar .menu-item i{
|
||||
font-size: 25px;
|
||||
color: #727794;
|
||||
}
|
||||
|
||||
.sidebar .menu-item.selected i{
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
.sidebar svg{
|
||||
color:#ffffff;
|
||||
}
|
||||
|
||||
.books-stats{
|
||||
margin:20px 0;
|
||||
}
|
||||
|
||||
.books-icon{
|
||||
background:#000;
|
||||
padding: 50px;
|
||||
}
|
||||
|
||||
.books-stats .stat-block{
|
||||
background: #ffffff;
|
||||
box-shadow: 0 2px 0px 1px rgb(0 0 0 / 3%);
|
||||
|
|
@ -93,13 +130,13 @@
|
|||
color: #8066ee;
|
||||
}
|
||||
.books-stats .col-md-2:nth-child(2) i{
|
||||
background: #fff5f6;
|
||||
color: #fe4c62;
|
||||
}
|
||||
.books-stats .col-md-2:nth-child(3) i{
|
||||
background: #f1fcf8;
|
||||
color: #58c8d6;
|
||||
}
|
||||
.books-stats .col-md-2:nth-child(3) i{
|
||||
background: #fff5f6;
|
||||
color: #fe4c62;
|
||||
}
|
||||
.books-stats .col-md-2:nth-child(4) i{
|
||||
background: #f2f9ff;
|
||||
color: #49b8fd;
|
||||
|
|
@ -135,7 +172,7 @@
|
|||
}
|
||||
|
||||
.books-stats .stat-block .stats-label{
|
||||
color: #bac0cc;
|
||||
color: #a7adbd;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue