[JENKINS-71578] allow making sidepanel sticky #8269

mawinter69 · 2023-07-14T09:20:06Z

Having a sticky sidepanel allows pages with only few links but longer content easier navigation.

Apply stickiness to PluginManager.

After:

Testing done

Manually visit PluginManager
Sidepanel sticks when scrolling down so all links stay accessible all the time.
Configure a job -> sidepanel is still sticky

Proposed changelog entries

Allow to make side panel sticky

Proposed upgrade guidelines

N/A

Submitter checklist

Give feedback

The Jira issue, if it exists, is well-described.

The Jira issue, if it exists, is well-described.
Options
Successfully updated the issue's project

There was an error updating the issue's project
The changelog entries and upgrade guidelines are appropriate for the audience affected by the change (users or developers, depending on the change) and are in the imperative mood (see [examples](https://github.com/jenkins-infra/jenkins.io/blob/master/content/_data/changelogs/weekly.yml)). Fill in the **Proposed upgrade guidelines** section only if there are breaking changes or changes that may require extra steps from users during upgrade.

The changelog entries and upgrade guidelines are appropriate for the audience affected by the change (users or developers, depending on the change) and are in the imperative mood (see examples). Fill in the Proposed upgrade guidelines section only if there are breaking changes or changes that may require extra steps from users during upgrade.
Options
Successfully updated the issue's project

There was an error updating the issue's project
There is automated testing or an explanation as to why this change has no tests.

There is automated testing or an explanation as to why this change has no tests.
Options
Successfully updated the issue's project

There was an error updating the issue's project
New public classes, fields, and methods are annotated with `@Restricted` or have `@since TODO` Javadocs, as appropriate.

New public classes, fields, and methods are annotated with @Restricted or have @since TODO Javadocs, as appropriate.
Options
Successfully updated the issue's project

There was an error updating the issue's project
New deprecations are annotated with `@Deprecated(since = "TODO")` or `@Deprecated(forRemoval = true, since = "TODO")`, if applicable.

New deprecations are annotated with @Deprecated(since = "TODO") or @Deprecated(forRemoval = true, since = "TODO"), if applicable.
Options
Successfully updated the issue's project

There was an error updating the issue's project
New or substantially changed JavaScript is not defined inline and does not call `eval` to ease future introduction of Content Security Policy (CSP) directives (see [documentation](https://www.jenkins.io/doc/developer/security/csp/)).

New or substantially changed JavaScript is not defined inline and does not call eval to ease future introduction of Content Security Policy (CSP) directives (see documentation).
Options
Successfully updated the issue's project

There was an error updating the issue's project
For dependency updates, there are links to external changelogs and, if possible, full differentials.

For dependency updates, there are links to external changelogs and, if possible, full differentials.
Options
Successfully updated the issue's project

There was an error updating the issue's project
For new APIs and extension points, there is a link to at least one consumer.

For new APIs and extension points, there is a link to at least one consumer.
Options
Successfully updated the issue's project

There was an error updating the issue's project
Options

Desired reviewers

@mention

Before the changes are marked as ready-for-merge:

Maintainer checklist

Give feedback

There are at least two (2) approvals for the pull request and no outstanding requests for change.

There are at least two (2) approvals for the pull request and no outstanding requests for change.
Options
Successfully updated the issue's project

There was an error updating the issue's project
Conversations in the pull request are over, or it is explicit that a reviewer is not blocking the change.

Conversations in the pull request are over, or it is explicit that a reviewer is not blocking the change.
Options
Successfully updated the issue's project

There was an error updating the issue's project
Changelog entries in the pull request title and/or **Proposed changelog entries** are accurate, human-readable, and in the imperative mood.

Changelog entries in the pull request title and/or Proposed changelog entries are accurate, human-readable, and in the imperative mood.
Options
Successfully updated the issue's project

There was an error updating the issue's project
Proper changelog labels are set so that the changelog can be generated automatically.

Proper changelog labels are set so that the changelog can be generated automatically.
Options
Successfully updated the issue's project

There was an error updating the issue's project
If the change needs additional upgrade steps from users, the `upgrade-guide-needed` label is set and there is a **Proposed upgrade guidelines** section in the pull request title (see [example](https://github.com/jenkinsci/jenkins/pull/4387)).

If the change needs additional upgrade steps from users, the upgrade-guide-needed label is set and there is a Proposed upgrade guidelines section in the pull request title (see example).
Options
Successfully updated the issue's project

There was an error updating the issue's project
If it would make sense to backport the change to LTS, a Jira issue must exist, be a _Bug_ or _Improvement_, and be labeled as `lts-candidate` to be considered (see [query](https://issues.jenkins.io/issues/?filter=12146)).

If it would make sense to backport the change to LTS, a Jira issue must exist, be a Bug or Improvement, and be labeled as lts-candidate to be considered (see query).
Options
Successfully updated the issue's project

There was an error updating the issue's project
Options

Having a sticky sidebar not only for app bars allows pages with only few links but longer content easier navigation

daniel-beck

Needs to be accompanied by (plugin) developer guidance when to use this to prevent a mess of arbitrary choices.

Should not be used on extensible pages like for User, otherwise scrolling makes later entries inaccessible. (It's fairly unlikely to matter for User, but it's an extensible sidepanel nonetheless.)

mawinter69 · 2023-07-14T14:31:06Z

The non scrolling is already a problem now. Just go to configure job and make the browser window very small and the lower links are gone.
So maybe we should add some css to allow it to scroll if required

daniel-beck · 2023-07-14T14:40:46Z

already a problem now

While small windows will hide sidepanel entries for config forms, it's the same 5 or so entries every time, and they're only for navigation inside the same page (something you can also accomplish by scrolling), not to go somewhere else. User and everything Actionable has an unbounded number of sidepanel entries, and those links go elsewhere with usually no alternative.

So maybe we should add some css to allow it to scroll if required

Would be an improvement in any case I think 👍

Which leaves when to use which. If scrolling sidepanels will be able to handle arbitrary numbers of entries nicely, and are better, why should this be optional, and opt-in?

when to use it and when not

mawinter69 · 2023-07-14T19:48:34Z

tested this on a job. When adding a overflow: auto and a scrollbar is shown, the widget fills up to the scrollbar and then when hovering the navigation arrows are missing. Can be overcome by adding padding to the sidepanel but this will increase the gap between side and main panel. And scrollbar-gutter is not supported on Safari 😞

janfaracik · 2023-08-16T08:47:37Z

Would it be possible to move <div id="side-panel" class="app-page-body__sidebar"> from layout.jelly into side-panel.jelly and that way we could do away with the JS?

mawinter69 · 2023-08-17T11:24:17Z

Would it be possible to move <div id="side-panel" class="app-page-body__sidebar"> from layout.jelly into side-panel.jelly and that way we could do away with the JS?

done
A minor difference would be if someone creates a two column layout but is not including a sidepanel, then the div is not generated which might be expected when enabling YUI debug mode.

timja

LGTM

github-actions · 2023-08-21T21:25:57Z

Please take a moment and address the merge conflicts of your pull request. Thanks!

timja · 2023-12-17T14:46:59Z

/label ready-for-merge

This PR is now ready for merge, after ~24 hours, we will merge it if there's no negative feedback.

Thanks!

[JENKINS-71578] allow making sidebar sticky

3e72a42

Having a sticky sidebar not only for app bars allows pages with only few links but longer content easier navigation

daniel-beck requested changes Jul 14, 2023

View reviewed changes

improve documentation

d4706db

when to use it and when not

mawinter69 added 2 commits July 14, 2023 22:23

no sticky for users

7154060

Merge branch 'master' into JENKINS-71578

f2ad2de

NotMyFault requested a review from janfaracik July 31, 2023 10:33

janfaracik mentioned this pull request Aug 16, 2023

Move app bar for plugins #8376

Merged

janfaracik approved these changes Aug 16, 2023

View reviewed changes

move div to side-panel

bc8654e

mawinter69 added 3 commits August 17, 2023 13:30

unused variable

6f42031

Merge branch 'master' into JENKINS-71578

5cf4146

guard everything with if mode=side-panel

901be04

timja approved these changes Aug 19, 2023

View reviewed changes

timja added the developer Changes which impact plugin developers label Aug 19, 2023

timja requested a review from daniel-beck August 19, 2023 17:06

github-actions bot added the unresolved-merge-conflict There is a merge conflict with the target branch. label Aug 21, 2023

Merge branch 'master' into JENKINS-71578

d4c42ff

github-actions bot removed the unresolved-merge-conflict There is a merge conflict with the target branch. label Aug 23, 2023

timja added the web-ui The PR includes WebUI changes which may need special expertise label Dec 17, 2023

comment-ops-bot bot added the ready-for-merge The PR is ready to go, and it will be merged soon if there is no negative feedback label Dec 17, 2023

NotMyFault merged commit a822935 into jenkinsci:master Dec 19, 2023
18 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[JENKINS-71578] allow making sidepanel sticky #8269

[JENKINS-71578] allow making sidepanel sticky #8269

mawinter69 commented Jul 14, 2023 •

edited

Submitter checklist

Maintainer checklist

daniel-beck left a comment

mawinter69 commented Jul 14, 2023

daniel-beck commented Jul 14, 2023 •

edited

mawinter69 commented Jul 14, 2023

janfaracik commented Aug 16, 2023

mawinter69 commented Aug 17, 2023 •

edited

timja left a comment

github-actions bot commented Aug 21, 2023

timja commented Dec 17, 2023

[JENKINS-71578] allow making sidepanel sticky #8269

[JENKINS-71578] allow making sidepanel sticky #8269

Conversation

mawinter69 commented Jul 14, 2023 • edited

Testing done

Proposed changelog entries

Proposed upgrade guidelines

Submitter checklist

Desired reviewers

Maintainer checklist

daniel-beck left a comment

Choose a reason for hiding this comment

mawinter69 commented Jul 14, 2023

daniel-beck commented Jul 14, 2023 • edited

mawinter69 commented Jul 14, 2023

janfaracik commented Aug 16, 2023

mawinter69 commented Aug 17, 2023 • edited

timja left a comment

Choose a reason for hiding this comment

github-actions bot commented Aug 21, 2023

timja commented Dec 17, 2023

mawinter69 commented Jul 14, 2023 •

edited

daniel-beck commented Jul 14, 2023 •

edited

mawinter69 commented Aug 17, 2023 •

edited