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