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

View File

@ -1,9 +1,25 @@
import React from 'react';
class RandomDate extends React.Component{
render(){
return(
'hello Dandom Date!'
import Grid from 'react-css-grid';
import VideoItem from "./VideoItem";
import SectionHeading from "./SectionHeading";
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);

View File

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

View File

@ -1,18 +1,25 @@
import Grid from 'react-css-grid'
import React from 'react';
import VideoItem from "./VideoItem";
import SectionHeading from "./SectionHeading";
class RandomTopic extends React.Component {
render() {
return (
<section>
<SectionHeading title="Topic Name"/>
<Grid
width={320}
gap={24}>
width={450}
gap={16}>
<VideoItem/>
<VideoItem/>
<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 PropTypes from 'prop-types';
import {getThumbnail} from '../utils/video';
class VideoItem extends React.Component {
render() {
return (
<section className="video-item">
<section className="video-thumbnail-container">
<img className="video-thumbnail" src={require('../assets/images/img2.png')} alt=""/>
</section>
<h3 className="video-title">Random Title</h3>
</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() {
return (
<div>
<Search/>
<RandomTopic/>
<RandomLocation/>
<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 {
render() {
return (
<div>
This is topics list.
</div>
<section>
<SectionHeading title="Random Topic"/>
<Grid
width={450}
gap={24}>
<VideoItem/>
<VideoItem/>
<VideoItem/>
<VideoItem/>
</Grid>
</section>
);
}
}

View File

@ -45,6 +45,12 @@
--858-light-gray-color: #ebebeb;
}
/* App */
.App {
max-width: 960px;
margin: 0 auto;
}
/* header */
header {
padding-top: 1em;
@ -65,6 +71,8 @@ header {
/* search */
.search-button {
background: white;
bottom: -18px;
position: relative;
}
.search-button img {
@ -73,12 +81,45 @@ header {
.search-box {
padding: 1em;
width: 50%;
background: var(--858-light-gray-color);
}
.search-box::placeholder {
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;
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;
}