style the home page

This commit is contained in:
Ahmed-Ayman 2019-01-03 08:07:39 +02:00
parent 0ed16ffe29
commit ba28a48fc9
14 changed files with 106 additions and 28 deletions

View File

@ -5,7 +5,7 @@ render(){
<footer>
<span className="arabic-text"> جميع الحقوق محفوظة لمؤسسة مٌصرين</span>
<span className="english-text"> all rights reserved</span>
<span className="english-text">&nbsp; all rights reserved</span>
</footer>
)
}

View File

@ -32,8 +32,10 @@ class RandomTopic extends React.Component {
{/* View all topics button*/}
<Link className="view-items-link" to="/topics">
<button className="view-all-items">
<span className="highlighted-text">
<span className="english-text"> all topics &nbsp; </span>
<span className="arabic-text"> جميع المواضيع </span>
</span>
</button>
</Link>
{/* Shuffle button */}

View File

@ -8,8 +8,8 @@ class SectionHeading extends React.Component {
render() {
return (
<h3 className="section-title">
<span>{this.props.title}
<a className="normal-link" href={this.props.src}> ({this.props.count})</a>
<span>
<a className="normal-link highlighted-link" href={this.props.src}> {this.props.title} /{this.props.count}/</a>
</span>
</h3>
)

View File

@ -1,5 +1,6 @@
import React from 'react';
import {Link} from 'react-router-dom';
import Grid from "react-css-grid";
class TopicsList extends React.Component {
constructor() {
@ -30,23 +31,28 @@ class TopicsList extends React.Component {
return (
<main className="topics-list">
<section className="filter-box">
<label className="label" htmlFor="search-topics">
<label className="label english-text" htmlFor="search-topics">
<i className="fa fa-filter">&nbsp;</i>
Filter Topics : &nbsp;
<span className="english-text">Filter Topics &nbsp;</span>
<span className="arabic-text"> تنقية المواضيع: </span>
<input type="text" id="search-topics" ref="filter-element" onChange={event => this.filterTopics(event)}/>
</label>
</section>
<Grid className="random-topics"
width={220}
gap={12}>
{this.state.filteredTopics.map(topic => {
return (
<section className="topic-item" key={topic.name}>
<Link to={"/results/topic/" + topic.name}>
<h3>{topic.name} ({topic.items} videos)</h3>
<h3 className="english-text">{topic.name} ({topic.items} videos)</h3>
</Link>
</section>
)
}
)}
</Grid>
</main>
)
}

View File

@ -17,7 +17,7 @@ class Results extends React.Component {
}
render() {
console.log('results', this.props.searchResults);
// console.log('results', this.props.searchResults);
return (
<Grid className="random-topics"
width={220}

View File

@ -12,8 +12,16 @@ class TopicsListContainer extends React.Component {
}
render() {
return (
<section>
<SectionHeading title="All Topics"/>
<section className="all-items">
<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 random-section-title'> all topics
</span>
</span>
</h2>
{/* TODO: get the topics objects*/}
<TopicsList allTopics={this.props.allTopics}/>
</section>

View File

@ -79,6 +79,9 @@ button {
justify-self: center; // for the css grid
cursor: pointer;
}
button.view-all-items:focus{
outline: none;
}
// spans
span {
@ -95,6 +98,12 @@ a {
.normal-link {
text-decoration: underline;
color: $normal-link-color;
font-size: 1em;
color: black;
&:hover{
color: gray;
}
}
//

View File

@ -1,20 +1,38 @@
@import "variables";
@import "globals";
// title
.all-items{
.section-heading{
padding-bottom: 1em;
}
.section-title span:before, .section-title span:after{
width: 530px;
}
}
#search-topics {
font-size: 1em;
padding: 1em;
border: .5px solid gray;
height: 30px;
position: relative;
top: -3px;
left: 1px;
font-size: .7em;
}
.label {
font-size: 1.5em;
font-size: 1.3em;
}
.topic-item {
h3 {
&:hover{
color: gray;
}
text-align: left;
padding: 1em;
font-size: 30px;
//font-size: 30px;
}
border-left: 2px solid black;
border-bottom: 6px solid black;

View File

@ -10,8 +10,15 @@ nav {
nav ul li {
display: inline-block;
list-style-type: none;
padding: 1em;
border-right: 1px solid black;
padding: 0em 3em;
border-right: 2px solid black;
.arabic-text{
font-size: 1.2em;
}
.english-text{
font-size: 1.2em;
font-family: interstate-bold;
}
}
nav ul li:last-child {

View File

@ -65,7 +65,7 @@ h3.section-title {
left: 0;
//position: absolute;
justify-self: left;
padding: 1em 0px;
padding: .9em 0px;
padding-right: 5px;
}
// shuffle
@ -98,3 +98,21 @@ span.english-text.bold-english-text{
span.arabic-text.bold-arabic-text{
font-size: 28px;
}
// highlighted text
.highlighted-text:hover{
background: black;
color:white;
position: relative;
}
//.navbar-link-overlay {
// width: calc(100% + 6px);
// height: calc(100% - 3px - 2px);
// position: absolute;
// top: 3px;
// left: 0px;
// z-index: -1;
//}
//.navbar-link-neonblue:hover .navbar-link-overlay{
// background: black;
//}

View File

@ -0,0 +1,5 @@
@import "variables";
@import "globals";
@import "header";
/* nav */

View File

@ -48,8 +48,8 @@
// filter
.filter-box{
background: $light-gray-color;
padding: 1em;
//background: $light-gray-color;
//padding: 1em;
margin-bottom: 2em;
text-align: left;
}

View File

@ -8,4 +8,5 @@
@import "video-player";
@import "footer";
@import "items-list";
@import "results";
@import "~video-react/styles/scss/video-react";

View File

@ -28,3 +28,7 @@
padding-top: 1em;
font-weight: normal;
}
// FIXME:
section.video-item:hover {
outline: 2px solid black;
}