Menu
▾
▴
Re: [WebERP-developers] Change the layout a little to make the mobile view better
|
From: Rafael C. <raf...@gm...> - 2015-11-15 14:37:55
|
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
>>>>
>>>
>>>
>>
>
|
