api changes + frontend redesign

ras/api/modules/pandas.py

@@ -196,5 +196,35 @@ def countRatings(request):
         data = [{"rating": int(rating), "count": int(count)} for rating, count in zip(countratings['rating'], countratings['count'])]
         return Response(data)
 
+    except Exception as e:
+        return JsonResponse({'error': 'An error occurred: {}'.format(str(e))}, safe=False)
+    
+# -----------------------------
+# Count EN and NL books
+# -----------------------------
+
+@api_view(['GET'])
+def countEnBooks(request):
+    try:
+        authorization_token = request.headers.get('Authorization')
+        isLoggedIn = isAuthorized(authorization_token)
+
+        if not authorization_token:
+            return JsonResponse({'error': 'No authorization token'}, safe=False)
+
+        if not isLoggedIn:
+            return JsonResponse({'error': 'Unauthorized'}, safe=False)
+        
+        if not request.META.get('HTTP_YEAR'):
+            return JsonResponse({'error': 'No year in header'}, safe=False)
+        
+        df = filterData(getBooksData(request.headers.get('userid')), request.META.get('HTTP_YEAR'))
+        countbooks = df.groupby('en')['en'].count().reset_index(name="count")
+        countbooks = countbooks.sort_values(by='count', ascending=False)
+        countbooks['lang'] = countbooks['en'].apply(lambda x: 'en' if x == 1 else 'nl')
+        data = [{"lang": lang, "count": int(count)} for lang, count in zip(countbooks['lang'], countbooks['count'])]
+
+        return Response(data)
+
     except Exception as e:
         return JsonResponse({'error': 'An error occurred: {}'.format(str(e))}, safe=False)

ras/api/urls.py

@@ -11,6 +11,7 @@ urlpatterns = [
     path('books/all', getAllBooks),
     path('books', getBooksByYear),
     path('books/years', getYears),
+    path('books/en', countEnBooks),
     path('books/stats', getStats),
     path('books/insert', addBook),
     path('books/delete', deleteBook),

ras/frontend/src/Functions.js

@@ -22,7 +22,7 @@ export const initDataTable = () => {
               search: "",
               searchPlaceholder: "Zoeken"
             },
-            dom: 'rt<"bottom"pl><"clear">',
+            dom: 'rt<"bottom"p><"clear">',
             order: []
         });
     }, 300)

ras/frontend/src/components/Books.js

@@ -10,8 +10,7 @@ const Books = (props) => {
         const yearbooks = await data.getBooksPerYearPerGenres(props.year);
 
         if(yearbooks){
-            const ratings = await data.getAvgRatings(props.year);
+            charts.initChart(yearbooks, props.year);
-            charts.initChart(yearbooks, ratings, props.year);
         }
     }
 

ras/frontend/src/components/Charts.js

@@ -1,4 +1,4 @@
-export const initChart = (data, ratings, year) => {
+export const initChart = (data, year) => {
 
     /*
     ----------------------------------
@@ -9,8 +9,7 @@ export const initChart = (data, ratings, year) => {
     var genres = [];
 
     var colors = [
-        // '#696ffc', '#7596fa', '#92adfe', '#abc0ff'
+        '#405181', '#01a9ac', '#64c5b1', '#1ABB9C'
-        '#404e67', '#01a9ac', '#64c5b1', '#1ABB9C'
     ]
 
     var dataSet = [];
@@ -54,39 +53,6 @@ export const initChart = (data, ratings, year) => {
         })
     }
 
-    /*
-        ----------------------------------
-             Avarage ratings per month
-        ----------------------------------
-        */
-
-        var avgRatings = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
-
-        for (var j = 0; j < 12; j++) {
-
-            if (j < 9) {
-                var month = "0" + (j + 1)
-            } else {
-                month = (j + 1)
-            }
-
-            for (var i = 0; i < ratings.length; i++) {
-                if (ratings[i].date == month + '-' + year) {
-                    avgRatings[j] = ratings[i].rating;
-                }
-            }
-        }
-
-        dataSet.push({
-            label: 'Gemiddelde beoordeling',
-            data: avgRatings,
-            backgroundColor: '#ffa500',
-            borderColor: '#ffa500',
-            tension: 0.4,
-            type: 'line',
-            order: 1
-        })
-
     /*
     ----------------------------------
          Stacked bar chart
@@ -208,7 +174,7 @@ export const initDoughnut = (data) => {
                 label: '# of Tomatoes',
                 data: counts,
                 backgroundColor: [
-                    '#404e67', '#01a9ac', '#64c5b1', '#1ABB9C'
+                    '#405181', '#01a9ac', '#64c5b1', '#1ABB9C'
                 ],
                 borderWidth: 0,
                 borderColor: '#1f2940',

ras/frontend/src/components/DataTables.css

@@ -8,7 +8,7 @@
 
 #DataTable td {
     color: #333;
-    font-size: 12px;
+    font-size: 14px;
     height: 40px;
     font-weight: 300;
     vertical-align: middle;
@@ -56,7 +56,7 @@
     padding: 15px 20px;
     border-bottom: 1px solid #efefef;
     font-weight: 600;
-    font-size: 12px;
+    font-size: 14px;
     color:#000000;
 }
 
@@ -72,19 +72,6 @@
     padding:14px;
 }
 
-#DataTable .openAlarm .pictogram {
-    /* display: inline-block;
-    padding: 0 0 0 0;
-    margin: 10px 10px 10px 10px;
-    background: rgb(255,0,0); */
-    display: inline-block;
-    margin: 10px 10px 10px 10px;
-    background: rgb(255,0,0);
-    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
-    border-radius: 100%;
-    padding: 5px;
-}
-
 #DataTable tbody td:first-child{
     padding: 0rem;
 }
@@ -99,20 +86,6 @@
     border-bottom: solid 1px #f8f8f8 !important;
 }
 
-#DataTable .openAlarm td{
-    padding:10px;
-    color: #000000;
-    font-size: 14px;
-    height: 45px;
-    font-weight: 400;
-    vertical-align: middle;
-    border-top: 1px solid #efefef;
-}
-
-#DataTable .openAlarm:first-child td{
-    border-top:none;
-}
-
 .DataTable_Container {
     margin: 0px 2.5rem 0px 2.5rem;
 }
@@ -138,37 +111,10 @@
     margin-bottom: 0;
 }
 
-.DataTable_Container .historyAlarm .pictogram {
-    /* display: inline-block;
-    padding: 0 0 0 0;
-    margin: 10px 10px 10px 10px;
-    background: rgb(255,0,0); */
-    display: inline-block;
-    margin: 10px 10px 10px 10px;
-    background: rgb(255,0,0);
-    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
-    border-radius: 100%;
-    padding: 5px;
-}
-
 .DataTable_Container .table tbody td:first-child{
     padding: 0rem;
 }
 
-.DataTable_Container .historyAlarm td{
-    padding:10px;
-    color: #000000;
-    font-size: 14px;
-    height: 45px;
-    font-weight: 100;
-    vertical-align: middle;
-    border-top: 1px solid #efefef;
-}
-
-.DataTable_Container .historyAlarm:first-child td{
-    border-top:none;
-}
-
 .DataTable_Container .dataTables_length{
     padding: 20px 0;
 }
@@ -218,7 +164,7 @@
 }
 
 .dataTables_wrapper .dataTables_paginate{
-    float:right;
+    text-align: center;
 }
 
 .dataTables_wrapper .dataTables_paginate .paginate_button {
@@ -233,7 +179,7 @@
     color: #333 !important;
     border: 1px solid transparent;
     border-radius: 2px;
-    font-size: 13px;
+    font-size: 14px;
 }
 
 .showHead thead{

ras/frontend/src/components/Readed.js

@@ -1,30 +1,35 @@
 import React, { useEffect, useState } from 'react';
-import '../components/DataTables.css';
+import './DataTables.css';
-import 'flag-icon-css/css/flag-icons.min.css';
+import * as moment from 'moment';
-import DataTable from 'datatables.net-dt';
+moment.locale('nl');
 
 const Readed = (props) => {
     const [books, setBooks] = useState([]);
 
     const getData = async () => {
-        const data = await import("./Data.js");
+        const [data, functions] = await Promise.all([
+            import("../components/Data.js"),
+            import("../Functions.js")
+        ])
+
         const yearbooks = await data.getBooksByYear(props.year);
 
-        if(yearbooks){
+        var months = [];
-            setBooks(yearbooks);
-        }
-        setTimeout(() => {
-            let table = new DataTable('#DataTable');
-            table.destroy();
 
-            table = new DataTable('#DataTable', {
+        for(var i = 1; i < 13; i++){
-                language: {
+            months[i] = [];
-                    url: 'https://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Dutch.json'
+
-                },
+            yearbooks.forEach(book => {
-                dom: 'rt<"bottom"p><"clear">',
+                console.log(moment(book.readed).format("M"), i);
-                order: []
+                if(moment(book.readed).format("M") == i){
+                    months[i].push(book);
+                }
             });
-        }, 1000)
+        }
+
+        setBooks(yearbooks);
+
+        functions.initDataTable();
     }
 
     useEffect(() => {
@@ -33,32 +38,64 @@ const Readed = (props) => {
 
     return (
         <React.Fragment>
-            <div className="readed">
+            <div style={{ display: 'block' }} className="modal modal-books" tabIndex="-1" role="dialog">
-                <span className="block_name">Gelezen boeken</span>
+                    <div className="modal-dialog" role="document">
-                <table id="DataTable" className="table responsive nowrap" width="100%">
+                        <div className="modal-content">
-                    <thead>
+                            <button type="button" onClick={() => { setShowModal(false) }} className="close" data-dismiss="modal" aria-label="Close">
-                        <tr>
+                                <i className="fas fa-times-circle"></i>
-                            <th>Book</th>
+                            </button>
-                            <th>Author</th>
+                            <div className="DataTable_Container">
-                            <th>Genre</th>
+                                <table id="DataTable" className="showHead table responsive nowrap" width="100%">
-                            <th>Ratings</th>
+                                    <thead>
-                        </tr>
+                                        <tr>
-                    </thead>
+                                            <th>Gelezen boeken</th>
-                    <tbody>
+                                            <th></th>
-                        {books.map((book, i) => {
+                                            <th></th>
-                            var code = book.country_code.toLowerCase();
+                                            <th></th>
-                            return (
+                                        </tr>
-                                <tr key={i}>
+                                    </thead>
-                                    <td>{book.name}</td>
+                                    <tbody>
-                                    <td>{book.author} <span className={`flag-icon flag-icon-${code} mx2`}></span></td>
+                                        {books.map((book, i) => {
-                                    <td>{book.genre}</td>
+                                            var dotcolor = '';
-                                    <td><i className='fas fa-star'></i>{book.rating}</td>
+
-                                </tr>
+                                            if(book.genre === "Thriller"){
-                            )
+                                                dotcolor = '#404e67';
-                        })}
+                                            }else if (book.genre === "Roman"){
-                    </tbody>
+                                                dotcolor = '#01a9ac';
-                </table>
+                                            }else if(book.genre === 'Non-fictie'){
-            </div>
+                                                dotcolor = '#64c5b1';
+                                            }else{
+                                                dotcolor = '#1ABB9C';
+                                            }
+
+                                            return (
+                                                <tr key={book.id}>
+                                                    <td>
+                                                        <div className="dotgenre" style={{ display: 'inline-block', verticalAlign: 'top', marginTop: '5px', marginRight: '10px', width: '10px', height: '10px', borderRadius: '100%', background: dotcolor }}></div> 
+                                                        <div className="book-info" style={{ display: 'inline-block', verticalAlign: 'top' }}>
+                                                            {book.name}
+                                                            <div style={{ color: '#777' }} className="book-author">{book.author}</div>
+                                                        </div>
+                                                    </td>
+                                                    <td><i className='fas fa-star'></i> {book.rating}</td>
+                                                    <td>{moment(book.readed).format("MMMM")}</td>
+                                                    <td style={{ textAlign: 'right' }}>
+                                                        <button onClick={() => delBook(book.id)} type="button" className="btn btn-danger"><i className="fa fa-trash"></i></button>
+                                                    </td>
+                                                </tr>
+                                            )
+                                        })}
+                                    </tbody>
+                                </table>
+                            </div>
+                            <div className="legenda" style={{ textAlign: 'center' }}>
+                            <div className="dotgenre" style={{ display: 'inline-block', verticalAlign: 'top', marginTop: '3px', marginRight: '5px', width: '10px', height: '10px', borderRadius: '100%', background: "#404e67" }}></div><span style={{ marginRight: '10px' }}>Thriller</span>
+                            <div className="dotgenre" style={{ display: 'inline-block', verticalAlign: 'top', marginTop: '3px', marginRight: '5px', width: '10px', height: '10px', borderRadius: '100%', background: "#01a9ac" }}></div><span style={{ marginRight: '10px' }}>Roman</span>
+                            <div className="dotgenre" style={{ display: 'inline-block', verticalAlign: 'top', marginTop: '3px', marginRight: '5px', width: '10px', height: '10px', borderRadius: '100%', background: "#64c5b1" }}></div><span style={{ marginRight: '10px' }}>Non-fictie</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
         </React.Fragment>
     )
 }

ras/frontend/src/components/Sidebar.js

@@ -10,25 +10,16 @@ const Sidebar = () => {
 
     return(
         <div className="sidebar">
-                <img className="logo_text" src="/static/images/logo_white.png" style={{ width: '100%', padding: '10px 25px' }}/>
                 <ul>
                     <NavLink to={'/'} exact="true">
-                        <li><i className="fas fa-chart-line"></i> <label>Dashboard</label></li>
+                        <li><i className="fas fa-chart-line"></i></li>
                     </NavLink>
 
-                    <span>Beheer</span>
                     <NavLink to={'/books'} exact="true">
-                        <li><i className="fas fa-book"></i> <label>Boeken</label></li>
+                        <li><i className="fas fa-book"></i></li>
                     </NavLink>
-                    <NavLink to={'/challenges'} exact="true">
+                    <li className="bottom-menu"><button onClick={() => logout()}><i className="fas fa-power-off"></i></button></li>
-                        <li><i className="fas fa-tasks"></i> <label>Challenges</label></li>
-                    </NavLink>
-                    <li className="bottom-menu"><button onClick={() => logout()}><i className="fas fa-power-off"></i> <label>Uitloggen</label></button></li>
                 </ul>
-
-                {/* <ul className="bottom-menu">
-                    <li><button onClick={() => logout()}><i className="fas fa-power-off"></i> Uitloggen</button></li>
-                </ul> */}
         </div>
     )
 }

ras/frontend/src/components/Stats.js

@@ -20,13 +20,11 @@ const BookStats = (props) =>{
 
     return (
         <React.Fragment>
-            <div className='row'>
                 <div className="col-md-4 col-sm-4">
                     <div className="stat-block">
                         <i className="fas fa-book-open"></i>   
                         <span className="stats-label">Gelezen boeken:</span>
                         <span className="stats-number">{totalbooks ? totalbooks : 0}</span>
-                        
                     </div>
                 </div>
                 
@@ -38,15 +36,6 @@ const BookStats = (props) =>{
                         
                     </div>
                 </div>
-
-                <div className="col-md-4 col-sm-4">
-                    <div className="stat-block">
-                        <i className="fas fa-star"></i> 
-                        <span className="stats-label">Jaarbeoordeling:</span>
-                        <span className="stats-number">{yearrating? yearrating : 0}</span>
-                    </div>
-                </div>
-            </div>
         </React.Fragment>
     )
 }

ras/frontend/src/views/bookslist.js

@@ -6,8 +6,11 @@ moment.locale('nl');
 
 const BooksList = (props) => {
     var [books, setBooks] = useState([]);
+    const currentyear = new Date().getFullYear();
     const [showModal, setShowModal] = useState(false);
     const [months, setMonths] = useState([]);
+    const [year, setYear] = useState(currentyear);
+    const [readingYears, setReadingYears] = useState([]);
 
     const addBook = async (event) => {
         event.preventDefault();
@@ -44,6 +47,9 @@ const BooksList = (props) => {
             import("../Functions.js")
         ])
 
+        const getYears = await data.getReadingYears();
+        setReadingYears(getYears);
+
         const getbooks = await data.getAllBooks();
         setBooks(getbooks);
         functions.initDataTable();
@@ -56,7 +62,29 @@ const BooksList = (props) => {
     return (
         <React.Fragment>
             <Sidebar />
-            <div className="content-manage">
+            <div className="topbar">
+                <img className="logo" src="/static/images/logo_white.png" />
+                <div className="chooseYear">
+                    <i className="fa fa-calendar"></i>
+                    <span className="stats-number" style={{ marginRight: '0px' }}>
+                        <select className="yearselector" value={year} onChange={(event) => setYear(event.target.value)}>
+                            {readingYears.map((year, i) => {
+                                return (<option key={i} value={year}>{year}</option>)
+                            })}
+                            {!readingYears.includes(currentyear) ? <option key={currentyear} value={currentyear}>{currentyear}</option> : ''}
+                        </select>
+                    </span>
+                </div>
+
+                <div className="topbar_right">
+                    <ul>
+                        <li><i className="fas fa-book" onClick={() => {setShowModal(true)}}></i></li>
+                        <li onClick={() => logout()}><i className="fas fa-power-off"></i></li>
+                    </ul>
+                </div>
+            </div>
+
+            <div className="content">
                 <h1>Boeken beheren <button type="button" onClick={() => setShowModal(true)} className="btn btn-success btn-add">Toevoegen</button></h1>
 
                 <div className="DataTable_Container">

ras/frontend/src/views/dashboard.js

@@ -3,9 +3,10 @@ import Genres from "../components/Genres";
 import Books from "../components/Books";
 import Ratings from "../components/Ratings";
 import Stats from "../components/Stats";
-import Challenge from "../components/Challenge";
 import * as moment from 'moment';
 import "../components/DataTables.css";
+import Readed from "../components/Readed.js";
+import Sidebar from "../components/Sidebar.js";
 moment.locale('nl');
 
 const Dashboard = (props) => {
@@ -24,8 +25,19 @@ const Dashboard = (props) => {
         setReadingYears(getYears);
 
         const getbooks = await data.getBooksByYear(year);
-        setBooks(getbooks);
+        var months = [];
 
+        for(var i = 1; i < 13; i++){
+            months[i] = [];
+
+            getbooks.forEach(book => {
+                if(moment(book.readed).format("M") == i){
+                    months[i].push(book);
+                }
+            });
+        }
+        
+        setBooks(getbooks);
         functions.initDataTable();
     }
 
@@ -40,25 +52,13 @@ const Dashboard = (props) => {
 
     return (
         <React.Fragment>
+            <Sidebar />
             <div className="topbar">
                 <img className="logo" src="/static/images/logo_white.png" />
-                <div className="chooseYear">
-                    <i className="fa fa-calendar"></i>
-                    <span className="stats-number" style={{ marginRight: '0px' }}>
-                        <select className="yearselector" value={year} onChange={(event) => setYear(event.target.value)}>
-                            {readingYears.map((year, i) => {
-                                return (<option key={i} value={year}>{year}</option>)
-                            })}
-                            {!readingYears.includes(currentyear) ? <option key={currentyear} value={currentyear}>{currentyear}</option> : ''}
-                        </select>
-                    </span>
-                </div>
 
                 <div className="topbar_right">
                     <ul>
-                        <li><i className="fas fa-book" onClick={() => {setShowModal(true)}}></i></li>
+                        <li className="currentUser"><i class="fas fa-user-circle"></i> {localStorage.getItem('name')}</li>
-                        {/* <li style={{ borderRight: "solid 1px rgba(255,255,255,0.5)", paddingRight: '20px' }}><i className="fas fa-tasks"></i></li> */}
-                        <li onClick={() => logout()}><i className="fas fa-power-off"></i></li>
                     </ul>
                 </div>
             </div>
@@ -67,72 +67,35 @@ const Dashboard = (props) => {
                 <div className="container-fluid">
                     <div className="row">
                         <div className="col-md-8">
-                            <Stats year={year} />
+                            <div className="row">
-                            {/* <Challenge year={year} /> */}
+                                <div className="col-md-4 col-sm-4">
+                                    <div className="stat-block">
+                                    <i className="fa fa-calendar"></i>  
+                                        <span className="stats-label">Selecteer jaar:</span>
+                                        <span className="stats-number">
+                                        <select className="yearselector" value={year} onChange={(event) => setYear(event.target.value)}>
+                                            {readingYears.map((year, i) => {
+                                                return (<option key={i} value={year}>{year}</option>)
+                                            })}
+                                            {!readingYears.includes(currentyear) ? <option key={currentyear} value={currentyear}>{currentyear}</option> : ''}
+                                        </select>
+                                        </span>
+                                    </div>
+                                </div>
+                                <Stats year={year} />
+                            </div>
+                            
                             <Books year={year} />
                         </div>
 
                         <div className="col-md-4">
-                            
                             <Genres year={year} />
                             <Ratings year={year} />
                         </div>
                     </div>
                 </div>
 
-                <div style={{ display: showModal === true ? 'block' : 'none' }} className="modal modal-books" tabIndex="-1" role="dialog">
+                {showModal && (<Readed year={year} />)}
-                    <div className="modal-dialog" role="document">
-                        <div className="modal-content">
-                            <button type="button" onClick={() => { setShowModal(false) }} className="close" data-dismiss="modal" aria-label="Close">
-                                <i className="fas fa-times-circle"></i>
-                            </button>
-                            <div className="DataTable_Container">
-                                <table id="DataTable" className="showHead table responsive nowrap" width="100%">
-                                    <thead>
-                                        <tr>
-                                            <th>Gelezen boeken</th>
-                                            <th></th>
-                                            <th></th>
-                                            <th></th>
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        {books.map((book, i) => {
-                                            var dotcolor = '';
-
-                                            if(book.genre === "Thriller"){
-                                                dotcolor = '#404e67';
-                                            }else if (book.genre === "Roman"){
-                                                dotcolor = '#01a9ac';
-                                            }else if(book.genre === 'Non-fictie'){
-                                                dotcolor = '#64c5b1';
-                                            }else{
-                                                dotcolor = '#1ABB9C';
-                                            }
-
-                                            return (
-                                                <tr key={book.id}>
-                                                    <td>
-                                                        <div className="dotgenre" style={{ display: 'inline-block', verticalAlign: 'top', marginTop: '5px', marginRight: '10px', width: '10px', height: '10px', borderRadius: '100%', background: dotcolor }}></div> 
-                                                        <div className="book-info" style={{ display: 'inline-block', verticalAlign: 'top' }}>
-                                                            {book.name}
-                                                            <div style={{ color: '#777' }} className="book-author">{book.author}</div>
-                                                        </div>
-                                                    </td>
-                                                    <td><i className='fas fa-star'></i> {book.rating}</td>
-                                                    <td>{moment(book.readed).format("MMMM")}</td>
-                                                    <td style={{ textAlign: 'right' }}>
-                                                        <button onClick={() => delBook(book.id)} type="button" className="btn btn-danger"><i className="fa fa-trash"></i></button>
-                                                    </td>
-                                                </tr>
-                                            )
-                                        })}
-                                    </tbody>
-                                </table>
-                            </div>
-                        </div>
-                    </div>
-                </div>
             </div>
         </React.Fragment>
     )

ras/frontend/static/css/style.css

@@ -1,11 +1,15 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
 html, body{
-    background:#f8f8fa;
+    background:#fafdfb;
     margin:0;
     padding:0;
-    font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+    /* font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; */
+    font-family: "Poppins", sans-serif;
     letter-spacing: .3px;
     font-weight: 400;
-    font-size: 12px;
+    font-size: 14px;
     color:#333;
   }
 
@@ -27,7 +31,7 @@ html, body{
 
 
   .content{
-    padding: 30px;
+    padding: 110px 30px 30px 100px;
   }
 
   .content-manage{
@@ -125,9 +129,11 @@ html, body{
   .books-per-month, .genresPercent, .books-per-country, .book, .ratings, .readed{
     background: #ffffff;
     padding: 20px;
-    -webkit-box-shadow: 0px 1px 1px 1px #eee;
+    -webkit-box-shadow: 0 .15rem 1.75rem 0 rgba(58, 59, 69 .15);
-    box-shadow: 0px 1px 1px 1px #eee;
+    box-shadow: 0 .15rem 1.75rem 0 rgba(58, 59, 69, .15);
     margin-bottom: 20px;
+    border-radius: 10px;
+    padding:30px;
   }
 
   .book .book-icon{
@@ -158,12 +164,11 @@ html, body{
   }
 
   .sidebar{
-    background: #343d50;
+    background: #333333;
-    z-index:1;
+    width: 70px;
-    width: 200px;
     height: 100vh;
     position: fixed;
-    padding-top: 10px;
+    padding-top: 67px;
   }
 
   .sidebar span{
@@ -239,7 +244,6 @@ html, body{
 .sidebar ul{
     padding:0;
     margin:0;
-    margin-top:10px;
 }
 
 .sidebar ul li{
@@ -248,7 +252,8 @@ html, body{
     font-weight: 300;
     cursor: pointer;
     font-size: 12px;
-    padding: 15px 25px;
+    padding: 20px 0px;
+    text-align: center;
 }
 
 .sidebar ul .active li{
@@ -259,19 +264,25 @@ html, body{
     margin-right:5px;
     color: rgba(255,255,255,0.5);
     width:15px;
+    font-size: 15px;
 }
 
 .sidebar ul a{
     text-decoration: none;
 }
 
+.sidebar button{
+  background: none;
+  border: none;
+}
+
 .sidebar ul .active li {
   color: #ffffff;
   background: rgba(0,0,0,0.3) !important;
 }
 
 .sidebar ul .active li i {
-  color: #48a5a9;
+  color: #ffffff;
 }
 
 .sidebar .bottom-menu{
@@ -301,10 +312,14 @@ html, body{
 
   .books-stats .stat-block, .stat-block{
     background: #ffffff;
-    -webkit-box-shadow: 0px 1px 1px 1px #eee;
+    -webkit-box-shadow: 0 .15rem 1.75rem 0 rgba(58, 59, 69, .15);
-    box-shadow: 0px 1px 1px 1px #eee;
+    box-shadow: 0 .15rem 1.75rem 0 rgba(58, 59, 69, .15);
+    border-radius: 10px;
+    padding:30px !important;
     padding: 15px 5px;
-    color: #333;
+    color: #777;
+    font-weight: 300;
+    font-size: 14px;
     text-align: center;
     margin-bottom: 20px;
   }
@@ -321,7 +336,7 @@ html, body{
   }
 
   .chooseYear i{
-    color: rgba(255,255,255,0.5);
+    color: #ffffff;
     font-size:13px;
   }
 
@@ -339,25 +354,24 @@ html, body{
 
   .stat-block i{
     font-weight: 900;
-    font-size: 22px;
+    font-size: 30px;
     border-radius: 50%;
     padding: 11px;
     width: 50px;
     height: 50px;
     line-height: 30px;
     text-align: center;
-    background: #343d50;
+    color: #405181;
-    color:#ffffff;
     float:left;
     margin-left:15px;
   }
 
   .col-md-4:nth-child(2) .stat-block i{
-    background:#01a9ac;
+    color:#01a9ac;
   }
 
   .col-md-4:nth-child(3) .stat-block i{
-    background:#ffbe0e;
+    color:#64c5b1;
   }
 
   .books-stats .stat-block .stats-number, .stats-number{
@@ -371,6 +385,7 @@ html, body{
 
   .books-stats .stat-block .stats-label, .stats-label{
     display: block;
+    margin-bottom:5px;
   }
 
   .yearselector{
@@ -421,15 +436,14 @@ html, body{
   }
 
   span.block_name{
-    color: #333;
+    color: #777;
-    font-weight: 500;
+    font-weight: 300;
     border-bottom: solid 1px #f5f6fa;
     width: 100%;
     display: block;
     padding-bottom: 10px;
     margin-bottom: 10px;
-    letter-spacing: 0px;
+    font-size: 14px;
-    font-size: 13px;
   }
 
   .stat-block .progress{
@@ -628,11 +642,11 @@ html, body{
 }
 
 .topbar{
-  background: #343d50;
+  background: #405181;
   width: 100%;
   min-height: 50px;
-  box-shadow: 0px 1px 1px 1px #eee;
   padding-left:30px;
+  position: fixed;
 }
 
 .topbar .logo{
@@ -643,7 +657,7 @@ html, body{
 
 .topbar_right{
   float:right;
-  padding: 25px 0;
+  padding: 23px 0;
   margin-right: 30px;
 }
 
@@ -659,7 +673,7 @@ html, body{
 }
 
 .topbar_right ul li i{
-  color: rgba(255,255,255,0.5);
+  color: #ffffff;
   font-size: 14px;
 }
 
@@ -721,7 +735,15 @@ html, body{
   margin:auto;
 }
 
+.currentUser{
+  color:#ffffff;
+}
 
+.currentUser i{
+  margin-right:5px;
+  font-size: 20px !important;
+  vertical-align: middle;
+}
 
 
 

ras/frontend/static/js/src_Functions_js.js

@@ -1,2 +1,2 @@
 /*! For license information please see src_Functions_js.js.LICENSE.txt */
-"use strict";(self.webpackChunkfrontend=self.webpackChunkfrontend||[]).push([["src_Functions_js"],{"./src/Functions.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   "initDataTable": () => (/* binding */ initDataTable),\n/* harmony export */   "readCookie": () => (/* binding */ readCookie)\n/* harmony export */ });\n/* harmony import */ var datatables_net_dt__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! datatables.net-dt */ "./node_modules/datatables.net-dt/js/dataTables.dataTables.mjs");\n\nconst readCookie = name => {\n  var nameEQ = name + "=";\n  var ca = document.cookie.split(\';\');\n  for (var i = 0; i < ca.length; i++) {\n    var c = ca[i];\n    while (c.charAt(0) == \' \') c = c.substring(1, c.length);\n    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n  }\n  return null;\n};\nconst initDataTable = () => {\n  let table = new datatables_net_dt__WEBPACK_IMPORTED_MODULE_0__["default"](\'#DataTable\');\n  table.destroy();\n  setTimeout(() => {\n    table = new datatables_net_dt__WEBPACK_IMPORTED_MODULE_0__["default"](\'#DataTable\', {\n      autoWidth: true,\n      language: {\n        url: \'https://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Dutch.json\',\n        search: "",\n        searchPlaceholder: "Zoeken"\n      },\n      dom: \'rt<"bottom"pl><"clear">\',\n      order: []\n    });\n  }, 300);\n};\n\n//# sourceURL=webpack://frontend/./src/Functions.js?')}}]);
+"use strict";(self.webpackChunkfrontend=self.webpackChunkfrontend||[]).push([["src_Functions_js"],{"./src/Functions.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   "initDataTable": () => (/* binding */ initDataTable),\n/* harmony export */   "readCookie": () => (/* binding */ readCookie)\n/* harmony export */ });\n/* harmony import */ var datatables_net_dt__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! datatables.net-dt */ "./node_modules/datatables.net-dt/js/dataTables.dataTables.mjs");\n\nconst readCookie = name => {\n  var nameEQ = name + "=";\n  var ca = document.cookie.split(\';\');\n  for (var i = 0; i < ca.length; i++) {\n    var c = ca[i];\n    while (c.charAt(0) == \' \') c = c.substring(1, c.length);\n    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n  }\n  return null;\n};\nconst initDataTable = () => {\n  let table = new datatables_net_dt__WEBPACK_IMPORTED_MODULE_0__["default"](\'#DataTable\');\n  table.destroy();\n  setTimeout(() => {\n    table = new datatables_net_dt__WEBPACK_IMPORTED_MODULE_0__["default"](\'#DataTable\', {\n      autoWidth: true,\n      language: {\n        url: \'https://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Dutch.json\',\n        search: "",\n        searchPlaceholder: "Zoeken"\n      },\n      dom: \'rt<"bottom"p><"clear">\',\n      order: []\n    });\n  }, 300);\n};\n\n//# sourceURL=webpack://frontend/./src/Functions.js?')}}]);

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

@@ -14,10 +14,10 @@
   !*** ./src/components/Genres.js ***!
   \**********************************/
 
+/*!**********************************!*\
+  !*** ./src/components/Readed.js ***!
+  \**********************************/
+
 /*!***********************************!*\
   !*** ./src/components/Ratings.js ***!
   \***********************************/
-
-/*!*************************************!*\
-  !*** ./src/components/Challenge.js ***!
-  \*************************************/