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

Compact design actually being compact

    XMLWordPrintable

Details

    • Improvement
    • Status: In Progress (View Workflow)
    • Minor
    • Resolution: Unresolved
    • core

    Description

      ####Feel free to move or alter as needed, no idea what you want this sorted under.

      Just upgraded to the latest release and my goodness, beyond not using a dark theme and now being even more blind than usual, the amount of wasted space has gotten so bad now the handful of projects I have don't even fit into the main view anymore.

      I'm all for cleaning things up, making them less prone to fat-fingering things you didn't mean to click on, but adding padding and margin to everything to a point I cannot get a good overview over things is just bad design.

      I attached an image as what it looks like vs. what it should look like, below is the code I added as override in Stylish.

       

      .jenkins-table {
      	border-collapse: collapse;
      	--table-padding: 0.0rem;
           margin: 0px;
      }
      .jenkins-table__cell--tight {
      	padding-left: 0 !important;
      	text-align: center !important;
      	white-space: nowrap;
      	width: 0px;
      }
      #main-panel {
      	padding: 0rem;
      	display: inline-block;
      	width: 100%;
      }
      .tabBar {
      	display: inline-flex;
      	align-items: center;
      	flex-wrap: wrap;
      	background: #f2f2f2;
      	background: var(--tabs-background);
      	border-radius: calc((10px + 34px) / 2);
      	border-radius: var(--tabs-border-radius);
      	padding: 2.5px;
      	margin-bottom: 0rem;
      }
      .jenkins-table > tbody > tr > td {
      	vertical-align: middle;
      	padding: var(--table-padding) 0 var(--table-padding) var(--table-padding);
      	font-weight: 500;
      	height: 0px;
      }
      .jenkins-icon-size {
      	display: flex;
      	align-items: center;
      	justify-content: space-between;
      	margin: 0rem 0;
      }
      

      This removes most of the margins and padding from the existing rules to regain some compact overview. It's a bit overly aggressive I admit and can probably be done with just a few pixels of padding and margin here and there, but having at least 8 or so projects in overview when you open jenkins is quite useful and as is evident from the screenshot, when tightly packing the columns with or without padding they don't become any less difficult to read anyways. Moving margin from 2rem to like 0.2rem perhaps and adding more clear table cell borders. Just spacing things doesn't make them any clearer to read.

      Attachments

        Activity

          You probably want to bring this up with the UX SIG: https://www.jenkins.io/sigs/ux/

          tgr Tobias Gruetzmacher added a comment - You probably want to bring this up with the UX SIG: https://www.jenkins.io/sigs/ux/

          Oh, and there has been a dark theme since quite some time: https://plugins.jenkins.io/dark-theme/

          tgr Tobias Gruetzmacher added a comment - Oh, and there has been a dark theme since quite some time: https://plugins.jenkins.io/dark-theme/
          tampa Vincent added a comment -

          I tried the dark theme plugin before, but it was all manners of messed up with the dashboard plugin and the bootstrap stuff so I removed it again. I'll leave the team a link to this in their gitter or something.

          tampa Vincent added a comment - I tried the dark theme plugin before, but it was all manners of messed up with the dashboard plugin and the bootstrap stuff so I removed it again. I'll leave the team a link to this in their gitter or something.
          tampa Vincent added a comment -

          After some more editing using the extra css setting I managed to reduce the size even further, not pretty, I admit as much I am not good with css, but this works for me now. I know there is a n-th child parameter in css now to apply alternating colors to tables tr for example, which does help quite a bit. It needs some more tweaks, but I can post the current css overrides if necessary.

          tampa Vincent added a comment - After some more editing using the extra css setting I managed to reduce the size even further, not pretty, I admit as much I am not good with css, but this works for me now. I know there is a n-th child parameter in css now to apply alternating colors to tables tr for example, which does help quite a bit. It needs some more tweaks, but I can post the current css overrides if necessary.

          People

            Unassigned Unassigned
            tampa Vincent
            Votes:
            1 Vote for this issue
            Watchers:
            3 Start watching this issue

            Dates

              Created:
              Updated: