BOUNTY: Web GUI reprogramming

[kelsen]

You cant drag and drop because the jQuery is looking for widgetheader, actually it should be widget-title (index.php and loader.js).
I think it's working now, I just downloaded your zip and started over your index.php. Now I can drag & drop and save.
https://github.com/kelsen/pfsense/commit/2040797a679c08c57dafd821d2a0f6d5c926eb00
There is a issue with mine and yours, it's not possible to drag and drop with default 1 or 2 columns, at least for me. Before I changed the index.php, keeping these lines I was able to drag and drop.

jQuery('#col1').sortable({connectWith: '#col2', dropOnEmpty: true, handle: '.widget-title', change: showSa
ve});
jQuery('#col2').sortable({connectWith: '#col1', dropOnEmpty: true, handle: '.widget-title', change: showSa
ve});

[charlie0440]

dragging with 2 columns works for me

[kelsen]

@charlie0440:

dragging with 2 columns works for me

Well, i'm testing right now, it seems to work when you add or delete a column but, before that, I can't drag.
Can you confirm? Also, squid3 realtime tab is working for you? my don't show any log, just the static page.

Ps.: Testing the metrolab theme with my widescreen display, looks great! yet, some things to fix.

[c0urier]

@charlie0440 - I did the following:

fetch > https://dl.dropboxusercontent.com/u/12367642/myTheme.tar.gz
tar -xvzf myTheme.tar.gz
cd myTheme/
cp -r * /

When I use the twitter_bootstrap_fs theme, non of the menu's are working - When I switch to pfSense_ng_fs the menu's are working again but I still can't use the other columns.

Index.php - http://pastebin.com/4dNZi3J2

[charlie0440]

@courier try cp instead of a scp if your local:

cp -r * /

your index.php is missing column2 for a start thats why you can't drag and drop to it, there is not a columns there.

Look at lines: 647, 655, 666 in the index.php in your unzipped myTheme folder they should match the once on github: https://github.com/pfsense/pfsense/blob/master/usr/local/www/index.php

That line is never printed on your setup, which to me means its not in your index.php. Have you tried this on a new install, Again you posted earlier saying you deleted a lot of files what exactly have you done. Either that or your not copying the tar correctly.

[c0urier]

I did use cp ofcourse I mistyped haha - Sorry!

I deleted the www folder and recovered from a previous backup, but it was an RC and not the final release. Though I did a recover and upgraded to 2.1-RELEASE again. Hope you understand.

[c0urier]

My index.php file is identical to the one you posted.

I tried flashing the upgrade package for pfSense 2.1 to get fresh files in, but for some reason I am still not able to use any other columns.
Any hints would be greatly appreciated, else a reinstall might be the only solution.

[c0urier]

A small update after a Fresh install.

I recovered my config.xml file and the GUI broke again, I then decided to take a config from earlier and recovered it and the GUI worked perfectly again.

Result of test now:
pfsense_ng_fs - Works perfect
twitter_bootstrap_fs - Menu's are not working.

[charlie0440]

So I spend some time working on my widescreen dashboard script today. I really like what I have done  ;) I've made it responsive, ie if you resize the screen it will only display the number of columns which will fit nicely. A video speaks a 1000 word: http://www.youtube.com/watch?v=KmQGiIfEJy0&feature=youtu.be

You can try it out by following these instructions (pfsense 2.1 only):

download the zip: https://dl.dropboxusercontent.com/u/12367642/myTheme.tar.gz

wget https://dl.dropboxusercontent.com/u/12367642/myTheme.tar.gz
tar -xvzf myTheme.tar.gz 
cd myTheme/
scp -r * root@pfsenseIPaddress:/

Then apply the theme "pfsense_ng_fs" OR "twitter_bootstrap_fs" in the general settings page. I recommend you test this on a virtual machine, boot the 2.1 live CD, login and enable SSH then perform the above steps.

It works by ideally setting your preferred dashboard layout ie number of columns when in full screen mode, then clicking save (this is now your saved state), if you now resize the screen if will move the widgets from the last columns to the previous one etc etc and vice versa. If you move widgets around after clicking save the changes will be overwritten on a screen resize (back to your last saved state).

It works really well for mobile phones ie you can have 5 columns on your 1080p screen, open up your mobile (request the desktop version of the site) and it will resize it automatically to 2 columns will all your widgets provided your mobile has a big enough screen, otherwise it will be 1 columns.

I would like some feedback to check if it causes any issues before I request to send it upstream @courier @kelsen (you can just update the loader.js file from the zip its the only file which has been amended). Kelsen feel free to use it.

[Clear-Pixel]

I hate the horizontal menu….

[charlie0440]

@Clear-Pixel:

I hate the horizontal menu….

Thanks for the constructive/unrelated feedback!

If it bothers you that much why don't you do something about it. People have different opinions on what they want for the GUI, can't keep everyone happy. Personally I like the horizontal menu.

[c0urier]

Hi Charlie0440:

The save button is stuck: http://prntscr.com/1x47i7

Else it's working perfectly.

[charlie0440]

@courier can you elaborate other then a screenshot of a button.

[c0urier]

When you click "Save settings" it reloads the page, and the "Save settings" button is still here. Need the index.php source or?

[stephenw10]

@Clear-Pixel:

I hate the horizontal menu….

You mean the main menu across the top?
Any particular reason?

Steve

[charlie0440]

@c0urier:

When you click "Save settings" it reloads the page, and the "Save settings" button is still here. Need the index.php source or?

Yes it is, I can fix it but it shouldn't cause any issue. Does it for you?

[c0urier]

No no, none what so ever, I'm just used to it going away when I have clicked it haha.

Good job!

[charlie0440]

@courier should be fixed in new zip. It will only show saved button once a column has been deleted or added.

[Clear-Pixel]

@stephenw10:

@Clear-Pixel:

I hate the horizontal menu….

You mean the main menu across the top?
Any particular reason?

Steve

Yes main menu….

Here's an article that will help you understand some of the thought processes that are required by a professional UX designer. It's not rocket science, just require a little bit of common sense and thorough planning.

http://uxdesign.smashingmagazine.com/2010/10/05/what-is-user-experience-design-overview-tools-and-resources/

[stephenw10]

Ok, I appreciate that careful thought has to go into the design process. If one of the techniques used to improve the user experience is surveys then: what specifically don't you like about the menu?
I could speculate that on modern ever larger aspect ratio displays it makes more sense to use vertical space for the menu. I notice, perhaps ironically, that almost all of the referenced UX websites have a horizontal menu across the top.  ;)

Steve