🧼 Clean JIRA board view (Bookmarklet generation)

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

What does it do?

Full-screen JIRA Kanban boards -like this:

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.

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)
}