# Image Occlusion UI revamping **URL:** \ **Category:** Development\ **Created:** [March 11, 2024, 1:11am UTC](https://forums.ankiweb.net/t/image-occlusion-ui-revamping/42256 "2024-03-11T01:11:07Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![krmanik](https://avatars.discourse-cdn.com/v4/letter/k/d6d6ee/32.png) [@krmanik](https://forums.ankiweb.net/u/krmanik)\ **Post date:** [March 11, 2024, 1:11am UTC](https://forums.ankiweb.net/t/image-occlusion-ui-revamping/42256/1 "2024-03-11T01:11:07Z")
I am going to revamp UI similar to this, because we are still using proof of concept UI, so I think after this more area available for editing on mobile devices. (Only toolbar related changed will be done no new features). I created this thread for discussion. ![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/3X/0/a/0a5e1751ec782c33b968100fe71242ad86dbab6d.png) ---
**Author:** ![glutanimate](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/glutanimate/32/97_2.png) [@glutanimate](https://forums.ankiweb.net/u/glutanimate)\ **Post date:** [March 11, 2024, 3:12am UTC](https://forums.ankiweb.net/t/image-occlusion-ui-revamping/42256/2 "2024-03-11T03:12:35Z")
Do you mean in terms of switching from a top/left toolbar arrangement to a top/bottom toolbar arrangement? If so, a few thoughts: - On **phones** : I could see this work well to reclaim some screen space in portrait mode, and the bottom area of the screen is likely easier to reach. How would you do landscape mode, left/right I assume? I would imagine that retaining the toolbars at the top/bottom in landscape would likely be worse in terms of screen space use compared to the current top/left arrangement. - On **tablets** : I think I would strongly prefer the current design there and/or moving everything into a single toolbar at the top. If you look at other apps like Notability/GoodNotes, a single toolbar – typically at the top – is the most common choice. A movable toolbar would of course be the most flexible solution (e.g. Notability and Apple Notes have a single draggable toolbar that snaps to screen edges), but making this work well is probably not going to be trivial. - On **desktop** : Would strongly prefer the current design as I think it works best for mouse-based interactions in terms of mouse travel distance, etc. If you also mean in terms of making the toolbars hover over the base image on phone/tablet: I could see that work well as long as the toolbars are still fairly close to the screen edges. ---
**Author:** ![krmanik](https://avatars.discourse-cdn.com/v4/letter/k/d6d6ee/32.png) [@krmanik](https://forums.ankiweb.net/u/krmanik)\ **Post date:** [March 11, 2024, 4:58am UTC](https://forums.ankiweb.net/t/image-occlusion-ui-revamping/42256/3 "2024-03-11T04:58:32Z")
The [@media](https://developer.mozilla.org/en-US/docs/Web/CSS/@media) and `.mobile` class will be used to check if it one mobile and width smaller than default width so the view will be changed. ---
**Author:** ![dae](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/dae/32/65_2.png) [@dae](https://forums.ankiweb.net/u/dae)\ **Post date:** [March 11, 2024, 8:26am UTC](https://forums.ankiweb.net/t/image-occlusion-ui-revamping/42256/4 "2024-03-11T08:26:02Z")
Currently we have the mobile-specific I/O page, and the desktop-specific I/O-inside-the-editor - how are you picturing these design changes will fit into both? Would it make sense to wait until we get the editor working on mobile platforms before making these changes, so we don’t do extra work? ---
**Author:** ![krmanik](https://avatars.discourse-cdn.com/v4/letter/k/d6d6ee/32.png) [@krmanik](https://forums.ankiweb.net/u/krmanik)\ **Post date:** [March 11, 2024, 8:59am UTC](https://forums.ankiweb.net/t/image-occlusion-ui-revamping/42256/5 "2024-03-11T08:59:03Z")
The editor may look similar to this on mobile device. Only side toolbar will be moved to bottom when screen width smaller than some predefined value, otherwise the side toolbar remain in left for bigger screen. It can be wait until editor is ported to mobile device. ![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/3X/4/2/420874616df508f3c0169cff09df0e43dca80cb8.png) ---
**Author:** ![system](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/8f1279ababc5879d54e4838989f606cfe55af8c7.jpeg) [@system](https://forums.ankiweb.net/u/system)\ **Post date:** [April 10, 2024, 8:59am UTC](https://forums.ankiweb.net/t/image-occlusion-ui-revamping/42256/6 "2024-04-10T08:59:21Z")
Closed on April 10, 2024, 8:59am UTC This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.