aspect ratio for thumbnails, loading behaviour

This commit is contained in:
imohkay 2019-01-22 16:33:36 +05:30
parent ba28a48fc9
commit a1fc6ef6e7
8 changed files with 58 additions and 11 deletions

View File

@ -14,7 +14,7 @@
"react-redux": "^5.1.1",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.1",
"react-scripts": "^2.1.3",
"redux": "^4.0.1",
"redux-logger": "^3.0.6",
"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 Grid from "react-css-grid";
import Loading from "../components/Loading";
import VideoItem from "../components/VideoItem";
import PropTypes from "prop-types";
import {getSearchResults} from "../actions/search";
@ -19,13 +20,18 @@ class Results extends React.Component {
render() {
// console.log('results', this.props.searchResults);
return (
<div>
<Grid className="random-topics"
width={220}
gap={12}>
{this.props.loadingResults && (
<Loading />
)}
{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,
currentKey: state.results.currentKey,
currentValue: state.results.currentValue,
currentQuery: state.results.queryParams
currentQuery: state.results.queryParams,
loadingResults: state.results.loadingResults
});
const mapDispatchToProps = dispatch => ({

View File

@ -7,11 +7,11 @@ export default function(state={}, action) {
switch (action.type) {
case START_LOADING_ALL_RESULTS:
return Object.assign({}, state, { loadingAllTopics: true });
return Object.assign({}, state, { loadingResults: true });
case LOADED_ALL_RESULTS:
return Object.assign({}, state, {
loadingAllTopics: false,
loadingResults: false,
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 "search";
@import "random-item";
@import "loading";
@import "video-item";
@import "video-player";
@import "footer";

View File

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

View File

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