Administration panel redesign with Bootstrap 3

[pjedrzejewski]

It requires a lot of work and clean up of css (or maybe moving everything to less), but it's a good start.

Before...

After...

[stloyd]

❤️

Some conflicts with master I see =)

[pjedrzejewski]

Ye ye I will rebase. And it's responsive, the left side menu is hidden on smaller devices, it appears as the standard bootstrap responsive menu on top navbar. It has quite a lot of small glitches on mobile, needs some fixing.

[stloyd]

Do you need some help with that? I have some time and I love CSS =D

[pjedrzejewski]

@stloyd Sure, just fork it. :)

[pjedrzejewski]

Rebased!

[kayue]

We can remove the button shadow, doesn't have to look 3d I think.
Some buttons like the delete button is too standout but won't be use too often.

[kayue]

BTW I like TradeGecko's backend quite a lot

[tristanbes]

Classy !

[jjanvier]

<3

[arnolanglade]

@pjedrzejewski : very good !!!

[stloyd]

@pjedrzejewski Maybe add todo list what's missing etc. (in PR description or as a comment)?

[umpirsky]

Wow, great job!

[pjedrzejewski]

@stloyd Will do. :)

[stloyd]

@pjedrzejewski Can't push to main repo, and don't want to create new PR (you have pushed code to main not to fork so GH is a bit crappy here), so here you will find mine change (WIP): https://github.com/stloyd/Sylius/tree/bootstrap-3

[pjedrzejewski]

I'll simply pull your changes to this PR. Thanks!

[Richtermeister]

Very cool! +1 for less!

[winzou]

This is great! 👍
Please make the text of buttons details, edit and delete disappear on mobile, it takes too much place ;)

[stloyd]

@pjedrzejewski Additional cleanup commit: 6d3bc99ffbf18b33da2af996b8d3c7ffe68c0160

[pjedrzejewski]

@stloyd Dude, help me making the sidebar height: 100%, because it drives me crazy. Either I am a complete CSS noob or I can't handle Bootstrap styles properly. :D (Try on countries list, you get a quite long page)

[pjedrzejewski]

@kayue I've removed the shadow from buttons, as you suggested!

[pjedrzejewski]

@winzou Good idea, I'll look into this.

[smoench]

+100 for less (or sccs) ;-) So we could easily customising the color/font theme via variables

[stloyd]

@pjedrzejewski Here you have some fixes: 5c0bceb & 80c9357 (I'm looking now at sidebar).

[stloyd]

With latest commits on my fork you can see:

[jjanvier]

that's cool ! @stloyd can the variants be collapsed ?

[amenophis]

@stloyd @pjedrzejewski Great work on the backend design 👍

[stloyd]

@jjanvier I was thinking on something like this, as well as about i.e. smaller dates (just 2013.08.13 23:06 instead September 13, 2013 23:06), less text on descriptions etc. but this would probably require to render both (that's why I'm not sure it's good way to go) in template and just show/hide basing on device size.

Also collapsing by default is not best idea IMO. But let's see what @pjedrzejewski thinks about that.

[molchanoviv]

@stloyd Looks great.

[stloyd]

@jjanvier @pjedrzejewski Quick change so it's not perfect but works:

[stloyd]

Few additional fixes on the way.

1. Filter forms: df6a5797734777f627451cc02fbccf726a776601
2. Hardcoded styles: 7a3d1059b35fb3e110289fa5f8b3dd240e37e616

[stloyd]

@pjedrzejewski That gallery script is not compatible with Bootstrap 3 (at least it looks like that), maybe we should replace it with something simpler?

[pjedrzejewski]

@stloyd Yes. http://fancybox.net/, what do you think? I couldn't find anything for BS3.

[pjedrzejewski]

There is http://bootply.com/71401 and http://ashleydw.github.io/lightbox/ (better imo).

[stloyd]

I guess that lightbox could be good as it's small, but if we want something more advanced I found this: http://blueimp.github.io/Gallery/

[snc]

Maybe https://github.com/blueimp/Gallery or https://github.com/yairEO/photobox ?
@stloyd you was faster :-)

[pjedrzejewski]

Hello Henrik! Thanks for suggestions guys, I like http://blueimp.github.io/Gallery/, @stloyd do you have a moment for this or should I work on it?

[stloyd]

@pjedrzejewski Here you go: 8941ef37f15bf1c1a7f2e9a7922678898c656ef3

[pjedrzejewski]

We'll address the minor issues in other PR's. Thanks @stloyd for help!

[pjedrzejewski]

I also upgraded frontend to use Bootstrap3, without any major changes to the look though.

[jjanvier]

Woha ! That's really beautiful !!

[winzou]

I have to say it: awesome work guys!

Two things though:

• I could access to /administration/dashboard with basic user login. But when I wanted to go to /administration/orders I had to login into the administration login. Problem is: why did I have access to the dashboard without an administration login?
• Images are throwing error 500 on demo.sylius.org
• I don't know if this is done on purpose, but I don't like all those caps.

[molchanoviv]

Congratulations guys.