web-erp-developers

[WebERP-developers] Change the layout a little to make the mobile view better

[ExsonQu <hex...@gm...>]

*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.

Re: [WebERP-developers] Change the layout a little to make the mobile view better

[Phil D. <ph...@lo...>]

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
> Web...@li...
> https://lists.sourceforge.net/lists/listinfo/web-erp-developers
>

Re: [WebERP-developers] Change the layout a little to make the mobile view better

[Rafael C. <raf...@gm...>]

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 <ph...@lo...>:

> 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
> > Web...@li...
> > https://lists.sourceforge.net/lists/listinfo/web-erp-developers
> >
>
>
>
> ------------------------------------------------------------------------------
> _______________________________________________
> Web-erp-developers mailing list
> Web...@li...
> https://lists.sourceforge.net/lists/listinfo/web-erp-developers
>

Re: [WebERP-developers] Change the layout a little to make the mobile view better

[Rafael C. <raf...@gm...>]

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 <raf...@gm...>:

> 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 <ph...@lo...>:
>
>> 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
>> > Web...@li...
>> > https://lists.sourceforge.net/lists/listinfo/web-erp-developers
>> >
>>
>>
>>
>> ------------------------------------------------------------------------------
>> _______________________________________________
>> Web-erp-developers mailing list
>> Web...@li...
>> https://lists.sourceforge.net/lists/listinfo/web-erp-developers
>>
>
>

Re: [WebERP-developers] Change the layout a little to make the mobile view better

[Phil D. <ph...@lo...>]

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 
> <raf...@gm... <mailto:raf...@gm...>>:
>
>     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 <ph...@lo...
>     <mailto:ph...@lo...>>:
>
>         A phone theme would be great !!
>
>         Phil
>
>         Phil Daintree
>         Logic Works Ltd - +64 (0)275 567890
>         <tel:%2B64%20%280%29275%20567890>
>         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
>         > Web...@li...
>         <mailto:Web...@li...>
>         > https://lists.sourceforge.net/lists/listinfo/web-erp-developers
>         >
>
>
>         ------------------------------------------------------------------------------
>         _______________________________________________
>         Web-erp-developers mailing list
>         Web...@li...
>         <mailto:Web...@li...>
>         https://lists.sourceforge.net/lists/listinfo/web-erp-developers
>
>
>
>
>
> ------------------------------------------------------------------------------
>
>
> _______________________________________________
> Web-erp-developers mailing list
> Web...@li...
> https://lists.sourceforge.net/lists/listinfo/web-erp-developers

Re: [WebERP-developers] Change the layout a little to make the mobile view better

[Rafael C. <raf...@gm...>]

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 <raf...@gm...>:

> 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 <raf...@gm...>:
>
>> 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 <ph...@lo...>:
>>
>>> 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
>>> > Web...@li...
>>> > https://lists.sourceforge.net/lists/listinfo/web-erp-developers
>>> >
>>>
>>>
>>>
>>> ------------------------------------------------------------------------------
>>> _______________________________________________
>>> Web-erp-developers mailing list
>>> Web...@li...
>>> https://lists.sourceforge.net/lists/listinfo/web-erp-developers
>>>
>>
>>
>

Re: [WebERP-developers] Change the layout a little to make the mobile view better

[Rafael C. <raf...@gm...>]

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 <raf...@gm...>:

> 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 <raf...@gm...>:
>
>> 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 <raf...@gm...>
>> :
>>
>>> 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 <ph...@lo...>:
>>>
>>>> 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
>>>> > Web...@li...
>>>> > https://lists.sourceforge.net/lists/listinfo/web-erp-developers
>>>> >
>>>>
>>>>
>>>>
>>>> ------------------------------------------------------------------------------
>>>> _______________________________________________
>>>> Web-erp-developers mailing list
>>>> Web...@li...
>>>> https://lists.sourceforge.net/lists/listinfo/web-erp-developers
>>>>
>>>
>>>
>>
>

Re: [WebERP-developers] Change the layout a little to make the mobile view better

[ExsonQu <hex...@gm...>]

*Hi, Rafael,*
         
             Thank you for your always contribution. 

             Sorry for that we have no progress for this. 

             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-tp4658271p4658419.html
Sent from the web-ERP-developers mailing list archive at Nabble.com.