Quantcast

Change the layout a little to make the mobile view better

classic Classic list List threaded Threaded
8 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Change the layout a little to make the mobile view better

ExsonQu
Administrator
Dear all,

              I've received a solution for webERP users can use the mobile to view more convenient. But there are a little change of the layout.

            The logout and help are moved to top left corner.  I attached the screen shot here.

            If there are no objection, I'll commit his change to the trunk.

            newlayout.zip

           Thanks and best regards!

           Exson
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Change the layout a little to make the mobile view better

phildaintree
A phone theme would be great !!

Phil

Phil Daintree
Logic Works Ltd - +64 (0)275 567890
http://www.logicworks.co.nz

On 19/06/15 23:05, ExsonQu wrote:

> *Dear all,*
>
>                I've received a solution for webERP users can use the mobile
> to view more convenient. But there are a little change of the layout.
>
>              The *logout* and *help *are moved to top left corner.  I
> attached the screen shot here.
>
>              If there are no objection, I'll commit his change to the trunk.
>
>               newlayout.zip
> <http://weberp-accounting.1478800.n4.nabble.com/file/n4658271/newlayout.zip>
>
>             Thanks and best regards!
>
>             Exson
>
>
>
> --
> View this message in context: http://weberp-accounting.1478800.n4.nabble.com/Change-the-layout-a-little-to-make-the-mobile-view-better-tp4658271.html
> Sent from the web-ERP-developers mailing list archive at Nabble.com.
>
> ------------------------------------------------------------------------------
> _______________________________________________
> Web-erp-developers mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/web-erp-developers
>


------------------------------------------------------------------------------
_______________________________________________
Web-erp-developers mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/web-erp-developers
If anyone is wondering about the persistently nasty comments made by Tim Schofield and wants the full story please see: http://timschofield.blogspot.com/ Hell hath no fury like a woman (or Tim) scorned
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Change the layout a little to make the mobile view better

Rafael Chacón
Hi Exson,

It is great to run webERP in a smartphone (small devices).

If you do not want to change the layout, the solution is simple:

*** Add at the bottom of the css:

@media only screen and (max-width: 1024px) {
...code...
}

On "max-width" is the width from you want the change. If you want for differents sizes (one for less than 480px and other for 480px to 1024px) you can have: 

@media only screen and (max-device-width : 480px) {
...code for this size...
}
@media only screen and (min-device-width : 480px) and (max-device-width : 1024px) {
...code for this size...
}

In this section, you put only changes (differences) with the "desktop screen".


*** If the problem is the QuickMenuDiv, you can re-style with "display:inline; line-height:37px; padding:8px; etc" .
Comment: in the "desktop screen": padding-bottom: 11px; padding-left: 24px; padding-right: 24px; padding-top: 11px; so that creates a QuickMenuDiv so big in the little screen.
Suggestion 1: You can also re-style the MainMenuDiv to have it in inline mode (horizontal with wrap), so in this way you can save space for the SubMenuDiv.
Suggestion 2: you can use float and width properties to to reposition the columns to the width available of the 3 blocks of SubMenuDiv.

----
On the other hand, if you want to change in inner code, there is a solution: bootstrap. Some selectors must change the name, but we can arrive to have a full responsive web design.

Best regards, rafael.


2015-06-19 7:18 GMT-06:00 Phil Daintree <[hidden email]>:
A phone theme would be great !!

Phil

Phil Daintree
Logic Works Ltd - <a href="tel:%2B64%20%280%29275%20567890" value="+64275567890">+64 (0)275 567890
http://www.logicworks.co.nz

On 19/06/15 23:05, ExsonQu wrote:
> *Dear all,*
>
>                I've received a solution for webERP users can use the mobile
> to view more convenient. But there are a little change of the layout.
>
>              The *logout* and *help *are moved to top left corner.  I
> attached the screen shot here.
>
>              If there are no objection, I'll commit his change to the trunk.
>
>               newlayout.zip
> <http://weberp-accounting.1478800.n4.nabble.com/file/n4658271/newlayout.zip>
>
>             Thanks and best regards!
>
>             Exson
>
>
>
> --
> View this message in context: http://weberp-accounting.1478800.n4.nabble.com/Change-the-layout-a-little-to-make-the-mobile-view-better-tp4658271.html
> Sent from the web-ERP-developers mailing list archive at Nabble.com.
>
> ------------------------------------------------------------------------------
> _______________________________________________
> Web-erp-developers mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/web-erp-developers
>


------------------------------------------------------------------------------
_______________________________________________
Web-erp-developers mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/web-erp-developers


------------------------------------------------------------------------------

_______________________________________________
Web-erp-developers mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/web-erp-developers
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Change the layout a little to make the mobile view better

Rafael Chacón
Hi,

I added the meta tag:

"<meta name="viewport" content="width=device-width, initial-scale=1">"

to header.inc. The purpose of this tag is to tell the small device that the website is a responsive site. That is: to keep a relationship 1:1 between CSS pixels and device pixels.

I put it as a commented line because, if someone use a "big device" CSS format in a small device, this can cause him problems (he has to move the screen to see content; he can not see all in a small size). If someone wants to use CSS for small-devices (responsive website), just uncomment this line.

Note: I re-format for better reading, and I use commas instead of dots in the echo function because PHP with dots joins the string first and then outputs them, while with commas just prints them out one after the other (little faster).

Best regards, Rafael.

2015-06-19 14:03 GMT-06:00 Rafael Chacón <[hidden email]>:
Hi Exson,

It is great to run webERP in a smartphone (small devices).

If you do not want to change the layout, the solution is simple:

*** Add at the bottom of the css:

@media only screen and (max-width: 1024px) {
...code...
}

On "max-width" is the width from you want the change. If you want for differents sizes (one for less than 480px and other for 480px to 1024px) you can have: 

@media only screen and (max-device-width : 480px) {
...code for this size...
}
@media only screen and (min-device-width : 480px) and (max-device-width : 1024px) {
...code for this size...
}

In this section, you put only changes (differences) with the "desktop screen".


*** If the problem is the QuickMenuDiv, you can re-style with "display:inline; line-height:37px; padding:8px; etc" .
Comment: in the "desktop screen": padding-bottom: 11px; padding-left: 24px; padding-right: 24px; padding-top: 11px; so that creates a QuickMenuDiv so big in the little screen.
Suggestion 1: You can also re-style the MainMenuDiv to have it in inline mode (horizontal with wrap), so in this way you can save space for the SubMenuDiv.
Suggestion 2: you can use float and width properties to to reposition the columns to the width available of the 3 blocks of SubMenuDiv.

----
On the other hand, if you want to change in inner code, there is a solution: bootstrap. Some selectors must change the name, but we can arrive to have a full responsive web design.

Best regards, rafael.


2015-06-19 7:18 GMT-06:00 Phil Daintree <[hidden email]>:
A phone theme would be great !!

Phil

Phil Daintree
Logic Works Ltd - <a href="tel:%2B64%20%280%29275%20567890" value="+64275567890" target="_blank">+64 (0)275 567890
http://www.logicworks.co.nz

On 19/06/15 23:05, ExsonQu wrote:
> *Dear all,*
>
>                I've received a solution for webERP users can use the mobile
> to view more convenient. But there are a little change of the layout.
>
>              The *logout* and *help *are moved to top left corner.  I
> attached the screen shot here.
>
>              If there are no objection, I'll commit his change to the trunk.
>
>               newlayout.zip
> <http://weberp-accounting.1478800.n4.nabble.com/file/n4658271/newlayout.zip>
>
>             Thanks and best regards!
>
>             Exson
>
>
>
> --
> View this message in context: http://weberp-accounting.1478800.n4.nabble.com/Change-the-layout-a-little-to-make-the-mobile-view-better-tp4658271.html
> Sent from the web-ERP-developers mailing list archive at Nabble.com.
>
> ------------------------------------------------------------------------------
> _______________________________________________
> Web-erp-developers mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/web-erp-developers
>


------------------------------------------------------------------------------
_______________________________________________
Web-erp-developers mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/web-erp-developers



------------------------------------------------------------------------------

_______________________________________________
Web-erp-developers mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/web-erp-developers
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Change the layout a little to make the mobile view better

phildaintree
we have by convention concatenated all strings first ... I am not sure if there is a lot of overhead.
Phil

Phil Daintree
Logic Works Ltd - +64 (0)275 567890
http://www.logicworks.co.nz
On 21/06/15 03:28, Rafael Chacón wrote:
Hi,

I added the meta tag:

"<meta name="viewport" content="width=device-width, initial-scale=1">"

to header.inc. The purpose of this tag is to tell the small device that the website is a responsive site. That is: to keep a relationship 1:1 between CSS pixels and device pixels.

I put it as a commented line because, if someone use a "big device" CSS format in a small device, this can cause him problems (he has to move the screen to see content; he can not see all in a small size). If someone wants to use CSS for small-devices (responsive website), just uncomment this line.

Note: I re-format for better reading, and I use commas instead of dots in the echo function because PHP with dots joins the string first and then outputs them, while with commas just prints them out one after the other (little faster).

Best regards, Rafael.

2015-06-19 14:03 GMT-06:00 Rafael Chacón <[hidden email]>:
Hi Exson,

It is great to run webERP in a smartphone (small devices).

If you do not want to change the layout, the solution is simple:

*** Add at the bottom of the css:

@media only screen and (max-width: 1024px) {
...code...
}

On "max-width" is the width from you want the change. If you want for differents sizes (one for less than 480px and other for 480px to 1024px) you can have: 

@media only screen and (max-device-width : 480px) {
...code for this size...
}
@media only screen and (min-device-width : 480px) and (max-device-width : 1024px) {
...code for this size...
}

In this section, you put only changes (differences) with the "desktop screen".


*** If the problem is the QuickMenuDiv, you can re-style with "display:inline; line-height:37px; padding:8px; etc" .
Comment: in the "desktop screen": padding-bottom: 11px; padding-left: 24px; padding-right: 24px; padding-top: 11px; so that creates a QuickMenuDiv so big in the little screen.
Suggestion 1: You can also re-style the MainMenuDiv to have it in inline mode (horizontal with wrap), so in this way you can save space for the SubMenuDiv.
Suggestion 2: you can use float and width properties to to reposition the columns to the width available of the 3 blocks of SubMenuDiv.

----
On the other hand, if you want to change in inner code, there is a solution: bootstrap. Some selectors must change the name, but we can arrive to have a full responsive web design.

Best regards, rafael.


2015-06-19 7:18 GMT-06:00 Phil Daintree <[hidden email]>:
A phone theme would be great !!

Phil

Phil Daintree
Logic Works Ltd - <a moz-do-not-send="true" href="tel:%2B64%20%280%29275%20567890" value="+64275567890" target="_blank">+64 (0)275 567890
http://www.logicworks.co.nz

On 19/06/15 23:05, ExsonQu wrote:
> *Dear all,*
>
>                I've received a solution for webERP users can use the mobile
> to view more convenient. But there are a little change of the layout.
>
>              The *logout* and *help *are moved to top left corner.  I
> attached the screen shot here.
>
>              If there are no objection, I'll commit his change to the trunk.
>
>               newlayout.zip
> <http://weberp-accounting.1478800.n4.nabble.com/file/n4658271/newlayout.zip>
>
>             Thanks and best regards!
>
>             Exson
>
>
>
> --
> View this message in context: http://weberp-accounting.1478800.n4.nabble.com/Change-the-layout-a-little-to-make-the-mobile-view-better-tp4658271.html
> Sent from the web-ERP-developers mailing list archive at Nabble.com.
>
> ------------------------------------------------------------------------------
> _______________________________________________
> Web-erp-developers mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/web-erp-developers
>


------------------------------------------------------------------------------
_______________________________________________
Web-erp-developers mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/web-erp-developers




------------------------------------------------------------------------------


_______________________________________________
Web-erp-developers mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/web-erp-developers


------------------------------------------------------------------------------

_______________________________________________
Web-erp-developers mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/web-erp-developers
If anyone is wondering about the persistently nasty comments made by Tim Schofield and wants the full story please see: http://timschofield.blogspot.com/ Hell hath no fury like a woman (or Tim) scorned
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Change the layout a little to make the mobile view better

Rafael Chacón
In reply to this post by Rafael Chacón
Hi Exson;

Sorry not to be able to help more.

Some other suggestions to have a CSS for small devices:

* Hide icons in AppInfoDiv ( AppInfoDiv img{display: none;} ).
* Replace "Manual" and "Logout" links with help-icon_button and logout-icon_button.

Best regards, Rafael.



2015-06-20 9:28 GMT-06:00 Rafael Chacón <[hidden email]>:
Hi,

I added the meta tag:

"<meta name="viewport" content="width=device-width, initial-scale=1">"

to header.inc. The purpose of this tag is to tell the small device that the website is a responsive site. That is: to keep a relationship 1:1 between CSS pixels and device pixels.

I put it as a commented line because, if someone use a "big device" CSS format in a small device, this can cause him problems (he has to move the screen to see content; he can not see all in a small size). If someone wants to use CSS for small-devices (responsive website), just uncomment this line.

Note: I re-format for better reading, and I use commas instead of dots in the echo function because PHP with dots joins the string first and then outputs them, while with commas just prints them out one after the other (little faster).

Best regards, Rafael.

2015-06-19 14:03 GMT-06:00 Rafael Chacón <[hidden email]>:
Hi Exson,

It is great to run webERP in a smartphone (small devices).

If you do not want to change the layout, the solution is simple:

*** Add at the bottom of the css:

@media only screen and (max-width: 1024px) {
...code...
}

On "max-width" is the width from you want the change. If you want for differents sizes (one for less than 480px and other for 480px to 1024px) you can have: 

@media only screen and (max-device-width : 480px) {
...code for this size...
}
@media only screen and (min-device-width : 480px) and (max-device-width : 1024px) {
...code for this size...
}

In this section, you put only changes (differences) with the "desktop screen".


*** If the problem is the QuickMenuDiv, you can re-style with "display:inline; line-height:37px; padding:8px; etc" .
Comment: in the "desktop screen": padding-bottom: 11px; padding-left: 24px; padding-right: 24px; padding-top: 11px; so that creates a QuickMenuDiv so big in the little screen.
Suggestion 1: You can also re-style the MainMenuDiv to have it in inline mode (horizontal with wrap), so in this way you can save space for the SubMenuDiv.
Suggestion 2: you can use float and width properties to to reposition the columns to the width available of the 3 blocks of SubMenuDiv.

----
On the other hand, if you want to change in inner code, there is a solution: bootstrap. Some selectors must change the name, but we can arrive to have a full responsive web design.

Best regards, rafael.


2015-06-19 7:18 GMT-06:00 Phil Daintree <[hidden email]>:
A phone theme would be great !!

Phil

Phil Daintree
Logic Works Ltd - <a href="tel:%2B64%20%280%29275%20567890" value="+64275567890" target="_blank">+64 (0)275 567890
http://www.logicworks.co.nz

On 19/06/15 23:05, ExsonQu wrote:
> *Dear all,*
>
>                I've received a solution for webERP users can use the mobile
> to view more convenient. But there are a little change of the layout.
>
>              The *logout* and *help *are moved to top left corner.  I
> attached the screen shot here.
>
>              If there are no objection, I'll commit his change to the trunk.
>
>               newlayout.zip
> <http://weberp-accounting.1478800.n4.nabble.com/file/n4658271/newlayout.zip>
>
>             Thanks and best regards!
>
>             Exson
>
>
>
> --
> View this message in context: http://weberp-accounting.1478800.n4.nabble.com/Change-the-layout-a-little-to-make-the-mobile-view-better-tp4658271.html
> Sent from the web-ERP-developers mailing list archive at Nabble.com.
>
> ------------------------------------------------------------------------------
> _______________________________________________
> Web-erp-developers mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/web-erp-developers
>


------------------------------------------------------------------------------
_______________________________________________
Web-erp-developers mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/web-erp-developers




------------------------------------------------------------------------------
Monitor 25 network devices or servers for free with OpManager!
OpManager is web-based network management software that monitors
network devices and physical & virtual servers, alerts via email & sms
for fault. Monitor 25 devices for free with no restriction. Download now
http://ad.doubleclick.net/ddm/clk/292181274;119417398;o
_______________________________________________
Web-erp-developers mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/web-erp-developers
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Change the layout a little to make the mobile view better

Rafael Chacón
Hi Exson,

Has your group worked more on a solution for webERP users can use the mobile to view more convenient ?

Best regards, Rafael.

----------
2015-06-25 8:50 GMT-06:00 Rafael Chacón <[hidden email]>:
Hi Exson;

Sorry not to be able to help more.

Some other suggestions to have a CSS for small devices:

* Hide icons in AppInfoDiv ( AppInfoDiv img{display: none;} ).
* Replace "Manual" and "Logout" links with help-icon_button and logout-icon_button.

Best regards, Rafael.



<a href="tel:2015-06-20" value="+50620150620" target="_blank">2015-06-20 9:28 GMT-06:00 Rafael Chacón <[hidden email]>:
Hi,

I added the meta tag:

"<meta name="viewport" content="width=device-width, initial-scale=1">"

to header.inc. The purpose of this tag is to tell the small device that the website is a responsive site. That is: to keep a relationship 1:1 between CSS pixels and device pixels.

I put it as a commented line because, if someone use a "big device" CSS format in a small device, this can cause him problems (he has to move the screen to see content; he can not see all in a small size). If someone wants to use CSS for small-devices (responsive website), just uncomment this line.

Note: I re-format for better reading, and I use commas instead of dots in the echo function because PHP with dots joins the string first and then outputs them, while with commas just prints them out one after the other (little faster).

Best regards, Rafael.

2015-06-19 14:03 GMT-06:00 Rafael Chacón <[hidden email]>:
Hi Exson,

It is great to run webERP in a smartphone (small devices).

If you do not want to change the layout, the solution is simple:

*** Add at the bottom of the css:

@media only screen and (max-width: 1024px) {
...code...
}

On "max-width" is the width from you want the change. If you want for differents sizes (one for less than 480px and other for 480px to 1024px) you can have: 

@media only screen and (max-device-width : 480px) {
...code for this size...
}
@media only screen and (min-device-width : 480px) and (max-device-width : 1024px) {
...code for this size...
}

In this section, you put only changes (differences) with the "desktop screen".


*** If the problem is the QuickMenuDiv, you can re-style with "display:inline; line-height:37px; padding:8px; etc" .
Comment: in the "desktop screen": padding-bottom: 11px; padding-left: 24px; padding-right: 24px; padding-top: 11px; so that creates a QuickMenuDiv so big in the little screen.
Suggestion 1: You can also re-style the MainMenuDiv to have it in inline mode (horizontal with wrap), so in this way you can save space for the SubMenuDiv.
Suggestion 2: you can use float and width properties to to reposition the columns to the width available of the 3 blocks of SubMenuDiv.

----
On the other hand, if you want to change in inner code, there is a solution: bootstrap. Some selectors must change the name, but we can arrive to have a full responsive web design.

Best regards, rafael.


<a href="tel:2015-06-19" value="+50620150619" target="_blank">2015-06-19 7:18 GMT-06:00 Phil Daintree <[hidden email]>:
A phone theme would be great !!

Phil

Phil Daintree
Logic Works Ltd - <a href="tel:%2B64%20%280%29275%20567890" value="+64275567890" target="_blank">+64 (0)275 567890
http://www.logicworks.co.nz

On 19/06/15 23:05, ExsonQu wrote:
> *Dear all,*
>
>                I've received a solution for webERP users can use the mobile
> to view more convenient. But there are a little change of the layout.
>
>              The *logout* and *help *are moved to top left corner.  I
> attached the screen shot here.
>
>              If there are no objection, I'll commit his change to the trunk.
>
>               newlayout.zip
> <http://weberp-accounting.1478800.n4.nabble.com/file/n4658271/newlayout.zip>
>
>             Thanks and best regards!
>
>             Exson
>
>
>
> --
> View this message in context: http://weberp-accounting.1478800.n4.nabble.com/Change-the-layout-a-little-to-make-the-mobile-view-better-tp4658271.html
> Sent from the web-ERP-developers mailing list archive at Nabble.com.
>
> ------------------------------------------------------------------------------
> _______________________________________________
> Web-erp-developers mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/web-erp-developers
>


------------------------------------------------------------------------------
_______________________________________________
Web-erp-developers mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/web-erp-developers





------------------------------------------------------------------------------

_______________________________________________
Web-erp-developers mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/web-erp-developers
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Change the layout a little to make the mobile view better

ExsonQu
Administrator
Hi, Rafael,
         
             Thank you for your always contribution.

             Sorry for that we have no progress for this.

             Best regards!

             Exson
Loading...