From 4c2a3361eb73a10472b85b2ace4776dead53b541 Mon Sep 17 00:00:00 2001 From: Ahmed-Ayman Date: Thu, 13 Dec 2018 09:18:44 +0200 Subject: [PATCH] create all topics (button), shuffle (button), all videos (link) --- src/App.js | 1 + src/components/RandomTopic.js | 33 ++++++++++++---- src/components/SectionHeading.js | 6 ++- src/stylesheets/globals.scss | 68 +++++++++++++++++++++++--------- src/stylesheets/random-item.scss | 10 ++--- src/stylesheets/variables.scss | 1 + src/stylesheets/video-item.scss | 8 +--- 7 files changed, 87 insertions(+), 40 deletions(-) diff --git a/src/App.js b/src/App.js index ba8b7a4..35acff7 100644 --- a/src/App.js +++ b/src/App.js @@ -2,6 +2,7 @@ import React, {Component} from 'react'; import {Provider} from 'react-redux'; import { ConnectedRouter } from 'connected-react-router' import './App.css'; +import 'font-awesome/css/font-awesome.min.css'; import { Route, Switch } from 'react-router-dom'; import Home from './containers/Home'; import TopicsList from './containers/TopicsList'; diff --git a/src/components/RandomTopic.js b/src/components/RandomTopic.js index 8a6a5b8..5bcc5be 100644 --- a/src/components/RandomTopic.js +++ b/src/components/RandomTopic.js @@ -3,7 +3,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import VideoItem from "./VideoItem"; import RandomItemTitle from "./SectionHeading"; -import { Link } from 'react-router-dom'; class RandomTopic extends React.Component { @@ -11,17 +10,35 @@ class RandomTopic extends React.Component { return (

from the Archive Topics - من مواضيع الارشيف

+ + + {/* View all topics button*/} + + {/* Shuffle button */} + + + + {this.props.videos.map(video => - + )} {/**/} - {/*See All Topics*/} + {/*See All Topics*/} {/**/} {/**/} {/* See All videos of {this.props.topicName} ({this.props.topicCount})*/} diff --git a/src/components/SectionHeading.js b/src/components/SectionHeading.js index 7d6eb27..4f3f97a 100644 --- a/src/components/SectionHeading.js +++ b/src/components/SectionHeading.js @@ -7,7 +7,11 @@ import React from 'react'; class SectionHeading extends React.Component { render() { return ( -

{this.props.title}

+

+ {this.props.title} + ({this.props.count}) + +

) } } diff --git a/src/stylesheets/globals.scss b/src/stylesheets/globals.scss index ff31feb..568780a 100644 --- a/src/stylesheets/globals.scss +++ b/src/stylesheets/globals.scss @@ -1,52 +1,82 @@ @import "variables"; /* globals */ * { - box-sizing: border-box; - margin: 0px; - border: 0px; + box-sizing: border-box; + margin: 0px; + border: 0px; } /* fonts */ @font-face { - font-family: 'Fedra Arabic'; - src: url('../assets/fonts/Fedra Arabic Reg_beta.ttf') format('truetype'); + font-family: 'Fedra Arabic'; + src: url('../assets/fonts/Fedra Arabic Reg_beta.ttf') format('truetype'); } @font-face { - font-family: 'bebas'; - src: url('../assets/fonts/BEBAS___.ttf') format('truetype'); + font-family: 'bebas'; + src: url('../assets/fonts/BEBAS___.ttf') format('truetype'); } @font-face { - font-family: 'majalla'; - src: url('../assets/fonts/majalla 2.ttf') format('truetype'); + font-family: 'majalla'; + src: url('../assets/fonts/majalla 2.ttf') format('truetype'); } @font-face { - font-family: 'MyriadPro Regular'; - src: url('../assets/fonts/MyriadPro-Regular.otf') format('otf'); + font-family: 'MyriadPro Regular'; + src: url('../assets/fonts/MyriadPro-Regular.otf') format('otf'); } @font-face { - font-family: 'interstate'; - src: url('../assets/fonts/Interstate-Regular.bmap') format('bmap'), - url('../assets/fonts/Interstate-Bold.bmap') format('bmap'); + font-family: 'interstate'; + src: url('../assets/fonts/Interstate-Regular.bmap') format('bmap'), + url('../assets/fonts/Interstate-Bold.bmap') format('bmap'); } .text-left { - text-align: left; + text-align: left; } .arabic-text { - font-family: "Fedra Arabic", serif; + font-family: "Fedra Arabic", serif; + padding: .3em; } .english-text { - font-family: majalla, serif; + font-family: majalla, serif; + padding: .3em; } /* App */ .App { - max-width: 1200px; - margin: 0 auto; + max-width: 1200px; + 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; +} \ No newline at end of file diff --git a/src/stylesheets/random-item.scss b/src/stylesheets/random-item.scss index 543981e..52288fc 100644 --- a/src/stylesheets/random-item.scss +++ b/src/stylesheets/random-item.scss @@ -1,5 +1,5 @@ @import "variables"; - +@import "globals"; .section-heading { padding-top: 1em; @@ -12,10 +12,6 @@ // -------------------------- // add horizontal lines around the section title. //---------------------------- -.section-title span{ - display: inline-block; - position: relative; -} .section-title span:before, .section-title span:after { content: ""; @@ -33,3 +29,7 @@ left: 100%; margin-left: 15px; } +// Topics +.random-topics{ + margin-top: 2em; +} \ No newline at end of file diff --git a/src/stylesheets/variables.scss b/src/stylesheets/variables.scss index b446166..68c97aa 100644 --- a/src/stylesheets/variables.scss +++ b/src/stylesheets/variables.scss @@ -1 +1,2 @@ $light-gray-color: #ebebeb; +$normal-link-color: blue; \ No newline at end of file diff --git a/src/stylesheets/video-item.scss b/src/stylesheets/video-item.scss index 49ac4dd..282fb95 100644 --- a/src/stylesheets/video-item.scss +++ b/src/stylesheets/video-item.scss @@ -5,16 +5,10 @@ /* Video item*/ .video-item { background: $light-gray-color; - min-height: 250px; + min-height: 300px; padding: 1em; } -a { - text-decoration: none; - font-size: 14px; - color: black; -} - .video-thumbnail { width: 100%; max-height: 150px;