Server: Too little spacing for the texts of the header links

[nickvergessen]

Also shorting the words to "Annou…" for announcements and other similar things, without having a hover fallback looks weird to me.

@nextcloud/designers

[nextcloud-bot]

GitMate.io thinks possibly related issues are https://github.com/nextcloud/server/issues/9316 (Add Support for Link headers), https://github.com/nextcloud/server/issues/2693 (More space for navigation text), https://github.com/nextcloud/server/pull/11502 (Fix share header text on small widths), https://github.com/nextcloud/server/issues/10024 (Footer link to text (Theming App)), and https://github.com/nextcloud/server/pull/11511 ([stable14] Fix share header text on small widths).

[jancborchardt]

Right, of course this drawback would appear.

So in the previous version we had full title visibility for the currently hovered/focused element. It would probably fix the issue if the currently selected element’s text gets as much width as the text needs, and the entries left and right are truncated accordingly. Not sure this is easily possible but I have some ideas with either background-color or :after / :before and padding-left/right.

[jancborchardt]

I tried this but it just doesn’t look good and feels janky, and is not flexible (the overflow-y: hidden even needs to be removed from the li, causing the glitching again):

            /* Show full app title for hovered app */
            &:hover span {
                width: 150%;
                transform: translateX(-17%);
                background-color: var(--color-primary);
                z-index: 10;
            }

Other ideas @nextcloud/designers?

[skjnldsv]

I would just add a 2px margin on the span and set the width to calc(100% - 4px) :thinking:

[jancborchardt]

@skjnldsv it’s ok, but it makes the other issue @nickvergessen mentioned even worse cause it shows less characters:

Also shorting the words to "Annou…" for announcements and other similar things, without having a hover fallback looks weird to me.

Like "Bookm…" is now "Book…". So I think both the issue of spacing and the issue of showing the full name on hover/focus need to be addressed?

Do you have any ideas, or improvements to what I commented above at https://github.com/nextcloud/server/issues/12277#issuecomment-435985229 ?

[skjnldsv]

Yep, it's fixing an issue but not improving the other ^^
I'm fine with that tbh. Or else i'll bring back marquee and we'll be doomed for eternity! :smiling_imp:

[juliushaertl]

@skjnldsv You seem to be pretty focused on bringing marquee into Nextcloud. How about building an app for that? :stuck_out_tongue_winking_eye:

[skjnldsv]

I miss it :crying_cat_face:

[nickvergessen]

Anyhow we need a fix for this before 15 :see_no_evil:

[skjnldsv]

Anyhow we need a fix for this before 15

What is your opinion on what's above? :)

[nickvergessen]

well more padding yes, I think showing the full name on hover is a good option, I dislike marquee, but well as long as it looks better than now, im all for it.

[skjnldsv]

I dislike marquee

I was sarcastic :p

[MorrisJobke]

What to do here? We should look into this, because on Thursday is the first RC

[jancborchardt]

@skjnldsv do we want to combine both our approaches? Having a bit more padding by default first, but then on hover showing the complete name of the currently hovered app?

[skjnldsv]

Seems good @jancborchardt :+1: :wink:

[jancborchardt]

@skjnldsv ok, can you start with a pull request with the approach you used above? That definitely fixes the spacing. Then I will add the work-in-progress of what I listed and we see if we can make it look good. If not, we just take your commit. Sound good?