Skip to content

Instantly share code, notes, and snippets.

@timbryandev

timbryandev/# 🧼 Clean JIRA board view (Bookmarklet generation).md

Last active September 4, 2024 08:50
Show Gist options
  • Save timbryandev/daff6cf13a8f0ada33917b25b7a35bb9 to your computer and use it in GitHub Desktop.
Save timbryandev/daff6cf13a8f0ada33917b25b7a35bb9 to your computer and use it in GitHub Desktop.
Download ZIP
🧼 Clean JIRA board view (Bookmarklet generation)
Raw
# 🧼 Clean JIRA board view (Bookmarklet generation).md

What does it do?

Full-screen JIRA Kanban boards -like this: A screenshot of a JIIRA Kanban board with the blue header removed and no sidebars

Yeah, but what does it actually do?

Uses JS to inject toggle some CSS styles in the page that should hide a lot of noisy UI (personal opinion). What you are left with is a full-size Kanban board with minimal UI around it.

This bookmarklet will also work on other pages as I'm basically hiding everything outside of the <main> element and certain elements inside of it - simples!

Updates

2024-09-04

  • Hides the new "Work Suggestions" column

Create bookmark data

  • Navigate to the Bookmarklet Maker
  • Set "Title" to "🧼 JIRA"
  • Copy the contents of script.js below into the "Code" textarea
  • Click "Generate Bookmark

Add to browser

You can do one of the following

  • Drag Bookmarklet Maker's "Bookmaklet:" link into your bookmark tab.
  • If you have an existing bookmarklet, you can replace the exisisting URL with the one from the "Output" of the Bookmarklet Maker.
Raw
script.js
const id = "jira-board-view"
const styles = `
main {
position:fixed;
top:0;
}
main > div {
height:100vh !important;
width: 100vw!important;
}
[data-fullscreen-id], [data-fullscreen-id] + div,
[data-testid="platform-board-kit.ui.board.scroll.board-scroll"] > section > div:first-of-type {
display:none;
}
main, div.atlaskit-portal {
z-index:999 !important;
}
`;
const styleTag = document.createElement("style");
styleTag.id = id;
styleTag.innerHTML = styles;
const existingTag = document.getElementById(id)
if (existingTag) {
document.body.removeChild(existingTag)
} else {
document.body.appendChild(styleTag)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment