Hi Maurice and Michael,

I had to look into the below a bit, but here’s my $0.02

Questions:

1. Yes, as far as I know. The code can be found here: https://github.com/almasaeed2010/AdminLTE
2. Also yes, every element (row or box at least) consists of 12 columns again.
3. I have not tried this, but I’m presuming yes… it will require a bit of rework I think
1. The theme features bootstrap 3.3.7; so it should be in there: https://stackoverflow.com/questions/39866922/equal-height-columns-with-bootstrap-3-and-flexbox

i. Note: I could not get this to work within the few minutes I was writing this mail, so it might need a bit of research, nonetheless, it should be possible 😉

The things that are staying are fine by me, the “card” implementation was chosen for a little bit of color in the theme and to be able to group widgets. It might be an idea to use the same colors on the other pages as well.

Adjustments:

1. They look nice and they seem to allow for the same implementation: https://google.github.io/material-design-icons/
2. Clearly you have more experience in this matter, I just know where the values are, not so much what’s more or less appealing. I went with the standard and tinkered until I found it to be appealing enough, so feel free to point me in the right direction.
3. I have no idea what’s trending nowadays anymore, it’s been a while since I did design work (in school); lead the way and I’ll happily follow.
4. Same as above, just point me in the right direction.
5. Sure, especially the balloon for the messages.

So in short, what I’m saying is, you (and other more knowledgeable people) can guide the way, I will try to fit it into a framework. If someone with more scripting experience, or better patterns, wants to improve and/or advise me, also feel free.

I promise I won’t be offended if you correct me 😉

As for the approach, my idea was to use “my” theme at least for myself and do a make-over; page by page. The theme itself should then backup the old pages and use the new ones instead. I do understand that this might break future updates, but the current framework doesn’t seem to allow me do keep both without having to override a multitude of classes in javascript.

Regarding bootstrap 4, the implementation wasn’t too hard, so if we move forward, rather sooner than later. If we build new stuff, we’d better build it against the correct version and dashboard. I’ll be away next week for business, but I’ll try to read my mails to see if we can make this work.

Cheers,

Rachid

From: Maurice Gesswein <maurice.gesswein@ipfire.org>
Sent: woensdag 20 februari 2019 00:36
To: Rachid Groeneveld <rachidgroeneveld@hotmail.nl>; Michael Tremer <michael.tremer@ipfire.org>
Cc: ipfire-artwork@lists.ipfire.org
Subject: Re: [IPFire Artwork] New bootstrap skin

Hi Rachid,

OK, cool. Sounds promising. Let's check out some limitations and possibilities so that I don't design things which are hard to implement or difficult to change at the AdminLTE Theme. As well as some questions. 

Questions (just to be sure ;) ):

1. AdminLTE is based on Bootstrap 3 with the default Grid System/Layout?
2. The Navigation-Panel at the left hand side (<aside> in the code) lives outside of the grid, isn't it? So it doesn't take e.g. 2 of 12 cols and 10 cols are left for the "content-wrapper"?
3. Using display:flex and/or display:grid to e.g. align things easily vertically within a <div> is possible?

Things I'm going to leave them as they are:

1. Overall layout settings (column grid).
2. Using the "card" ui-component as the standard content container.
3. During my deeper look into AdminLTE I noticed that the Theme is quite good by using the same spacings, font-size, etc. at all viewports. I'll keep this.
4. UX (user experience) of the side navigation.

Things I would like to adjust:

1. I would like to go with the Material Icon Set from Google https://material.io/tools/icons/?style=baseline
   All icons are placed within a 24x24px (1:1 size) bounding box. Means that every icon has the same size. 24x24px is the default size I would like to use. I already saw in your screenshots that you resized the icon size. So I guess no problem here, right?
2. Slightly different spacings within cards. I see you already did that in your first iteration. We are fine here?
3. My best practice core rule to create ui-components is to use sizes and spacings which are dividable by 4px at least. 8px is preferred. So don't expect classical 5px steps from me. Those are outdated ;)
4. Using another font. Probably with other sizes and line-heights.
5. Other colors.

If you can give me a yes or no to each point would be great. Please feel free to ask questions.

Besides all of that we could follow another approach. We keep AdminLTE as it is. Just changing the colors (that it matches with the IPFire brand) and build all pages by using the standard widgets, ui-components and modules which are already predefined. After that we fine-tune things. Replacing icons, font, adjust spacings, etc.

Furthermore I can do some research to find another free dashboard Bootstrap theme which is based on Bootstrap 4 and closer to the size metrics I prefer. AdminLTE is quite old. Perhaps there are good alternatives out there. Did you already had a look, Rachid?

I'm sure that Michael has also a meaning about that and want to comment it :)

Looking forward for your replies.

Best, Maurice

On Mon, Feb 18, 2019 at 5:36 PM Rachid Groeneveld <rachidgroeneveld@hotmail.nl> wrote:

Hi Maurice,

I’m planning on moving forward with the skin yes, that being said I’m no front-end developer, but I can try to build what someone else has photoshopped.

Hint hint 😉 It’s not that I can’t find a way to create a “nice looking design” on my own, it just takes me a whole lot longer.

So in short, if someone has a design/mockup that fits perfectly into this dashboard theme and wants it built, let me know. In the meantime I will just fix the problems logged on github and make sure it works as intended.

The main challenge is a config screen for the skin, so things can be set without having to manually open the database/settings file.

Cheers,

Rachid

From: Maurice Gesswein <maurice.gesswein@ipfire.org>
Sent: zondag 17 februari 2019 22:56
To: Rachid Groeneveld <rachidgroeneveld@hotmail.nl>
Subject: Re: [IPFire Artwork] New bootstrap skin

Hey Rachid.

Sorry for my late reply. I was impressed by your IPFire Bootstrap Theme, based on my concept redesign. Good work and thanks for sharing.

Are you interested to go further with that and develop the complete WUI experience which would be used as the official IPFire WUI Theme?

Best,

Maurice

On Sun, Feb 10, 2019 at 11:31 AM Rachid Groeneveld <rachidgroeneveld@hotmail.nl> wrote:

Hi all,

As pointed out by Michael, maybe the newly created skin for the WUI belongs in this mailing list as opposed to development (actually makes sense).

I’ve used bootstrap and in the history I can find some argumentation to use CSS-grid instead, due to bootstrap being bloated. While this is true, it’s still very responsive and it’s possible to remove quite a lot from it, however that will require re-work. Not saying that a CSS-grid implementation won’t require some re-work to achieve the same result. I have not formed an opinion on the matter, but since I knew bootstrap, I went with that.

Let me introduce myself, for those not in the development list. I’m Rachid Groeneveld a tinkerer with some programming/scripting skills, mostly C# I must admit. Anyways, I like the IPFire project a lot, I’ve been using it for over a year now; started out on a Banana Pi R1 and recently moved to an APU2 (best choice to date). I was missing some functionality in the WUI (OpenVPN client) and I like the adminlte design, which made me decide to contribute to the project to see if I could implement both. While the first was only kicked off, the second proved to be more realistic. I could find a few earlier attempts, but none of the sources were available anymore ☹

1. Bootstrap theme thread: https://forum.ipfire.org/viewtopic.php?f=17&t=14878
2. Concept redesign: https://dribbble.com/shots/2076375-IPFire-Redesign-Concept (full image: https://dribbble.com/shots/2076375-IPFire-Redesign-Concept/attachments/372604) by Maurice Ge

So I got excited and thought: why not give it a shot? There is obviously still room for improvement and the colors don’t match (note: I am by no means a front-end developer, I like to tinker with the back-end more). So in order to allow people to complement the skin and make sure it doesn’t get lost in a long forgotten mail thread, I decided to post it on github for the world to see (and use): https://github.com/Saiyato/ipfire-skin-dashboard

It shouldn’t feature too many hard-coded (hard-scripted) fields anymore, feel free to point them out or create a PR to fix them.