UI design changes
This commit is contained in:
parent
ecbfe6f09a
commit
91c530bcd5
|
@ -199,7 +199,7 @@ export default class App extends Component {
|
||||||
label: '# of Tomatoes',
|
label: '# of Tomatoes',
|
||||||
data: counts,
|
data: counts,
|
||||||
backgroundColor: [
|
backgroundColor: [
|
||||||
'#6f52ec', '#ff4c62', '#33d69f', '#fdb700', '#4cb7ff'
|
'#8066ee', '#58c8d6', '#fe4c62', '#49b8fd', '#ffbe0e'
|
||||||
],
|
],
|
||||||
borderWidth: 0,
|
borderWidth: 0,
|
||||||
borderColor: '#1f2940',
|
borderColor: '#1f2940',
|
||||||
|
@ -226,7 +226,7 @@ export default class App extends Component {
|
||||||
}]
|
}]
|
||||||
},
|
},
|
||||||
options: {
|
options: {
|
||||||
cutout: '50%',
|
cutout: '80%',
|
||||||
responsive: true,
|
responsive: true,
|
||||||
plugins: {
|
plugins: {
|
||||||
legend: {
|
legend: {
|
||||||
|
@ -254,6 +254,16 @@ export default class App extends Component {
|
||||||
return this.height += 30;
|
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 = [
|
var colors = [
|
||||||
// '#696ffc', '#7596fa', '#92adfe', '#abc0ff'
|
// '#696ffc', '#7596fa', '#92adfe', '#abc0ff'
|
||||||
'#6f52ec', '#ff4c62', '#33d69f', '#fdb700', '#4cb7ff'
|
'#8066ee', '#58c8d6', '#fe4c62', '#49b8fd', '#ffbe0e'
|
||||||
]
|
]
|
||||||
|
|
||||||
var dataSet = [];
|
var dataSet = [];
|
||||||
|
@ -459,11 +469,24 @@ export default class App extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
console.log(this.state);
|
var url = window.location.href.split("/");
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<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">
|
<div className="content">
|
||||||
|
|
||||||
|
<h1>Dashboard</h1>
|
||||||
|
<h2>Leesanalyse van Jordy van Zeeland</h2>
|
||||||
|
|
||||||
<div className="books-stats">
|
<div className="books-stats">
|
||||||
<div className="container-fluid">
|
<div className="container-fluid">
|
||||||
<div className="row">
|
<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.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<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">
|
<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;
|
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{
|
.content{
|
||||||
padding-left: 120px;
|
padding: 50px 50px 50px 110px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter{
|
.filter{
|
||||||
|
@ -69,16 +83,39 @@
|
||||||
|
|
||||||
.sidebar{
|
.sidebar{
|
||||||
background: #363a53;
|
background: #363a53;
|
||||||
width: 100px;
|
width: 70px;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
position: fixed;
|
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{
|
.books-stats{
|
||||||
margin:20px 0;
|
margin:20px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.books-icon{
|
||||||
|
background:#000;
|
||||||
|
padding: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
.books-stats .stat-block{
|
.books-stats .stat-block{
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
box-shadow: 0 2px 0px 1px rgb(0 0 0 / 3%);
|
box-shadow: 0 2px 0px 1px rgb(0 0 0 / 3%);
|
||||||
|
@ -93,13 +130,13 @@
|
||||||
color: #8066ee;
|
color: #8066ee;
|
||||||
}
|
}
|
||||||
.books-stats .col-md-2:nth-child(2) i{
|
.books-stats .col-md-2:nth-child(2) i{
|
||||||
background: #fff5f6;
|
|
||||||
color: #fe4c62;
|
|
||||||
}
|
|
||||||
.books-stats .col-md-2:nth-child(3) i{
|
|
||||||
background: #f1fcf8;
|
background: #f1fcf8;
|
||||||
color: #58c8d6;
|
color: #58c8d6;
|
||||||
}
|
}
|
||||||
|
.books-stats .col-md-2:nth-child(3) i{
|
||||||
|
background: #fff5f6;
|
||||||
|
color: #fe4c62;
|
||||||
|
}
|
||||||
.books-stats .col-md-2:nth-child(4) i{
|
.books-stats .col-md-2:nth-child(4) i{
|
||||||
background: #f2f9ff;
|
background: #f2f9ff;
|
||||||
color: #49b8fd;
|
color: #49b8fd;
|
||||||
|
@ -135,7 +172,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.books-stats .stat-block .stats-label{
|
.books-stats .stat-block .stats-label{
|
||||||
color: #bac0cc;
|
color: #a7adbd;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue