jordyvanzeeland/novelmetrix-python
jordyvanzeeland
/
novelmetrix-python
1
1
Fork 0
Code Issues 9 Activity

UI Development

This commit is contained in:
Jordy van Zeeland 2023-03-10 15:12:19 +01:00
parent c0e78bee2d
commit 25ab1416e4
8 changed files with 51 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ras/frontend/src/components/Challenge.js
View File

@ -42,10 +42,7 @@ export default class Challenge extends Component {
return (
<React.Fragment>
{this.state.challenge && this.state.challenge !== 0 ?
<div className="container-fluid">
<div className="row">
<div className="col-md-12">
<div className="stat-block">
<div className="stat-block" style={{ marginBottom: '20px' }}>
<span className="block_name">Book Challenge</span>
<div className="progress">
<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>
</div>
</div>
</div>
</div>
: ''}
</React.Fragment>
)

27
ras/frontend/src/views/dashboard.js
View File

@ -1,9 +1,6 @@
import React, { Component } from "react";
import { NavLink } from "react-router-dom";
import Challenge from "../components/Challenge";
import BookStats from "../components/Stats";
import Countries from "../components/Countries";
import Pages from "../components/Pages";
import Genres from "../components/Genres";
import Books from "../components/Books";
import { getRatingsCount, getReadingYears } from "../components/Data.js";
@ -43,13 +40,7 @@ export default class Dashboard extends Component {
return (
<React.Fragment>
<Sidebar />
<div className="content">
<div className="books-stats">
<div className="container-fluid">
<div className="row">
<div className="col-md-2">
<div className="stat-block">
<div className="chooseYear">
<i className="fa fa-calendar"></i>
<span className="stats-number">
<select className="yearselector" value={this.state.year} onChange={(event) => this.changeYear(event)}>
@ -59,25 +50,21 @@ export default class Dashboard extends Component {
</select>
</span>
</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="row">
<div className="col-md-8">
<Challenge year={this.state.year} />
<Books year={this.state.year} />
<Pages year={this.state.year} />
{/* <Pages year={this.state.year} /> */}
</div>
<div className="col-md-4">
<Countries year={this.state.year} />
<Genres year={this.state.year} />
<Countries year={this.state.year} />
<Ratings year={this.state.year} />
</div>
</div>

32
ras/frontend/static/css/style.css
View File

@ -127,10 +127,6 @@ html, body{
border-radius: 10px;
}
.sidebar ul li:has(> a.active) {
background: #333f54 !important;
}
.sidebar ul li a.active {
color: #ffffff;
background: rgba(0,0,0,0.3) !important;
@ -168,11 +164,29 @@ html, body{
border-radius: 10px;
}
.books-stats .col-md-2:nth-child(1) i{
background: #f8f5fc;
color: #8066ee;
.chooseYear{
float: right;
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;
color: #58c8d6;
}
@ -191,7 +205,7 @@ html, body{
.books-stats .col-md-2:nth-child(6) i{
background: #f8f5fc;
color: #8066ee;
}
} */
.books-stats .stat-block i{
font-weight: 900;

2
ras/frontend/static/js/225.js
View File

@ -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))}}]);

1
ras/frontend/static/js/902.js Normal file
View File

File diff suppressed because one or more lines are too long

2
ras/frontend/static/js/947.js
View File

File diff suppressed because one or more lines are too long

2
ras/frontend/static/js/src_views_dashboard_js.js
View File

File diff suppressed because one or more lines are too long

8
ras/frontend/static/js/src_views_dashboard_js.js.LICENSE.txt
View File

@ -10,14 +10,6 @@
!*** ./src/components/Books.js ***!
\*********************************/
/*!*********************************!*\
!*** ./src/components/Pages.js ***!
\*********************************/
/*!*********************************!*\
!*** ./src/components/Stats.js ***!
\*********************************/
/*!**********************************!*\
!*** ./src/components/Charts.js ***!
\**********************************/