create static homepage,

create VideoPlayer and Title Components
This commit is contained in:
Ahmed-Ayman 2018-12-06 20:33:29 +02:00
parent 34f39d0253
commit 3a42fee6e2
10 changed files with 136 additions and 30 deletions

View File

@ -7,6 +7,7 @@ import TopicsList from './containers/TopicsList';
import store from './store/configureStore'; import store from './store/configureStore';
import Header from "./components/Header"; import Header from "./components/Header";
import Footer from "./components/Footer"; import Footer from "./components/Footer";
import Search from "./components/Search";
class App extends Component { class App extends Component {
render() { render() {
@ -15,6 +16,7 @@ class App extends Component {
<div className="App"> <div className="App">
<Header/> <Header/>
<Search/>
<Route exact={true} path="/" component={Home}/> <Route exact={true} path="/" component={Home}/>
<Route path="/topics" component={TopicsList}/> <Route path="/topics" component={TopicsList}/>
<Footer/> <Footer/>

View File

@ -1,9 +1,25 @@
import React from 'react'; import React from 'react';
class RandomDate extends React.Component{ import Grid from 'react-css-grid';
render(){ import VideoItem from "./VideoItem";
return( import SectionHeading from "./SectionHeading";
'hello Dandom Date!'
) class RandomDate extends React.Component {
render() {
return (
<section>
<SectionHeading title="Random Date"/>
<Grid
width={450}
gap={24}>
<VideoItem/>
<VideoItem/>
<VideoItem/>
<VideoItem/>
</Grid>
</section>
)
}
} }
}
export default (RandomDate); export default (RandomDate);

View File

@ -1,22 +1,20 @@
import React from 'react'; import React from 'react';
import VideoItem from "./VideoItem"; import VideoItem from "./VideoItem";
import Grid from 'react-css-grid' import Grid from 'react-css-grid'
import SectionHeading from "./SectionHeading";
class RandomLocation extends React.Component { class RandomLocation extends React.Component {
render() { render() {
const Location =()=>{
return 'Location Name';
}
return ( return (
<section> <section>
<Location/> <SectionHeading title="Random Location"/>
<Grid <Grid
width={320} width={225}
gap={24}> gap={24}>
<VideoItem/> <VideoItem/>
<VideoItem/> <VideoItem/>
<VideoItem/> <VideoItem/>
<VideoItem/>
</Grid> </Grid>
</section> </section>
) )

View File

@ -1,18 +1,25 @@
import Grid from 'react-css-grid' import Grid from 'react-css-grid'
import React from 'react'; import React from 'react';
import VideoItem from "./VideoItem"; import VideoItem from "./VideoItem";
import SectionHeading from "./SectionHeading";
class RandomTopic extends React.Component { class RandomTopic extends React.Component {
render() { render() {
return ( return (
<Grid <section>
width={320} <SectionHeading title="Topic Name"/>
gap={24}> <Grid
<VideoItem/> width={450}
<VideoItem/> gap={16}>
<VideoItem/> <VideoItem/>
<VideoItem/> <VideoItem/>
</Grid> <VideoItem/>
<VideoItem/>
</Grid>
<a href="/topics">See All videos</a>
</section>
) )
} }

View File

@ -0,0 +1,15 @@
import React from 'react';
/**
* a section heading is any heading that needs the style of having a horizontal line underneath it.
* it could be the Topics Heading/Title, Date..etc.
*/
class SectionHeading extends React.Component {
render() {
return (
<h2 className="section-title">{this.props.title}</h2>
)
}
}
export default (SectionHeading);

View File

@ -1,12 +1,14 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import {getThumbnail} from '../utils/video';
class VideoItem extends React.Component { class VideoItem extends React.Component {
render() { render() {
return ( return (
<section className="video-item"> <section className="video-item">
<img className="video-thumbnail" src={require('../assets/images/img2.png')} alt=""/> <section className="video-thumbnail-container">
<img className="video-thumbnail" src={require('../assets/images/img2.png')} alt=""/>
</section>
<h3 className="video-title">Random Title</h3> <h3 className="video-title">Random Title</h3>
</section> </section>
) )

View File

@ -0,0 +1,15 @@
import React from 'react';
class VideoPlayer extends React.Component {
render() {
return (
<section>
<video>
</video>
</section>
)
}
}
export default (VideoPlayer);

View File

@ -16,7 +16,6 @@ class Home extends React.Component {
render() { render() {
return ( return (
<div> <div>
<Search/>
<RandomTopic/> <RandomTopic/>
<RandomLocation/> <RandomLocation/>
<RandomDate/> <RandomDate/>

View File

@ -1,11 +1,22 @@
import React, { Component } from 'react'; import React from 'react';
import VideoItem from "../components/VideoItem";
import Grid from "react-css-grid";
import SectionHeading from "../components/SectionHeading";
class TopicsList extends React.Component { class TopicsList extends React.Component {
render() { render() {
return ( return (
<div> <section>
This is topics list. <SectionHeading title="Random Topic"/>
</div> <Grid
width={450}
gap={24}>
<VideoItem/>
<VideoItem/>
<VideoItem/>
<VideoItem/>
</Grid>
</section>
); );
} }
} }

View File

@ -45,6 +45,12 @@
--858-light-gray-color: #ebebeb; --858-light-gray-color: #ebebeb;
} }
/* App */
.App {
max-width: 960px;
margin: 0 auto;
}
/* header */ /* header */
header { header {
padding-top: 1em; padding-top: 1em;
@ -65,6 +71,8 @@ header {
/* search */ /* search */
.search-button { .search-button {
background: white; background: white;
bottom: -18px;
position: relative;
} }
.search-button img { .search-button img {
@ -73,12 +81,45 @@ header {
.search-box { .search-box {
padding: 1em; padding: 1em;
width: 50%;
background: var(--858-light-gray-color); background: var(--858-light-gray-color);
} }
.search-box::placeholder { .search-box::placeholder {
color: black; color: black;
text-align: center;
font-size: 1.5em;
color: gray;
} }
.video-thumbnail{ @media screen and (max-width: 700px){
.search-box::placeholder {
font-size: 1em;
}
}
@media screen and (max-width: 400px){
.search-box::placeholder {
font-size: .75em;
}
}
/* Video item*/
.video-thumbnail {
max-width: 300px; max-width: 300px;
transition: all .4s ease-in-out;
}
.video-thumbnail:hover {
transform: scale(1.1);
}
.video-thumbnail-container {
position: relative;
overflow: hidden;
}
/* section heading*/
.section-title {
border-bottom: 2px dotted black;
padding: 1em;
margin-bottom: 1em;
position: relative;
} }