Merge branch 'feature/thumb-aspect-ratio' of 858/frontend into develop

This commit is contained in:
sanj 2019-01-22 14:11:27 +00:00 committed by Gitea
commit ffbef3c915
8 changed files with 58 additions and 11 deletions

View File

@ -14,7 +14,7 @@
"react-redux": "^5.1.1", "react-redux": "^5.1.1",
"react-router": "^4.3.1", "react-router": "^4.3.1",
"react-router-dom": "^4.3.1", "react-router-dom": "^4.3.1",
"react-scripts": "2.1.1", "react-scripts": "^2.1.3",
"redux": "^4.0.1", "redux": "^4.0.1",
"redux-logger": "^3.0.6", "redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0", "redux-thunk": "^2.3.0",

13
src/components/Loading.js Normal file
View File

@ -0,0 +1,13 @@
import React from 'react';
class Loading extends React.Component{
render(){
return(
<div className="loading">
<span></span>
<span></span>
<span></span>
</div>
)
}
}
export default Loading;

View File

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import Grid from "react-css-grid"; import Grid from "react-css-grid";
import Loading from "../components/Loading";
import VideoItem from "../components/VideoItem"; import VideoItem from "../components/VideoItem";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import {getSearchResults} from "../actions/search"; import {getSearchResults} from "../actions/search";
@ -19,13 +20,18 @@ class Results extends React.Component {
render() { render() {
// console.log('results', this.props.searchResults); // console.log('results', this.props.searchResults);
return ( return (
<Grid className="random-topics" <div>
width={220} <Grid className="random-topics"
gap={12}> width={220}
{this.props.searchResults && this.props.searchResults.map(video => gap={12}>
<VideoItem id={video.id} key={video.id} title={video.title}/> {this.props.loadingResults && (
)} <Loading />
</Grid> )}
{this.props.searchResults && this.props.searchResults.map(video =>
<VideoItem id={video.id} key={video.id} title={video.title}/>
)}
</Grid>
</div>
); );
} }
} }
@ -34,7 +40,8 @@ const mapStateToProps = state => ({
searchResults: state.results.currentItems, searchResults: state.results.currentItems,
currentKey: state.results.currentKey, currentKey: state.results.currentKey,
currentValue: state.results.currentValue, currentValue: state.results.currentValue,
currentQuery: state.results.queryParams currentQuery: state.results.queryParams,
loadingResults: state.results.loadingResults
}); });
const mapDispatchToProps = dispatch => ({ const mapDispatchToProps = dispatch => ({

View File

@ -7,11 +7,11 @@ export default function(state={}, action) {
switch (action.type) { switch (action.type) {
case START_LOADING_ALL_RESULTS: case START_LOADING_ALL_RESULTS:
return Object.assign({}, state, { loadingAllTopics: true }); return Object.assign({}, state, { loadingResults: true });
case LOADED_ALL_RESULTS: case LOADED_ALL_RESULTS:
return Object.assign({}, state, { return Object.assign({}, state, {
loadingAllTopics: false, loadingResults: false,
currentItems: action.payload currentItems: action.payload
}); });

View File

@ -0,0 +1,24 @@
@import "variables";
/* loader */
.loading {
span {
background: $dark-gray-color;
border-radius: 50%;
margin: 2em 0.2em;
width: 12px;
height: 12px;
display: inline-block;
scale: 1;
animation: loading-animation 2s linear infinite forwards;
@keyframes loading-animation {
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
}
}

View File

@ -4,6 +4,7 @@
@import "nav"; @import "nav";
@import "search"; @import "search";
@import "random-item"; @import "random-item";
@import "loading";
@import "video-item"; @import "video-item";
@import "video-player"; @import "video-player";
@import "footer"; @import "footer";

View File

@ -1,2 +1,3 @@
$dark-gray-color: #777;
$light-gray-color: #eaeaea; $light-gray-color: #eaeaea;
$normal-link-color: blue; $normal-link-color: blue;

View File

@ -12,6 +12,7 @@
.video-thumbnail { .video-thumbnail {
width: 100%; width: 100%;
max-height: 150px; max-height: 150px;
object-fit: cover;
transition: all .4s ease-in-out; transition: all .4s ease-in-out;
} }