You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This change is a bit scary. I'm opening it as a draft because I figured I'd get the code out of my local machine and let people look at it so we could make it nice.
I'm adding your list of desired features from #39 here as a guide to walk towards:
The main screen should be just the prompt box and image result area
A button on the left to pull up the parameters list, which pops up to cover the screen and you can edit then swipe it back away
You can pull up the other menus (image history / model browser / etc) and they also temporarily take over the full screen while you use them.
Goal: Basically take all the current UI features that are placed into cells, and swap them to being sub-screens to swap between, with the 'main prompt + result' area as the centerpoint
Of the list above:
I've right now made everything a single column, so there's a lot of scrolling, but I tried to add some logic to jump around to logical points (when in mobile only). I like your idea much better, but that's a much bigger lift. I'm happy to works toward that in this PR before promoting it out of draft.
Regarding a button on the left, what size of screens are we targeting with that? There's a fine line between target hit area and screen real estate on an iphone 11 for example, so I tried to shy away from anything on the edges, but only because I wasn't creative enough to come up with a clean way to do anything else. A clearly labeled area that can be tapped without interrupting thumb navigation would be really clean!
So, a little bit like the native fly-out/fly-up pages/screens on native apps?
Things I still need to work on and would like maybe some help/pointers:
Size of batch image container is bigger than viewport, even if image is centered on the screen fine. Have to fix the sizing there and remove overflow
The FAB button supports long-press for an extra context menu but for some reason I'm not able to replicate that correctly in the browser simulator, but I'll take a screencap of it working on my phone. Just plain weird.
The behavior around dragging the top bars is a little wonky right now. All that math was too hard for me at midnight after a long day of parenting. I'll get back to it soon.
This update modifies the layout slightly to swap current_image and batch_images. This allows current_images to be rendered at the top in a single column layout.
It introduces a mobile script to handle mobile interactions and detection
Updates the associated scripts to handle correct sizing and eventing on mobile screens
Update the css stylesheets to account for smaller screen sizes
So, a little bit like the native fly-out/fly-up pages/screens on native apps? yes
Size of batch image container is bigger than viewport, even if image is centered on the screen fine. Have to fix the sizing there and remove overflow on mobile the batch view should probably be moved to the bottom or something instead of the side, at least when the screen is vertical
The FAB button supports long-press for an extra context menu but for some reason I'm not able to replicate that correctly in the browser simulator, but I'll take a screencap of it working on my phone. Just plain weird. The what does what
The behavior around dragging the top bars is a little wonky right now. All that math was too hard for me at midnight after a long day of parenting. I'll get back to it soon.
on mobile the bar/dragging thing should be removed entirely in favor of popup screens
"Size of batch image container is bigger than viewport, even if image is centered on the screen fine. Have to fix the sizing there and remove overflow" on mobile the batch view should probably be moved to the bottom or something instead of the side, at least when the screen is vertical right. It is actually right under the main current_image containter. But each batch image also has their own container with a purple border denoting active batch image. That container is currently wider than the viewport, allowing users to scroll sideways. That is unintended behavior, and I need to fix that container sizing.
"The FAB button supports long-press for an extra context menu but for some reason I'm not able to replicate that correctly in the browser simulator, but I'll take a screencap of it working on my phone. Just plain weird." The what does what FAB = Floating Action Button. sorry, I was borrowing lingo from Material Design here. It's that big circle button floating on mobile UIs, usually on the bottom corner, usually with a plus icon. It usually expands out into more buttons or activates the main UI functionality. In the video it is the big purple button on the lower right corner.
"The behavior around dragging the top bars is a little wonky right now. All that math was too hard for me at midnight after a long day of parenting. I'll get back to it soon." on mobile the bar/dragging thing should be removed entirely in favor of popup screens Right. They are. This is for the desktop version that I am talking about. I had to move the settings around so I could style things correctly without reaching for JS. But since we are talking about adding flyouts and such, I think we won't be able to escape using JS for moving things around anyways. It's a little bit of a catch 22 here, in that the perfect version of the mobile UI will take a lot more effort and time to finish but would allow 0 changes to the current layout of desktop. I wouldn't call moving the order of the layout columns a small change necessarily, but I figured I'd showcase the changes here to see if they are even acceptable. That would allow official mobile support within weeks versus months, but understandably not a change to be taken lightly
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
aimerib
force-pushed
the
add-initial-mobile-support
branch
from
This change is a bit scary. I'm opening it as a draft because I figured I'd get the code out of my local machine and let people look at it so we could make it nice.
I'm adding your list of desired features from #39 here as a guide to walk towards:
Goal: Basically take all the current UI features that are placed into cells, and swap them to being sub-screens to swap between, with the 'main prompt + result' area as the centerpoint
Of the list above:
Things I still need to work on and would like maybe some help/pointers:
Current progres:
353319305-5ad6daa6-d19a-48aa-9622-97e38fd69d55.mov