Andras/BoundlessFlowCampus2K
4
7
Fork 0
Code Issues 90 Pull requests 7 Projects Releases Packages Wiki Activity Actions

Making toolbar mobile responsive #598

Closed
e24aleli wants to merge 0 commits from #585-Implement-Mobile-toolbar into team_1_week_3
pull from: #585-Implement-Mobile-toolbar
merge into: Andras:team_1_week_3
Conversation 11 Commits - Files changed -
e24aleli commented 2026-04-27 14:19:15 +00:00
Collaborator
Copy link
  • Added new state that checks of the toolbar is open or closed
  • Added hamburger menu
  • New css classes for expanded & toolbarcontainer for mobile
  • Position is set to absolute to float over the widgets
  • Different height and opacity states to make it "shrink"
  • Media Queries to shift between "normal" layout and mobile layout

Other issues will have to be created after this. Such as further styling, fixing modal which is bugged currently in mobile view and footer is not responsive.

- Added new state that checks of the toolbar is open or closed - Added hamburger menu - New css classes for expanded & toolbarcontainer for mobile - Position is set to absolute to float over the widgets - Different height and opacity states to make it "shrink" - Media Queries to shift between "normal" layout and mobile layout - - - - - Other issues will have to be created after this. Such as further styling, fixing modal which is bugged currently in mobile view and footer is not responsive.
Recording 2026-04-27 161843.gif
29 MiB
Recording 2026-04-27 161843.gif
b24johka commented 2026-04-27 15:00:09 +00:00
Collaborator
Copy link

Good job! really like the design of the toolbar container. However, why are all the tools stacked in a row layout? the design idea had coloumns and also hid the dashboard explaination?

Good job! really like the design of the toolbar container. However, why are all the tools stacked in a row layout? the design idea had coloumns and also hid the dashboard explaination?
e24aleli commented 2026-04-27 16:47:33 +00:00
Author
Collaborator
Copy link

Oh no! haha i completely forgot. I'll update the PR.

Oh no! haha i completely forgot. I'll update the PR.
e24aleli commented 2026-04-27 17:12:08 +00:00
Author
Collaborator
Copy link

This is the updated PR

This is the updated PR
Recording 2026-04-27 191130.gif
16 MiB
Recording 2026-04-27 191130.gif
b24johka commented 2026-04-27 20:43:22 +00:00
Collaborator
Copy link

This is a screenshot from an Iphone 14 resolution, the edit button is outside of the toolbar.. I also recommend changing the width of the dropdown container since its taking an unnecessary amount of space.
If you are using firefox i heavily recommend that you go CTRL + SHIFT + M to enter responsive design mode.
More information about how we test front end is provided through the wiki.
Keep em coming, you're doing a good job! image

This is a screenshot from an Iphone 14 resolution, the edit button is outside of the toolbar.. I also recommend changing the width of the dropdown container since its taking an unnecessary amount of space. If you are using firefox i heavily recommend that you go **CTRL + SHIFT + M** to enter responsive design mode. More information about how we test front end is provided through the wiki. Keep em coming, you're doing a good job! ![image](/attachments/20958892-8880-4e30-9b73-48928b85e429)
image.png
43 KiB
e24aleli changed title from Making toolbar mobile responsive to WIP: Making toolbar mobile responsive 2026-04-28 11:28:41 +00:00
b24johka commented 2026-04-28 12:10:44 +00:00
Collaborator
Copy link

What did i do

  • Changed so that the window has a little margin to top to the expansion button
  • re-added a bunch of things in the dashboard.module.css, that i dont know why it was removed?
  • Changed the media query to use max-width to start
  • Changed the state of the show toolbar to be open from start
  • made the dropdown menu smaller when in responsive width

Check out the video to see how its looking!

## What did i do + Changed so that the window has a little margin to top to the expansion button + re-added a bunch of things in the dashboard.module.css, that i dont know why it was removed? + Changed the media query to use max-width to start + Changed the state of the show toolbar to be open from start + made the dropdown menu smaller when in responsive width Check out the video to see how its looking!
Screencast from 2026-04-28 14-03-02.mp4
1.6 MiB
e24aleli commented 2026-04-28 12:24:37 +00:00
Author
Collaborator
Copy link

I like it alot! Looks alot more clean

I like it alot! Looks alot more clean
b24johka commented 2026-04-28 12:34:27 +00:00
Collaborator
Copy link

You did the majority of work. Good job!

You did the majority of work. Good job!
a24hamrh commented 2026-04-28 14:28:57 +00:00
Collaborator
Copy link

Review on #585

Whats done

Tested on Windows 11 using Firefox

  • App did not start, check attached image

Inspected following files: Dashboard.js, Dashboar.module.css, Dropdown.module.css

  • All inspected fiels
    • Indentation/code styling
      • Indentation is ok
    • Naming convention
      • Naming convention is followed
    • Comments
      • Good amounts of comments
    • General code quality
      • The general code quality is good

What needs to be done

  • An error is thrown for a undefined element on startup.

Conclusion

  • Code looks good but app doesn't start
    image
# Review on #585 ## Whats done ### Tested on Windows 11 using Firefox + App did not start, check attached image ### Inspected following files: Dashboard.js, Dashboar.module.css, Dropdown.module.css + All inspected fiels + Indentation/code styling + Indentation is ok + Naming convention + Naming convention is followed + Comments + Good amounts of comments + General code quality + The general code quality is good ## What needs to be done + An error is thrown for a undefined element on startup. ## Conclusion + Code looks good but app doesn't start ![image](/attachments/82fa18d1-5c73-46bc-8e95-30cceabbff36)
image.png
24 KiB
e24aleli commented 2026-04-28 15:28:07 +00:00
Author
Collaborator
Copy link

Im not sure why you get that error, it has to be something with your configuration because I have cloned the issue on two different devices and im not getting the error..

Im not sure why you get that error, it has to be something with your configuration because I have cloned the issue on two different devices and im not getting the error..
b24johka changed title from WIP: Making toolbar mobile responsive to Making toolbar mobile responsive 2026-04-28 17:03:03 +00:00
a24hirsa commented 2026-04-29 07:18:54 +00:00
Collaborator
Copy link

I got it to work on a clean repo on linux only problem is when pressing reset layout the yes/no option is hidden so the toolbar cant be closed. In this state new cards can be added but they cant be edited or moved. You guys propably already know that but i didn't see anyone mention it

I got it to work on a clean repo on linux only problem is when pressing reset layout the yes/no option is hidden so the toolbar cant be closed. In this state new cards can be added but they cant be edited or moved. You guys propably already know that but i didn't see anyone mention it
b24johka commented 2026-04-29 07:23:30 +00:00
Collaborator
Copy link

Since we have had multiple reviewers who has tried this and it worked i consider this to be review and ready for merge.

Since we have had multiple reviewers who has tried this and it worked i consider this to be review and ready for merge.
b24johka closed this pull request 2026-04-29 07:42:33 +00:00

Pull request closed

This pull request cannot be reopened because the branch was deleted.
Sign in to join this conversation.
Reviewers
No reviewers
a24hamrh
a24hirsa
Labels
Clear labels   
_CRITICAL_

Only use this label for critical tasks that are project-scope,and must be addressed ASAP.

  
API

   
app

   
backEnd

   
Blocked, waiting for further changes

   
bug

Something is not working

  
cleanup

Issues to cleanup the codebase (restructure folders, remove deprecated or smelly code)

  
close

Issue to close

  
design

   
duplicate

This issue or pull request already exists

  
enhancement

New feature

  
feature request

   
frontEnd

   
help wanted

Need some help

  
invalid

Something is wrong

  
low priority

   
needs input

Issue needs input from product owner or customer

  
needs review

issue is in need of review

  
project documentation

   
question

More information is needed

  
research

   
reviewed

This Issue has been reviewed

  
script

   
security

use this for security-related issues

  
SQL

  
style

   
testing

   
topLevel

Reserved for top-level, project-wide issues.

  
wontfix

This won't be fixed

No labels
_CRITICAL_
API
app
backEnd
Blocked, waiting for further changes
bug
cleanup
close
design
duplicate
enhancement
feature request
frontEnd
help wanted
invalid
low priority
needs input
needs review
project documentation
question
research
reviewed
script
security
SQL
style
testing
topLevel
wontfix
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
4 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
Andras/BoundlessFlowCampus2K!598
No description provided.