Andras/BoundlessFlowCampus2K

Fork 0

Implement the design of the dashboard taskbar #427

New issue

Closed

opened 2026-04-20 07:54:07 +00:00 by b24johka · 4 comments

b24johka commented

2026-04-20 07:54:07 +00:00

Collaborator

The dashboard has been designed, now its time to start implementing what has been designed

The dashboard has been designed, now its time to start implementing what has been [designed](https://git.webug.se/Andras/BoundlessFlowCampus2K/issues/358)

b24johka added the

frontEnd

label

2026-04-20 07:54:07 +00:00

b24johka self-assigned this

2026-04-20 08:53:29 +00:00

e24aleli was assigned by b24johka

2026-04-20 08:53:37 +00:00

e24aleli commented

2026-04-20 11:13:11 +00:00

Collaborator

Commit

What has been made?

Styled the dropdown menu to replicate the one that was designed in the example.

Also added a header with paragraph under to present that this is the dashboard

Code

I created a css module for dropdown in its dir, for the styling.
Added css import in dropdown js
Removed the label that was inside the menu and put it above.
Used inline-css for the header and paragraph, maybe you guys want it somewhere else?

# Commit ## What has been made? Styled the dropdown menu to replicate the one that was designed in the example. ![bild](/attachments/cb6c74a5-da3c-4740-9800-e902f7f60756) Also added a header with paragraph under to present that this is the dashboard ![bild](/attachments/d8201f93-b702-4848-9357-71da29d67628) ## Code - I created a css module for dropdown in its dir, for the styling. - Added css import in dropdown js - Removed the label that was inside the menu and put it above. - Used inline-css for the header and paragraph, maybe you guys want it somewhere else?

bild.png

5.2 KiB

bild.png

6.3 KiB

b24johka commented

2026-04-20 12:40:43 +00:00

Author

Collaborator

Added a button that show if the dashboard is in edit mode or not
Structured so that items in the toolbar uses flexbox
Created a CSS file for the dashboard

- Added a button that show if the dashboard is in edit mode or not - Structured so that items in the toolbar uses flexbox - Created a CSS file for the dashboard

Screencast from 2026-04-20 14-12-30.mp4

39 KiB

e24aleli commented

2026-04-20 12:47:37 +00:00

Collaborator

I just realised that maybe it should say "arrange your widgets" instead but maybe a nitpick

b24johka commented

2026-04-20 13:41:43 +00:00

Author

Collaborator

Created the initial design of the taskbar div
Removed the div for the gridlayout
Changed the color to be the same to cards?

The branch at this point is very messy and things will be reorganized into CSS classes without inline styling.

![image](/attachments/25604ad4-61ad-409b-b907-4bb848b21824) - Created the initial design of the taskbar div - Removed the div for the gridlayout - Changed the color to be the same to cards? The branch at this point is very messy and things will be reorganized into CSS classes without inline styling.

image.png

78 KiB

b24johka added reference implement-toolbar-design

2026-04-20 13:42:23 +00:00