Loomio
Wed 25 Mar 2015 11:08AM

New header design

DU Deleted account Public Seen by 57

Whil porting the header to Bootstrap, I've made some few design changes to make it consistant with the rest of the new design. This proposition is about adopting these few design changes.

Here is a comparison of what it looked before and how it look right now :

and here is how it looks now :

The key design changes are :

  • no more shadow at the bottom of the header,
  • the searchbar is higher and squared like the bootstrap's button are,
  • the notifications dropdown is bigger, each notification has more padding, the profile pictures are bigger to improve readability,
  • the user menu is now white with blue links.
S

Salinger3
Agree
Wed 1 Apr 2015 9:17PM

It's more legible, clear

DS

Dennis Schubert
Block
Thu 2 Apr 2015 8:54PM

See comment.

A

aj
Disagree
Sat 4 Apr 2015 10:10PM

like the looks of it, but think it best long term to keep it simple, stick with the standards and work toward something where layouts are customizable by the podmin

SVB

Steffen van Bergerem
Block
Sat 4 Apr 2015 11:44PM

Augier closed the pull request so I think this proposal is pointless.

DS

Dennis Schubert Wed 25 Mar 2015 1:25PM

First: I honestly cannot believe this is happening. You got more then enough feedback on IRC.

  • The current implementation is based on .navbar and over 300 lines to overwrite it to get it dark again, where you could just have used .navbar-inverse. This adds an unnecessary amount of CSS to our already way too large CSS base and nobody will ever be able to maintain this. We have told you that many times before and this is one of the largest issues I have with this PR. I feel like this is a real blocker.
  • The header buttons are way too small. They are already hard to click for some disabled users I know, making them even smaller is not good.
  • For the sake of using bootstraps default, the search bar has to be rounded as it is on the contacts page. Use .form-search to avoid code duplication.
  • The menubars pop downs (notifications and the submenu) got a grey button but a white submenu. While this might work on bootstrap 3's light theme, it does not work in the dark theme at all. Again, using .navbar-inverse would fix that.
  • The hover effect renders the items with a really bad contrast and makes them almost unreadable. Again, using .navbar-inverse would fix that.
  • Other buttons fonts, like the 'sign in'-button, are totally displaced.
  • The search bars results have a different hover effect than the submenus ones. Images are smaller than the one used in the notification area. The diaspora-handle below the name needs more spacing to the top.
  • The notification counter is displaced on the red background.
  • Paddings on images to the right are way too large.

These points are what I have found by clicking around for a minute. You got additional feedback on IRC more than once.

DU

Deleted account Wed 25 Mar 2015 2:48PM

@dennisschubert :

  • The .navar-inverse does not set the particular background that we are using. Plus, see the code I am using the .navbar-inverse class.

  • Which header buttons ? When has this problem been raised ?

  • The squared searchbar is one of the modifications I propose, don't tell me to modify this, the vote is there to decide it.

  • Again .navbar-inverse is already used. Please check the code.

  • Please stop telling me to use .navbar-inverse or tell me if I misuse it and where to place it.

  • I don't use any other font, the fonts are the one inherited from body AFAIK.

  • The searchbar results are on a different template than the one I worked on. I can change it also, but not on this PR, which is already too big to me.

The rest of the points are only personnal feelings. Let's see what other think about it.

Just reminder : this vote is only about design, if you have technical concerns, you can express them on github tell me what to change exactly, I'll listen to you.

DU

Deleted account Wed 25 Mar 2015 3:10PM

Hmm... @steffenvanbergerem, you are right, so I apologize, I must have made a mistake somewhere. I'm correcting this tonight.

DS

Dennis Schubert Wed 25 Mar 2015 4:05PM

And again, you will not be able to "fix this tonight". You have to set the .navbar-inverse class and check if all of your CSS changes are still necessary. That will take some hours. ;)

Which header buttons ? When has this problem been raised ?

Notifications + Messages. Was raised by Steffen via IRC. Three times.

if you have technical concerns, you can express them on github tell me what to change exactly, I’ll listen to you

Also, this has been done via IRC multiple times. Really. I just checked the logs. ;)

DU

Deleted account Wed 25 Mar 2015 7:57PM

Notifications + Messages. Was raised by Steffen via IRC. Three times.

Too small !? Are you kidding ? They are way bigger than they were before ! They now take the whole height of the navbar !

Ok, just explaining you how I use IRC so you can understand why I can't just check the logs : I have 7 or 8 tabs opened, each one often with an acten discussion going on. E.g, I'm following multiple chans related to Mageia. I'm often obliged to read things quick. So, obviously, when I'm asking for a technical review, I try to stay focused on it, but otherwise, no matter how many time you express it, you can't just drop things on IRC like that, I will forget about it. That's why I asked you to express them on github and be clear. ;)

You see, I'm a goodwill man and if you say I should do things another way and you tell me precisly what I should do, I will do it. But you can't just come and say a disdainful way: "I honestly cannot believe this is happening. You got more then enough feedback on IRC" and just drop technical critics like this on a thread I open to discuss design matters. How do you expect I take such a patronizing sentence ?

Load More