Rewrite the UI to be responsive

[leo-graf]

I checked some Ideas for making everything responsive and here is the suggestion I came up with. Even if webmum is very simple I would use two external repositories because they are very small and well coded.

1. Grid: gridism as it's a very simple but nice grid system
2. Mobile Menu: slideout.js (6.9KB) which provides a mobile menu and touch slide functionallity

I also transformed the css to scss (sass) because it's great.

I just pushed a branch dev-responsive which shows a proof-of-concept. Please tell me what you think about this approach and I will proceed working on it.

Sincerly,
Leo

[leo-graf]

I had to change my apache vhost file because of the new js and svg files. My rewrite rules look like this now

    RewriteEngine on
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule (.*)\.css$ $1.css [L]
    RewriteRule (.*)\.js$ $1.js [L]
    RewriteRule (.*)\.svg$ $1.svg [L]
    RewriteRule ^(.*)$ /index.php [L,QSA]

[ohartl]

Hey, thanks for the great work so far! Here are just some random things that got into my mind in no particular order.

The handle to open the slideout should be on the left, as the slideout is on the left. Also move the title "WebMUM" to the center in mobile view.

In the slideout menu all navigation point (like "Manage ...") could be displayed.

The menu bar icon could be replaced with pure css, like this: https://css-tricks.com/three-line-menu-navicon/

I would consider loading the external resources from a single cdn, like http://cdnjs.org (https://github.com/cdnjs/cdnjs, which is a realy great project btw). This should be done on slideoutjs.

Cache breaking "?v=.." at the end of the stylesheet is nice, but I don't think it's nessecary.

In general I am considering to much the file structure a bit. Moving all php stuff to /src, moving all frontend stuff to /public, the index.php would be in /public too, so this dir could be set as DocumentRoot and all other php is protected from accessing instantly. This would maybe break some old installs, but since it's the dev branch that's updated it shouldn't be a problem.

I will have a deeper look into the branch soon.

[ohartl]

@leo-graf Could you please implement the changes (in sass + compile) of the style.css that i did over the time? (see merge 722817f)

[leo-graf]

@ohartl Great that you like it! As I wrote I just pushed this for you to review the general approach. I will continue and include your ideas in the near future. I agree with everything you wrote but I would stick with versioning the stylesheet as i consider this "best practice"..

[markc]

FWIW I would be more encouraged to contribute if you considered bootstrap for the responsiveness. I know it and jquery add a lot to bloat and pageload time but it would be so much easier to integrate the result with other server management systems, and a variety of CDNs already exist because it is so popular.