b24johka commented

Collaborator

This purely for design to know what we are supposed to implement for mobile devices. See the image about the issue on mobile devices with the toolbar.

b24johka added the

frontEnd

label

2026-04-27 09:39:40 +00:00

b24johka commented

2026-04-27 09:40:52 +00:00

Author

Collaborator

As you can see, the buttons ”edit mode” and ”reset layout” doesnt even appear in the toolbar

IMG_8127.png

239 KiB

e24aleli was assigned by b24johka

2026-04-27 09:55:31 +00:00

a24vinla changed title from ~~Design the dashboard boolbar for mobile devices~~ to Design the dashboard toolbar for mobile devices

2026-04-27 10:30:40 +00:00

e24aleli commented

2026-04-27 10:32:57 +00:00

Collaborator

Design idea for mobile/smaller screens

In order to save screen space we minimize buttontext and try to use icons such as the "+" for adding the arrows for reset and keeping the switch for edit mode. Also so it doesnt get to cluttered when the site is viewed on a certain smaller aspect ratio the toolbar gets put in to this accordion menu that the user can press to open up whenever and quickly hit a toolbar. Sort of like a quicktab.

I made a design in figma, i have attached down in this comment. Im open to any feedback or additions.

# Design idea for mobile/smaller screens - - - - In order to save screen space we minimize buttontext and try to use icons such as the "+" for adding the arrows for reset and keeping the switch for edit mode. Also so it doesnt get to cluttered when the site is viewed on a certain smaller aspect ratio the toolbar gets put in to this accordion menu that the user can press to open up whenever and quickly hit a toolbar. Sort of like a quicktab. I made a design in figma, i have attached down in this comment. Im open to any feedback or additions. ![image](/attachments/498ec17b-5a76-458c-be0f-089f95554d00)

image.png

134 KiB

e24aleli added the

needs review

label

2026-04-27 10:34:57 +00:00

b24johka commented

2026-04-27 10:46:38 +00:00

Author

Collaborator

This is a really good idea, further we would like the toolbar to drop down above the dashboard not changing any of the positioning of dashboard. Maybe have a quite low opacity to the toolbar so the dashboard is visible underneath? sort of like the glass theme in IOS.

b24johka referenced this issue

2026-04-27 10:48:59 +00:00

Implement the design idea for the mobile device toolbar for dashboard #585

e24aleli commented

2026-04-27 10:50:31 +00:00

Collaborator

Yea i was thinking that would be a good idea but maybe we would have to dim the widgets aswell to make it visible. For making it liquid glass i think we cannot without using swift.

a24hirsa was assigned by b24johka

2026-04-27 10:50:41 +00:00

e24aleli commented

2026-04-27 10:52:06 +00:00

Collaborator

But we can maybe try to achieve similar effect with react

a24hirsa commented

2026-04-27 11:19:33 +00:00

Collaborator

Looks good, but i would suggest moving the hamburger out of the settings/cogwheel and push it towards the bottom center of the screen make the options given also appear at the bottom of the screen. Would make it easier to quickly use and makes it easier to select the three options afterwards i believe.