858/frontend
1
0
Fork 0
Code Issues 11 Pull Requests Releases Wiki Activity

style the video item, title decoration, colors

Browse Source
This commit is contained in:
Ahmed-Ayman 2018-12-11 13:30:28 +02:00
parent 2bb636cb79
commit 935c6d210c
3 changed files with 13 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/RandomDate.js
View File

@ -10,8 +10,8 @@ class RandomDate extends React.Component {
<section> <section>
<SectionHeading title="Random Date"/> <SectionHeading title="Random Date"/>
<Grid <Grid
width={450} width={220}
gap={24}> gap={12}>
<VideoItem/> <VideoItem/>
<VideoItem/> <VideoItem/>
<VideoItem/> <VideoItem/>

2
src/components/RandomTopic.js
View File

@ -16,7 +16,7 @@ class RandomTopic extends React.Component {
this.props.topicName + ' (' +this.props.topicCount + ')'}/> this.props.topicName + ' (' +this.props.topicCount + ')'}/>
<Grid className="random-topics" <Grid className="random-topics"
width={220} width={220}
gap={16}> 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 }/>
)} )}

7
src/stylesheets/video-item.scss
View File

@ -5,15 +5,17 @@
/* Video item*/ /* Video item*/
.video-item { .video-item {
background: #f6f6f6; background: #f6f6f6;
min-height: 400px; min-height: 440px;
padding: 1em; padding: 1em;
} }
.random-topics {
a{ a{
text-decoration: none; text-decoration: none;
font-size: 14px; font-size: 14px;
color: black; color: black;
} }
}
.video-thumbnail { .video-thumbnail {
transition: all .4s ease-in-out; transition: all .4s ease-in-out;
@ -28,3 +30,6 @@ a {
overflow: hidden; overflow: hidden;
} }
.video-title{
padding-top: 1em;
}