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

View File

@ -5,9 +5,15 @@ class Search extends React.Component {
return (
<form action="">
<button className="search-button" type='submit'>
<img src={require('../assets/images/search.png')} alt=""/>
<img src={require('../assets/images/search.svg')} alt=""/>
</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 بحث في الأرشيف"/>
</form>
)

View File

@ -33,18 +33,34 @@
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-align: left;
}
.arabic-text {
font-family: "Fedra Arabic", serif;
padding: .3em;
font-family: "Fedra Arabic";
//padding: .3em;
font-weight: normal;
}
.english-text {
font-family: majalla, serif;
padding: .3em;
font-family: interstate-light, serif;
//padding: .3em;
}
.bold-english-text {
font-family: interstate-bold, serif;
//padding: 0.3em;
}
/* App */
@ -77,7 +93,7 @@ a {
color: black;
}
.normal-link{
.normal-link {
text-decoration: underline;
color: $normal-link-color;
}

View File

@ -3,13 +3,21 @@
.section-heading,
.section-subheading {
padding-top: 1em;
padding-top: 2em;
}
.section-title{
.section-title {
//padding-top: 1em;
line-height: 0.5;
text-align: center;
padding: 1em;
//padding: 1em;
}
// the bottom section
h3.section-title {
padding-top: 1em;
}
// --------------------------
// add horizontal lines around the section title.
//----------------------------
@ -18,19 +26,77 @@
content: "";
position: absolute;
height: 8px;
border-bottom: 3px solid black;
border-bottom: 1.7px solid black;
top: 0;
width: 400px;
}
.section-title span:before {
right: 100%;
margin-right: 15px;
margin-right: 10px;
}
.section-title span:after {
left: 100%;
margin-left: 15px;
margin-left: 10px;
}
// Topics
.random-topics{
margin-top: 2em;
.random-topics {
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-button {
background: white;
bottom: -18px;
background: transparent;
bottom: -13px;
position: relative;
right: -39px;
padding: 0px;
margin: 0px;
width: 126px;
}
.search-button img {
max-width: 50px;
max-width: 26%;
}
.search-box {
padding: 1em;
width: 50%;
padding: .9em 1em .9em 1em;
width: 30%;
background: $light-gray-color;
margin-right: 7em;
}
.search-box::placeholder {
@ -25,6 +30,8 @@
text-align: center;
font-size: 1.5em;
color: gray;
font-family: "Fedra Arabic";
font-weight: normal;
}
@media screen and (max-width: 700px) {
@ -46,3 +53,7 @@
margin-bottom: 2em;
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;

View File

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