Responsive Design for Mobile Platforms

[dnut]

Kaiwa uses a lot of static pixel based scaling in CSS which makes it very difficult to use on a mobile device since the buddy list ends up taking over almost the entire screen. Ideally if the screen gets small enough, the buddy list should disappear from view, only accessible by pressing on a menu button. This would be the standard in responsive design.

I started working on my own solution since Kaiwa development appears to be stalled. I am not very skilled with CSS, so it isn't very sophisticated. Basically, it just scales the buddy list narrower if the screen is small. If I find the time to work out all the kinks, I will submit a pull request.

[dnut]

Here's what I have so far which just scales the left side menu once the screen width is below 1148px to ensure it never exceeds 20% of the screen width. It is far from perfect and should probably just be scrapped in favor of hiding the menu at certain screen widths. Since there are great mobile apps for XMPP, I'm not sure if I will go any further with it.

diff client.css.bak client.css
196a197,202
> @media all and (max-width: 1148px) {
>     #pages{
>         margin-left: 0px;
>         left: 20%;
>     }
> }
520c526,527
<   width: 230px;
---
>   width: 20%;
>   max-width: 230px;
533c540,542
<   width: 230px;
---
>   width: 100%;
>   min-width: 130px;
>   max-width: 230px;
992a1002,1007
> @media all and (max-width: 1148px) {
>     .conversation header {
>         margin-left: 0px;
>         left: 20%;
>     }
> }
1179a1195,1200
> }
> @media all and (max-width: 1148px) {
>     .conversation .chatBox {
>         margin-left: 0px;
>         left: 20%;
>     }