Dashboard redesign with Bootstrap v5.3

[billz]

Is your feature request related to a problem?

RaspAP's existing dashboard, while clean and functional, has been essentially unchanged for many years. It could be improved by displaying relevant information more intuitively while also being more visually appealing.

Describe the solution you'd like

Mockups have been developed that overhaul the dashboard to give it an "at-a-glance" summary of the router's current configuration. Active routes and services are indicated in color; inactive ones are greyed-out. The inactive routes use a dashed rather than solid line.

Specific requirements are summarized below:

1. A minimum of three (3) different Bootstrap 5.x media sizes should be implemented. These are provided in the following mockups: 1) full width desktop, 2) medium width, and 3) mobile.
2. The device in .svg format using the default theme color is available here.
3. Icons are limited to Font Awesome Free v6.6. It should be obvious from the mockups which ones are used; if clarity is needed just reply in the issue.
4. Font Awesome stacking should be used to indicate disabled / unavailable items (the firewall in the mockup, for example).
5. CSS should be kept to a minimum and placed in app/css/all.css.
6. The design elements should be contained inside the existing <div class="card-body"> in templates/dashboard.php.
7. The existing card-body contents may be removed entirely.
8. Final markup should be validated with a 508 checker.
9. No PHP work is required; only markup is needed.

Describe alternatives you've considered

N/A.

Additional context

1. Full width

2. Medium width

3. Mobile devices

[billz]

/bounty 300

[algora-pbc]

💎 $300 bounty • RaspAP

Steps to solve:

1. Start working: Comment /attempt #1749 with your implementation plan
2. Submit work: Create a pull request including /claim #1749 in the PR body to claim the bounty
3. Receive payment: 100% of the bounty is received 2-5 days post-reward. Make sure you are eligible for payouts

Thank you for contributing to RaspAP/raspap-webgui!

Add a bounty • Share on socials

Attempt	Started (GMT+0)	Solution
🟢 @neo773	Feb 6, 2025, 11:03:15 AM	#1750
🟢 @hunxjunedo	Feb 6, 2025, 11:09:57 AM	WIP

[neo773]

/attempt #1749

Algora profile	Completed bounties	Tech	Active attempts	Options
@neo773	177 bounties from 29 projects	TypeScript, MDX, Rust & more		Cancel attempt

[hunxjunedo]

/attempt #1748
@billz looks like the links to the mockups are broken

Algora profile	Completed bounties	Tech	Active attempts	Options
@hunxjunedo	20 bounties from 5 projects	TypeScript, MDX, JavaScript		Cancel attempt

[billz]

@hunxjunedo updated, thx

[algora-pbc]

💡 @neo773 submitted a pull request that claims the bounty. You can visit your bounty board to reward.

[algora-pbc]

🎉🎈 @neo773 has been awarded $300 bounty + $30 tip! 🎈🎊

• Share on socials
• Give feedback