!Friendica Support !Friendica Developers
I'm trying to get through some updates to the Bookface scheme for Frio. One of the things I'd like to change is the alignment of a couple things in the top toolbar. An original goal of Bookface was to make Friendica feel a little more familiar for Facebook users. Here's what the top toolbar looks like over there:
So I'd like to move the User Menu to the far right and ideally move the Notifications button and drop-down over there as well, to help FB users with their "muscle memory" on where these things are in the desktop layout:
BUT as you can see that means hiding the User Name and I'm not sure how people might feel about that, in which case I could just leave the Notifications where the are:
I'm also going back and forth on whether I should introduce more spacing between the icons in the middle. Should I space them more like they are on FB or leave them close together in the center like they are?
It has bugged me for a while that the layout looks unbalanced with all that white space to the right, so moving the User Menu button to the right helps visually balance it. So I'm definitely moving that. I just don't know whether to move the Notifications button too?
Let me know which you'd prefer in the comments.
Michael 🇺🇦
•Random Penguin
•Hypolite Petovan
•Michael 🇺🇦
•Random Penguin
•Occurs to me I could just drop the user name to the second toolbar, there's plenty of space for it there:
On narrow screens the username text goes away because it switches to the mobile slide-in menu, which has the username as the first item.
I could also just disable the desktop user menu and enable the mobile one for all screen sizes.
(As a side note I've noticed there are quite a few UI elements that are duplicated - one for the desktop layout and one for mobile. I'm assuming that's because Frio predates just using media queries to make a responsive layout restyles a single menu).
Hypolite Petovan
•Random Penguin
•Michael 🇺🇦
•ariaelements or navigation elements that are only there for screenreaders.Random Penguin
•Michael 🇺🇦
•Random Penguin
•Michael 🇺🇦
•Random Penguin
•Today I noticed that VoiceOver seems to be broken. It was working fine before the macOS 15.7 security update. Now it will only read and navigate to links and form elements. It skips over any static text. Quick look in Apple forums and it seems it's also broken in Tahoe.
I guess I'll have to fire up one of my old Macs that's stuck on an earlier macOS version when VoiceOver still worked.
Wilhelm
•Wilhelm
•What facebook does looks like good UX. Logo then search, then the different icons with more spacing. It is not by accident that they only show 5 icons in the middle and move less used options to the right side. That is such a sweet design, I'd love if it Friendica could adopt it.
As for the username: wondering if that could default to off and an covered by a setting which allows showing username in 2nd toolbar as suggested? I love the cleaner look which gives a better structured overall feeling. Even wondering if "Search" is sufficient for the search field. Users are likely aware they can also search names and hashtags etc.
Random Penguin
•My screenshots are Friendica 2024.12. Instruction text appears in a tooltip when you focus on the input. In 2026.01 that text is in the field: "Search: @name, !group, #tags, content"
Personally I don't like it. I think it looks cluttered. The text doesn't fit in the field in pretty much any language. And how much hand-holding do we really need to do with a search field these days?
Nonetheless, part of this update will also expand the Search box on focus so all the placeholder text is visible. At least on the desktop layout. There simply isn't space on mobile. Which is why I don't see the point of having anything other than the word "Search" in there. But the only option I have in CSS is to hide the placeholder text entirely.
Wilhelm
•Search? Would that be possible @Michael 🇺🇦 ?Random Penguin
•Wilhelm
•There were a few changes in regards to the search box and tool tip. I am not sure, but the idea might have been to add the tool-tip to the search box and remove it. Also back then "Search" did show twice which was odd. This was when instead of showing a spotlight icon there still was a search button, so showing search seemed redundant.
We are now in a much better and mature place so it is fair to do another adjustment.
Wilhelm
•Jesper Ross Stocholm 🇩🇰
•My two cents (well, three):
If Facebook had notifications in the center - and Friendica moved that to the far right, I believe it would cause confusion for people accustomed with Facebook. But since Facebook has it at the far right already, I don't think it will be bad to move it to center in Friendica - where it would be more identifiable.
As for spacing, I like the more condensed look with less white-space.
And finally - I also think it is a good idea to keep user name - maybe below the avatar.
... and let me thank you as well. What you have done here is absolutely amazing for Friendica. I truly applaud your work ... even though you have mentioned in another post, that it has been quite challenging.
❤️🎉🙏
Anders Cornelius Madsen
•Random Penguin
•Okay, I think this is what I'm going with:
It places the username at the top of the drop-down menu, which is consistent with the slide-in user menu in the mobile layout. Currently the username has to be hidden on narrower screens because there simply isn't space for it, and if I place it below the button in the second toolbar it has the same issue on narrower screens of running into the "Compose" button. This is compounded by having no way to know how long that username might be. By moving it into the dropdown menu it will be displayed at all screen sizes desktop and mobile.
I'm reworking the CSS or the notifications button so it will properly handle whatever label text is placed on it when labels are enabled. Currently it doesn't handle longer text properly. I finally got it to work like the rest of the buttons, which have an entir
... show moreOkay, I think this is what I'm going with:
It places the username at the top of the drop-down menu, which is consistent with the slide-in user menu in the mobile layout. Currently the username has to be hidden on narrower screens because there simply isn't space for it, and if I place it below the button in the second toolbar it has the same issue on narrower screens of running into the "Compose" button. This is compounded by having no way to know how long that username might be. By moving it into the dropdown menu it will be displayed at all screen sizes desktop and mobile.
I'm reworking the CSS or the notifications button so it will properly handle whatever label text is placed on it when labels are enabled. Currently it doesn't handle longer text properly. I finally got it to work like the rest of the buttons, which have an entirely different HTML structure. I'm also making the Notifications drop-down max-height longer, so if you have a lot of notifications you can see more of them without scrolling. There's especially no reason for it to be so short when it's offset to the right and opening over empty space.
I'm only going to introduce a little more space between the other toolbar icons. I tried it with flex justify-content space-around, space-between, space-evenly but nothing looked as good as centered with a small margin between them.
Random Penguin
•Nope, I think I'm going with this instead:
On Bluesky when you hover over your avatar it fades in your username info. I kinda liked it so I did it here too, except it only shows when the drop-down menu is open rather than on hover (though I could set it to show on hover too I suppose). There is no max-width set on it so it should accommodate any length of user name. As it's an overlay and only present when the menu is open it doesn't matter if it eclipses any elements to the left of it. You can't have the main menu and the notifications list open at the same time anyway.
The reason to put it back next to the avatar is that there is a minimum width set for the drop-down menu but no max-width. In any given language there's no way of knowing how wide that menu might be, so there is no way to guarantee the absolutely positioned overlaid username block will be the same
... show moreNope, I think I'm going with this instead:
On Bluesky when you hover over your avatar it fades in your username info. I kinda liked it so I did it here too, except it only shows when the drop-down menu is open rather than on hover (though I could set it to show on hover too I suppose). There is no max-width set on it so it should accommodate any length of user name. As it's an overlay and only present when the menu is open it doesn't matter if it eclipses any elements to the left of it. You can't have the main menu and the notifications list open at the same time anyway.
The reason to put it back next to the avatar is that there is a minimum width set for the drop-down menu but no max-width. In any given language there's no way of knowing how wide that menu might be, so there is no way to guarantee the absolutely positioned overlaid username block will be the same width as the menu. Therefore I figure it shouldn't look like it's part of that menu and it's really obvious it isn't when the menu is wider.
The only other option I can think of is to swap out the desktop drop-down menu for the mobile slide-in menu that already has the username at the top of the menu list. I can make it drop instead of slide, but it also looks like it doesn't have all the same list items on it as the desktop menu.
Wilhelm
•Random Penguin
•Cecelia
•If Notifications opens another tabbed view, I’d prefer it stays where it is, otherwise, open to a dropdown menu on the far right. I’ve still yet to commit to serious Friendica use, so take my feedback with that in mind.
I’m so pleased you’re still working on this. 🙂
Random Penguin
•