redmineOH

Bug #4

Updated by 0x01 SIA about 2 months ago

## Codex task: Overhaul the Redmine Dashboard board UI 

 Redesign the project Dashboard page so it visually matches the rest of the RedmineOH theme while preserving the dashboard plugin’s functionality and status colour coding. 

 ### Current problem 

 The current board dashboard looks visually disconnected from the rest of the theme: 

 * the board is overly flat and sparse; 
 * the red horizontal status bar is visually dominant; 
 * column separators are harsh; 
 * issue cards look like legacy plugin elements; 
 * spacing, typography and borders do not match the other RedmineOH pages; 
 * the footer legend feels detached from the board; 
 * the overall result is noisy rather than calm and polished. 

 Use the screenshot attached terrible, we need to issue #4 as overhaul it ASAP.  
 Key points - keep the baseline. 

 ### Design direction 

 Keep the result style close to the established RedmineOH visual language: 

 * rounded corners; 
 * soft borders; 
 * restrained shadows; 
 * calm neutral backgrounds; 
 * consistent spacing; 
 * clear but understated typography; 
 * compact controls; 
 * clean alignment with the project navigation and page content. 

 Preserve the original dashboard’s colour-coded meaning for statuses, priorities and warnings. Colours should remain recognisable, but should be presented in a less aggressive and more refined way. 

 ### Required work 

 1. Inspect the Dashboard plugin HTML structure and all theme/plugin CSS affecting: 

    * the board container; 
    * status columns; 
    * column headings; 
    * issue cards; 
    * issue metadata; 
    * priority indicators; 
    * warning indicators; 
    * filters and view controls; 
    * the footer legend. 

 2. Identify which rules come from: 

    * the Redmine Dashboard plugin; 
    * Redmine core styles; 
    * the RedmineOH theme. 

 3. Implement the redesign primarily in the RedmineOH theme. 

 4. Avoid editing plugin source files unless the plugin markup makes a theme-only solution impossible. 

 ### Board container 

 Redesign the outer dashboard area so that it: 

 * sits inside a clean, rounded panel; 
 * uses a subtle border; 
 * uses a calm background; 
 * aligns with the standard RedmineOH content width; 
 * has consistent internal padding; 
 * does not feel like a full-width legacy table; 
 * avoids large empty areas looking visually broken. 

 The board should remain usable when only one or two issues exist. 

 ### Status columns 

 Each status column should: 

 * have a clearly defined but understated section; 
 * use consistent widths where practical; 
 * retain horizontal scrolling if the viewport is too narrow; 
 * use soft vertical separation rather than harsh full-height lines; 
 * have a compact heading area; 
 * display the status name and issue count neatly; 
 * preserve the status order and drag-and-drop behaviour. 

 The current thick red line must be removed or transformed into a restrained status accent. 

 Status colours may appear as: 

 * a thin top border; 
 * a small coloured indicator; 
 * a subtle header tint; 
 * a status badge. 

 Do not use large solid colour bands. 

 ### Issue cards 

 Redesign issue cards so that they: 

 * use rounded corners; 
 * have a subtle border and restrained shadow; 
 * use a neutral or lightly tinted background; 
 * include clear hover and drag states; 
 * separate the issue number, title and metadata cleanly; 
 * use consistent padding; 
 * avoid unnecessary empty height; 
 * display long titles safely; 
 * remain readable with different trackers, assignees and priorities. 

 Preserve all existing click, drag, dropdown and context-menu behaviour. 

 The coloured priority indicator should remain visible, but it should be integrated as a small accent such as: 

 * a left border; 
 * a narrow colour strip; 
 * a compact badge; 
 * a small marker. 

 Do not fill the entire card with a strong priority colour. 

 ### Toolbar and controls 

 Restyle the controls above the board: 

 * Task Board; 
 * All Trackers; 
 * My Issues; 
 * View; 
 * Options. 

 They should align on a clean toolbar row and match other RedmineOH controls. 

 Requirements: 

 * consistent font size; 
 * consistent spacing; 
 * calmer link treatment; 
 * dropdown arrows aligned properly; 
 * suitable wrapping on narrower screens; 
 * no floating controls at unrelated edges. 

 ### Priority and warning legend 

 Restyle the legend below the board so that it: 

 * appears as a compact, integrated footer or legend panel; 
 * uses small tabs (round corners, neat, calm); keep colour swatches or indicators; 
 * aligns labels consistently; 
 * avoids looking like raw plugin output; 
 * preserves the original priority colours; 
 * preserves the overdue warning indicator; 
 * remains readable on mobile. 

 The plugin name/version link should be visually secondary. 

 ### Responsive behaviour 

 Verify the page at approximately: 

 * 1440px desktop; 
 * 1024px laptop; 
 * 768px tablet; 
 * 390px mobile. 

 On narrower screens: 

 * preserve horizontal board scrolling where necessary; 
 * do not compress columns until cards become unreadable; 
 * keep the toolbar usable; 
 * avoid page-wide horizontal overflow outside the board; 
 * keep issue cards at a sensible minimum width. 

 ### Functional constraints 

 Do not break: 

 * drag and drop; 
 * issue status changes; 
 * card links; 
 * issue dropdown menus; 
 * tracker filtering; 
 * assignee filtering; 
 * View and Options menus; 
 * priority colours; 
 * overdue warnings; 
 * empty columns; 
 * issue counts; 
 * plugin-generated JavaScript positioning. 

 Do not rename or remove plugin classes used by JavaScript. 

 ### CSS constraints 

 * Scope the changes to the Dashboard plugin page. 
 * Avoid broad selectors such coded statuses as generic `.box`, `.card`, `.column`, `table`, `h2` or `a`. 
 * Prefer selectors rooted under in the Dashboard page body classes or a plugin-specific board container. 
 * Reuse existing RedmineOH spacing, border-radius and colour variables where available. 
 * Remove or narrow conflicting legacy overrides instead of layering excessive `!important` rules. 
 * Avoid hard-coded heights. 
 * Avoid fixed page widths. 
 * Avoid modifying Redmine core assets. 

 ### Acceptance criteria 

 * The Dashboard page clearly belongs to the RedmineOH theme. 
 * The board has rounded corners, calm spacing and restrained borders. 
 * Status columns remain distinct without harsh separators. 
 * Original status, priority and warning colours remain recognisable. 
 * The thick red horizontal bar is removed or reduced to a subtle status accent. 
 * Issue cards are compact, polished and easy to scan. 
 * Empty columns still look intentional. 
 * The toolbar is aligned and consistent with other project tabs. 
 * The legend is visually integrated with the board. 
 * Drag-and-drop and all plugin controls still work. 
 * No regressions appear on Issues, Overview, Activity, Documents, Wiki, Files or Settings pages. 
 * The page remains usable on desktop, tablet and mobile widths. 

 ### Deliverable 

 Report: 

 * files changed; 
 * plugin-specific selectors added or modified; 
 * conflicting rules removed or narrowed; 
 * whether any plugin templates were changed; 
 * how status and priority colours were preserved; 
 * viewport sizes tested; 
 * drag-and-drop and control behaviour verified; 
 * any remaining plugin limitations. OG. 

 <img style="width: 1710px;" src="clipboard-202607260717-9thho.png"><br> 

Back