From 5f86943496914a261556e5bde466a284bcae9aa3 Mon Sep 17 00:00:00 2001 From: matteo Date: Tue, 19 Feb 2019 01:16:25 +0100 Subject: [PATCH] migliorato lo stile --- src/App.js | 2 +- src/Suggestion.js | 26 +++++++------- src/VideoInfo.js | 4 ++- src/VideoList.js | 39 +++++++++++++++----- src/Wikipedia.js | 6 ++-- src/css/App.css | 72 +++++++++++++++++++++++++++++++++++-- src/reccomenders/Recent.js | 10 ++---- src/reccomenders/Search.js | 58 ++++++++++++++++-------------- src/reccomenders/fvitali.js | 8 ++--- 9 files changed, 159 insertions(+), 66 deletions(-) diff --git a/src/App.js b/src/App.js index 6e15b97..45d63d9 100644 --- a/src/App.js +++ b/src/App.js @@ -83,7 +83,7 @@ class App extends React.Component { - + diff --git a/src/Suggestion.js b/src/Suggestion.js index 11dc7ed..483309b 100644 --- a/src/Suggestion.js +++ b/src/Suggestion.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { Row } from 'react-bootstrap'; +import { Row, Col } from 'react-bootstrap'; import { Switch, Route } from 'react-router'; import Random from './reccomenders/Random'; import Related from './reccomenders/Related'; @@ -13,9 +13,9 @@ import Recent from './reccomenders/Recent'; class Suggestion extends Component { // static getDerivedStateFromProps(nextProps, prevState) { - + // } - + // componentDidMount() { // } @@ -35,18 +35,16 @@ class Suggestion extends Component { render() { return ( - - - - - - - + + + + + + - {/* lasciare questo per ultimo */} - - - + {/* lasciare questo per ultimo */} + + ); } diff --git a/src/VideoInfo.js b/src/VideoInfo.js index ddfd179..ac6dfbf 100644 --- a/src/VideoInfo.js +++ b/src/VideoInfo.js @@ -71,7 +71,9 @@ class VideoInfo extends React.Component { ); } else if (!isLoaded) { - return Loading...; + return
+
+
; } else { return ( diff --git a/src/VideoList.js b/src/VideoList.js index 5915df4..7126b56 100644 --- a/src/VideoList.js +++ b/src/VideoList.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Col, ListGroup, Card, CardDeck } from 'react-bootstrap'; // eslint-disable-line no-unused-vars +import { Col, ListGroup, Card, CardDeck, Media } from 'react-bootstrap'; // eslint-disable-line no-unused-vars import axios from 'axios'; // eslint-disable-line no-unused-vars import { Link } from 'react-router-dom'; // eslint-disable-line no-unused-vars /*eslint no-console: ["error", { allow: ["warn", "error", "info"] }] */ @@ -113,13 +113,9 @@ class VideoList extends React.Component { ); } else if (!isLoaded) { - return ( - - -

Loading...

- - - ); + return +
+ ; } else { return ( @@ -152,6 +148,33 @@ class VideoList extends React.Component { ))} + + + //
    { + // items.map(item => ( + // + // {'Thumbnail + // + //
    {item.artist} - {item.title}
    + //

    {item.category}

    + //     + // + // ))}
); } } diff --git a/src/Wikipedia.js b/src/Wikipedia.js index 6f0e3c3..68c6c49 100644 --- a/src/Wikipedia.js +++ b/src/Wikipedia.js @@ -3,7 +3,7 @@ import { Link } from 'react-router-dom'; import wikijs from 'wikijs'; import wdk from 'wikidata-sdk'; import axios from 'axios'; -import { Table } from 'react-bootstrap'; +import { Table, Col } from 'react-bootstrap'; import moment from 'moment'; import "./css/Wikipedia.css" @@ -220,7 +220,9 @@ class Wikipedia extends Component { if (error) { return Error: {error.message}; } else if (!this.state.isLoaded) { - return Loading...; + return +
+ ; } else { return (<> {/* {isWikiLoaded && wikipedia.desc} */} diff --git a/src/css/App.css b/src/css/App.css index f6fe2d3..c72b91a 100644 --- a/src/css/App.css +++ b/src/css/App.css @@ -1,5 +1,4 @@ .upperSection{ - display: fixed; } @@ -10,4 +9,73 @@ .downSection{ overflow-y: auto; overflow-x: hidden; -} \ No newline at end of file +} + +.suggItem:hover{ + background-color: #213241; + text-decoration: none; + /* color: */ +} +.suggItem:hover h5{ + color: #DF691A; +} +.suggItem p{ + color: #FFFFFF; +} + +/* LOADING ANIMATION */ +.lds-ellipsis { + display: inline-block; + position: relative; + width: 64px; + height: 64px; +} +.lds-ellipsis div { + position: absolute; + top: 27px; + width: 11px; + height: 11px; + border-radius: 50%; + background: #fff; + animation-timing-function: cubic-bezier(0, 1, 1, 0); +} +.lds-ellipsis div:nth-child(1) { + left: 6px; + animation: lds-ellipsis1 0.6s infinite; +} +.lds-ellipsis div:nth-child(2) { + left: 6px; + animation: lds-ellipsis2 0.6s infinite; +} +.lds-ellipsis div:nth-child(3) { + left: 26px; + animation: lds-ellipsis2 0.6s infinite; +} +.lds-ellipsis div:nth-child(4) { + left: 45px; + animation: lds-ellipsis3 0.6s infinite; +} +@keyframes lds-ellipsis1 { + 0% { + transform: scale(0); + } + 100% { + transform: scale(1); + } +} +@keyframes lds-ellipsis3 { + 0% { + transform: scale(1); + } + 100% { + transform: scale(0); + } +} +@keyframes lds-ellipsis2 { + 0% { + transform: translate(0, 0); + } + 100% { + transform: translate(19px, 0); + } +} diff --git a/src/reccomenders/Recent.js b/src/reccomenders/Recent.js index 331c5c8..81ede07 100644 --- a/src/reccomenders/Recent.js +++ b/src/reccomenders/Recent.js @@ -104,13 +104,9 @@ class Recent extends React.Component { ); } else if (!isLoaded) { - return ( - - -

Loading...

- - - ); + return +
+ ; } else { return ( diff --git a/src/reccomenders/Search.js b/src/reccomenders/Search.js index 4eb95d5..65e3c44 100644 --- a/src/reccomenders/Search.js +++ b/src/reccomenders/Search.js @@ -1,7 +1,7 @@ import React from 'react'; import axios from 'axios'; import { Link } from 'react-router-dom'; -import { Card, Col } from 'react-bootstrap'; +import { Card, Col, Media } from 'react-bootstrap'; class Search extends React.Component { @@ -44,7 +44,8 @@ class Search extends React.Component { // } componentDidUpdate(prevProps, prevState) { - if (prevProps.match.params.query !== this.props.match.params.query) + if (prevProps.match.params.query !== this.props.match.params.query) { + this.setState({ isLoaded: false }) if (new RegExp("[0-9A-Za-z_-]{10}[048AEIMQUYcgkosw]").test(this.props.match.params.query.toString())) axios.get('https://www.googleapis.com/youtube/v3/videos', { params: { @@ -68,6 +69,8 @@ class Search extends React.Component { ) else this.youtubeSearch(); + + } } // componentWillUnmount() { @@ -86,7 +89,7 @@ class Search extends React.Component { 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' } }).then( - res => + res => this.setState({ res: res.data, isLoaded: true @@ -102,31 +105,34 @@ class Search extends React.Component { if (this.state.error) { return {this.state.error.message} -- {this.state.error.response.data.error.errors[0].reason} ; } else if (!this.state.isLoaded) { - return Loading...; + return +
+ ; } else { return ( - - {this.state.res.items.map(item => ( - - - - - - {item.snippet.title} - - - - - - ))} - +
    { + this.state.res.items.map(item => ( + + {'Thumbnail + +
    {item.snippet.title}
    +

    {item.snippet.description}

    +

    Reccomender: Search

    +     + + )) + }
); } } diff --git a/src/reccomenders/fvitali.js b/src/reccomenders/fvitali.js index 29d386f..a4f07a6 100644 --- a/src/reccomenders/fvitali.js +++ b/src/reccomenders/fvitali.js @@ -79,11 +79,9 @@ class fvitali extends React.Component { ); } else if (!isLoaded) { return ( - - -

Loading...

- - + +
+ ); } else { return (