From ba28a48fc96076b725e8a6fa30802cecd4987341 Mon Sep 17 00:00:00 2001 From: Ahmed-Ayman Date: Thu, 3 Jan 2019 08:07:39 +0200 Subject: [PATCH] style the home page --- src/components/Footer.js | 2 +- src/components/RandomTopic.js | 4 +++- src/components/SectionHeading.js | 4 ++-- src/components/TopicsList.js | 30 ++++++++++++++++----------- src/containers/Results.js | 2 +- src/containers/TopicsListContainer.js | 12 +++++++++-- src/stylesheets/globals.scss | 11 +++++++++- src/stylesheets/items-list.scss | 22 ++++++++++++++++++-- src/stylesheets/nav.scss | 11 ++++++++-- src/stylesheets/random-item.scss | 22 ++++++++++++++++++-- src/stylesheets/results.scss | 5 +++++ src/stylesheets/search.scss | 4 ++-- src/stylesheets/style.scss | 1 + src/stylesheets/video-item.scss | 4 ++++ 14 files changed, 106 insertions(+), 28 deletions(-) create mode 100644 src/stylesheets/results.scss diff --git a/src/components/Footer.js b/src/components/Footer.js index 180ac20..5cd5f72 100644 --- a/src/components/Footer.js +++ b/src/components/Footer.js @@ -5,7 +5,7 @@ render(){ ) } diff --git a/src/components/RandomTopic.js b/src/components/RandomTopic.js index c1fbf41..1ccc6c2 100644 --- a/src/components/RandomTopic.js +++ b/src/components/RandomTopic.js @@ -32,8 +32,10 @@ class RandomTopic extends React.Component { {/* View all topics button*/} {/* Shuffle button */} diff --git a/src/components/SectionHeading.js b/src/components/SectionHeading.js index 4f3f97a..0ebaae3 100644 --- a/src/components/SectionHeading.js +++ b/src/components/SectionHeading.js @@ -8,8 +8,8 @@ class SectionHeading extends React.Component { render() { return (

- {this.props.title} - ({this.props.count}) + + {this.props.title} /{this.props.count}/

) diff --git a/src/components/TopicsList.js b/src/components/TopicsList.js index afa1345..8a5241e 100644 --- a/src/components/TopicsList.js +++ b/src/components/TopicsList.js @@ -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 (
-
+ + {this.state.filteredTopics.map(topic => { + return ( +
+ +

{topic.name} ({topic.items} videos)

+ +
+ ) + } + )} + - {this.state.filteredTopics.map(topic => { - return ( -
- -

{topic.name} ({topic.items} videos)

- -
- ) - } - )}
) } diff --git a/src/containers/Results.js b/src/containers/Results.js index a21ed02..9f76bf2 100644 --- a/src/containers/Results.js +++ b/src/containers/Results.js @@ -17,7 +17,7 @@ class Results extends React.Component { } render() { - console.log('results', this.props.searchResults); + // console.log('results', this.props.searchResults); return ( - +
+

+ جميع مواضيع الارشيف +
+ {/*topics from the Archive */} + + all topics + + +

{/* TODO: get the topics objects*/}
diff --git a/src/stylesheets/globals.scss b/src/stylesheets/globals.scss index 8c7c4a7..8fac4ec 100644 --- a/src/stylesheets/globals.scss +++ b/src/stylesheets/globals.scss @@ -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; + } } + +// \ No newline at end of file diff --git a/src/stylesheets/items-list.scss b/src/stylesheets/items-list.scss index 47adf00..45ce0f5 100644 --- a/src/stylesheets/items-list.scss +++ b/src/stylesheets/items-list.scss @@ -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; diff --git a/src/stylesheets/nav.scss b/src/stylesheets/nav.scss index f5c7165..5a39c80 100644 --- a/src/stylesheets/nav.scss +++ b/src/stylesheets/nav.scss @@ -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 { diff --git a/src/stylesheets/random-item.scss b/src/stylesheets/random-item.scss index 4590530..9fa446a 100644 --- a/src/stylesheets/random-item.scss +++ b/src/stylesheets/random-item.scss @@ -65,7 +65,7 @@ h3.section-title { left: 0; //position: absolute; justify-self: left; - padding: 1em 0px; + padding: .9em 0px; padding-right: 5px; } // shuffle @@ -97,4 +97,22 @@ span.english-text.bold-english-text{ } span.arabic-text.bold-arabic-text{ font-size: 28px; -} \ No newline at end of file +} + +// 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; +//} \ No newline at end of file diff --git a/src/stylesheets/results.scss b/src/stylesheets/results.scss new file mode 100644 index 0000000..b536e93 --- /dev/null +++ b/src/stylesheets/results.scss @@ -0,0 +1,5 @@ +@import "variables"; +@import "globals"; +@import "header"; + +/* nav */ diff --git a/src/stylesheets/search.scss b/src/stylesheets/search.scss index 69b0c4d..c3b1d53 100644 --- a/src/stylesheets/search.scss +++ b/src/stylesheets/search.scss @@ -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; } diff --git a/src/stylesheets/style.scss b/src/stylesheets/style.scss index 3d440d4..02dab66 100644 --- a/src/stylesheets/style.scss +++ b/src/stylesheets/style.scss @@ -8,4 +8,5 @@ @import "video-player"; @import "footer"; @import "items-list"; +@import "results"; @import "~video-react/styles/scss/video-react"; \ No newline at end of file diff --git a/src/stylesheets/video-item.scss b/src/stylesheets/video-item.scss index acaa9e8..b699a0a 100644 --- a/src/stylesheets/video-item.scss +++ b/src/stylesheets/video-item.scss @@ -28,3 +28,7 @@ padding-top: 1em; font-weight: normal; } +// FIXME: +section.video-item:hover { + outline: 2px solid black; +} \ No newline at end of file