Make all dropdown items of the Community option in the collapsed content visible on small-screen

[lakshmishreea122003]

I came up with this PR in my attempt to fix the issue jenkins-infra/jenkins.io#6056

[halkeye]

https://deploy-preview-63--jenkins-io-components.netlify.app/?path=/story/example-navbar--searchbox-enabled does changing the order of things make any difference to the ui? Can you update the PR description and text about why you are making the change

[halkeye]

it may be worth changing the popup to be a popper.js or the bootstrap 5 thing that @zbynek was setting up.

[lakshmishreea122003]

I wanted to work on the issue jenkins-infra/jenkins.io#6056 so felt by changing the order the community option would place it higher thus enabling all its dropdown menu items to be displayed on small screen. If this assumption of mine was wrong, I shall do as you have suggested.

[lakshmishreea122003]

Please may I know what is @zbynek setting up related to bootstrap 5

[halkeye]

https://popper.js.org/

it should be pretty web component friendly, I am not familiar with what the original issue was though, been busy fighting fires at work

[lakshmishreea122003]

Thanks for the reply. I shall make the required changes.

[lakshmishreea122003]

I have made changes in css . @halkeye please do let me know if it is fine or are any more changes required.

[halkeye]

https://jenkins-io-components.netlify.app/?path=/story/example-navbar--mobile-search-box
https://deploy-preview-63--jenkins-io-components.netlify.app/?path=/story/example-navbar--mobile-search-box

can you explain what the change does?

do you have a screenshot before and after at all?

[lakshmishreea122003]

I do apologize for submitting PRs without proper testing. I now tested it on gitpod and it works as I desired. Sorry for the inconvenience. I shall definitely be more responsible next time.

[halkeye]

lint is failing, though for some reason ci.jenkins.io isn't running it
can you run npm run lint locally?

> @jenkinsci/[email protected] lint:css
> stylelint "src/**/*.css"


src/jio-navbar.css
 229:5  ✖  Expected max-height to come before position  order/properties-alphabetical-order

[lakshmishreea122003]

I did run npm run lint on gitpod after making the changes. Now I get to see this.

[lakshmishreea122003]

Are there any more improvements to be made in order for this PR to be merged? Kindly let me know

[krisstern]

I took a look a the preview and the new change to the mobile version of the navbar looks at least okay. Could be better if we can make the search modal disappear if we click on anywhere outside the modal, though I understand that may not be an easy task.

[halkeye]

That isn't behavior that is exposed via https://docsearch.algolia.com/docs/docsearch-v3/
its probably something that can be hacked in, but i'd recommend raising it with them.

[krisstern]

That isn't behavior that is exposed via https://docsearch.algolia.com/docs/docsearch-v3/ its probably something that can be hacked in, but i'd recommend raising it with them.

Sure @halkeye Let me raise an issue with them.

[krisstern]

Done: algolia/docsearch#1810

[github-actions]

Hey there and thank you for opening this pull request! 👋🏼

We require pull request titles to follow the Conventional Commits specification and it looks like your proposed title needs to be adjusted.

Details:

No release type found in pull request title "Make all dropdown items of the Community option in the collapsed content visible on small-screen". Add a prefix to indicate what kind of release this pull request corresponds to. For reference, see https://www.conventionalcommits.org/

Available types:
 - feat: A new feature
 - fix: A bug fix
 - docs: Documentation only changes
 - style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
 - refactor: A code change that neither fixes a bug nor adds a feature
 - perf: A code change that improves performance
 - test: Adding missing tests or correcting existing tests
 - build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
 - ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
 - chore: Other changes that don't modify src or test files
 - revert: Reverts a previous commit

[lakshmishreea122003]

@halkeye
I am continuing to work on this PR. But meanwhile, as I am preparing a proposal for GSoC project https://www.jenkins.io/projects/gsoc/2023/project-ideas/alternative-jenkinsio-build-tool/ , Antora has its default header and footer. But for the Jenkins website, we have to use components from this repo. I am unable to figure out as to how I could connect this to the antora UI https://gitlab.com/antora/antora-ui-default can you please give me a clue this will help me a lot.

[halkeye]

I can't speak to antora as one never used it.

The storybook covers how to use things. https://jenkins-io-components.netlify.app/?path=/docs/example-introduction--docs
Basically you need a be script tag then add the HTML
I think we moved away from unpkg so I might need to recommend a different cdn but the instructions are the same.

[krisstern]

Hi @lakshmishreea122003! Speaking as one of the potential project mentors, I think we may consider using the Antora header and footer but to render these by tweaking the CSS in such a way so as to imitate the existing components moving forward. But we may also make the Antora header and footer invisible but to add to the Antora-built site in a hacky way the existing header and footer.

[lakshmishreea122003]

Thanks for the suggestions.

[halkeye]

also don't commit to using a solution that won't match needs. If you find out it can't add our standard header and footer, then probably look at a different set of tooling.

but thats way off topic

[lakshmishreea122003]

I'll keep the instructions in mind, thank you so much.

[lakshmishreea122003]

In order to collapse some of the navigation links into their larger subject as advised by @kmartens27 in jenkins-infra/jenkins.io#6046 I did try to find ways to do it but was unable to figure out the apt method. Can you please give me a clue as to how I could go about to get what is desired.

[halkeye]

Maybe take a look at the code @ https://github.com/matteocusinato/q-menu/tree/master
It has unlimited nested support. Plus a lot of css. Maybe something can be learned from it.

[krisstern]

@lakshmishreea122003 I am going to check out this pull request to see if I could use some simple HTML/CSS/JavaScript to achieve the desired effect on my side now. Will get back to you soon!

[krisstern]

Hi @lakshmishreea122003 I have experimented with enabling the "expansion" of the dropdown menu on hover, and had some success. Essentially the normal view when the cursor is away from the menu is:

While the on hover view is:

My code changes is based on your pull request and can be viewed at https://github.com/krisstern/jenkins-io-components/tree/collapsed-content-changes.

It looks like if you would like to carry out the changes @kmartens27 has suggested it is indeed possible, but it would not be trivial.

[kmartens27]

If the collapsing/nesting is more difficult, please don't feel like you must go that route. I hadn't realized how intricate it may be until @krisstern shared his findings.

[lakshmishreea122003]

Thanks for all your guidance. I shall continue to improve this PR to get the desired result.

[Mahmoudgalalz]

@halkeye I am continuing to work on this PR. But meanwhile, as I am preparing a proposal for GSoC project https://www.jenkins.io/projects/gsoc/2023/project-ideas/alternative-jenkinsio-build-tool/ , Antora has its default header and footer. But for the Jenkins website, we have to use components from this repo. I am unable to figure out as to how I could connect this to the antora UI https://gitlab.com/antora/antora-ui-default can you please give me a clue this will help me a lot.

@lakshmishreea122003 @krisstern

You can tweak the default ui of antora, by modify the hbs files, and load the components via cdn, or downloading them as dependencies

using the header file to use the component

and head-script to load the components via cdn

same thing goes with footer as already the components is loaded

this is done here
https://github.com/Mahmoudgalalz/Jenkins.io-new/blob/main/ui/partials/header-content.hbs

[krisstern]

Hi @Mahmoudgalalz Have you checked if @lakshmishreea122003 is still working on this pull request first before proceeding any further? Also for the context, we are not yet using Antora.

[Mahmoudgalalz]

Hi @krisstern, It's still open, so I thought if she still working on it, and also it's not related to the topic but she was asking so I give her info, so I was trying to help

[krisstern]

Hi @krisstern, It's still open, so I thought if she still working on it, and also it's not related to the topic but she was asking so I give her info, so I was trying to help

@Mahmoudgalalz Can to tell the difference between an issue and a pull request? This is a pull request, not an issue. For an open issue with no pull request referenced if it is open you can probably work on it. But for a pull request it means someone has already worked on the issue.

[Mahmoudgalalz]

Yeah I know, I have seen the issue and headed to its PR, to check if there's anything that might be wrong, to suggest
then I found her asking about something not related to the PR at all, but I was having an answer as @halkeye didn't have answer, so I did reply to her questions

so I know the difference between PR and issue

I'm not trying to spam or do wrong things I was trying to be helpful 😇

[krisstern]

If you already know you should refrain from doing so. But in effect you do seem to be spamming more than trying to be helpful.

See this pull request has already been closed just a few moments ago maybe the right response is instead of arguing with me open a new pull request to follow up?