Thoughts and ideas

[Tom Elliott]

I’ve been reworking the display elements of the FOG GUI to be a little bit more professional. In my endeavor I’ve also made the GUI much more Windows friendly. (See Screenshot)

You’ll notice a bunch of things have changed, as I’m working to make FOG a little more friendly and professional looking. It’s a cleaner layout, I think. Of course I’m far from perfect.

If any decent web devs are around and feel like playing around, please install the working branch.
Update your FOG_THEME in FOG Settings and change it to read as clean/fog.css

The file to look over/review is located in /var/www/fog/management/css/clean/fog.css (You’ll notice there isn’t an equivalent images folder. This is intentional for now.)

---

[Wayne Workman]

I think it’s sharp.

[Avaryan]

Spacing between “Open Source Computer Cloning Solution” and the icons needs increased. I actually like how in the current version that’s written in gray.

[Quazz]

Perhaps instead of the blue for active page, use the current orange? It looks nice, good contrast.

Maybe a darker color for text to improve legibility as well.

[Tom Elliott]

I’ll work on the darkening of the text color, that’s relatively easy.

The reason I moved away from orange is I wanted fog to share a common set of color ranges. The idea is to be subtle, not pronounced. At least in my head.

[adukes40]

I personally like the page the way it is. (Still running 1.3.0).

[davidedpg10]

I think perhaps having small text underneath the icons (not too intrusive) stating what they are (such as images, hosts, groups etc) could make it a bit nicer to navigate. just a thought. What do other people think about that?

[sudburr]

I find the exaggerated shadows to slow down visual interpretation of the page.

[george1421]

@sudburr I got the same thing today. I updated to the working branch and ran into several problems trying to tell the difference between a text field and a button to click on (like when scheduling tasks). Some of the panels are sharp and look really good, others took me a minute to understand what I was doing.

Its getting there, we just need to continue providing usage feedback for Tom.

[Wayne Workman]

LOAD AVERAGE

[Tom Elliott]

@Wayne-Workman ??? I don’t understand what you mean.

[A Former User]

@Tom-Elliott I will try to load it next week.

One thing that I think would help it look better would be to make it where HTML elements don’t resize as they load. I suspect this is happening because images sizes are not set before they load, but I haven’t really dug into it.

[Tom Elliott]

@loosus456 The whole idea of the “resize” stuff is because i want to get a system somewhat “responsive” feel.

The whole idea behind it is to be resizable so that you can use a single point on computer or mobile. I’m just not that smart

[A Former User]

@Tom-Elliott I don’t think we’re talking about the same thing. What I’m talking about looks unintentional.

If you have an IMG element whose source image is, for example, 200x200 but its size is not set via the STYLE attribute, then the size of the IMG is essentially zero until the image loads. Then, it expands to 200x200 when the image loads. This gives the entire page a “shaky,” unstable look.

What do you mean by “use a single point on computer or mobile?” Do you mean that you want the same page on desktop and mobile and to dynamically adjust depending on the device used?

[Tom Elliott]

How about this for a login page:

[Tom Elliott]

And this for dashboard:

I’ve been working to move this into a “bootstrap” type system.

My basic works are right now off:
https://github.com/creativetimofficial/light-bootstrap-dashboard

As I work, I’ll end up making the code more my own, just this is how I’m basing the work currently.

[sudburr]

Hmmm … In the left column; lose the word management. It’s kinda, redundant. If home is the dashboard, call it dashboard or vice versa.

[A Former User]

@Tom-Elliott Are you using media queries?

[Tom Elliott]

No, I’m working, slowly, in building in bootstrap.

[Wayne Workman]

@sudburr Agree.