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 Grid from 'react-css-grid';
import PropTypes from 'prop-types';
import VideoItem from "./VideoItem";
import SectionHeading from "./SectionHeading";
import RandomItemTitle from "./SectionHeading";
import {Link} from 'react-router-dom';
class RandomDate extends React.Component {
render() {
shuffleDate() {
this.props.getRandomDateVideos(this.props.allDates);
}
render() {
return (
<section>
<SectionHeading title="Random Date"/>
<section className="random-item-container">
<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
width={450}
>
{/* View all dates button*/}
<Link className="view-items-link" to="/dates">
<button className="view-all-items">
<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 className="random-dates"
width={220}
gap={12}>
<VideoItem/>
<VideoItem/>
<VideoItem/>
<VideoItem/>
{/*{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>
)
}
}
RandomDate.propTypes = {
dateName: PropTypes.string,
allDates: PropTypes.array,
videos: PropTypes.array,
loading: PropTypes.bool,
dateCount: PropTypes.number,
getRandomDateVideos: PropTypes.func
};
export default (RandomDate);

View File

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

View File

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

View File

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

View File

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