BOUNTY: Web GUI reprogramming

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

JeGr

I agree with Stephen. Just dropping a crude one-liner to a good effort on re-designing a theme is very much a pointless thing to do. And referencing a UX blah article, that does nothing to clear up the confusion about your lack of explaining why you dislike the main menu on top (when in fact your link shows many sites that have exactly that) is just - I don't know - senseless? If you want to criticize, feel free, but would it be too much then to actually tell, why you think it is a bad decision in general or subjectively?

I can see both parts. I use quite a few (mobile) devices in portrait mode. A vertical menu bar would cut into the (limited) space of those devices so a top menu is great for those. On a big tablet I can easily go to landscape and a vertical menu would be nice. Dito for the big screen on the wall. So both have pros and cons.

Greets

kelsen

Good afternoon, I've made some changes on metrolab theme, now it's showing alerts in bell icon as shown in screenshot below.

iFloris

@kelsen:

Good afternoon, I've made some changes on metrolab theme, now it's showing alerts in bell icon as shown in screenshot below.

Looks really nice, I look forward to using your theme sometime soon!

kelsen

@iFloris:

@kelsen:

Good afternoon, I've made some changes on metrolab theme, now it's showing alerts in bell icon as shown in screenshot below.

Looks really nice, I look forward to using your theme sometime soon!

I appreciate it, you can download the updated theme from here http://www.4shared.com/archive/C_KrFRy8/metrolabtar.html

kelsen

I appreciate it, you can download the updated theme from here http://www.4shared.com/archive/C_KrFRy8/metrolabtar.html

Edit: copy usr/local/www/themes/twitter_bootstrap_fs /usr/local/www/themes/
Change the theme on the WebGUI
copy the rest to the appropriate location

Pls, follow the above order to not break your WebGUI

Clear-Pixel

@kelsen:

Good afternoon, I've made some changes on metrolab theme, now it's showing alerts in bell icon as shown in screenshot below.

Looks Fantastic ….. glad to see your project is headed in the right direction.