Makes the Jira Kanban view more pleasant to use: Increases screen real estate dedicated to displaying cards; prevents truncation of card titles; and more.
ae_jira_kanban by jschneid
Mirrored from https://github.com/appfolio/ae_userstyles/raw/master/ae_jira_kanban.user.css
Details
Authorjschneid
LicenseMIT License
Categoryatlassian.net
Created
Updated
Size2.9 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
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-center (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.6
@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, participant 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;
}
/* Card div - Slightly reduce vertical whitespace content padding */
.yse7za_content {
padding-top: 3px;
padding-bottom: 6px;
}
/* Card title text spans */
.css-1qyv5a ._slp31hna {
padding-right: 0; /* Allow card title to span full card width */
-webkit-line-clamp: 7; /* Discontinue truncation of card titles (<= 7 lines) */
pointer-events: none; /* Card title on-hover tool tips: remove. (Unneeded now that we're preventing truncation of card titles!) */
}
/* Card ID labels (in the bottom left of each card) */
.css-1qyv5a ._p12f1osq {
pointer-events: none; /* Card ID tool tips: remove */
}
/* Card Epic labels (with colored background, below the card title text) */
.css-1qyv5a ._1reo15vq {
pointer-events: none; /* Card Epic label tool tips: remove */
}
/* Card "..." on-hover button - Move to bottom-center of card (to avoid obscuring other card elements on hover) */
[data-testid="platform-card.ui.card.actions-section"] {
top: initial;
right: 123px;
bottom: 5px;
}
/* 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;
}
}