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

2020-01-15 14:32:33 +02:00 · 2020-01-15 14:32:33 +02:00 · 41a6213443
commit 41a6213443
parent c2f7b02fd5
16 changed files with 128 additions and 81 deletions
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.js
+++ b/src/App.js
@ -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,6 +26,8 @@ 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}/>
--- a/src/components/Nav.js
+++ b/src/components/Nav.js
@ -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>
--- a/src/components/RandomDate.js
+++ b/src/components/RandomDate.js
@ -15,7 +15,8 @@ class RandomDate extends React.Component {
    return (
      <section className="random-item-container">
        <h2 className="section-heading">
-          <span className="arabic-text random-section-title">من أماكن الارشيف</span>
+
+          <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
@ -28,14 +29,19 @@ class RandomDate extends React.Component {
          {/* View all dates button*/}
          <Link className="view-items-link" to="/dates">
            <button className="view-all-items">
+              <span className={"highlighted-text"}>
                <span className="english-text"> all dates    &nbsp; </span>
-              <span className="arabic-text"> 	 جميع الأماكن	</span>
+                <span className="arabic-text"> 	 جميع الأيام	</span>
+              </span>
            </button>
          </Link>
          {/* Shuffle button */}
          <button className="shuffle-button" onClick={this.shuffleDate.bind(this)}>
+
+            <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>
--- a/src/components/RandomPlace.js
+++ b/src/components/RandomPlace.js
@ -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={"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>
--- a/src/components/RandomTopic.js
+++ b/src/components/RandomTopic.js
@ -39,9 +39,12 @@ class RandomTopic extends React.Component {
            </button>
          </Link>
          {/* Shuffle button */}
+
          <button className="shuffle-button" onClick={this.shuffleTopic.bind(this)}>
+            <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>
--- a/src/components/Search.js
+++ b/src/components/Search.js
@ -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>
    )
--- a/src/containers/About.js
+++ b/src/containers/About.js
@ -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);
--- a/src/containers/Results.js
+++ b/src/containers/Results.js
@ -12,22 +12,33 @@ 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}>
+
          {this.props.loadingResults && (
            <Loading />
          )}
+
          {this.props.searchResults && this.props.searchResults.map(video =>
            <VideoItem id={video.id} key={video.id} title={video.title} />
          )}
--- a/src/logo.svg
+++ b/src/logo.svg
@ -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>
--- a/src/stylesheets/footer.scss
+++ b/src/stylesheets/footer.scss
@ -9,3 +9,9 @@ footer {
  padding: 1em;
  font-weight: bold;
 }
+
+.nav-footer {
+  a {
+    color: gray;
+  }
+}
--- a/src/stylesheets/globals.scss
+++ b/src/stylesheets/globals.scss
@ -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;
@ -104,6 +101,3 @@ a {
    color: gray;
  }
 }
-
-
-//
--- a/src/stylesheets/header.scss
+++ b/src/stylesheets/header.scss
@ -12,7 +12,7 @@ header {
 }

 .counter-container {
-    width: 10%;
+    width: 18%;
    position: absolute;
    display: inline-block;
    right: 0;
--- a/src/stylesheets/items-list.scss
+++ b/src/stylesheets/items-list.scss
@ -5,7 +5,8 @@
  .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 {
+    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;
 }
-
--- a/src/stylesheets/search.scss
+++ b/src/stylesheets/search.scss
@ -6,7 +6,7 @@
 /* search */
 .search-button {
    background: transparent;
-    bottom: -13px;
+    bottom: 4px;
    position: relative;
    right: -39px;
    padding: 0px;
--- a/src/stylesheets/video-item.scss
+++ b/src/stylesheets/video-item.scss
@ -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;
 }