UI Development
This commit is contained in:
parent
c0e78bee2d
commit
25ab1416e4
|
@ -42,10 +42,7 @@ export default class Challenge extends Component {
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
{this.state.challenge && this.state.challenge !== 0 ?
|
{this.state.challenge && this.state.challenge !== 0 ?
|
||||||
<div className="container-fluid">
|
<div className="stat-block" style={{ marginBottom: '20px' }}>
|
||||||
<div className="row">
|
|
||||||
<div className="col-md-12">
|
|
||||||
<div className="stat-block">
|
|
||||||
<span className="block_name">Book Challenge</span>
|
<span className="block_name">Book Challenge</span>
|
||||||
<div className="progress">
|
<div className="progress">
|
||||||
<div className="progress-bar progress-bar-striped" role="progressbar" style={{ width: challengePercentage + '%' }} aria-valuenow={challengePercentage} aria-valuemin="0" aria-valuemax="100">
|
<div className="progress-bar progress-bar-striped" role="progressbar" style={{ width: challengePercentage + '%' }} aria-valuenow={challengePercentage} aria-valuemin="0" aria-valuemax="100">
|
||||||
|
@ -55,9 +52,6 @@ export default class Challenge extends Component {
|
||||||
|
|
||||||
<span className="stats-number">{this.state.totalbooks}</span><span className="stats-label">van de</span><span className="stats-number">{this.state.challenge}</span><span className="stats-label">boeken gelezen</span>
|
<span className="stats-number">{this.state.totalbooks}</span><span className="stats-label">van de</span><span className="stats-number">{this.state.challenge}</span><span className="stats-label">boeken gelezen</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
: ''}
|
: ''}
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
)
|
)
|
||||||
|
|
|
@ -1,9 +1,6 @@
|
||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
import { NavLink } from "react-router-dom";
|
|
||||||
import Challenge from "../components/Challenge";
|
import Challenge from "../components/Challenge";
|
||||||
import BookStats from "../components/Stats";
|
|
||||||
import Countries from "../components/Countries";
|
import Countries from "../components/Countries";
|
||||||
import Pages from "../components/Pages";
|
|
||||||
import Genres from "../components/Genres";
|
import Genres from "../components/Genres";
|
||||||
import Books from "../components/Books";
|
import Books from "../components/Books";
|
||||||
import { getRatingsCount, getReadingYears } from "../components/Data.js";
|
import { getRatingsCount, getReadingYears } from "../components/Data.js";
|
||||||
|
@ -43,13 +40,7 @@ export default class Dashboard extends Component {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<Sidebar />
|
<div className="chooseYear">
|
||||||
<div className="content">
|
|
||||||
<div className="books-stats">
|
|
||||||
<div className="container-fluid">
|
|
||||||
<div className="row">
|
|
||||||
<div className="col-md-2">
|
|
||||||
<div className="stat-block">
|
|
||||||
<i className="fa fa-calendar"></i>
|
<i className="fa fa-calendar"></i>
|
||||||
<span className="stats-number">
|
<span className="stats-number">
|
||||||
<select className="yearselector" value={this.state.year} onChange={(event) => this.changeYear(event)}>
|
<select className="yearselector" value={this.state.year} onChange={(event) => this.changeYear(event)}>
|
||||||
|
@ -59,25 +50,21 @@ export default class Dashboard extends Component {
|
||||||
</select>
|
</select>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<BookStats year={this.state.year} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Challenge year={this.state.year} />
|
|
||||||
|
|
||||||
|
<Sidebar />
|
||||||
|
<div className="content">
|
||||||
<div className="container-fluid">
|
<div className="container-fluid">
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-md-8">
|
<div className="col-md-8">
|
||||||
|
<Challenge year={this.state.year} />
|
||||||
<Books year={this.state.year} />
|
<Books year={this.state.year} />
|
||||||
<Pages year={this.state.year} />
|
{/* <Pages year={this.state.year} /> */}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-md-4">
|
<div className="col-md-4">
|
||||||
<Countries year={this.state.year} />
|
|
||||||
<Genres year={this.state.year} />
|
<Genres year={this.state.year} />
|
||||||
|
<Countries year={this.state.year} />
|
||||||
<Ratings year={this.state.year} />
|
<Ratings year={this.state.year} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -127,10 +127,6 @@ html, body{
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar ul li:has(> a.active) {
|
|
||||||
background: #333f54 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar ul li a.active {
|
.sidebar ul li a.active {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
background: rgba(0,0,0,0.3) !important;
|
background: rgba(0,0,0,0.3) !important;
|
||||||
|
@ -168,11 +164,29 @@ html, body{
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.books-stats .col-md-2:nth-child(1) i{
|
.chooseYear{
|
||||||
background: #f8f5fc;
|
float: right;
|
||||||
color: #8066ee;
|
margin-top: 10px;
|
||||||
|
padding: 12px 15px;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-size:14px;
|
||||||
}
|
}
|
||||||
.books-stats .col-md-2:nth-child(2) i{
|
|
||||||
|
.chooseYear i{
|
||||||
|
color: #a9b7d0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chooseYear select{
|
||||||
|
font-size:16px;
|
||||||
|
background: none;
|
||||||
|
color:#ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chooseYear select:focus-visible{
|
||||||
|
border:none !important;
|
||||||
|
outline: none !important;
|
||||||
|
}
|
||||||
|
/* .books-stats .col-md-2:nth-child(2) i{
|
||||||
background: #f1fcf8;
|
background: #f1fcf8;
|
||||||
color: #58c8d6;
|
color: #58c8d6;
|
||||||
}
|
}
|
||||||
|
@ -191,7 +205,7 @@ html, body{
|
||||||
.books-stats .col-md-2:nth-child(6) i{
|
.books-stats .col-md-2:nth-child(6) i{
|
||||||
background: #f8f5fc;
|
background: #f8f5fc;
|
||||||
color: #8066ee;
|
color: #8066ee;
|
||||||
}
|
} */
|
||||||
|
|
||||||
.books-stats .stat-block i{
|
.books-stats .stat-block i{
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
"use strict";(self.webpackChunkfrontend=self.webpackChunkfrontend||[]).push([[225],{3225:(e,t,o)=>{o.r(t),o.d(t,{getAllBooks:()=>s,getBooksPerYearPerGenres:()=>c,getChallenge:()=>n,getCountries:()=>r,getGenresCount:()=>g,getReadingYears:()=>a,getShortestLongestBook:()=>d,getStats:()=>h});const s=()=>fetch("/api/books",{method:"GET"}).then((e=>e.json())).then((e=>e)),h=e=>fetch("/api/books/stats",{method:"GET",headers:{year:e}}).then((e=>e.json())).then((e=>e)),n=e=>fetch("/api/books/challenge",{method:"GET",headers:{year:e}}).then((e=>e.json())).then((e=>e)),a=()=>fetch("/api/books/years",{method:"GET"}).then((e=>e.json())).then((e=>e)),r=e=>fetch("/api/books/countries",{method:"GET",headers:{year:e}}).then((e=>e.json())).then((e=>e)),d=e=>fetch("/api/books/pages/stats",{method:"GET",headers:{year:e}}).then((e=>e.json())).then((e=>e)),c=e=>fetch("/api/books/genres",{method:"GET",headers:{year:e}}).then((e=>e.json())).then((e=>e)),g=e=>fetch("/api/books/genres/count",{method:"GET",headers:{year:e}}).then((e=>e.json())).then((e=>e))}}]);
|
"use strict";(self.webpackChunkfrontend=self.webpackChunkfrontend||[]).push([[225],{3225:(e,t,o)=>{o.r(t),o.d(t,{getAllBooks:()=>s,getAvgRatings:()=>i,getBooksPerYearPerGenres:()=>g,getChallenge:()=>h,getCountries:()=>r,getGenresCount:()=>c,getRatingsCount:()=>k,getReadingYears:()=>a,getShortestLongestBook:()=>d,getStats:()=>n});const s=()=>fetch("/api/books",{method:"GET"}).then((e=>e.json())).then((e=>e)),n=e=>fetch("/api/books/stats",{method:"GET",headers:{year:e}}).then((e=>e.json())).then((e=>e)),h=e=>fetch("/api/books/challenge",{method:"GET",headers:{year:e}}).then((e=>e.json())).then((e=>e)),a=()=>fetch("/api/books/years",{method:"GET"}).then((e=>e.json())).then((e=>e)),r=e=>fetch("/api/books/countries",{method:"GET",headers:{year:e}}).then((e=>e.json())).then((e=>e)),d=e=>fetch("/api/books/pages/stats",{method:"GET",headers:{year:e}}).then((e=>e.json())).then((e=>e)),g=e=>fetch("/api/books/genres",{method:"GET",headers:{year:e}}).then((e=>e.json())).then((e=>e)),c=e=>fetch("/api/books/genres/count",{method:"GET",headers:{year:e}}).then((e=>e.json())).then((e=>e)),i=e=>fetch("/api/books/ratings",{method:"GET",headers:{year:e}}).then((e=>e.json())).then((e=>e)),k=e=>fetch("/api/books/ratings/count",{method:"GET",headers:{year:e}}).then((e=>e.json())).then((e=>e))}}]);
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -10,14 +10,6 @@
|
||||||
!*** ./src/components/Books.js ***!
|
!*** ./src/components/Books.js ***!
|
||||||
\*********************************/
|
\*********************************/
|
||||||
|
|
||||||
/*!*********************************!*\
|
|
||||||
!*** ./src/components/Pages.js ***!
|
|
||||||
\*********************************/
|
|
||||||
|
|
||||||
/*!*********************************!*\
|
|
||||||
!*** ./src/components/Stats.js ***!
|
|
||||||
\*********************************/
|
|
||||||
|
|
||||||
/*!**********************************!*\
|
/*!**********************************!*\
|
||||||
!*** ./src/components/Charts.js ***!
|
!*** ./src/components/Charts.js ***!
|
||||||
\**********************************/
|
\**********************************/
|
||||||
|
|
Loading…
Reference in New Issue