BOUNTY: Web GUI reprogramming

charlie0440

tiny bug fix to bring this inline with my github.

Found a bug a few days ago where it was adding the add/delete column buttons to the picture widget

If your updating it may be easier to make the change yourself (usr/local/www/themes/full_screen/loader.js line 111):

change

jQuery('form')

to:

jQuery('form[action="index.php"]')

as seen here: https://github.com/CharlieMarshall/pfsense/commit/0e94111d38c67d56901df3573e8af29afaf767d8

or download the whole theme from:

download link: https://dl.dropboxusercontent.com/u/12367642/full_screen_theme.zip
youtube video: http://youtu.be/irglXyn41Ys
Installation instructions: http://forum.pfsense.org/index.php/topic,48140.msg338715.html#msg338715

Supermule

Also working for 2.0.3?

charlie0440

@Supermule:

Also working for 2.0.3?

Afraid not, jQuery is a requirement which got added in 2.1.

I can try and hack one together for you.

Supermule

That would be awesome!

Then we could have a package for that if possible!

stephenw10

There seem to be some spurious add/delete column buttons on the RRD graph page.

Steve

charlie0440

See about 5 posts above. I think that will fix it. Let me know if not

stephenw10

Hmm, yes I saw that and made the change. Perhaps the old file is cached. I'll look again.
Edit: Yep, fixed. :)

Steve

c0urier

I can't get this working with current RC.
2.1-RC0 (amd64)
built on Wed Jun 12 06:19:17 EDT 2013

I've tried to redownload the package:
cd /usr/local/www
fetch https://dl.dropboxusercontent.com/u/12367642/full_screen_theme.zip
unzip full_screen_theme.zip

index.php source:
http://pastebin.com/0vZbd5qk

charlie0440

that's the original index.html it doesn't look like you have overridden it with the index.php from the zip

Same problem you had before

gogol

@charlie0440:

that's the original index.html it doesn't look like you have overridden it with the index.html from the zip

Same problem you had before

I downloaded the widescreen package zip today from dropbox, but there is no index.php.in it

charlie0440

@gogol this technically isn't the widescreen package, it acts the same but creates new theme called full_screen which is widescreen. If you downloaded from the link listed 2 posts above by c0urier there is definitely a index.php file, inside the zip there is the following:

index.php
themes (folder)

Edit: On another note I see there was a commit merged with master while I was on holiday which made a slight alteration to index.php (charset encoding). I will update the zip tonight to add this change:

c0urier

You might be right, but when I do:
[2.1-RC0][USER@FIREWALL]/usr/local/www(22): unzip full_screen_theme.zip
Archive: full_screen_theme.zip
replace index.php? [y]es, [n]o, [A]ll, [N]one, [r]ename: y
inflating: index.php
replace themes/full_screen/all.css? [y]es, [n]o, [A]ll, [N]one, [r]ename: A

And it's still the same, should it be replacing the original index.php file?

[2.1-RC0][USER@FIREWALL]/usr/local/www(28): rm index.php
Gives me - 404 - Not Found
[2.1-RC0][USER@FIREWALL]/usr/local/www(29): unzip full_screen_theme.zip
Archive: full_screen_theme.zip
inflating: index.php
replace themes/full_screen/all.css? [y]es, [n]o, [A]ll, [N]one, [r]ename: A

Gives me a working site with the following code:
http://pastebin.com/VagW2iYB

gogol

@charlie0440:

@gogol this technically isn't the widescreen package, it acts the same but creates new theme called full_screen which is widescreen. If you downloaded from the link listed 2 posts above by c0urier there is definitely a index.php file, inside the zip there is the following:

index.php
themes (folder)

Edit: On another note I see there was a commit merged with master while I was on holiday which made a slight alteration to index.php (charset encoding). I will update the zip tonight to add this change:
162	 	 -
 	162	 +

165	 	 -  
 	165	 +  

Thanks, maybe something went wrong on my end.
I wonder why your commit #654 still isn't merged.
Your "index.php" is now based on which version of the snapshot? I don't have the latest and I don't want to make a mess. I didn't replace it for now.

charlie0440

If your upgrading this theme/package:
For 2.1 snapshots pre the 31/6/13 use this zip https://www.dropbox.com/s/3tl7w7r9prpwnfp/full_screen_theme.zip
For 2.1 snapshots from the 1/6/13 onwards use this zip https://www.dropbox.com/s/9dyg3h4xv6772gv/full_screen_theme.zip

And if your installing for the very first time try the following ones:
The difference with the following is the code looks for a theme which ends with a "_fs" therefore the new theme is renamed to "pfsense_ng_fs":

For 2.1 snapshots pre the 31/6/13 use this zip: https://www.dropbox.com/s/10pyulp2u5h57og/pfsense_ng_fs.zip
For 2.1 snapshots from the 1/6/13 onwards use this zip: https://www.dropbox.com/s/ptolo3x6ui35y1y/pfsense_ng_fs.zip

I can now work on making other themes widescreen, I got the metallic theme, metallic_fs, working last night ;)

c0urier

That worked. Thanks!

charlie0440

A little update…

The theme I created "pfsense_ng_fs" was merged into master last month, unfortunately this was too late for 2.1 but will be in 2.2 and once 2.1 is released everyone can test it via a nightly build ;)

Since the merge I have made a small change to the theme and a number of cosmetic changes to the dashboard / widgets to improve how they scale with the theme ie when creating more or deleting columns and some generic tidying up in places. List of changes available here.

On my 1080p screen 6 columns is in my opinion the viable maximum number of columns but 5 gives me the most usability. I coded it so that the maximum number of columns is 10 (this is obviously now hardcoded into pfsense) mainly to accommodate users with a 2k and above screen resolution (lucky buggers). It is also written so any themes whose name ends in "_fs" can add/delete columns so more widescreen themes can be created. Any request for a theme to become full screen with additional columns? I assume the "pgsense_ng" theme is the most popular which mine was based on.

I suspect that all the existing widescreen packages will break with the changes committed to master (2.2) but then hopefully these will not be needed as pfsense core now has a widescreen theme.

All feedback welcome. But I guess I will have to wait until 2.1 is released first for major testing.

preview

View some more screenshots here > http://imgur.com/a/NMZOc

I realise this is probably not the best thread to post this in, but this is where the discussion started. I have not made the changes as set out in this thread and am therefore not looking for the bouty. Just helping out where I can :)

Edit: If you haven't tried the theme you create / delete new columns from some buttons under the add widget buttons. View the screenshots to understand what I am talking about.

c0urier

~~Since I had to recover to a previous backup, because the newly released August 6th package broke/stopped all IPv4 traffic. I've noticed a funny thing when recovering:
2.1-RC0 (amd64) - built on Wed Jun 12 06:19:17 EDT 2013

Then I reapplied the package and the gateway keeps counting up when I refresh the page. The Normal ms is: 12.4ms to HEgw and 1.2ms to WAN_DHCP.~~

Related to apinger.

// c0urier

pfSense_gateway.png_thumb

jmelett

Thanks a lot charlie0440 and everyone else who contributed to the GUI redesign. Is the "Twitter Bootstrap" version on a git-repo somewhere? I'd like to continue (or fork it) if that's fine.

charlie0440

no I gave up on the bootstrap. It worked fine, but I only see it viable as a package and it effects the core. I did try integrating it as a theme but it was really hacky using loads of jquery to replace code. Your best bet is to find my last post in this thread about it with an attachment and work from there (http://forum.pfsense.org/index.php/topic,48140.msg334532.html#msg334532). Sorry its not on github so you can't even see the diff :(

Just had a quick flick through. I think the only changes in head.inc was adding bootstrap code:

guiconfig: I have no idea what I changed

fend.inc: I think I just changed the css on some divs

fbegin.inc: is where most the code was ie new menu structure, luckily I commented that one with a code block:
..........
You will find the script>bootstrap.min.js <script.. import="" line="" in="" there.="" i="" tried="" it="" various="" locations="" files="" but="" found="" only="" worked="" that="" one="" place!<br="">system_information.widget.php: I had to change the progress bars as the defaults ones didn't render properly

Sorry I can't be much help. I am looking for a little project to get involved, can't think of any more dashboard spring cleaning, so if you can think of some way to get this working with pfsense without ruining its core I'm willing to help. Good luck.</script..>

charlie0440

@jmelett and anyone else who wants to help. I revisited the twitter bootstrap theme today. I nearly have it sussed. Menus are working properly and are responsive. The only issue is that some tables are spilling over the window width. If someone wants to sort it out and fix it fork my repo branch newTheme:

https://github.com/CharlieMarshall/pfsense/tree/newTheme

Otherwise when I get some time I will look into it some more