UI Development

ras/frontend/src/components/Challenge.js

@@ -10,7 +10,7 @@ export default class Challenge extends Component {
         }
     }
 
-    getComponentData(){
+    getComponentData() {
         var $this = this;
 
         getStats(this.props.year).then(data => {
@@ -42,21 +42,15 @@ export default class Challenge extends Component {
         return (
             <React.Fragment>
                 {this.state.challenge && this.state.challenge !== 0 ?
-                    <div className="container-fluid">
+                    <div className="stat-block" style={{ marginBottom: '20px' }}>
-                        <div className="row">
+                        <span className="block_name">Book Challenge</span>
-                            <div className="col-md-12">
+                        <div className="progress">
-                                <div className="stat-block">
+                            <div className="progress-bar progress-bar-striped" role="progressbar" style={{ width: challengePercentage + '%' }} aria-valuenow={challengePercentage} aria-valuemin="0" aria-valuemax="100">
-                                    <span className="block_name">Book Challenge</span>
+                                <div className="progress-bar-number">{challengePercentage}%</div>
-                                    <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-number">{challengePercentage}%</div>
-                                        </div>
-                                    </div>
-
-                                    <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>
+
+                        <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>
                     : ''}
             </React.Fragment>

ras/frontend/src/views/dashboard.js

@@ -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";
@@ -11,7 +8,7 @@ import Sidebar from "../components/Sidebar";
 import Ratings from "../components/Ratings";
 
 export default class Dashboard extends Component {
-    
+
     constructor(props) {
         super(props);
         this.state = {
@@ -43,41 +40,31 @@ export default class Dashboard extends Component {
 
         return (
             <React.Fragment>
+                <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)}>
+                            {this.state.readingYears.map((year, i) => {
+                                return (<option key={i} value={year}>{year}</option>)
+                            })}
+                        </select>
+                    </span>
+                </div>
+
                 <Sidebar />
                 <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>
-                                        <span className="stats-number">
-                                            <select className="yearselector" value={this.state.year} onChange={(event) => this.changeYear(event)}>
-                                                {this.state.readingYears.map((year, i) => {
-                                                    return (<option key={i} value={year}>{year}</option>)
-                                                })}
-                                            </select>
-                                        </span>
-                                    </div>
-                                </div>
-
-                                <BookStats year={this.state.year} />
-                            </div>
-                        </div>
-                    </div>
-
-                    <Challenge year={this.state.year} />
-
                     <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>

ras/frontend/static/css/style.css

@@ -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{
+  .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;
     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;

ras/frontend/static/js/225.js

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

ras/frontend/static/js/src_views_dashboard_js.js.LICENSE.txt

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