surah list design

[Ashraf-Ali-aa]

added CSS design for surah list view

[Ashraf-Ali-aa]

@iBasit the image sizes are auto generated using the ionic CLI tool, regarding colours I can get that changed, but the only reason I referenced the colour names into the global CSS colour was due to I can't remember the colour just by looking at the current global names. From the doc's it says we only need the primary colour and we can add custom names, what we can do is move the colour names into the global colour names, what do you think?

// The "primary" color is the only required color in the map.

[iBasit]

you can add more color names, but use it as global names.. rather then color specific names..

primary  == gold
danger == red

light == gray or white

secondary == ....

primary-light == gold (lighter shade)

[Ashraf-Ali-aa]

@iBasit do you know how to get the ionic global colours into SCSS, previously I was using SCSS variables i.e $black: #000 but I can't use the ionic colour names directly i.e use $light variable in other SCSS files.

[Ashraf-Ali-aa]

@iBasit what do you think of this implementation http://erskinedesign.com/blog/friendlier-colour-names-sass-maps/

[iBasit]

to get primary use map-get($colors, 'primary') https://scotch.io/tutorials/aesthetic-sass-2-colors

don't use friendlier-coloru-names, use how ionic and twitter-bootstrap has already used, which is standard way for frontend developers.

always go with what is already been getting used by hundred of thousands of users.

[Ashraf-Ali-aa]

@iBasit has this passed C/R.

[iBasit]

some images were little different to previous ones.. like this one:

[Ashraf-Ali-aa]

@iBasit this is what I used to create the splash screens http://ionicframework.com/docs/cli/icon-splashscreen.html