Give page

[d33pspace]

Please see comment 71 in Figma for further details.

[d33pspace]

@MariiaBubley The comment from the front-end designer is "The designer completed this item, but there is one modal window for the full page. There is no separate modal window for each product."

[MariiaBubley]

@d33pspace sorry, but I don't understand this comment.

[d33pspace]

@MariiaBubley I think this means the modal window is only a template and does not contain dynamic information. Can you confirm that style is correct, but do not mind if the modal window has the correct content.

Giving list: https://d33pspace.github.io/RenewalMgtApp-Html/app/give_page.html

[edwazhao]

Hi @d33pspace , I also have some doubts about this page, I know I asked it before, but I'm afraid to miss something so want to get it clarified

The number behind the Type, it means how many items the guest received last 30 days, and if the number greater than the policy it become red, right?

The date frame below the distribution period should be today - 30 days ~ today, right? And the row of the list means: The guest get one Short-sleeve button-down shirt on date 2021-05-12, and also one Long-sleeve button-down shirt on date 2021-05-12, right?

[d33pspace]

Hi @edwazhao Yes, to my knowledge your understanding is exactly correct here. However, the sample data is misleading, if the distribution period was April 1 to April 14 there would not be items appearing in May. @MariiaBubley Can you please also confirm Edward's questions here (and also confirm the template design as mentioned above).

[MariiaBubley]

@edwazhao @d33pspace Yes, there is my mistake in the text. I fixed this mockup: Now modal show only one kind of item Short-sleeve button-down shirt and correct dates (only during the specified period ) If the user tap on another kind of item - a Long-sleeve button-down shirt - the relevant modal will open.

[edwazhao]

Hi @MariiaBubley , the distribution period April 1 ~ April 14 above, is it relevant to distribution policy, or it should be always displayed as last 30 days or 14 days?

[d33pspace]

@MariiaBubley I love this modal that pops up here to give the User a quick view of the distribution history of the Item. I actually think if it could contain the full last 12 months of distribution history instead of only according to the distribution policy it would be very nice. And if there is a policy violation perhaps those lines could be in alert color. What do you think?

[MariiaBubley]

@edwazhao @d33pspace @academws I made a new mockup considering all the previous discussions. https://www.figma.com/file/3DZItCETG2QIvRYnlQvMyn/Renewal-Mobile-App?node-id=828%3A19618 red highlighted if distribution policy violated green - if not violated

[d33pspace]

@academws @AnKar112 Please update the modal window on the give page according to the new model in Figma.

[AnKar112]

Done, you can check.

[d33pspace]

@AnKar112 @academws I don't see any updates to give_page - maybe didn't push?

[d33pspace]

@MariiaBubley This is fixed. It looks great to me - sufficient for demonstration of UI. @edwazhao can handle the coding for specific scenarios. Do you agree?

@edwazhao Is this also acceptable to you? Now there is no date range necessary. If there is no violation, any distributed items in the policy period (calculated from today) are highlighted in grey. If there is a violation, any distributed items in the policy period are highlighted in pink. But a full year of distribution is available.

[MariiaBubley]

@d33pspace Jimmy, I find few problems on the page: https://d33pspace.github.io/RenewalMgtApp-Html/app/give_page.html

1) Highlighting have to work like that: User gives the first item inside distribution policy - this item highlighted green, User gives the second item inside distribution policy - BOTH items highlighted green, but as soon as giving goes beyond distribution policy, all items in the current distribution period highlighted red. There cannot be both green and red highlighting on the page at the same time.

2) Why background and the modal page goes off-screen? really nothing can be done? How about reducing these elements by the size of the grey area on the right, so that the entire application fits into the screen? )

3) Item line opens modal page only, but this line have to add item in giving list as well. I propose to divide the line into two areas, blue - opens the modal page, red - adds item in giving list.

[d33pspace]

Thanks, @MariiaBubley ...

1) I will make sure @edwazhao understands this logic, but I think this template is sufficient to demonstrate the UI features are viable. (Please confirm, Edward.)

2) Can you tell us the device/browser you are using for screen capture? Mine looks good.

3) Agreed.

@AnKar112 @academws Please see Mariia's 3rd point above. The blue area should open the modal page. The red area should add the item to the Giving List as detailed in the Figma model below. (The item also remains in the clothing list.)

[AnKar112]

2 - it could only happening when you open code inspector and change resolution while testing. We didn't need to do nothing with itm because real users won't do this. 3 - sorry, I didn't understand the logic. What do you mean when you said giving list?

[d33pspace]

Hi @AnKar112 @academws 3 - Please refer to the Figma models (screenshot above). The initial state of the give_page is how you have it now. But users can add items from the Clothing List to the Giving List (top of the page in the screenshot above) by clicking/tapping on the [+] icon. The Giving List will not appear on the page until the first item is added. Then multiple items can be added. Can you demonstrate this?

[AnKar112]

Oh, now I get. Okay, no problem. It will take some time.

[d33pspace]

@AnKar112 @AnKar112 Also, this page needs an FAB always present.

[MariiaBubley]

@d33pspace for screen capture, I use the native Mac OS functions For screenshots, it calls with Shift + Command + 4 For video - Shift + Command + 5

[AnKar112]

Done, but I think not fully. Have some questions:

• what mean FAB?
• http://ipic.su/img/img7/fs/kiss_23kb.1631917215.png 1 - should it expand and show added items? 2, 3 - how them should work?

[d33pspace]

@AnKar112 @academws Great work on this one! Very cool. Thanks!

A few more things from here:

• The entire Giving List should be shaded as indicated in Figma:
• The graphic above also includes the FAB - the red circle menu that hovers in the lower right-hand corner. It is always present on this page.
• In the Giving List, the Not Found icon can be toggled active/inactive.
• In the Giving List, when the [-] is tapped it is removed from the giving list. If there are no items in the list, the entire list should disappear.
• Not all items expand, such as SHORTS. Please remove the expand arrow from this row and replace it with a [+] icon. Then, this row can also be added to the Giving List in the same manner.

[AnKar112]

Everything is done, check please

[d33pspace]

@AnKar112 @academws Looking great!!!

(1) The FAB menu icons are reversed. It should be check when closed, and X when opened.

@MariiaBubley (2) The Giving List at the top of ... https://d33pspace.github.io/RenewalMgtApp-Html/app/give_page.html ... currently uses the format Type only, even when an Item is added. Should we use the format Type | Item such as ... ... when an Item is added?

(3) It is rare, but what happens when two of the same type or item are added? (I suggest two identical rows be added.)

[AnKar112]

(1) - done

[d33pspace]

@MariiaBubley (1) I'm moving our conversation from #28 here. I would prefer this style of tapping below because when the distribution modal opens, all the Items of the selected Type should appear in the modal. So it does not make sense to click on an Item and the modal opens, but it has other Items in it. Do you agree?

(2) The Giving List at the top of ... https://d33pspace.github.io/RenewalMgtApp-Html/app/give_page.html ... currently uses the format Type only, even when an Item is added. Should we use the format Type | Item such as ... ... when an Item is added?

(3) It is rare, but what happens when two of the same type or item are added? (I suggest two identical rows be added.)

[d33pspace]

@AnKar112 @academws (1) Please update the tapping function as I have illustrated in the image directly above. (2) The Give page also needs a Most Commonly Used list, just like on the Take page. This is not on the mock-ups. But I am requesting it here. (3) Same as my request on the Take page, remove the counters when items are moved to the Giving list. When two (or more) of the same item are added to the Giving list, there should be two rows. (4) Finally, please also see #42 which also applies to both the Give page and Take page.

[AnKar112]

(2) - done

But the other tasks... them impossible with current logic. I describe it in #42 Is it possible to stay as it is? For what you want I need to rework all this pages, and it will take a lot of time