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.
Note: This discussion was imported from Loomio. Click here to view the original discussion.
The proposition is about adopting all the changes. Though, it is opened to debate. So, if a precise point clearly concerns enough people, I can open other propositions to discuss them.
YES : The new design is ok to me.
ABSTAIN : I’d like to discuss about a change, but it is no big problem to me as is.
NO : I have strong concerns about the new design and I want to discuss it before it is applied.
Outcome: This proposal should be reopened if the author reopens the pull request.
Votes:
Yes: 13
Abstain: 1
No: 6
Block: 2
Note: This proposal was imported from Loomio. Vote details, some comments and metadata were not imported. Click here to view the proposal with all details on Loomio.
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.
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.
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.
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 ?
@dennisschubert and @jhass already mentioned a lot of problems which I also see with your proposed design. Just want to add that the font-size for the username in the header is bigger than before and I think the old version was better.
Just want to add that the font-size for the username in the header is bigger than before
No, it’ not. It’s 13px. The padding is bigger, yes, but not the font size. About .form-search, I didn’t used it as this class seems to be deprecated in BS3 and I wrote BS3 code only an not BS2. This is why I’m not using it. Though, I can use it here knowing you will have to change it back when porting it to BS3.
Appart from that, it seems like the main design concerns are the white menu and the grey hover buttons effects ?
it seems like the main design concerns are the white menu and the grey hover buttons effects
At least for me there is also the notification dropdown with bigger avatars, bigger margins, a blue background for the hovered “mark all as read” link and the CSS gradient for those backgrounds instead of using one color. These are all design changes that I don’t like.
At least for me there is also the notification dropdown with bigger avatars, bigger margins, a blue background for the hovered “mark all as read” link and the CSS gradient for those backgrounds instead of using one color. These are all design changes that I don’t like.
Short story long, you don’t like anything ?
I find the bigger margin makes the dropdown really more easy to read, don’t you ?
Though, I admit that the right margin of the avatars are a bit large.
Ok, just explaining you how I use IRC so you can understand why I can’t just check the logs […] That’s why I asked you to express them on github and be clear.
I see. However, I don’t get why you cannot remember points raised during discussions you did participate. Anyway, I checked the logs, tested the PR myself and talked with Steffen to create this list:
Since Augier is not willing to finish the work, we have nothing left to discuss about. 0.5.0.0 is about to get released and Bootstrap 3 will be used in the future.
Blocking this proposal since we would not be able to able to implement the changes right now. Another vote shall be started as soon as we started working on Bootstrap 3.
I used magnificent admin powers to close the vote since Augier decided not to work on the PR @augier if you feel like reopening that, or at least indicate you want to continue working on it at some point, lets reopen the vote.
