App management navigation has padding on bottom

[jancborchardt]

There is no settings area for settings, so we don’t need the padding on the bottom:

@nextcloud/designers didn’t we have that in the CSS before?

[skjnldsv]

This should be automated with css. I guess we need to also update the positioning of the settings?

[nextcloud-bot]

GitMate.io thinks possibly related issues are #2189 (App-navigation without settings should not have padding-bottom), #2612 (Non interactive app navigation entry), #3346 (Left shadow in app-navigation missing from user settings), #4629 (App navigation styles: entries in folders not highlighted correctly, incorrect padding for entries with counters), and #5960 (App management: Apps not properly sorted by A-Z).

[jancborchardt]

This should be automated with css.

Yep, as said I thought I remember this worked before. But then again, how can you modify a parent’s style based on if they have a child or not. We could require a class like with-settings (like with-icon) on the #app-navigation?

I guess we need to also update the positioning of the settings?

What do you mean by that? There’s no settings here at all, so nothing to update?

[skjnldsv]

No, we need to stop using classes as toggles! :)
Css is powerful enough to detect the presence or not of an element. We should properly set things up so nothing is required ;)

[jancborchardt]

Haha – nevermind, we do already have this class and use it in personal settings ;) it’s without-app-settings. I’ll use that.

Css is powerful enough to detect the presence or not of an element. We should properly set things up so nothing is required ;)

Currently you can not modify a parent based on a child using CSS. :) See caniuse :has() CSS relational pseudo-class

[jancborchardt]

Ok, this apparently has to be done by someone who knows Vue, as I have no idea where to insert the class or the logic for it.

Seems either settings/src/components/appNavigation.vue or settings/src/views/Apps.vue

[skjnldsv]

Currently you can not modify a parent based on a child using CSS. :) See caniuse :has() CSS relational pseudo-class

There are other ways to do that than use a padding on the parent

[jancborchardt]

I know, we can use fancy ways for lots of things – but I can't see how to use them short of rewriting our HTML. Which is not a proper fix in this case where we simply need to add a class we already use.

So if there are other ways we can do this for Nc 14, let me know. :) Otherwise, @juliushaertl @skjnldsv can you educate me where/how I would have to add the class in the Vue template?

[skjnldsv]

Here you go @jancborchardt #9977 :)

Nonetheless if you want to still improve your vue knowledge, I'd be happy to help ;)