working

quran · Aug 7, 2016 · 0ded384 · 0ded384
1 parent eab6d45
commit 0ded384
Show file tree

Hide file tree

Showing 78 changed files with 93 additions and 47 deletions.
diff --git a/bootstrap.config.js b/bootstrap.config.js
@@ -48,7 +48,7 @@ module.exports = {
     "alerts": false,
     "progress-bars": false,
     "media": false,
-    "list-group": false,
+    "list-group": true,
     "panels": true,
     "wells": false,
     "close": true,

diff --git a/compress-images.js b/compress-images.js
@@ -0,0 +1,14 @@
+const imagemin = require('imagemin');
+const imageminMozjpeg = require('imagemin-mozjpeg');
+const imageminPngquant = require('imagemin-pngquant');
+const imageminJpegRecompress = require('imagemin-jpeg-recompress');
+
+
+imagemin(['./static/images/background/*.jpeg'], './static/images/background/compressed', {
+  plugins: [
+    imageminJpegRecompress({quality: 'low', min: 1, max: 10}),
+    // imageminMozjpeg(),
+  ]
+}).then(files => {
+  console.log('Done!', files);
+}).catch(err => console.log(err));
diff --git a/package.json b/package.json
@@ -26,7 +26,8 @@
     "dev": "env NODE_PATH='./src' PORT=8000 UV_THREADPOOL_SIZE=100 node webpack/webpack-dev-server.js & env NODE_PATH='./src' PORT=8000 APIPORT=8080 node bin/server.js & env APIPORT=8080 NODE_PATH='./api' node bin/api.js",
     "test": "karma start",
     "test-node": "./node_modules/mocha/bin/mocha $(find api -name '*-test.js') --compilers js:babel-core/register",
-    "test-node-watch": "./node_modules/mocha/bin/mocha $(find api -name '*-test.js') --compilers js:babel-core/register --watch"
+    "test-node-watch": "./node_modules/mocha/bin/mocha $(find api -name '*-test.js') --compilers js:babel-core/register --watch",
+    "compress-images": "node compress-images.js"
   },
   "betterScripts": {
     "start-prod": {
@@ -160,6 +161,12 @@
     "eslint-plugin-react": "^3.5.0",
     "font-awesome": "^4.4.0",
     "font-awesome-webpack": "0.0.4",
+    "imagemin": "^5.2.2",
+    "imagemin-jpeg-recompress": "^5.1.0",
+    "imagemin-jpegoptim": "^5.0.0",
+    "imagemin-jpegtran": "^5.0.2",
+    "imagemin-mozjpeg": "^6.0.0",
+    "imagemin-pngquant": "^5.0.0",
     "json-loader": "^0.5.4",
     "karma": "^0.13.10",
     "karma-cli": "^0.1.1",

diff --git a/src/components/Audioplayer/index.js b/src/components/Audioplayer/index.js
@@ -188,6 +188,10 @@ export default class Audioplayer extends Component {
   render() {
     const { file, progress, qari, surah } = this.props; // eslint-disable-line no-shadow
 
+    if (!qari || !surah) {
+      return <noscript />;
+    }
+
     return (
       <Row>
         <Col md={12}>

diff --git a/src/containers/Home/index.js b/src/containers/Home/index.js
@@ -8,6 +8,7 @@ import Nav from 'react-bootstrap/lib/Nav';
 import NavItem from 'react-bootstrap/lib/NavItem';
 
 const styles = require('./style.scss');
+const images = Array(33).join(',').split(',').map((__, index) => require(`../../../static/images/background/compressed/${index + 1}.jpeg`));
 
 @connect(
   state => ({
@@ -63,9 +64,13 @@ export default class Home extends Component {
               <Row>
                 {
                   Object.values(qaris).filter(qari => qari.sectionId === section).sort((prev, next) => next.name > prev.name ? -1 : 1).map(qari => (
-                    <Col md={4} key={qari.id}>
-                      <Link to={`/quran/${qari.id}`}>
-                        {qari.name}
+                    <Col md={3} key={qari.id}>
+                      <Link
+                        className={styles.reciter}
+                        to={`/quran/${qari.id}`}
+                        style={{background: `url(${images[qari.id % images.length]}) center center no-repeat`, backgroundSize: 'cover'}}>
+                        <div className={styles.overlay} />
+                        <div className={styles.text}>{qari.name}</div>
                       </Link>
                     </Col>
                   ))

diff --git a/src/containers/Home/style.scss b/src/containers/Home/style.scss
@@ -23,3 +23,41 @@
   padding-top: 1.5rem;
   padding-bottom: 2rem;
 }
+
+.reciter{
+  height: 150px;
+  display: block;
+  color: #fff;
+  position: relative;
+  margin-top: 15px;
+  margin-bottom: 15px;
+
+  &:hover{
+    color: #fff;
+
+    .overlay{
+      background: rgba(0,0,0,0.25);
+    }
+  }
+
+  .text{
+    text-align: center;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 100%;
+    font-size: 2rem;
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+
+  .overlay{
+    position: absolute;
+    top: 0px;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+    background: rgba(0,0,0,0.65);
+    transition: all 0.5s;
+  }
+}
diff --git a/src/containers/Qari/index.js b/src/containers/Qari/index.js
@@ -42,10 +42,14 @@ export default class Qaris extends Component {
 
   render() {
     const { surahs, qari, files } = this.props;
+    const image = require(`../../../static/images/background/${(parseInt(qari.id, 10) + 1) % 33}.jpeg`);
 
     return (
       <div>
-        <Grid fluid className={`${styles.reciterBackground} ${qari.sectionId === 2 && styles.meccaBg}`}>
+        <Grid
+          fluid
+          className={`${styles.reciterBackground} ${qari.sectionId === 2 && styles.meccaBg}`}
+          style={{background: `url(${image}) center top no-repeat`}}>
           <Row>
             <Col md={12} className="text-center">
               <h1>

diff --git a/src/containers/Qari/style.scss b/src/containers/Qari/style.scss
@@ -1,7 +1,6 @@
 @import "../../styles/variables.scss";
 
 .reciterBackground{
-  background: url('../../../static/images/2.jpeg') center center no-repeat;
   background-size: cover;
   min-height: 300px;
   min-height: 30vh;
@@ -38,12 +37,23 @@
 
 
   :global(.list-group-item){
-    :global(.fa-play-circle){
-      display: none;
-    }
+
   }
 
   :global(.list-group-item:hover){
+
+  }
+}
+.row{
+  cursor: pointer;
+
+  :global(.fa-play-circle){
+    display: none;
+  }
+
+  &:hover{
+    background-color: #f7f7f7;
+
     :global(.fa-play-circle){
       display: inline;
       line-height: 0.5em;
@@ -56,10 +66,3 @@
     }
   }
 }
-.row{
-  cursor: pointer;
-
-  &:hover{
-    background-color: #f7f7f7;
-  }
-}
diff --git a/src/helpers/Html.js b/src/helpers/Html.js
@@ -34,6 +34,7 @@ export default class Html extends Component {
           {head.script.toComponent()}
 
           <link rel="shortcut icon" href="/favicon.ico" />
+          <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
           <meta name="viewport" content="width=device-width, initial-scale=1" />
           {/* styles (will be present only in production with webpack extract text plugin) */}
           {Object.keys(assets.styles).map((style, key) =>

diff --git a/src/styles/font-awesome.config.js b/src/styles/font-awesome.config.js
diff --git a/src/styles/font-awesome.config.less b/src/styles/font-awesome.config.less
diff --git a/src/styles/font-awesome.config.prod.js b/src/styles/font-awesome.config.prod.js
diff --git a/static/images/1.jpeg → static/images/background/1.jpeg b/static/images/1.jpeg → static/images/background/1.jpeg
diff --git a/static/images/10.jpeg → static/images/background/10.jpeg b/static/images/10.jpeg → static/images/background/10.jpeg
diff --git a/static/images/11.jpeg → static/images/background/11.jpeg b/static/images/11.jpeg → static/images/background/11.jpeg
diff --git a/static/images/12.jpeg → static/images/background/12.jpeg b/static/images/12.jpeg → static/images/background/12.jpeg
diff --git a/static/images/13.jpeg → static/images/background/13.jpeg b/static/images/13.jpeg → static/images/background/13.jpeg
diff --git a/static/images/14.jpeg → static/images/background/14.jpeg b/static/images/14.jpeg → static/images/background/14.jpeg
diff --git a/static/images/15.jpeg → static/images/background/15.jpeg b/static/images/15.jpeg → static/images/background/15.jpeg
diff --git a/static/images/16.jpeg → static/images/background/16.jpeg b/static/images/16.jpeg → static/images/background/16.jpeg
diff --git a/static/images/17.jpeg → static/images/background/17.jpeg b/static/images/17.jpeg → static/images/background/17.jpeg
diff --git a/static/images/18.jpeg → static/images/background/18.jpeg b/static/images/18.jpeg → static/images/background/18.jpeg
diff --git a/static/images/19.jpeg → static/images/background/19.jpeg b/static/images/19.jpeg → static/images/background/19.jpeg
diff --git a/static/images/2.jpeg → static/images/background/2.jpeg b/static/images/2.jpeg → static/images/background/2.jpeg
diff --git a/static/images/20.jpeg → static/images/background/20.jpeg b/static/images/20.jpeg → static/images/background/20.jpeg
diff --git a/static/images/21.jpeg → static/images/background/21.jpeg b/static/images/21.jpeg → static/images/background/21.jpeg
diff --git a/static/images/22.jpeg → static/images/background/22.jpeg b/static/images/22.jpeg → static/images/background/22.jpeg
diff --git a/static/images/23.jpeg → static/images/background/23.jpeg b/static/images/23.jpeg → static/images/background/23.jpeg
diff --git a/static/images/24.jpeg → static/images/background/24.jpeg b/static/images/24.jpeg → static/images/background/24.jpeg
diff --git a/static/images/25.jpeg → static/images/background/25.jpeg b/static/images/25.jpeg → static/images/background/25.jpeg
diff --git a/static/images/26.jpeg → static/images/background/26.jpeg b/static/images/26.jpeg → static/images/background/26.jpeg
diff --git a/static/images/27.jpeg → static/images/background/27.jpeg b/static/images/27.jpeg → static/images/background/27.jpeg
diff --git a/static/images/28.jpeg → static/images/background/28.jpeg b/static/images/28.jpeg → static/images/background/28.jpeg
diff --git a/static/images/29.jpeg → static/images/background/29.jpeg b/static/images/29.jpeg → static/images/background/29.jpeg
diff --git a/static/images/3.jpeg → static/images/background/3.jpeg b/static/images/3.jpeg → static/images/background/3.jpeg
diff --git a/static/images/30.jpeg → static/images/background/30.jpeg b/static/images/30.jpeg → static/images/background/30.jpeg
diff --git a/static/images/31.jpeg → static/images/background/31.jpeg b/static/images/31.jpeg → static/images/background/31.jpeg
diff --git a/static/images/32.jpeg → static/images/background/32.jpeg b/static/images/32.jpeg → static/images/background/32.jpeg
diff --git a/static/images/33.jpeg → static/images/background/33.jpeg b/static/images/33.jpeg → static/images/background/33.jpeg
diff --git a/static/images/4.jpeg → static/images/background/4.jpeg b/static/images/4.jpeg → static/images/background/4.jpeg
diff --git a/static/images/5.jpeg → static/images/background/5.jpeg b/static/images/5.jpeg → static/images/background/5.jpeg
diff --git a/static/images/6.jpeg → static/images/background/6.jpeg b/static/images/6.jpeg → static/images/background/6.jpeg
diff --git a/static/images/7.jpeg → static/images/background/7.jpeg b/static/images/7.jpeg → static/images/background/7.jpeg
diff --git a/static/images/8.jpeg → static/images/background/8.jpeg b/static/images/8.jpeg → static/images/background/8.jpeg
diff --git a/static/images/9.jpeg → static/images/background/9.jpeg b/static/images/9.jpeg → static/images/background/9.jpeg
diff --git a/static/images/background/compressed/1.jpeg b/static/images/background/compressed/1.jpeg
diff --git a/static/images/background/compressed/10.jpeg b/static/images/background/compressed/10.jpeg
diff --git a/static/images/background/compressed/11.jpeg b/static/images/background/compressed/11.jpeg
diff --git a/static/images/background/compressed/12.jpeg b/static/images/background/compressed/12.jpeg
diff --git a/static/images/background/compressed/13.jpeg b/static/images/background/compressed/13.jpeg
diff --git a/static/images/background/compressed/14.jpeg b/static/images/background/compressed/14.jpeg
diff --git a/static/images/background/compressed/15.jpeg b/static/images/background/compressed/15.jpeg
diff --git a/static/images/background/compressed/16.jpeg b/static/images/background/compressed/16.jpeg
diff --git a/static/images/background/compressed/17.jpeg b/static/images/background/compressed/17.jpeg
diff --git a/static/images/background/compressed/18.jpeg b/static/images/background/compressed/18.jpeg
diff --git a/static/images/background/compressed/19.jpeg b/static/images/background/compressed/19.jpeg
diff --git a/static/images/background/compressed/2.jpeg b/static/images/background/compressed/2.jpeg
diff --git a/static/images/background/compressed/20.jpeg b/static/images/background/compressed/20.jpeg
diff --git a/static/images/background/compressed/21.jpeg b/static/images/background/compressed/21.jpeg
diff --git a/static/images/background/compressed/22.jpeg b/static/images/background/compressed/22.jpeg
diff --git a/static/images/background/compressed/23.jpeg b/static/images/background/compressed/23.jpeg
diff --git a/static/images/background/compressed/24.jpeg b/static/images/background/compressed/24.jpeg
diff --git a/static/images/background/compressed/25.jpeg b/static/images/background/compressed/25.jpeg
diff --git a/static/images/background/compressed/26.jpeg b/static/images/background/compressed/26.jpeg
diff --git a/static/images/background/compressed/27.jpeg b/static/images/background/compressed/27.jpeg
diff --git a/static/images/background/compressed/28.jpeg b/static/images/background/compressed/28.jpeg
diff --git a/static/images/background/compressed/29.jpeg b/static/images/background/compressed/29.jpeg
diff --git a/static/images/background/compressed/3.jpeg b/static/images/background/compressed/3.jpeg
diff --git a/static/images/background/compressed/30.jpeg b/static/images/background/compressed/30.jpeg
diff --git a/static/images/background/compressed/31.jpeg b/static/images/background/compressed/31.jpeg
diff --git a/static/images/background/compressed/32.jpeg b/static/images/background/compressed/32.jpeg
diff --git a/static/images/background/compressed/33.jpeg b/static/images/background/compressed/33.jpeg
diff --git a/static/images/background/compressed/4.jpeg b/static/images/background/compressed/4.jpeg
diff --git a/static/images/background/compressed/5.jpeg b/static/images/background/compressed/5.jpeg
diff --git a/static/images/background/compressed/6.jpeg b/static/images/background/compressed/6.jpeg
diff --git a/static/images/background/compressed/7.jpeg b/static/images/background/compressed/7.jpeg
diff --git a/static/images/background/compressed/8.jpeg b/static/images/background/compressed/8.jpeg
diff --git a/static/images/background/compressed/9.jpeg b/static/images/background/compressed/9.jpeg