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

add title to the topics page, style the video items and the links, add about page.

Browse Source
This commit is contained in:
Ahmed Ayman 2020-01-15 14:32:33 +02:00
parent c2f7b02fd5
commit 41a6213443
16 changed files with 128 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 32 KiB

5
src/App.js
View File

@ -5,6 +5,7 @@ import './App.css';
import 'font-awesome/css/font-awesome.min.css';
import { Route, Switch } from 'react-router-dom';
import Home from './containers/Home';
import About from './containers/About';
import TopicsListContainer from './containers/TopicsListContainer';
import store from './store/configureStore';
import history from './history';
@ -25,11 +26,13 @@ class App extends Component {
<Search/>
<Switch>
<Route exact={true} path="/" component={Home}/>
<Route exact={true} path="/about" component={About}/>
<Route path="/topics" component={TopicsListContainer}/>
<Route path="/results/:categoryKey/:searchValue" component={Results}/>
<Route path="/videos/:videoId" component={Video}/>
</Switch>
<Nav/>
<Nav />
<Footer/>
</div>
</ConnectedRouter>

10
src/components/Nav.js
View File

@ -3,10 +3,10 @@ import React from 'react';
class Nav extends React.Component {
render() {
return (
<nav>
<nav className={"nav-footer"}>
<ul>
<li>
<a href="">
<a href="/contact">
<span className="arabic-text">اتصل بنا</span>
<br/>
<span className="english-text"> contact us</span>
@ -20,21 +20,21 @@ class Nav extends React.Component {
</a>
</li>
<li>
<a href="">
<a href="/">
<span className="arabic-text">الرئيسية</span>
<br/>
<span className="english-text"> main</span>
</a>
</li>
<li>
<a href="">
<a href="https://858.ma/">
<span className="arabic-text">الأرشيف</span>
<br/>
<span className="english-text"> the archive</span>
</a>
</li>
<li>
<a href="">
<a href="/about">
<span className="arabic-text">ماهذا الشيء</span>
<br/>
<span className="english-text"> what is this</span>

32
src/components/RandomDate.js
View File

@ -3,7 +3,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import VideoItem from "./VideoItem";
import RandomItemTitle from "./SectionHeading";
import {Link} from 'react-router-dom';
import { Link } from 'react-router-dom';
class RandomDate extends React.Component {
@ -15,10 +15,11 @@ class RandomDate extends React.Component {
return (
<section className="random-item-container">
<h2 className="section-heading">
<span className="arabic-text random-section-title">من أماكن الارشيف</span>
<br/>
<span className="arabic-text random-section-title"> يوم من أيام الارشيف</span>
<br />
<span className="section-title">
<span className='english-text bold-english-text random-section-title'> Dates from the archive
<span className='english-text bold-english-text random-section-title'> Dates from the archive
</span>
</span>
</h2>
@ -28,28 +29,33 @@ class RandomDate extends React.Component {
{/* View all dates button*/}
<Link className="view-items-link" to="/dates">
<button className="view-all-items">
<span className="english-text"> all dates &nbsp; </span>
<span className="arabic-text"> جميع الأماكن </span>
<span className={"highlighted-text"}>
<span className="english-text"> all dates &nbsp; </span>
<span className="arabic-text"> جميع الأيام </span>
</span>
</button>
</Link>
{/* Shuffle button */}
<button className="shuffle-button" onClick={this.shuffleDate.bind(this)}>
<span className="english-text">Shuffle Dates - </span>
<span className="arabic-text"> مكان عشوائي </span>
<span className={"highlighted-text"}>
<span className="english-text">Shuffle Dates - </span>
<span className="arabic-text"> مكان عشوائي </span>
</span>
<i className="fa fa-random"></i>
</button>
</Grid>
<Grid className="random-dates"
width={220}
gap={12}>
width={220}
gap={12}>
{/*{this.props.videos.map(video =>*/}
{/*<VideoItem id={video.id} key={video.id} title={video.title}/>*/}
{/*<VideoItem id={video.id} key={video.id} title={video.title}/>*/}
{/*)}*/}
</Grid>
<RandomItemTitle title={this.props.dateName}
count={this.props.dateCount}
src={'/results/date/' + this.props.dateName}
count={this.props.dateCount}
src={'/results/date/' + this.props.dateName}
/>
</section>

8
src/components/RandomPlace.js
View File

@ -33,14 +33,18 @@ class RandomPlace extends React.Component {
{/* View all places button*/}
<Link className="view-items-link" to="/places">
<button className="view-all-items">
<span className="english-text"> all places &nbsp; </span>
<span className="arabic-text"> جميع الأماكن </span>
<span className={"highlighted-text"}>
<span className="english-text"> all places &nbsp; </span>
< span className="arabic-text"> جميع الأماكن </span>
</span>
</button>
</Link>
{/* Shuffle button */}
<button className="shuffle-button" onClick={this.shufflePlace.bind(this)}>
<span className={"highlighted-text"}>
<span className="english-text">Shuffle Places - </span>
<span className="arabic-text"> مكان عشوائي </span>
</span>
<i className="fa fa-random"></i>
</button>
</Grid>

25
src/components/RandomTopic.js
View File

@ -3,7 +3,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import VideoItem from "./VideoItem";
import RandomItemTitle from "./SectionHeading";
import {Link} from 'react-router-dom';
import { Link } from 'react-router-dom';
// Refactor
class RandomTopic extends React.Component {
@ -17,10 +17,10 @@ class RandomTopic extends React.Component {
<section className="random-item-container">
<h2 className="section-heading">
<span className="arabic-text random-section-title">من مواضيع الارشيف</span>
<br/>
<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'> topics from the archive
<span className='english-text bold-english-text random-section-title'> topics from the archive
</span>
</span>
</h2>
@ -34,29 +34,32 @@ class RandomTopic extends React.Component {
<button className="view-all-items">
<span className="highlighted-text">
<span className="english-text"> all topics &nbsp; </span>
<span className="arabic-text"> جميع المواضيع </span>
<span className="arabic-text"> جميع المواضيع </span>
</span>
</button>
</Link>
{/* Shuffle button */}
<button className="shuffle-button" onClick={this.shuffleTopic.bind(this)}>
<span className="arabic-text"> موضوع عشوائي </span>
<span className="english-text">&nbsp; shuffle topics </span>
<span className="highlighted-text">
<span className="arabic-text"> موضوع عشوائي </span>
<span className="english-text">&nbsp; shuffle topics </span>
</span>
&nbsp;
<i className="fa fa-random"></i>
</button>
</Grid>
<Grid className="random-topics"
width={220}
gap={12}>
width={220}
gap={12}>
{this.props.videos.map(video =>
<VideoItem id={video.id} key={video.id} title={video.title}/>
<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}
count={this.props.topicCount}
src={'/results/topic/' + this.props.topicName}
/>
</section>

2
src/components/Search.js
View File

@ -14,6 +14,8 @@ class Search extends React.Component {
{/*<span className="arabic-text">بحث في الأرشيف - </span>*/}
{/*</div>*/}
{/*</div>*/}
{/* TODO: apply the font for search the archive */}
<input type="text" className="search-box" name="search-box" placeholder="search the Archive بحث في الأرشيف"/>
</form>
)

23
src/containers/About.js Normal file
View File

@ -0,0 +1,23 @@
import React from 'react';
import Grid from 'react-css-grid'
class About extends React.Component {
render() {
return (
<div>
<Grid>
<div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div>
<div>
second Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</Grid>
</div>
);
}
}
export default (About);

25
src/containers/Results.js
View File

@ -3,7 +3,7 @@ import Grid from "react-css-grid";
import Loading from "../components/Loading";
import VideoItem from "../components/VideoItem";
import PropTypes from "prop-types";
import {getSearchResults} from "../actions/search";
import { getSearchResults } from "../actions/search";
import connect from "react-redux/es/connect/connect";
class Results extends React.Component {
@ -12,24 +12,35 @@ class Results extends React.Component {
// get params from url
const categoryKey = this.props.match.params.categoryKey;
const searchValue = this.props.match.params.searchValue;
//FIXME: first check if current key / value / results is already in state
this.props.getSearchResults(categoryKey, searchValue);
}
render() {
// console.log('results', this.props.searchResults);
let title = this.props.match.params.searchValue;
return (
<div>
{/* TODO: add the title with out very own beautiful format!*/}
<h2 className="section-heading">
<span className="section-title">
<span className='english-text bold-english-text random-section-title'>Topic: {title}
</span>
</span>
</h2>
<br />
<Grid className="random-topics"
width={220}
gap={12}>
width={220}
gap={12}>
{this.props.loadingResults && (
<Loading />
)}
{this.props.searchResults && this.props.searchResults.map(video =>
<VideoItem id={video.id} key={video.id} title={video.title}/>
<VideoItem id={video.id} key={video.id} title={video.title} />
)}
</Grid>
</div>

7
src/logo.svg
View File

@ -1,7 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
<g fill="#61DAFB">
<path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
<circle cx="420.9" cy="296.5" r="45.7"/>
<path d="M520.5 78.1z"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.6 KiB

6
src/stylesheets/footer.scss
View File

@ -9,3 +9,9 @@ footer {
padding: 1em;
font-weight: bold;
}
.nav-footer {
a {
color: gray;
}
}

44
src/stylesheets/globals.scss
View File

@ -8,39 +8,39 @@
/* fonts */
@font-face {
font-family: 'Fedra Arabic';
src: url('../assets/fonts/Fedra Arabic Reg_beta.ttf') format('truetype');
font-family: "Fedra Arabic";
src: url("../assets/fonts/Fedra Arabic Reg_beta.ttf") format("truetype");
}
@font-face {
font-family: 'bebas';
src: url('../assets/fonts/BEBAS___.ttf') format('truetype');
font-family: "bebas";
src: url("../assets/fonts/BEBAS___.ttf") format("truetype");
}
@font-face {
font-family: 'majalla';
src: url('../assets/fonts/majalla 2.ttf') format('truetype');
font-family: "majalla";
src: url("../assets/fonts/majalla 2.ttf") format("truetype");
}
@font-face {
font-family: 'MyriadPro Regular';
src: url('../assets/fonts/MyriadPro-Regular.otf') format('otf');
font-family: "MyriadPro Regular";
src: url("../assets/fonts/MyriadPro-Regular.otf") format("otf");
}
@font-face {
font-family: 'interstate';
src: url('../assets/fonts/Interstate-Regular.bmap') format('bmap'),
url('../assets/fonts/Interstate-Bold.bmap') format('bmap');
font-family: "interstate";
src: url("../assets/fonts/Interstate-Regular.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-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');
font-family: "interstate-bold";
src: url("../assets/fonts/Interstate-Bold.ttf") format("truetype");
}
.text-left {
@ -60,7 +60,6 @@
.bold-english-text {
font-family: interstate-bold, serif;
//padding: 0.3em;
}
/* App */
@ -78,11 +77,9 @@ button {
max-width: 300px;
justify-self: center; // for the css grid
cursor: pointer;
}
button.view-all-items:focus{
outline: none;
}
button:focus {outline:0 !important;}
// spans
span {
display: inline-block;
@ -100,10 +97,7 @@ a {
text-decoration: underline;
font-size: 1em;
color: black;
&:hover{
color: gray;
&:hover {
color: gray;
}
}
//

2
src/stylesheets/header.scss
View File

@ -12,7 +12,7 @@ header {
}
.counter-container {
width: 10%;
width: 18%;
position: absolute;
display: inline-block;
right: 0;

16
src/stylesheets/items-list.scss
View File

@ -1,11 +1,12 @@
@import "variables";
@import "globals";
// title
.all-items{
.section-heading{
.all-items {
.section-heading {
padding-bottom: 1em;
}
.section-title span:before, .section-title span:after{
.section-title span:before,
.section-title span:after {
width: 530px;
}
}
@ -13,12 +14,12 @@
#search-topics {
font-size: 1em;
padding: 1em;
border: .5px solid gray;
border: 0.5px solid gray;
height: 30px;
position: relative;
top: -3px;
left: 1px;
font-size: .7em;
font-size: 0.7em;
}
.label {
@ -27,9 +28,11 @@
.topic-item {
h3 {
&:hover{
color: rgb(16, 16, 16);
&:hover {
color: gray;
}
text-align: left;
padding: 1em;
//font-size: 30px;
@ -38,4 +41,3 @@
border-bottom: 6px solid black;
margin-bottom: 2em;
}

2
src/stylesheets/search.scss
View File

@ -6,7 +6,7 @@
/* search */
.search-button {
background: transparent;
bottom: -13px;
bottom: 4px;
position: relative;
right: -39px;
padding: 0px;

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

@ -7,6 +7,7 @@
background: $light-gray-color;
min-height: 300px;
padding: 1em;
color : rgb(16, 16, 16);
}
.video-thumbnail {
@ -29,7 +30,6 @@
padding-top: 1em;
font-weight: normal;
}
// FIXME:
section.video-item:hover {
outline: 2px solid black;
}