Netgate Discussion Forum
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Search
    • Register
    • Login

    BOUNTY: Web GUI reprogramming

    Scheduled Pinned Locked Moved Bounties
    256 Posts 31 Posters 181.2k Views
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • stephenw10S
      stephenw10 Netgate Administrator
      last edited by

      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

      1 Reply Last reply Reply Quote 0
      • JeGrJ
        JeGr LAYER 8 Moderator
        last edited by

        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

        Don't forget to upvote 👍 those who kindly offered their time and brainpower to help you!

        If you're interested, I'm available to discuss details of German-speaking paid support (for companies) if needed.

        1 Reply Last reply Reply Quote 0
        • K
          kelsen
          last edited by

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

          1 Reply Last reply Reply Quote 0
          • I
            iFloris
            last edited by

            @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!

            one layer of information
            removed

            1 Reply Last reply Reply Quote 0
            • K
              kelsen
              last edited by

              @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

              1 Reply Last reply Reply Quote 0
              • K
                kelsen
                last edited by

                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

                1 Reply Last reply Reply Quote 0
                • C
                  Clear-Pixel
                  last edited by

                  @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.

                  HP EliteBook 2530p Laptop - Core2 Duo SL9600 @ 2.13Ghz - 4 GB Ram -128GB SSD
                  Atheros Mini PCI-E as Access Point (AR5BXB63H/AR5007EG/AR2425)
                  Single Ethernet Port - VLAN
                  Cisco SG300 10-port Gigabit Managed Switch
                  Cisco DPC3008 Cable Modem  30/4 Mbps
                  Pfsense 2.1-RELEASE (amd64)
                  –------------------------------------------------------------
                  Total Network Power Consumption - 29 Watts

                  1 Reply Last reply Reply Quote 0
                  • stephenw10S
                    stephenw10 Netgate Administrator
                    last edited by

                    Yep, looks nice.  :)

                    Steve

                    1 Reply Last reply Reply Quote 0
                    • C
                      Clear-Pixel
                      last edited by

                      @ kelsen…..

                      Here's a excellent idea to hide all the unnecessary clutter top of the status page.

                      You can hide all the buttons in the Status: Dashboard...... have a down arrow on the right side of the dashboardwhich when clicked will expand theexpose the following.

                      Widgets button
                      Welcome dashboard
                      Add column button
                      Delete Column Button
                      Theme Color button

                      Once theis expanded it will expose the items above, clicking on the arrow in theagain will collapse the unhidden.

                      As it is now, they are all taking up a lot of unnecessary screen real estate at top of page.

                      If you don't have a chance to do it, I will take care of the coding soon.

                      HP EliteBook 2530p Laptop - Core2 Duo SL9600 @ 2.13Ghz - 4 GB Ram -128GB SSD
                      Atheros Mini PCI-E as Access Point (AR5BXB63H/AR5007EG/AR2425)
                      Single Ethernet Port - VLAN
                      Cisco SG300 10-port Gigabit Managed Switch
                      Cisco DPC3008 Cable Modem  30/4 Mbps
                      Pfsense 2.1-RELEASE (amd64)
                      –------------------------------------------------------------
                      Total Network Power Consumption - 29 Watts

                      1 Reply Last reply Reply Quote 0
                      • C
                        c0urier
                        last edited by

                        @charlie0440 - It's not possible to delete whitelists in the snort package, screenshot: http://sdumps.net/OE

                        Furthermore when you click Dashboard after you've been in the snort package it links wrongly. Don't know if it's a bug from previously. If you restart Snort you'll also receive some errors.

                        Have you tested with your theme with the snort package?

                        pfsense: 2.1.5-RELEASE, AMD64
                        Running on: MB/CPU: ASUS P8H77-I / Core i3-2120T | MEM: 8GB DDR3 | HDD: WD Blue 120GB 2.5" SATA | WAN/LAN: Fujitsu D2735-2 – Intel® chip 82576NS | WLAN: Realtek® 8111F PCIe | Connection: 1000/1000Mbit (Bredband2.com)
                        [/U

                        1 Reply Last reply Reply Quote 0
                        • K
                          kelsen
                          last edited by

                          @Clear-Pixel:

                          @ kelsen…..

                          You can hide all the buttons in the Status: Dashboard...... have a down arrow on the right side of the dashboardwhich when clicked will expand theexpose the following.

                          I see, I tried to do so, but, I just can't find a way to close the, the loader.js is ignoring the.

                          1 Reply Last reply Reply Quote 0
                          • C
                            charlie0440
                            last edited by

                            @kelsen how you trying to do it, jQuery?

                            1 Reply Last reply Reply Quote 0
                            • K
                              kelsen
                              last edited by

                              Ok, I figured out. @Clear-Pixel this is what you wanted?

                              @charlie0440:

                              @kelsen how you trying to do it, jQuery?

                              I just made some changes to the loader.js to insert it after afrom index.php.

                              1 Reply Last reply Reply Quote 0
                              • C
                                Clear-Pixel
                                last edited by

                                Not exactly what I had in mind …..

                                Thearea which is shaded gray with the text "Status: Dashboard" - The Gray Area -  this is where you would nest a hiddenwithin the "Status: Dashboard"

                                Place a down arrow on right side of this grayarea ...... When clicked it expands the "Status: Dashboard"to expose the buttons.

                                This can be achieved using CSS3 or jquery .... If you use CSS3 some older browsers could have issues ..... if you use jquery you eliminate compatibility issues.

                                HP EliteBook 2530p Laptop - Core2 Duo SL9600 @ 2.13Ghz - 4 GB Ram -128GB SSD
                                Atheros Mini PCI-E as Access Point (AR5BXB63H/AR5007EG/AR2425)
                                Single Ethernet Port - VLAN
                                Cisco SG300 10-port Gigabit Managed Switch
                                Cisco DPC3008 Cable Modem  30/4 Mbps
                                Pfsense 2.1-RELEASE (amd64)
                                –------------------------------------------------------------
                                Total Network Power Consumption - 29 Watts

                                1 Reply Last reply Reply Quote 0
                                • K
                                  kelsen
                                  last edited by

                                  sorry for the misunderstanding, but I think this is not possible since this div appears on all pages, hence the icons appear in all of them without the need, unless I change the code structure.

                                  1 Reply Last reply Reply Quote 0
                                  • C
                                    Clear-Pixel
                                    last edited by

                                    Hide theunderneath/against the bread crumbor look to see if you can inject the code just for that bread crumb…

                                    Make it look as though it's not there, when its is ...... approach the problem as though it was a magic trick.

                                    If you make the widget draggable that would work for the time being ...... that way you can drag it to the bottom of the page out of the way.

                                    HP EliteBook 2530p Laptop - Core2 Duo SL9600 @ 2.13Ghz - 4 GB Ram -128GB SSD
                                    Atheros Mini PCI-E as Access Point (AR5BXB63H/AR5007EG/AR2425)
                                    Single Ethernet Port - VLAN
                                    Cisco SG300 10-port Gigabit Managed Switch
                                    Cisco DPC3008 Cable Modem  30/4 Mbps
                                    Pfsense 2.1-RELEASE (amd64)
                                    –------------------------------------------------------------
                                    Total Network Power Consumption - 29 Watts

                                    1 Reply Last reply Reply Quote 0
                                    • K
                                      kelsen
                                      last edited by

                                      ok, how about now?

                                      Edit: I've had to delete the line "Csrf…." from the index.php form, is this a problem?

                                      1 Reply Last reply Reply Quote 0
                                      • C
                                        Clear-Pixel
                                        last edited by

                                        That's it…. Perfect ...... much cleaner look don't you think?

                                        Don't know what the Csrf line consist of...  it could be related to Cross-Site Request Forgeries prevention.

                                        HP EliteBook 2530p Laptop - Core2 Duo SL9600 @ 2.13Ghz - 4 GB Ram -128GB SSD
                                        Atheros Mini PCI-E as Access Point (AR5BXB63H/AR5007EG/AR2425)
                                        Single Ethernet Port - VLAN
                                        Cisco SG300 10-port Gigabit Managed Switch
                                        Cisco DPC3008 Cable Modem  30/4 Mbps
                                        Pfsense 2.1-RELEASE (amd64)
                                        –------------------------------------------------------------
                                        Total Network Power Consumption - 29 Watts

                                        1 Reply Last reply Reply Quote 0
                                        • K
                                          kelsen
                                          last edited by

                                          yeah, it looks better.

                                          Don't know what the Csrf line consist of…  it could be related to Cross-Site Request Forgeries prevention.

                                          looks important  ;D
                                          I just know that on 2.0.3 doesn't have this line.

                                          1 Reply Last reply Reply Quote 0
                                          • C
                                            charlie0440
                                            last edited by

                                            CSRF is a security measure, what it does for example is if you were logged into the GUI via a Chrome browser, someone couldn’t issue a Curl post command, they would have to login via Curl first to get a CSRF.

                                            @kelsen I have some concerns about your work. Let me start by saying it looks amazing and I don’t want to put you off. I do not work for pfsense and have therefore am not speaking for them, the following is my personal view, which may be incorrect!

                                            How do you plan on releasing your theme when finished?

                                            I see two options, a package or to push it to the pfsense team as the only theme to be used (as it breaks the others).

                                            1. if you add it as a package every new update to pfsense would require fixes on your end, you would also need to be up-to-date with pfsense github at the time of release (which you currently are not, more on this in point 2).

                                            2. If you want to get it merged into pfsense as a replacement to all the other themes (as currently it breaks all the other themes) I see two issues.

                                            Firstly you need to learn how to use github properly. I realise this is a learning curve and I am willing to help you here, its not that hard.

                                            Your branch is a mess, you have correctly cloned pfsense, but your "Metrolab" branch is based on the 2.1 branch while it should be based on the latest work ie master. This to me is a mistake because your branch is already "439 commits ahead and 582 commits behind master" while admittedly most of these will not effect the GUI some will have been changes which your theme will now be missing, or could be changes which have broken things.

                                            This would also save you work. I see you have merged my progressbar code (https://github.com/kelsen/pfsense/commit/74ff944ce38928be9d43df8d5ebf56bec953d4ff) If you based your branch on master there is no need to merge this separately as it would already be there.

                                            Secondly, if this is a single theme and not compatible with the other themes, all code allowing themeing/skinning etc should be removed. Basically instead of hacking the current working it should be rewritten from scatch. One example would be the loader.js each theme has a different one to allow different code, while that could be hardcoded into the core ie do away will all the themeing stuff.

                                            Sorry for the long post. Its better I say this now then when you finish.

                                            1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post
                                            Copyright 2025 Rubicon Communications LLC (Netgate). All rights reserved.