Skip to content

ae_jira_kanban by jschneid

Mirrored from https://github.com/appfolio/ae_userstyles/raw/master/ae_jira_kanban.user.css

Homepage Write a review Install Get Stylus

Details

Authorjschneid

LicenseMIT License

Categoryatlassian.net

Created

Updated

Size2.6 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Makes the Jira Kanban view more pleasant to use: Increases screen real estate dedicated to displaying cards; prevents truncation of card titles; and more.

Notes

  • Card titles are no longer truncated!
  • Removes on-hover card title tool tips. (No longer needed now that titles aren't truncated!)
  • Uses the full card width when displaying card titles
  • Moves each card's ... on-hover button to the bottom-left corner (to avoid obscuring card titles)
  • Slightly increases card and column width
  • Reduces unneeded vertical whitespace in the top header portion of the board
  • Increases the column header font size
  • Slightly reduces vertical whitespace in the column header row
  • Replaces the default green "Task" card type icon (which looks very similar to the green "Story" card type icon) with an orange square icon
  • Displays due dates in red

Source code

/* ==UserStyle==
@name           ae_jira_kanban
@namespace      github.com/openstyles/stylus
@version        1.0.4
@description    Make the Jira Kanban board more pleasant to use
@author         ae_jira_kanban Team
@homepageURL    https://github.com/appfolio/ae_userstyles
==/UserStyle== */


@-moz-document domain("atlassian.net") {
    /* Board title row with board name, top-right nav buttons - Reduce vertical whitespace */
    .css-1eekove {
        margin-bottom: -25px;
    }

    /* Page top section - Reduce vertical whitespace */
    .css-cayjis {
        margin-top: 2px;
        margin-bottom: 2px;
    }

    /* Top nav row with search field, partipant icons, "Epic" and other dropdowns - Reduce vertical whitespace */
    ._otyrxy5q {
        margin-bottom: 5px;
    }

    /* Column header row div - Reduce vertical whitespace */
    [data-testid="platform-board-kit.common.ui.column-header.header.column-header-container"] {
        height: 30px;
    }
       
    /* Column headers - Increase font size/weight */
    h2.__board-test-hook__column-title {
        font-weight: 600;
        font-size: 15px;
    }
    
    /* Column header div - Increase card and column width */
    div[data-component-selector="platform-board-kit.ui.column.draggable-column"] {
        min-width: 290px;
        margin-right: 8px; /* Add a little spacing betweeen columns */
    }
    
    /* Card div - Slightly reduce vertical whitespace content padding */
    .yse7za_content {
        padding-top: 3px;
        padding-bottom: 6px;
    }
    
    /* Card title text spans */
    ._slp31hna {
        padding-right: 0px; /* Allow card title to span full card width */
        -webkit-line-clamp: 7; /* Discontinue truncation of card titles (<= 7 lines) */
    }
    
    /* Card on-hover tool tips - Remove. (Unneeded now that we're preventing truncation of card titles!) */
    .Tooltip.css-1kad8p3 {
        display: none;
    }

    /* Card "..." on-hover button - Move to lower-left of card (to avoid obscuring card title on hover) */
    [data-test-id="platform-card.ui.card.actions-section"] {
        top: initial;
        right: initial;
        bottom: var(--ds-space-100);
        left: var(--ds-space-100);
    }
    
    /* Replace the "task" card type icon with an orange box */
    img[src="https://appfolio.atlassian.net/rest/api/2/universal_avatar/view/type/issuetype/avatar/10311?size=medium"] {
        content: url('https://placehold.co/20x20/orange/orange')
    }
    
    /* Color due dates red */
    div[data-issuefieldid="duedate"] {
        color: #f00;
    }
}

Reviews

No reviews yet.