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

Adding different colors to history table and data filter

    • Jenkins 2.105

      When I start or refresh a job page, the build history alternating colors start with white on the filter textbox, then grey/white/grey/white for the builds. Also, after using the filter box, or even clearing an already empty filter, the colors clashe with the filter textbox having grey, and them white/grey/white/grey for the builds. It seems that color alteration are not in the right order

      It is an inconsequential issue as the rest of page and features work very well.

      I think there are some minor issues with html element rendering.

          [JENKINS-59631] Adding different colors to history table and data filter

          Matt Zand created issue -

          Daniel Beck added a comment -

          Can confirm. Interesting find

          Daniel Beck added a comment - Can confirm. Interesting find
          Daniel Beck made changes -
          Description Original: When I start or refresh a job page, the build history alternating colors start with white on the filter textbox, then grey/white/grey/white for the builds. Also, after using the filter box, or even clearing an already empty filter, the colors clashe with the filter textbox having grey, and them white/grey/white/grey for the builds. It seems that color alteration are not in the right order

          It is an inconsequential issue as the rest of page and features work very well.

          I think there are some minor issues with html element rendering.

           

          Thx,

          Matt 

          [https://coding-bootcamps.com/

          [https://myhsts.org/

          [https://dcwebmakers.com/
          New: When I start or refresh a job page, the build history alternating colors start with white on the filter textbox, then grey/white/grey/white for the builds. Also, after using the filter box, or even clearing an already empty filter, the colors clashe with the filter textbox having grey, and them white/grey/white/grey for the builds. It seems that color alteration are not in the right order

          It is an inconsequential issue as the rest of page and features work very well.

          I think there are some minor issues with html element rendering.
          Daniel Beck made changes -
          Labels New: newbie-friendly

          Hi all,

          I would like to work on fixing this. I am a newbie to this project so i hope you all will help me until i get a hang of the system.  Can you kindly provide me with a screenshot of the page where this issue occurs so that i can recreate and start working on this?

          Kalana Wijethunga added a comment - Hi all, I would like to work on fixing this. I am a newbie to this project so i hope you all will help me until i get a hang of the system.  Can you kindly provide me with a screenshot of the page where this issue occurs so that i can recreate and start working on this?
          Kalana Wijethunga made changes -
          Attachment New: jenkinsIssue.JPG [ 49189 ]

          Daniel Beck added a comment -

          kalana Thanks for your interest. This is a job's build history, e.g. on the left of https://ci.jenkins.io/job/Core/job/jenkins/job/master/

          When you load the page, the background of the filter field near the top is white, and the topmost build has a grey background.

          Enter the number "7" into the filter field and press Enter: It will now have a grey background, and the topmost build has a white background.

          Daniel Beck added a comment - kalana Thanks for your interest. This is a job's build history , e.g. on the left of https://ci.jenkins.io/job/Core/job/jenkins/job/master/ When you load the page, the background of the filter field near the top is white, and the topmost build has a grey background. Enter the number "7" into the filter field and press Enter: It will now have a grey background, and the topmost build has a white background.

          I was able to reproduce this. I have attached the image herewith for your verification. I will start working on this. I would be thankful if you could provide me with some guidance on where should i look for this HTML/CSS files

          Kalana Wijethunga added a comment - I was able to reproduce this. I have attached the image herewith for your verification. I will start working on this. I would be thankful if you could provide me with some guidance on where should i look for this HTML/CSS files
          Kalana Wijethunga made changes -
          Assignee New: Kalana Wijethunga [ kalana ]

          I have investigated the issue and identified that the issue is due to the following code in style.css

          table.stripped tr:nth-child(even) {
          {{ background: #fbfbfb;}}
          }

          The table under the build history has the classes "stripped" and "pane" and its alternating colors are created by the above css. 

          The reason for the issue is that at the job page, first row which is the search bar acts as an odd child and when we enter something in it, it acts as an even child of the table. Ideally it should stay as an odd child as in css children are started from 1. 

          Can someone tell me the path to the HTML file of the job page so that I can investigate why this is happening?

          Kalana Wijethunga added a comment - I have investigated the issue and identified that the issue is due to the following code in style.css table.stripped tr:nth-child(even) { {{ background: #fbfbfb;}} } The table under the build history has the classes "stripped" and "pane" and its alternating colors are created by the above css.  The reason for the issue is that at the job page, first row which is the search bar acts as an odd child and when we enter something in it, it acts as an even child of the table. Ideally it should stay as an odd child as in css children are started from 1.  Can someone tell me the path to the HTML file of the job page so that I can investigate why this is happening?

            kalana Kalana Wijethunga
            mattumd Matt Zand
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

              Created:
              Updated:
              Resolved: