woocommerce-ios icon indicating copy to clipboard operation
woocommerce-ios copied to clipboard

UI enhancements from the initial design feedback

Open bozidarsevo opened this issue 1 year ago • 4 comments

Ref: Joe's feedback in pfoUAQ-cM-p2#comment-121

The secondary view has the same problem that order details does – the content of each row is pushed to the sides of the screen. Have you tried, or are you planning to try, adding the margins we added to order details?

  • On product details, the wide width is nice for showing lots of product images and a wider space for the description, though, so there’s a good argument for not adding margins.
  • The Blaze flow would really benefit from margins, though. That huge image isn’t very practical.

bozidarsevo avatar Feb 13 '24 09:02 bozidarsevo

🚫 Please add a type label (e.g. type: enhancement) and a feature label (e.g. feature: stats) to this issue.

dangermattic avatar Feb 13 '24 09:02 dangermattic

I started working on this and I am maybe more in for not adding the margins. We have multiple screens that we push from the product details and if we add margins to the starting screen we need to add it to all of them.

Here is how details screen would look with margins: Simulator Screenshot - iPad Pro (11-inch) (4th generation) - 2024-02-13 at 10 36 33

And here is how price (and other screens) look when pushed: Simulator Screenshot - iPad Pro (11-inch) (4th generation) - 2024-02-13 at 10 36 37

Let me know what do you think @jaclync

bozidarsevo avatar Feb 13 '24 09:02 bozidarsevo

I started working on this and I am maybe more in for not adding the margins. We have multiple screens that we push from the product details and if we add margins to the starting screen we need to add it to all of them.

Interesting, do the screens pushed to order details also have their margins added manually? If so, and if the code isn't trivial for each screen, this sounds like a potential issue for future maintenance. Joe also mentioned the margins won't be good for the images header. I think we can focus on reducing the image size in the Blaze view (the second point in Joe's comment in the issue description).

I vaguely remember some option for the UITableView to adjust the margins, not sure if it's cellLayoutMarginsFollowReadableWidth - have you tried this?

jaclync avatar Feb 15 '24 06:02 jaclync

cellLayoutMarginsFollowReadableWidth - have you tried this?

will try it out, tnx for the tip!

bozidarsevo avatar Feb 15 '24 09:02 bozidarsevo

Blaze view

Looks like the Blaze view is a SwiftUI view BlazeCampaignCreationForm (embedded in BlazeCampaignCreationFormHostingController) so we can make a different approach, just to limit the width to some max amount? What do you think about that solution?

bozidarsevo avatar Feb 22 '24 13:02 bozidarsevo

Blaze view

Looks like the Blaze view is a SwiftUI view BlazeCampaignCreationForm (embedded in BlazeCampaignCreationFormHostingController) so we can make a different approach, just to limit the width to some max amount? What do you think about that solution?

Yup sounds good to me! We can follow the max amount used in the order details and apply it to the top content view and the "Confirm Details" CTA at the bottom.

jaclync avatar Feb 23 '24 02:02 jaclync