Add media-queries and adjust look/feel so it works well on different devices

[nagarkar]

Supported Devices:
iPad (1024x768)
Nexus 7 (960x600, landscape)

General format for CSS files:

/** Styles applicable to all (should be the majority */

/* iPads (landscape) ----------- /
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/ Styles */
}

/* Nexus 7 (landscape) ----------- /
@media only screen
and (min-width : 960px)
and (max-device-width : 1023px)
and (orientation: landscape) {
/ Styles */
}

Resources:
http://stackoverflow.com/questions/13847755/css-media-queries-for-screen-sizes
http://stackoverflow.com/questions/12557353/how-to-target-galaxy-nexus-and-nexus-7-with-media-queries

[SantoshSah]

We started working on this issue from today. Before start working, i tested on ipad and Nexus7 and it seems working for these devices. I used complaintComponentComponent and RequestReiewComponent for testing. Could you please send some screenshots and explain what is not working there and why we need madia-queries for these pages? "responsive" attribute from ion seems to work.

[nagarkar]

Sure, it "works" but it's not perfect. We need the content to fill the screen perfectly, which is not happening. Even without the actual device, you can see this by switching between Nexus 7 and iPad resolution in chrome. I'll try to upload some screenshots later.

[SantoshSah]

If you could upload screens with description now, i could understand your concerns better.

[nagarkar]

Take a look at this video demonstrating some of the problems.
cssproblems.mp4.zip

[SantoshSah]

thanks, i will into it now. Please commit any code changes. I am getting error

src/shared/service/abstract.service.ts
Utils.error("Failed to create member {0} at AbstracteService.create, for class {1}",
member, this.constructor.name);
return;

and can not run latest pull from master.

[nagarkar]

sorry about that, pls try again.

[SantoshSah]

Thanks. It is working now.