Uploaded image for project: 'Jenkins'
  1. Jenkins
  2. JENKINS-62739

Do not use Bootstrap style in Advisor admin page

    XMLWordPrintable

    Details

    • Similar Issues:
    • Released As:
      cloudbees-jenkins-advisor-3.2.0

      Description

      Reported in the dark-theme plugin ( https://github.com/jenkinsci/dark-theme-plugin/issues/79 ) by Tim Jacomb and confirmed by Félix Queiruga Balado using Bootstrap in the admin panel is causing various rendering issue (Bootstrap causes the specific pages where it's used to have a different font and basic theme than the rest of the UI.)

      AFAICS Bootstrap is used for the alert boxes used in the admin page (success, info, warning, error) and Bootstrap was imported to match what was done in the "Manage Jenkins" screen for monitors

      It seems possible to do without it ... let's try

        Attachments

          Issue Links

            Activity

            Hide
            aheritier Arnaud Héritier added a comment -

            Tim Jacomb Félix Queiruga Balado ok I will try to upgrade and test without bootstrap.

            I will miss alert-success AFAICS but I can replace it with alert-info

            Show
            aheritier Arnaud Héritier added a comment - Tim Jacomb Félix Queiruga Balado ok I will try to upgrade and test without bootstrap. I will miss alert-success AFAICS but I can replace it with alert-info
            Hide
            fqueiruga Félix Queiruga Balado added a comment - - edited

            You should be able to backport alert-success with the following CSS:

            .alert-success {
              background-color: #d4edda;
              background-color: var(--alert-success-bg-color);
              border-color: #c3e6cb;
              border-color: var(--alert-success-border-color);
              color: #138347;
              color: var(--alert-success-color);  
            }
            

            Color codes may not be final but for the purposes of testing it out will do.

            This one should also be added upstream IMO. There is already a success version for the form "Saved" banner.

            Edit: I have created a ticket for this https://issues.jenkins-ci.org/browse/JENKINS-62747 

            Show
            fqueiruga Félix Queiruga Balado added a comment - - edited You should be able to backport alert-success with the following CSS: .alert-success { background-color: #d4edda; background-color: var (--alert-success-bg-color); border-color: #c3e6cb; border-color: var (--alert-success-border-color); color: #138347; color: var (--alert-success-color); } Color codes may not be final but for the purposes of testing it out will do. This one should also be added upstream IMO. There is already a success version for the form "Saved" banner. Edit: I have created a ticket for this  https://issues.jenkins-ci.org/browse/JENKINS-62747  
            Hide
            fqueiruga Félix Queiruga Balado added a comment -

            It would also help if you could wrap everything within <l:main-panel> here https://github.com/jenkinsci/cloudbees-jenkins-advisor-plugin/blob/a73267a742e3d0d629a46b507433a1e38e27b345/src/main/resources/com/cloudbees/jenkins/plugins/advisor/AdvisorGlobalConfiguration/index.jelly#L20 inside a div with a CSS class like .jenkins-health-advisor. This way it would be possible to namespace CSS to only work within that part of the page.

            Show
            fqueiruga Félix Queiruga Balado added a comment - It would also help if you could wrap everything within <l:main-panel> here https://github.com/jenkinsci/cloudbees-jenkins-advisor-plugin/blob/a73267a742e3d0d629a46b507433a1e38e27b345/src/main/resources/com/cloudbees/jenkins/plugins/advisor/AdvisorGlobalConfiguration/index.jelly#L20  inside a div with a CSS class like .jenkins-health-advisor . This way it would be possible to namespace CSS to only work within that part of the page.
            Hide
            aheritier Arnaud Héritier added a comment -

             ok I will try. Thx for these feedbacks

            Show
            aheritier Arnaud Héritier added a comment -  ok I will try. Thx for these feedbacks
            Hide
            aheritier Arnaud Héritier added a comment -
            Show
            aheritier Arnaud Héritier added a comment - PR  https://github.com/jenkinsci/cloudbees-jenkins-advisor-plugin/pull/60 To be released as 3.2.0 when validated by Félix Queiruga Balado

              People

              Assignee:
              aheritier Arnaud Héritier
              Reporter:
              aheritier Arnaud Héritier
              Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved: