refactor the css to be global for all the random sections

This commit is contained in:
Ahmed-Ayman 2018-12-28 10:49:56 +02:00
parent 4a2372802e
commit 0ed16ffe29
5 changed files with 86 additions and 37 deletions

View File

@ -1,25 +1,69 @@
import Grid from 'react-css-grid'
import React from 'react'; import React from 'react';
import Grid from 'react-css-grid'; import PropTypes from 'prop-types';
import VideoItem from "./VideoItem"; import VideoItem from "./VideoItem";
import SectionHeading from "./SectionHeading"; import RandomItemTitle from "./SectionHeading";
import {Link} from 'react-router-dom';
class RandomDate extends React.Component { class RandomDate extends React.Component {
render() {
shuffleDate() {
this.props.getRandomDateVideos(this.props.allDates);
}
render() {
return ( return (
<section> <section className="random-item-container">
<SectionHeading title="Random Date"/> <h2 className="section-heading">
<span className="arabic-text random-section-title">من أماكن الارشيف</span>
<br/>
<span className="section-title">
<span className='english-text bold-english-text random-section-title'> Dates from the archive
</span>
</span>
</h2>
<Grid <Grid
width={220} width={450}
gap={12}> >
<VideoItem/> {/* View all dates button*/}
<VideoItem/> <Link className="view-items-link" to="/dates">
<VideoItem/> <button className="view-all-items">
<VideoItem/> <span className="english-text"> all dates &nbsp; </span>
<span className="arabic-text"> جميع الأماكن </span>
</button>
</Link>
{/* Shuffle button */}
<button className="shuffle-button" onClick={this.shuffleDate.bind(this)}>
<span className="english-text">Shuffle Dates - </span>
<span className="arabic-text"> مكان عشوائي </span>
<i className="fa fa-random"></i>
</button>
</Grid> </Grid>
<Grid className="random-dates"
width={220}
gap={12}>
{/*{this.props.videos.map(video =>*/}
{/*<VideoItem id={video.id} key={video.id} title={video.title}/>*/}
{/*)}*/}
</Grid>
<RandomItemTitle title={this.props.dateName}
count={this.props.dateCount}
src={'/results/date/' + this.props.dateName}
/>
</section> </section>
) )
} }
} }
RandomDate.propTypes = {
dateName: PropTypes.string,
allDates: PropTypes.array,
videos: PropTypes.array,
loading: PropTypes.bool,
dateCount: PropTypes.number,
getRandomDateVideos: PropTypes.func
};
export default (RandomDate); export default (RandomDate);

View File

@ -13,26 +13,29 @@ class RandomPlace extends React.Component {
render() { render() {
return ( return (
<section> <section className="random-item-container">
<h2 className="section-heading">from the Archive Places - من مواضيع الارشيف</h2> <h2 className="section-heading">
<RandomItemTitle title={this.props.placeName} <span className="arabic-text random-section-title">من أماكن الارشيف</span>
count={this.props.placeCount} <br/>
src={'/results/place/' + this.props.placeName} <span className="section-title">
/> <span className='english-text bold-english-text random-section-title'> Places from the archive
</span>
</span>
</h2>
<Grid <Grid
width={450} width={450}
> >
{/* View all places button*/} {/* View all places button*/}
<Link to="/places"> <Link className="view-items-link" to="/places">
<button className="view-all-places"> <button className="view-all-items">
<span className="english-text">All Places - </span> <span className="english-text"> all places &nbsp; </span>
<span className="arabic-text"> جميع الأماكن </span> <span className="arabic-text"> جميع الأماكن </span>
</button> </button>
</Link> </Link>
{/* Shuffle button */} {/* Shuffle button */}
<button className="shuffle-button" onClick={this.shufflePlace.bind(this)}> <button className="shuffle-button" onClick={this.shufflePlace.bind(this)}>
<span className="english-text">Shuffle Places - </span> <span className="english-text">Shuffle Places - </span>
<span className="arabic-text"> موضوع عشوائي </span> <span className="arabic-text"> مكان عشوائي </span>
<i className="fa fa-random"></i> <i className="fa fa-random"></i>
</button> </button>
</Grid> </Grid>
@ -44,6 +47,10 @@ class RandomPlace extends React.Component {
<VideoItem id={video.id} key={video.id} title={video.title}/> <VideoItem id={video.id} key={video.id} title={video.title}/>
)} )}
</Grid> </Grid>
<RandomItemTitle title={this.props.placeName}
count={this.props.placeCount}
src={'/results/place/' + this.props.placeName}
/>
</section> </section>
) )

View File

@ -5,6 +5,7 @@ import VideoItem from "./VideoItem";
import RandomItemTitle from "./SectionHeading"; import RandomItemTitle from "./SectionHeading";
import {Link} from 'react-router-dom'; import {Link} from 'react-router-dom';
// Refactor
class RandomTopic extends React.Component { class RandomTopic extends React.Component {
shuffleTopic() { shuffleTopic() {
@ -13,13 +14,13 @@ class RandomTopic extends React.Component {
render() { render() {
return ( return (
<section className="random-topic"> <section className="random-item-container">
<h2 className="section-heading"> <h2 className="section-heading">
<span className="arabic-text random-section-title">من مواضيع الارشيف</span> <span className="arabic-text random-section-title">من مواضيع الارشيف</span>
<br/> <br/>
{/*<span className="english-text bold-english-text">topics from the Archive </span>*/} {/*<span className="english-text bold-english-text">topics from the Archive </span>*/}
<span className="section-title"> <span className="section-title">
<span className='english-text bold-english-text'> topics from the archive <span className='english-text bold-english-text random-section-title'> topics from the archive
</span> </span>
</span> </span>
</h2> </h2>
@ -29,9 +30,9 @@ class RandomTopic extends React.Component {
width={450} width={450}
> >
{/* View all topics button*/} {/* View all topics button*/}
<Link className="view-topics-link" to="/topics"> <Link className="view-items-link" to="/topics">
<button className="view-all-topics"> <button className="view-all-items">
<span className="english-text"> all topics &nbsp; </span> <span className="english-text"> all topics &nbsp; </span>
<span className="arabic-text"> جميع المواضيع </span> <span className="arabic-text"> جميع المواضيع </span>
</button> </button>
</Link> </Link>

View File

@ -5,12 +5,10 @@
.section-subheading { .section-subheading {
padding-top: 2em; padding-top: 2em;
} }
// TODO: Refactor
.section-title { .section-title {
//padding-top: 1em;
line-height: 0.5; line-height: 0.5;
text-align: center; text-align: center;
//padding: 1em;
} }
// the bottom section // the bottom section
@ -50,20 +48,20 @@ h3.section-title {
bottom: -3px; bottom: -3px;
} }
// TODO: Refactor
// buttons // buttons
.random-topic { .random-item-container {
button { button {
background: white; background: white;
} }
// topics // view all and shuffle button
.view-topics-link { .view-items-link {
justify-self: left; justify-self: left;
bottom: 36px; bottom: 36px;
position: relative; position: relative;
padding: 0px; padding: 0px;
} }
.view-all-topics { .view-all-items {
left: 0; left: 0;
//position: absolute; //position: absolute;
justify-self: left; justify-self: left;
@ -81,7 +79,7 @@ h3.section-title {
} }
// fonts // fonts
.shuffle-button, .view-all-topics { .shuffle-button, .view-all-items {
span.arabic-text { span.arabic-text {
font-size: 18px; font-size: 18px;
} }

View File

@ -7,7 +7,6 @@
background: $light-gray-color; background: $light-gray-color;
min-height: 300px; min-height: 300px;
padding: 1em; padding: 1em;
} }
.video-thumbnail { .video-thumbnail {