d33pspace / Renewal-Design-Html

0 stars 0 forks source link

Item Catalogue #5

Closed d33pspace closed 3 years ago

d33pspace commented 3 years ago

How do you open the Edit Item page from the Item Catalogue?

Screenshot 2021-09-06 130945

MariiaBubley commented 3 years ago

when user taps on item line image

d33pspace commented 3 years ago

@edwazhao Please comment with any further questions or close the issue.

edwazhao commented 3 years ago

Hi @MariiaBubley , yes, user can click the item catalogue, what if the T-SHIRT has more than one items, like short-sleeve t-shirt and long-sleeve t-shirt, how to decide which item is the use want to edit? image

MariiaBubley commented 3 years ago

We decided with Jimmy before, t-shirt, shirt, pants et. - are the types of items. They are countable and added in the database by developer. Sleeveless, short-sleeve, long-sleeve et. - are the titles of items and name by admins(user) from New Item page https://d33pspace.github.io/RenewalMgtApp-Html/app/new_item.html image

d33pspace commented 3 years ago

Hi @edwazhao ... if I understand your meaning correctly, perhaps it is not clear how to edit items inside of types? There needs to be a way to edit both types and items. There also needs to be a way to add items, but not types. I believe we agreed that Types are hard-coded. Users cannot edit them.

edwazhao commented 3 years ago

Hi @d33pspace , yes, the Types and initial Items will be imported to database automatically, the data is coming from Miro https://miro.com/app/board/o9J_ko0nJTY=/.

And yes, my question is how to edit items inside of types, is it allowed or not? There are different naming here and there, I would like to confirm with you

the name under Policy is called: Types, Item Types, Item catalogue, right? the item is the real thing we distribute to Guests. image

Item Type's name&icon cannot be modified, but the days of distribution policy can be updated by editing the item belongs to it, is it correct? My original question how to edit the Item if we only show Item Types in the list?

d33pspace commented 3 years ago

Hi @edwazhao ...

  1. The "Item Catalogue" contains "Types" and "Types" contain "Items."
  2. Types name and icon cannot be modified, but the distribution policy for the type can be updated by editing any item that belongs to it.
  3. If a Type contains Items, Users can only distribute Items to Guests.
  4. If a Type does not contain Items (for example, "Shorts"), Users can distribute the Type to Guests.
  5. Users should be able to edit Items, but there is no reason to edit a Type unless it does not contain an Item, in which case it must be able to be edited.

It seems like 4 and 5 may present a logical problem. Do you agree?

edwazhao commented 3 years ago

Hi @d33pspace , Yes, from my perspective, there is a logical problem, Types name and icon cannot be modified, but a Type can be edited if it does not contain an Item. I would like to make the logical easy to understand

  1. Types name and icon cannot be modified
  2. if Type does not contain an Item, we have to add a Item to the Type to modify the distribution policy To move one more step further, I would suggest each Type must contain at least one Item, and we only distribute Item to Guest, in the real world we cannot give Type to Guest, we have to give the real Item.

My initial question is: which Item should be shown in edit mode when we tapping the Type line in https://d33pspace.github.io/RenewalMgtApp-Html/app/item_catalogue.html and the Type contains more than one Items? If I click T-shirt Type, there are several Items like short-sleeve, long-sleeve could be opened in Edit Item page, so which one?

d33pspace commented 3 years ago

Hi @edwazhao Got it.

If we agree that each Type contains at least one Item, there are times with the interface of the app that it would be a wasteful step to expand the Type to see only one Item. So in those cases, to the User it would look like they can give an Item to the Guest (as long as the Type has only one Item in it). Is this reasonable?

If so, I think the same should apply here. The user would be able to tap on the Type to edit it directly as long as there was only one Item in that Type. Or, if there was more than one Item in a Type, the Type would need to be able to expand first to show more choices. Do you agree?

edwazhao commented 3 years ago

Hi @d33pspace , yes, I agree, then we need to expand it if there are more items available in the Type, currently we don't have this function, right?

d33pspace commented 3 years ago

@MariiaBubley In the item catalogue ( https://d33pspace.github.io/RenewalMgtApp-Html/app/item_catalogue.html ) it seems we need a way to expand Types to display Items when Items need to be edited. Would you agree? (If a Type contains no Items, the Type can be edited directly.)

edwazhao commented 3 years ago

Hi @d33pspace , to your comment above: (If a Type contains no Items, the Type can be edited directly.) should we only make policy editable?

d33pspace commented 3 years ago

@edwazhao I believe "Can be washed" may be hardcoded so we do not need to make that editable, but ideally, we could edit "Active item" because, for example, we could turn that off in the winter.

MariiaBubley commented 3 years ago

@edwazhao @d33pspace I have added the opportunity to extend Type. image

d33pspace commented 3 years ago

@AnKar112 @academws The Figma model for Item Catalogue has been updated to include the ability to expand items to reveal sub-items. Please make the update to the HTML template.

AnKar112 commented 3 years ago

Done. Check, please.

d33pspace commented 3 years ago

@MariiaBubley This seems okay to me. What do you think?

@edwazhao Is this sufficient for you? Do we need demonstration of tap to open link on Item or Type without Items?

MariiaBubley commented 3 years ago

@d33pspace https://d33pspace.github.io/RenewalMgtApp-Html/app/item_catalogue.html

I have few edits: 1)Not correct background 2)Why arrow is not changed? When line collapsed have to displayed grey down arrow, when line extended - black up arrow. 3)On this page work only one line, others do not extend. 4)Incorrect title

d33pspace commented 3 years ago

@MariiaBubley

1) Please explain or provide screenshot. 2) Agreed. 3) I believe this is sufficient to demonstrate UI functionality. The rest can be handled by Edward. But we do need demonstration of a Type with no Items, such as shorts. 4) Agreed.

@academws @AnKar112

AnKar112 commented 3 years ago

Not correct background - fixed arrows - fixed about next one - this how I get it from design http://ipic.su/img/img7/fs/kiss_56kb.1631824265.png and the page already have this title

d33pspace commented 3 years ago

@AnKar112 @academws Perhaps you are still working on this now, but this is what I am seeing in my browser (screenshot below).

AnKar112 commented 3 years ago

You must be checking while I was working on it. Header is ok now.

d33pspace commented 3 years ago

@MariiaBubley

d33pspace commented 3 years ago

@AnKar112 @academws (1) When the expand arrow is facing down, it should be grey. When it is facing up, it should be black. Our apologies if this is different from Figma.

(2) For demonstration purposes, Item Catalogue needs to have at least one row that does not have the down arrow because some items do not expand. Please demonstrate that (a) rows that do not expand open an external link by tapping anywhere on the row. And (b) items in rows that expand also open an external link by tapping anywhere on the row.

MariiaBubley commented 3 years ago

@AnKar112 image

@d33pspace @AnKar112 I find a new mistake, the header start started to move to the left. image

Also, I propose to make a shadow, which appears only when the scrolling starts. In default, the header is placed without shadow. (not only hear but on all pages. Shadow (x=0, y=2, blure=8, #3A3C40, 16%) image

Other cases did not resolve here.

AnKar112 commented 3 years ago

(1) When the expand arrow is facing down, it should be grey. When it is facing up, it should be black. Our apologies if this is different from Figma. - done

(2) For demonstration purposes, Item Catalogue needs to have at least one row that does not have the down arrow because some items do not expand. Please demonstrate that (a) rows that do not expand open an external link by tapping anywhere on the row. And (b) items in rows that expand also open an external link by tapping anywhere on the row. - done

I find a new mistake, the header start started to move to the left. - F5 help with it?

Also, I propose to make a shadow, which appears only when the scrolling starts. In default, the header is placed without shadow. (not only hear but on all pages. - okay, have some problems with it. Box shadow used for all the box, we couldn't use box-shadow only for bottom. And it will be bad on desktop, in all sides: http://ipic.su/img/img7/fs/kiss_16kb.1631911393.png There is one hack - if we make spread same as blur but negative (or plus-minus close to it) it will be only on one side. Check it now, it 0 2px 8px -6px #3A3C40 on scroll. I think, this is the best, what we can make. And next time send everything in pixels, please, there is no percentages in css box-shadow, this is only figma trick.

d33pspace commented 3 years ago

@MariiaBubley

@AnKar112 @academws Changes look great! Thank you!

AnKar112 commented 3 years ago

Please remove the Search bar. You have it here correctly (it was in Figma) but I decided I don't want it on this page. - done I've noticed the expand/collapse on take_page and give_page has a subtle animated effect and I like it. Can you implement it on this page also, please? - you mean arrow animation, right? done Please demonstrate the full-line tap functionality like so: - done

d33pspace commented 3 years ago

@AnKar112 @academws Everything looks great except I still see the search bar at the top of the page. Please remove it.

MariiaBubley commented 3 years ago

@d33pspace image After the search has to be padding 16px.

header alignment is fine