thenickdude / chickenpaint

An HTML5 Port of the ChibiPaint multi-layer Oekaki painting tool
GNU General Public License v3.0
117 stars 21 forks source link

add portrait mode adjustments #23

Closed blurymind closed 3 years ago

blurymind commented 3 years ago

I made a small css adjustment when its running in portrait mode.

Before: ksnip_20210514-191225 You cant move the brush pattern palette because its handle is out of screen

After: image

chickenPaint-portrait-after

It is usable on portrait mode screen, also some sizes are dramatically reduced to give more precious space to the canvas, while still being easy to tap

I really wish each of these floating widgets can be collapsible and on portrait modes chickenpaint has most of the widgets collapsed by default.

A very elegant example of UX in a mobile painting app imo is artrage

You can see how its widgets are hidden in the corners by default and they get out of your way while you paint ArtRage-for-Android-features1

Maybe we can get some more precious canvas space by not wasting it for a branding text and a file button. But I wonder where the file button would go to then? Nexto to where undo/redo is? image

Thats something that would be fantastic to tackle for chickenpaint, as it is probably the best html5 based painting app atm imo and the platform has the huge advantage of working on smartphones out of the box. Maybe in the future we can even turn chickenpaint into a progressive web app. It's exposure is terrible atm because the only way to use it is to sign up for an oekaki board, then spend half an hour trying to find the button on it to start chickenpaint.

blurymind commented 3 years ago

Another idea is to have these widgets closed by default, but add buttons in the header/corners to call them,similar to how artrage does it image Instead of an x button on each widget,we can have a pin button. When the pin is on, the widget stays on the screen, when the pin is off, the widget gets dismissed when clicked outside.

If you want to keep the chickenpaint branding, it would make much more sense to use a small logo, instead of a giant header. That header space can be much more valuable on mobile.

Some widgets can be slightly transparent to make them less obtrusive when covering the canvas.

blurymind commented 3 years ago

of course these are just suggestions :) this pr only tweaks the css to make it usable on portrait mode

thenickdude commented 3 years ago

It's pointless to merge this CSS since it is still completely unusable due to the way the floating palettes work (and it'll likely break the experience with people with portrait full-size tablets). I'd welcome PRs for your other suggestions though.