Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Put the children of AppNavigationItem outside of the main item #2572

Conversation

quentinguidee
Copy link
Contributor

@quentinguidee quentinguidee commented Mar 23, 2022

This change is necessary for #2571 (see why in action: #2571 (comment)). It puts AppNavigationItem's children out of the parent item, and displays them separately. This is the simplest implementation I found without recoding the entire AppNavigationItem. I'm open to ideas if you find something cleaner.

before.mov
after.mov

Important notes/questions to reviewers

  • In the current implementation, a side effect is that it disables the ability to pass (like in the doc) class="active" directly to the AppNavigationItem. It seems like the only purpose of passing the class="active" directly is only for the example? The isActive property works fine and continues to push the blue background.

  • As another side effect of this PR, when hovering a child, it doesn't display the hover background of the parent (as demonstrated in the screenshots). I can go back to the first one easily if needed. Just unsure if it was a bug or not.

@marcoambrosini marcoambrosini changed the title Put the children of AppNavigationItem outide of the main item Put the children of AppNavigationItem outside of the main item Mar 24, 2022
@quentinguidee quentinguidee added 3. to review Waiting for reviews enhancement New feature or request feature: app-navigation Related to the app-navigation component labels Mar 24, 2022
Copy link
Contributor

@raimund-schluessler raimund-schluessler left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In principle, I like this idea (the grey hover background of the parent on the left of the child always bothered me), but the changes currently create invalid HTML.

See here:
AppNavigationItem

The li tag has no ul parent (which it has to have) and one of it's siblings is an ul, which is not allowed, see https://html.spec.whatwg.org/#the-ul-element.

So please change it so that lis always have an ul parent and only li siblings.

@raimund-schluessler raimund-schluessler added 1. to develop Accepted and waiting to be taken care of and removed 3. to review Waiting for reviews labels May 18, 2022
@GretaD GretaD force-pushed the children-outside-of-navigationitem branch from fcbc460 to edd9785 Compare May 18, 2022 11:18
@GretaD
Copy link
Contributor

GretaD commented May 18, 2022

i have only rebased it so far, till i understand a bit better Raimunds perspective :)

@GretaD
Copy link
Contributor

GretaD commented May 20, 2022

i finally managed to link my nc/vue with an app and tested this on mail with my new changes and it doesnt work :(
I am trying to fix it but if anybody already have ideas, please write me here

@raimund-schluessler
Copy link
Contributor

raimund-schluessler commented May 20, 2022

i finally managed to link my nc/vue with an app and tested this on mail and it doesnt work :( I am trying to fix it but if anybody already have ideas, please write me here

I fixed one issue, but I can only look at the netlify docs at the moment, and they seem busy. @GretaD Maybe you can give it another try with mail?

@GretaD GretaD force-pushed the children-outside-of-navigationitem branch from 43354b5 to 3e202d4 Compare May 20, 2022 12:04
@GretaD
Copy link
Contributor

GretaD commented May 20, 2022

yes, it works, many thanks @raimund-schluessler

@GretaD
Copy link
Contributor

GretaD commented May 20, 2022

@raimund-schluessler can you please sign off your commits? DCO is not passing

@raimund-schluessler
Copy link
Contributor

@raimund-schluessler can you please sign off your commits? DCO is not passing

Just squash them into yours. My changes were negligible (and I only have the webinterface at hand right now).

@GretaD
Copy link
Contributor

GretaD commented May 20, 2022

@raimund-schluessler can you please sign off your commits? DCO is not passing

Just squash them into yours. My changes were negligible (and I only have the webinterface at hand right now).

yes, right, i can do that

@ChristophWurst ChristophWurst added the 4. to release Ready to be released and/or waiting for tests to finish label May 20, 2022
@ChristophWurst ChristophWurst removed the 1. to develop Accepted and waiting to be taken care of label May 20, 2022
In the current implementation, a side effect is that it disables the ability to pass
class="active" directly to the AppNavigationItem.

Signed-off-by: Quentin Guidée <[email protected]>

Update src/components/AppNavigationItem/AppNavigationItem.vue

Update src/components/AppNavigationItem/AppNavigationItem.vue
@GretaD GretaD force-pushed the children-outside-of-navigationitem branch from 3e202d4 to 3afa288 Compare May 20, 2022 13:24
@raimund-schluessler raimund-schluessler added 2. developing Work in progress and removed 4. to release Ready to be released and/or waiting for tests to finish labels May 20, 2022
@raimund-schluessler
Copy link
Contributor

There is some more (CSS) stuff that needs fixing/adjustments. I will have a look and push some commits, if that is ok with you @GretaD.

@raimund-schluessler
Copy link
Contributor

There seems to be an issue with the netlify docs when the branch is from a different repository. I have no idea why, but opening #2704 triggered the docs build and now the docs preview links to the build for #2704.

I am hence closing this PR #2572 in favor of #2704. I hope that's fine with everyone.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
2. developing Work in progress enhancement New feature or request feature: app-navigation Related to the app-navigation component
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants