create all topics (button), shuffle (button), all videos (link)

This commit is contained in:
Ahmed-Ayman 2018-12-13 09:18:44 +02:00
parent 474000833c
commit 4c2a3361eb
7 changed files with 87 additions and 40 deletions

View File

@ -2,6 +2,7 @@ import React, {Component} from 'react';
import {Provider} from 'react-redux'; import {Provider} from 'react-redux';
import { ConnectedRouter } from 'connected-react-router' import { ConnectedRouter } from 'connected-react-router'
import './App.css'; import './App.css';
import 'font-awesome/css/font-awesome.min.css';
import { Route, Switch } from 'react-router-dom'; import { Route, Switch } from 'react-router-dom';
import Home from './containers/Home'; import Home from './containers/Home';
import TopicsList from './containers/TopicsList'; import TopicsList from './containers/TopicsList';

View File

@ -3,7 +3,6 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import VideoItem from "./VideoItem"; import VideoItem from "./VideoItem";
import RandomItemTitle from "./SectionHeading"; import RandomItemTitle from "./SectionHeading";
import { Link } from 'react-router-dom';
class RandomTopic extends React.Component { class RandomTopic extends React.Component {
@ -11,17 +10,35 @@ class RandomTopic extends React.Component {
return ( return (
<section> <section>
<h2 className="section-heading">from the Archive Topics - من مواضيع الارشيف</h2> <h2 className="section-heading">from the Archive Topics - من مواضيع الارشيف</h2>
<RandomItemTitle title={this.props.topicName}
count={this.props.topicCount}
src={'/topic/' + this.props.topicName}
/>
<Grid
width={450}
>
{/* View all topics button*/}
<button className="view-all-topics" onClick="">
<span className="english-text">All Topics - </span>
<span className="arabic-text"> جميع المواضيع </span>
<RandomItemTitle title={ </button>
this.props.topicName + ' (' +this.props.topicCount + ')'}/> {/* Shuffle button */}
<Grid className="random-topics" <button className="shuffle-button" onClick="">
width={220} <span className="english-text">Shuffle Topics - </span>
gap={12}> <span className="arabic-text"> موضوع عشوائي </span>
<i className="fa fa-random"></i>
</button>
</Grid>
<Grid className="random-topics"
width={220}
gap={12}>
{this.props.videos.map(video => {this.props.videos.map(video =>
<VideoItem id={video.id} key={video.id} title={video.title }/> <VideoItem id={video.id} key={video.id} title={video.title}/>
)} )}
{/*<Link to="/topics">*/} {/*<Link to="/topics">*/}
{/*<span className="view-all-parents">See All Topics</span>*/} {/*<span className="view-all-parents">See All Topics</span>*/}
{/*</Link>*/} {/*</Link>*/}
{/*<Link to="/topics">*/} {/*<Link to="/topics">*/}
{/*<span className="view-all-items"> See All videos of {this.props.topicName} ({this.props.topicCount})</span>*/} {/*<span className="view-all-items"> See All videos of {this.props.topicName} ({this.props.topicCount})</span>*/}

View File

@ -7,7 +7,11 @@ import React from 'react';
class SectionHeading extends React.Component { class SectionHeading extends React.Component {
render() { render() {
return ( return (
<h3 className="section-title"><span>{this.props.title}</span></h3> <h3 className="section-title">
<span>{this.props.title}
<a className="normal-link" href={this.props.src}> ({this.props.count})</a>
</span>
</h3>
) )
} }
} }

View File

@ -1,52 +1,82 @@
@import "variables"; @import "variables";
/* globals */ /* globals */
* { * {
box-sizing: border-box; box-sizing: border-box;
margin: 0px; margin: 0px;
border: 0px; border: 0px;
} }
/* fonts */ /* fonts */
@font-face { @font-face {
font-family: 'Fedra Arabic'; font-family: 'Fedra Arabic';
src: url('../assets/fonts/Fedra Arabic Reg_beta.ttf') format('truetype'); src: url('../assets/fonts/Fedra Arabic Reg_beta.ttf') format('truetype');
} }
@font-face { @font-face {
font-family: 'bebas'; font-family: 'bebas';
src: url('../assets/fonts/BEBAS___.ttf') format('truetype'); src: url('../assets/fonts/BEBAS___.ttf') format('truetype');
} }
@font-face { @font-face {
font-family: 'majalla'; font-family: 'majalla';
src: url('../assets/fonts/majalla 2.ttf') format('truetype'); src: url('../assets/fonts/majalla 2.ttf') format('truetype');
} }
@font-face { @font-face {
font-family: 'MyriadPro Regular'; font-family: 'MyriadPro Regular';
src: url('../assets/fonts/MyriadPro-Regular.otf') format('otf'); src: url('../assets/fonts/MyriadPro-Regular.otf') format('otf');
} }
@font-face { @font-face {
font-family: 'interstate'; font-family: 'interstate';
src: url('../assets/fonts/Interstate-Regular.bmap') format('bmap'), src: url('../assets/fonts/Interstate-Regular.bmap') format('bmap'),
url('../assets/fonts/Interstate-Bold.bmap') format('bmap'); url('../assets/fonts/Interstate-Bold.bmap') format('bmap');
} }
.text-left { .text-left {
text-align: left; text-align: left;
} }
.arabic-text { .arabic-text {
font-family: "Fedra Arabic", serif; font-family: "Fedra Arabic", serif;
padding: .3em;
} }
.english-text { .english-text {
font-family: majalla, serif; font-family: majalla, serif;
padding: .3em;
} }
/* App */ /* App */
.App { .App {
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
} }
// buttons
button {
padding: 1em;
font-weight: bold;
font-size: 1em;
max-width: 300px;
justify-self: center; // for the css grid
}
// spans
span {
display: inline-block;
position: relative;
}
// links
a {
text-decoration: none;
font-size: 14px;
color: black;
}
.normal-link{
text-decoration: underline;
color: $normal-link-color;
}

View File

@ -1,5 +1,5 @@
@import "variables"; @import "variables";
@import "globals";
.section-heading { .section-heading {
padding-top: 1em; padding-top: 1em;
@ -12,10 +12,6 @@
// -------------------------- // --------------------------
// add horizontal lines around the section title. // add horizontal lines around the section title.
//---------------------------- //----------------------------
.section-title span{
display: inline-block;
position: relative;
}
.section-title span:before, .section-title span:before,
.section-title span:after { .section-title span:after {
content: ""; content: "";
@ -33,3 +29,7 @@
left: 100%; left: 100%;
margin-left: 15px; margin-left: 15px;
} }
// Topics
.random-topics{
margin-top: 2em;
}

View File

@ -1 +1,2 @@
$light-gray-color: #ebebeb; $light-gray-color: #ebebeb;
$normal-link-color: blue;

View File

@ -5,16 +5,10 @@
/* Video item*/ /* Video item*/
.video-item { .video-item {
background: $light-gray-color; background: $light-gray-color;
min-height: 250px; min-height: 300px;
padding: 1em; padding: 1em;
} }
a {
text-decoration: none;
font-size: 14px;
color: black;
}
.video-thumbnail { .video-thumbnail {
width: 100%; width: 100%;
max-height: 150px; max-height: 150px;