EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: akashana on January 31, 2019, 10:22:40 AM



Title: Responsive Example for Mobile & Desktop
Post by: akashana on January 31, 2019, 10:22:40 AM
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.
 


Title: Re: Responsive Example for Mobile & Desktop
Post by: jarry on February 01, 2019, 09:18:37 PM
This is the simple example http://code.reloado.com/utisan3/edit#preview. You may do more works to design your own layout.


Title: Re: Responsive Example for Mobile & Desktop
Post by: akashana on February 01, 2019, 11:37:20 PM
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,


Title: Re: Responsive Example for Mobile & Desktop
Post by: akashana on February 02, 2019, 12:14:07 AM
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,


Title: Re: Responsive Example for Mobile & Desktop
Post by: thecyberzone on September 16, 2021, 10:37:35 AM
code.reloado.com server is down.      please upload the responsive design layout somewhere else.