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

add borders to the topic/item name

Browse Source
This commit is contained in:
Ahmed-Ayman 2018-12-11 14:41:57 +02:00
parent 935c6d210c
commit 34deaaeefe
4 changed files with 54 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/SectionHeading.js
View File

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

2
src/components/VideoItem.js
View File

@ -12,7 +12,7 @@ class VideoItem extends React.Component {
<section className="video-thumbnail-container"> <section className="video-thumbnail-container">
<img className="video-thumbnail" src={ getThumbnail(this.props.id) } alt=""/> <img className="video-thumbnail" src={ getThumbnail(this.props.id) } alt=""/>
</section> </section>
<h3 className="video-title">{ this.props.title }</h3> <h3 classNamew="video-title">{ this.props.title }</h3>
</section> </section>
</Link> </Link>
) )

66
src/stylesheets/random-item.scss
View File

@ -1,37 +1,61 @@
@import "variables"; @import "variables";
/* section heading*/ /* section heading*/
.section-title { .section-title {
padding: 1em; padding: 1em;
margin-bottom: 1em; margin-bottom: 1em;
}
.section-title::after{
width: 100%;
}
.section-heading{
padding-top: 1em;
} }
.section-heading {
padding-top: 1em;
}
.section-title{
margin: 0 0 2em 0;
line-height: 0.5;
text-align: center;
}
.section-title span{
display: inline-block;
position: relative;
}
.section-title span:before,
.section-title span:after {
content: "";
position: absolute;
height: 5px;
border-bottom: 1px solid black;
border-top: 1px solid black;
top: 0;
width: 300px;
}
.section-title span:before {
right: 100%;
margin-right: 15px;
}
.section-title span:after {
left: 100%;
margin-left: 15px;
}
/* view all elements */ /* view all elements */
.view-all-parents { .view-all-parents {
color: white; color: white;
background: black; background: black;
padding: 1em; padding: 1em;
position: relative; position: relative;
top: 1em; top: 1em;
} }
.view-all-parents, .view-all-parents,
.view-all-items { .view-all-items {
text-decoration: none; text-decoration: none;
} }
.view-all-items { .view-all-items {
color: black; color: black;
text-decoration: none; text-decoration: none;
padding: 1em; padding: 1em;
border: 1px solid black; border: 1px solid black;
position: relative; position: relative;
top: 1em; top: 1em;
} }

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

@ -4,17 +4,15 @@
/* Video item*/ /* Video item*/
.video-item { .video-item {
background: #f6f6f6; background: $light-gray-color;
min-height: 440px; 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 {
@ -30,6 +28,6 @@
overflow: hidden; overflow: hidden;
} }
.video-title{ .video-title {
padding-top: 1em; padding-top: 1em;
} }