style the heading titles

This commit is contained in:
Ahmed-Ayman 2018-12-22 14:36:49 +02:00
parent b307c9bb39
commit 4a2372802e
10 changed files with 160 additions and 31 deletions

Binary file not shown.

Binary file not shown.

View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 64.5 64" style="enable-background:new 0 0 64.5 64;" xml:space="preserve">
<g id="XMLID_12_">
<g>
<g id="XMLID_14_">
<g>
<path d="M56,63.7L40.9,48.5c-4.1,2.7-9.1,4.3-14.5,4.3C11.8,52.8,0,41,0,26.4C0,11.8,11.8,0,26.4,0C41,0,52.8,11.8,52.8,26.4
c0,5.1-1.4,9.9-3.9,13.9l15.2,15.3c0.8,0.8,0.1,2.7-1.5,4.4l-2.3,2.3C58.8,63.8,56.8,64.5,56,63.7z M44,26.4
c0-9.7-7.9-17.6-17.6-17.6c-9.7,0-17.6,7.9-17.6,17.6c0,9.7,7.9,17.7,17.6,17.7C36.1,44.1,44,36.1,44,26.4z"/>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 782 B

View File

@ -4,6 +4,7 @@ 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'; import {Link} from 'react-router-dom';
class RandomTopic extends React.Component { class RandomTopic extends React.Component {
shuffleTopic() { shuffleTopic() {
@ -12,26 +13,33 @@ class RandomTopic extends React.Component {
render() { render() {
return ( return (
<section> <section className="random-topic">
<h2 className="section-heading">from the Archive Topics - من مواضيع الارشيف</h2> <h2 className="section-heading">
<RandomItemTitle title={this.props.topicName} <span className="arabic-text random-section-title">من مواضيع الارشيف</span>
count={this.props.topicCount} <br/>
src={'/results/topic/' + this.props.topicName} {/*<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>
</span>
</h2>
<Grid <Grid
className={"buttons-grid"}
width={450} width={450}
> >
{/* View all topics button*/} {/* View all topics button*/}
<Link to="/topics"> <Link className="view-topics-link" to="/topics">
<button className="view-all-topics"> <button className="view-all-topics">
<span className="english-text">All Topics - </span> <span className="english-text"> all topics &nbsp; </span>
<span className="arabic-text"> جميع المواضيع </span> <span className="arabic-text"> جميع المواضيع </span>
</button> </button>
</Link> </Link>
{/* Shuffle button */} {/* Shuffle button */}
<button className="shuffle-button" onClick={this.shuffleTopic.bind(this)}> <button className="shuffle-button" onClick={this.shuffleTopic.bind(this)}>
<span className="english-text">Shuffle Topics - </span>
<span className="arabic-text"> موضوع عشوائي </span> <span className="arabic-text"> موضوع عشوائي </span>
<span className="english-text">&nbsp; shuffle topics </span>
&nbsp;
<i className="fa fa-random"></i> <i className="fa fa-random"></i>
</button> </button>
</Grid> </Grid>
@ -43,6 +51,10 @@ class RandomTopic extends React.Component {
<VideoItem id={video.id} key={video.id} title={video.title}/> <VideoItem id={video.id} key={video.id} title={video.title}/>
)} )}
</Grid> </Grid>
<RandomItemTitle title={this.props.topicName}
count={this.props.topicCount}
src={'/results/topic/' + this.props.topicName}
/>
</section> </section>
) )

View File

@ -5,9 +5,15 @@ class Search extends React.Component {
return ( return (
<form action=""> <form action="">
<button className="search-button" type='submit'> <button className="search-button" type='submit'>
<img src={require('../assets/images/search.png')} alt=""/> <img src={require('../assets/images/search.svg')} alt=""/>
</button> </button>
{/*<div className="search-box">*/}
{/*<input type="text" required/>*/}
{/*<div className="placeholder">*/}
{/*<span className="english-text">Search</span>*/}
{/*<span className="arabic-text">بحث في الأرشيف - </span>*/}
{/*</div>*/}
{/*</div>*/}
<input type="text" className="search-box" name="search-box" placeholder="search the Archive بحث في الأرشيف"/> <input type="text" className="search-box" name="search-box" placeholder="search the Archive بحث في الأرشيف"/>
</form> </form>
) )

View File

@ -33,18 +33,34 @@
url('../assets/fonts/Interstate-Bold.bmap') format('bmap'); url('../assets/fonts/Interstate-Bold.bmap') format('bmap');
} }
@font-face {
font-family: 'interstate-light';
src: url('../assets/fonts/Interstate_Light.ttf') format('truetype');
}
@font-face {
font-family: 'interstate-bold';
src: url('../assets/fonts/Interstate-Bold.ttf') format('truetype');
}
.text-left { .text-left {
text-align: left; text-align: left;
} }
.arabic-text { .arabic-text {
font-family: "Fedra Arabic", serif; font-family: "Fedra Arabic";
padding: .3em; //padding: .3em;
font-weight: normal;
} }
.english-text { .english-text {
font-family: majalla, serif; font-family: interstate-light, serif;
padding: .3em; //padding: .3em;
}
.bold-english-text {
font-family: interstate-bold, serif;
//padding: 0.3em;
} }
/* App */ /* App */

View File

@ -3,13 +3,21 @@
.section-heading, .section-heading,
.section-subheading { .section-subheading {
padding-top: 1em; padding-top: 2em;
} }
.section-title { .section-title {
//padding-top: 1em;
line-height: 0.5; line-height: 0.5;
text-align: center; text-align: center;
padding: 1em; //padding: 1em;
} }
// the bottom section
h3.section-title {
padding-top: 1em;
}
// -------------------------- // --------------------------
// add horizontal lines around the section title. // add horizontal lines around the section title.
//---------------------------- //----------------------------
@ -18,19 +26,77 @@
content: ""; content: "";
position: absolute; position: absolute;
height: 8px; height: 8px;
border-bottom: 3px solid black; border-bottom: 1.7px solid black;
top: 0; top: 0;
width: 400px; width: 400px;
} }
.section-title span:before { .section-title span:before {
right: 100%; right: 100%;
margin-right: 15px; margin-right: 10px;
} }
.section-title span:after { .section-title span:after {
left: 100%; left: 100%;
margin-left: 15px; margin-left: 10px;
} }
// Topics // Topics
.random-topics { .random-topics {
margin-top: 2em; margin-top: .5em;
}
.random-section-title {
bottom: -3px;
}
// buttons
.random-topic {
button {
background: white;
}
// topics
.view-topics-link {
justify-self: left;
bottom: 36px;
position: relative;
padding: 0px;
}
.view-all-topics {
left: 0;
//position: absolute;
justify-self: left;
padding: 1em 0px;
padding-right: 5px;
}
// shuffle
.shuffle-button {
justify-self: right;
bottom: 36px;
position: relative;
padding: 10px;
padding-right: 0px;
}
}
// fonts
.shuffle-button, .view-all-topics {
span.arabic-text {
font-size: 18px;
}
span.english-text {
font-size: 16px;
}
}
.buttons-grid {
height: 8px;
}
span.english-text.bold-english-text{
font-size: 28px;
}
span.arabic-text.bold-arabic-text{
font-size: 28px;
} }

View File

@ -5,19 +5,24 @@
/* search */ /* search */
.search-button { .search-button {
background: white; background: transparent;
bottom: -18px; bottom: -13px;
position: relative; position: relative;
right: -39px;
padding: 0px;
margin: 0px;
width: 126px;
} }
.search-button img { .search-button img {
max-width: 50px; max-width: 26%;
} }
.search-box { .search-box {
padding: 1em; padding: .9em 1em .9em 1em;
width: 50%; width: 30%;
background: $light-gray-color; background: $light-gray-color;
margin-right: 7em;
} }
.search-box::placeholder { .search-box::placeholder {
@ -25,6 +30,8 @@
text-align: center; text-align: center;
font-size: 1.5em; font-size: 1.5em;
color: gray; color: gray;
font-family: "Fedra Arabic";
font-weight: normal;
} }
@media screen and (max-width: 700px) { @media screen and (max-width: 700px) {
@ -46,3 +53,7 @@
margin-bottom: 2em; margin-bottom: 2em;
text-align: left; text-align: left;
} }
.App form{
margin-top: 2em;
}

View File

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

View File

@ -7,6 +7,7 @@
background: $light-gray-color; background: $light-gray-color;
min-height: 300px; min-height: 300px;
padding: 1em; padding: 1em;
} }
.video-thumbnail { .video-thumbnail {
@ -26,4 +27,5 @@
.video-title { .video-title {
padding-top: 1em; padding-top: 1em;
font-weight: normal;
} }