Responsive Example for Mobile & Desktop

[akashana]

Hi,

We found that your library is very good for business application development. We were wondering whether is it possible to develop responsive page similar to https://hencework.com/theme/pangong/email.html?

As you can see, on desktop, all 3 panels are visible. On mobile, menu is collapsed, email preview is hidden and only inbox is visible. When we click on any email, preview slides and back button is displayed to go back to email list. Very nice experience. Moreover, menu overlaps on inbox.

We will have many such views for leave approval or any other user requests.

I am quite confident that it is possible to develop it using your components. If you can provide example, it will be really helpful for us as well as many others to have single code base for mobile as well as for desktop.

Thanks in advance.
 

[jarry]

This is the simple example http://code.reloado.com/utisan3/edit#preview. You may do more works to design your own layout.

[akashana]

Hi Jarry,

Very nice! Almost done. Thank a ton for your quick help.

One last request. If possible, please help to complete the mobile experience.

1. Do not show collapse button & collapsed mode for east. Instead, hide "east" on window resize.
2. Add button in "main" to simulate some action in main. upon button click, slide "east" from right side pushing "main". Show back button to top left corner of "east".
3. Upon clicking back button, slide "main" to the right, pushing "east".

Once again thanks a lot.

Regards,

[akashana]

Hi Jarry,

I just noticed that the example you provided is not responsive. The one I found http://code.reloado.com/itiloj3/2/edit#preview is working really nice on mobile.

Regards,

[thecyberzone]

code.reloado.com server is down.      please upload the responsive design layout somewhere else.