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> <footer>
<span className="arabic-text"> جميع الحقوق محفوظة لمؤسسة مٌصرين</span> <span className="arabic-text"> جميع الحقوق محفوظة لمؤسسة مٌصرين</span>
<span className="english-text"> all rights reserved</span> <span className="english-text">&nbsp; all rights reserved</span>
</footer> </footer>
) )
} }

View File

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

View File

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

View File

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import {Link} from 'react-router-dom'; import {Link} from 'react-router-dom';
import Grid from "react-css-grid";
class TopicsList extends React.Component { class TopicsList extends React.Component {
constructor() { constructor() {
@ -30,23 +31,28 @@ class TopicsList extends React.Component {
return ( return (
<main className="topics-list"> <main className="topics-list">
<section className="filter-box"> <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> <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)}/> <input type="text" id="search-topics" ref="filter-element" onChange={event => this.filterTopics(event)}/>
</label> </label>
</section> </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 className="english-text">{topic.name} ({topic.items} videos)</h3>
</Link>
</section>
)
}
)}
</Grid>
{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>
</Link>
</section>
)
}
)}
</main> </main>
) )
} }

View File

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

View File

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

View File

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

View File

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

View File

@ -10,8 +10,15 @@ nav {
nav ul li { nav ul li {
display: inline-block; display: inline-block;
list-style-type: none; list-style-type: none;
padding: 1em; padding: 0em 3em;
border-right: 1px solid black; 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 { nav ul li:last-child {

View File

@ -65,7 +65,7 @@ h3.section-title {
left: 0; left: 0;
//position: absolute; //position: absolute;
justify-self: left; justify-self: left;
padding: 1em 0px; padding: .9em 0px;
padding-right: 5px; padding-right: 5px;
} }
// shuffle // shuffle
@ -98,3 +98,21 @@ span.english-text.bold-english-text{
span.arabic-text.bold-arabic-text{ span.arabic-text.bold-arabic-text{
font-size: 28px; 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
.filter-box{ .filter-box{
background: $light-gray-color; //background: $light-gray-color;
padding: 1em; //padding: 1em;
margin-bottom: 2em; margin-bottom: 2em;
text-align: left; text-align: left;
} }

View File

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

View File

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