From 45b435b201b3d91b7a0038516f1d71d29e8b3053 Mon Sep 17 00:00:00 2001 From: Ahmed-Ayman Date: Tue, 11 Dec 2018 12:42:56 +0200 Subject: [PATCH] refactor the project to use scss --- src/components/RandomTopic.js | 12 +- src/stylesheets/footer.scss | 11 ++ src/stylesheets/globals.scss | 52 ++++++++ src/stylesheets/header.scss | 25 ++++ src/stylesheets/nav.scss | 24 ++++ src/stylesheets/random-item.scss | 37 ++++++ src/stylesheets/search.scss | 40 ++++++ src/stylesheets/style.scss | 212 +----------------------------- src/stylesheets/video-item.scss | 30 +++++ src/stylesheets/video-player.scss | 1 + 10 files changed, 233 insertions(+), 211 deletions(-) create mode 100644 src/stylesheets/footer.scss create mode 100644 src/stylesheets/globals.scss create mode 100644 src/stylesheets/header.scss create mode 100644 src/stylesheets/nav.scss create mode 100644 src/stylesheets/random-item.scss create mode 100644 src/stylesheets/search.scss create mode 100644 src/stylesheets/video-item.scss create mode 100644 src/stylesheets/video-player.scss diff --git a/src/components/RandomTopic.js b/src/components/RandomTopic.js index d7f9a2e..382bdac 100644 --- a/src/components/RandomTopic.js +++ b/src/components/RandomTopic.js @@ -20,12 +20,12 @@ class RandomTopic extends React.Component { {this.props.videos.map(video => )} - - See All Topics - - - See All videos of {this.props.topicName} ({this.props.topicCount}) - + {/**/} + {/*See All Topics*/} + {/**/} + {/**/} + {/* See All videos of {this.props.topicName} ({this.props.topicCount})*/} + {/**/} diff --git a/src/stylesheets/footer.scss b/src/stylesheets/footer.scss new file mode 100644 index 0000000..fe78e15 --- /dev/null +++ b/src/stylesheets/footer.scss @@ -0,0 +1,11 @@ +@import "variables"; +/* footer */ +footer { + background: $light-gray-color; + position: absolute; + width: 100%; + left: 0; + margin-top: 1em; + padding: 1em; + font-weight: bold; +} diff --git a/src/stylesheets/globals.scss b/src/stylesheets/globals.scss new file mode 100644 index 0000000..c892b58 --- /dev/null +++ b/src/stylesheets/globals.scss @@ -0,0 +1,52 @@ +@import "variables"; +/* globals */ +* { + box-sizing: border-box; + margin: 0px; + border: 0px; +} + +/* fonts */ +@font-face { + 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-face { + 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-face { + font-family: 'interstate'; + src: url('../assets/fonts/Interstate-Regular.bmap') format('bmap'), + url('../assets/fonts/Interstate-Bold.bmap') format('bmap'); +} + +.text-left { + text-align: left; +} + +.arabic-text { + font-family: "Fedra Arabic", serif; +} + +.english-text { + font-family: majalla, serif; +} + +/* App */ +.App { + max-width: 960px; + margin: 0 auto; +} diff --git a/src/stylesheets/header.scss b/src/stylesheets/header.scss new file mode 100644 index 0000000..f16b883 --- /dev/null +++ b/src/stylesheets/header.scss @@ -0,0 +1,25 @@ +@import "variables"; +@import "globals"; + +/* header */ +header { + padding-top: 1em; +} + +.site-logo { + max-width: 300px; + text-align: center; +} + +.counter-container { + position: absolute; + display: inline-block; + right: 0; + top: 0; + padding: 2em; +} + +.counter { + position: relative; + right: 0; +} diff --git a/src/stylesheets/nav.scss b/src/stylesheets/nav.scss new file mode 100644 index 0000000..f5c7165 --- /dev/null +++ b/src/stylesheets/nav.scss @@ -0,0 +1,24 @@ +@import "variables"; +@import "globals"; +@import "header"; + +/* nav */ +nav { + margin: 3em; +} + +nav ul li { + display: inline-block; + list-style-type: none; + padding: 1em; + border-right: 1px solid black; +} + +nav ul li:last-child { + border-right: none; +} + +nav ul li a { + text-decoration: none; + color: black; +} diff --git a/src/stylesheets/random-item.scss b/src/stylesheets/random-item.scss new file mode 100644 index 0000000..aae482b --- /dev/null +++ b/src/stylesheets/random-item.scss @@ -0,0 +1,37 @@ +@import "variables"; + + +/* section heading*/ +.section-title { + padding: 1em; + margin-bottom: 1em; +} +.section-title::after{ + width: 100%; +} +.section-heading{ + padding-top: 1em; +} + +/* view all elements */ +.view-all-parents { + color: white; + background: black; + padding: 1em; + position: relative; + top: 1em; +} + +.view-all-parents, +.view-all-items { + text-decoration: none; +} + +.view-all-items { + color: black; + text-decoration: none; + padding: 1em; + border: 1px solid black; + position: relative; + top: 1em; +} diff --git a/src/stylesheets/search.scss b/src/stylesheets/search.scss new file mode 100644 index 0000000..cf8039a --- /dev/null +++ b/src/stylesheets/search.scss @@ -0,0 +1,40 @@ +@import "variables"; +@import "globals"; +@import "header"; + + +/* search */ +.search-button { + background: white; + bottom: -18px; + position: relative; +} + +.search-button img { + max-width: 50px; +} + +.search-box { + padding: 1em; + width: 50%; + background: $light-gray-color; +} + +.search-box::placeholder { + color: black; + text-align: center; + font-size: 1.5em; + color: gray; +} + +@media screen and (max-width: 700px) { + .search-box::placeholder { + font-size: 1em; + } +} + +@media screen and (max-width: 400px) { + .search-box::placeholder { + font-size: .75em; + } +} \ No newline at end of file diff --git a/src/stylesheets/style.scss b/src/stylesheets/style.scss index 0c73896..9d1152a 100644 --- a/src/stylesheets/style.scss +++ b/src/stylesheets/style.scss @@ -1,206 +1,8 @@ @import "variables"; -/* globals */ -* { - box-sizing: border-box; - margin: 0px; - border: 0px; -} - -/* fonts */ -@font-face { - 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-face { - 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-face { - font-family: 'interstate'; - src: url('../assets/fonts/Interstate-Regular.bmap') format('bmap'), - url('../assets/fonts/Interstate-Bold.bmap') format('bmap'); -} - -.text-left { - text-align: left; -} - -.arabic-text { - font-family: "Fedra Arabic", serif; -} - -.english-text { - font-family: majalla, serif; -} - -/* variables */ - -/* App */ -.App { - max-width: 960px; - margin: 0 auto; -} - -/* header */ -header { - padding-top: 1em; -} - -.site-logo { - max-width: 300px; - text-align: center; -} - -.counter-container { - position: absolute; - display: inline-block; - right: 0; - top: 0; - padding: 2em; -} - -.counter { - position: relative; - right: 0; -} - -/* search */ -.search-button { - background: white; - bottom: -18px; - position: relative; -} - -.search-button img { - max-width: 50px; -} - -.search-box { - padding: 1em; - width: 50%; - background: $light-gray-color; -} - -.search-box::placeholder { - color: black; - text-align: center; - font-size: 1.5em; - color: gray; -} - -@media screen and (max-width: 700px) { - .search-box::placeholder { - font-size: 1em; - } -} - -@media screen and (max-width: 400px) { - .search-box::placeholder { - font-size: .75em; - } -} - -/* Video item*/ -.video-item { - background: #f6f6f6; - min-height: 400px; - padding: 1em; -} -a{ - text-decoration: none; - font-size: 14px; - color: black; -} - -.video-thumbnail { - transition: all .4s ease-in-out; -} - -.video-thumbnail:hover { - transform: scale(1.1); -} - -.video-thumbnail-container { - position: relative; - overflow: hidden; -} - -/* section heading*/ -.section-title { - padding: 1em; - margin-bottom: 1em; -} -.section-title::after{ - width: 100%; -} -.section-heading{ - padding-top: 1em; -} - -/* footer */ -footer { - background: $light-gray-color; - position: absolute; - width: 100%; - left: 0; - margin-top: 1em; - padding: 1em; - font-weight: bold; -} - -/* nav */ -nav { - margin: 3em; -} - -nav ul li { - display: inline-block; - list-style-type: none; - padding: 1em; - border-right: 1px solid black; -} - -nav ul li:last-child { - border-right: none; -} - -nav ul li a { - text-decoration: none; - color: black; -} - -/* view all elements*/ - -.view-all-parents { - color: white; - background: black; - padding: 1em; - position: relative; - top: 1em; -} - -.view-all-parents, -.view-all-items { - text-decoration: none; -} - -.view-all-items { - color: black; - text-decoration: none; - padding: 1em; - border: 1px solid black; - position: relative; - top: 1em; -} \ No newline at end of file +@import "globals"; +@import "header"; +@import "nav"; +@import "search"; +@import "random-item"; +@import "video-item"; +@import "footer"; \ No newline at end of file diff --git a/src/stylesheets/video-item.scss b/src/stylesheets/video-item.scss new file mode 100644 index 0000000..f5b84f1 --- /dev/null +++ b/src/stylesheets/video-item.scss @@ -0,0 +1,30 @@ +@import "variables"; +@import "globals"; +@import "header"; + +/* Video item*/ +.video-item { + background: #f6f6f6; + min-height: 400px; + padding: 1em; +} + +a { + text-decoration: none; + font-size: 14px; + color: black; +} + +.video-thumbnail { + transition: all .4s ease-in-out; +} + +.video-thumbnail:hover { + transform: scale(1.1); +} + +.video-thumbnail-container { + position: relative; + overflow: hidden; +} + diff --git a/src/stylesheets/video-player.scss b/src/stylesheets/video-player.scss new file mode 100644 index 0000000..9132fb6 --- /dev/null +++ b/src/stylesheets/video-player.scss @@ -0,0 +1 @@ +@import "variables";