Functional page design

[d33pspace]

@AnKar112 The Give page is looking great! Please continue working on the Give page only until it's confirmed.

Mariia's comments are as follows:

(1) It seems to me that there are not enough hovers on all active elements (the reaction of the element to pointing the cursor). I made a pale green colour in the visualizations, but grey is also possible. Elements: item line, meal/rate button, FAB, FAB-elements. I made a mockup in Figma with that. Also there you can find three different kinds of FAB - mockup here

Please change the background of all functional pages on light grey #F0F2F5

Don't forget that FAB placed with the same margins 16px and 32 px

(2) Yes! Thanks, Anton for attentiveness )))

---

New models are here.

[AnKar112]

Everything is done, check please

[d33pspace]

@AnKar112 Here are Mariia's comments on the Give page:

@d33pspace it looks great! I have a few edits: 1) Add border-radius to item lines in the Full Clothing List:

2) Please add a blank space after the list (120px) so that the content can be scrolled above the FAB. (Make this on every page where FAB displays)

3) How about making the whole item line active, not just icons on the right?

My (Jimmy's) only additional comment is...

4) The flash effect when adding the item to the Giving list is a little different when the Giving list is on the page, and when it is hidden. It seems when it is hidden, there is also a shake effect. I prefer it without the shake effect, like it is at the top when the Giving list is viewable.

---

Please feel free to go ahead and implement the changes on the Take and Return pages.

[AnKar112]

(1) - done (2) - give additional 120px padding to: edit_guest edit_user_profile give_page guest_profile guest_profile_blank item_catalogue main_page new_item users_list start_the_service edit_item

new_guest need FAB? For now, it has no. (3) - we can't because we have different click-functional for left and right parts http://ipic.su/img/img7/fs/kiss_63kb.1643206913.jpg

(4) - can you make a video, please? Can't get what do you mean.

[d33pspace]

@AnKar112 (1) Looks great!

(2) I have moved this discussion to Issue #57 so we can focus on functional pages only here.

(3) Fine.

(4) I've attached a video here, but I noticed this only happens in Firefox, and we only need our app to work in Chrome so do not worry about this. https://user-images.githubusercontent.com/13606352/151287809-7487eb76-5807-4f52-9a95-58b5139b4236.mp4

(5) Give page looks great. Please go ahead and implement similar changes on Take and Return pages.

[AnKar112]

(4) - if you said so, okay

(5) Take page - everything must be done, check, please. I have a few questions:

I think we need to center this dash (from laundry list blank item) http://ipic.su/img/img7/fs/kiss_26kb.1643297510.jpg Also, for give page too http://ipic.su/img/img7/fs/kiss_18kb.1643297560.jpg And I forgot - do you need this overlay for take page http://ipic.su/img/img7/fs/kiss_59kb.1643298459.jpg ? Or this is only for give page?

[d33pspace]

@AnKar112 I think maybe you didn't push your changes to the Take page?

You have a good point about the dashes. I will ask Mariia about it.

The overlay you mention is only for the Give page. But I see Mariia has not updated it with the new design so I will confirm with her.

Thanks again for pointing these things out.

Feel free to also work on the Return page.

[AnKar112]

Sorry for that. Check again, please

[d33pspace]

@AnKar112 Take page looking great!

(1) The Laundry tag number needs to be editable. I'm sorry but can you please check the page before it was changed to confirm the exact behavior of editing the number? I remember we discussed this but I can't remember exactly how Mariia and Edward wanted it to work - there were some particular things about it.

(2) Please update FABs based on this page. The FAB is different for each page: Give, Take, Return.

(3) I am waiting on information about the dash and overlay from Mariia. No action required now.

(4) Feel free to begin working on the Return page.

[AnKar112]

(1) - not a problem, but I need to know how exactly it should be done. I can make this http://ipic.su/img/img7/fs/kiss_42kb.1643356330.jpg to be input, but without ant input-styles like borders, and unchangeable until you click on the edit button.

(2) - done

Also, as for take page, we have no this overlay http://ipic.su/img/img7/fs/kiss_59kb.1643298459.jpg so I can do all card clickable as you asked. I don't know should I do it, because on give page only plus icon is clickable, so it can confuse.

[d33pspace]

@AnKar112 (1) I'm sorry about this, and I don't know how much trouble it is because I don't know much about GitHub. Is it possible that you reverse the most recent changes to the Take page so I can see how the Laundry Tag edit field is supposed to work? I remember there were some particular things that Edward and Mariia wanted, but I can't remember exactly now. But it was working correctly in the previous version.

(2) Looks good.

(5) I agree that all card clickable would be confusing. Just leave it as-is. Thanks for asking.

[AnKar112]

@d33pspace (1) - can you look at the app that edwazhao created? As I understand, it should be the old version there. If so, it will be much easier.

It was worked close to my description: http://ipic.su/img/img7/fs/kiss_21kb.1643359840.jpg Unchangeable input without the ability to focus. But after click on the edit button you automatically focus on input.

Return page: http://ipic.su/img/img7/fs/kiss_69kb.1643358159.jpg - these backgrounds are different. But it looks very very similar. Is it ok?

[d33pspace]

@AnKar112 (1) I checked the app, and Edward has not made that field editable yet. No worries. The description you gave is enough. I'll pass this on to Mariia for her design consideration.

(2) Resolved.

(3) Pending (dash and overlay).

(4) Return page, yes, please make the list backgrounds on each page different as designed. The color behind the list is the same color as the header on each page, only much much lighter.

[AnKar112]

@d33pspace (4) - these colors are just so much close to each other that I can't see the difference :)

EBF8FF for take page and #EBFAFA for give page. Just looks like a mistake, I think it should look more different.

Also. return page have problems with icons too http://ipic.su/img/img7/fs/kiss_21kb.1643360267.jpg

[d33pspace]

@AnKar112 (4) I will confirm with Mariia on the colors and icons. Thank you for pointing these out.

[AnKar112]

Return page is done. Check it, please.

@d33pspaceI have a one request. If I understood correctly, edwazhao will take my files only when all will be done? Or he picks them up as soon as them ready?

I'd like ask you about improving the code. When there are so many design changes, there is a chance that some unused styles or JS-strings will be left in files. I clean it when I work, but I can miss something. I'd like you to have a clear code. Could you, please, set me a task to check all the files once the redesign will be finished? I'd like to double-check everything on the final version.

[d33pspace]

@AnKar112 Updated Figma models here. Details below...

(1) Mariia has added a design for the laundry tag edit field on the Take page. Note that the User cannot edit the # character, only the numbers can be edited, and there will be maximum of three numbers.

(2) Mariia has also edited the blank list item where there was the ugly dash on the Give and Take pages. She has suggested an active pattern with disabled elements:

(3) Mariia has fixed the alignment issues with the icons on the Return page that you originally pointed out here.

(4) Based on your feedback, Mariia has changed the Giving list background from #EBFAFA to #E7FFF9.

(5) Return page looks great! Small issue... When the page is fully open in a large browser, there is a white space at the bottom of the page:

(6) Also one question about the Return page... In production, only one icon can be selected at a time: Trash, Lost or Return. And only when all items have been selected with either Trash, Lost or Return will the FAB display. Is this your responsibility for HTML template, or is this something Edward will take care of? In the testing app right now it is working properly.

And no problem on giving you some time to clean things up later. I will remind you. Edward will not update the app until our work on the templates is finished.

[AnKar112]

(1) - done. But design is different http://ipic.su/img/img7/fs/kiss_52kb.1643630676.jpg (2) - done (3) - done (4) - done (5) - done (6) - done

[d33pspace]

@AnKar112 Mariia has made updates to the overlay window on the Give page in Figma here. This overlay is only on the Give page.

[AnKar112]

Done, check it, please

[d33pspace]

@AnKar112 This looks great!

Just one small thing... the number in the Given column will correspond to the number of items in the overlay window, so when tapping on that number, the overlay should open, just like when tapping on the item name. (By the way, there will not always be a number in the Given column. There is only a number there when that item has already been given to the Guest.)

[AnKar112]

Done