[CWM] Update Pop-up Design

ms0ur1s commented 1 month ago

Description

Update the CWM pop-up design making sure to include the following:

Co-op data sources on the right hand panel
Data sources could have extra fields, e.g. Coops UK
- An additional information accordion to be added below any such data source to display additional fields.
- If possible this should be animated within the design

Requirements

Ensure the changes are reflected in both desktop and mobile versions
The design and layout should should remain consistent with attached design

Design Reference

pop-up-design-1

Tasks

[x] Create general desktop version of the pop-up
[x] Create general mobile version of the pop-up
[x] Create desktop version that includes a data source with extra fields (Co-ops UK used as an example)
[x] Create a desktop with listed .coop domains below the coop description
[x] Add animation to the extra fields accordion
[x] Add additional animation

ms0ur1s commented 1 month ago

Coops UK Desktop Version

https://xd.adobe.com/view/120a9e57-bdd3-4ed6-9268-f33fe843044b-4759/

This prototype focuses on the pop-up only, and all interaction is centred around this. The pop-up can be opened by clicking on the first item of the results panel or the map marker, and can be closed via map marker or the pop-up close button. The side panel can also be opened or closed to demonstrate the pop-up's position during both states.

Coops UK Specific The accordion beneath the Coops UK dataset (right panel of the pop-up) can be opened and closed to display Coops UK specific data.

General Desktop Version

https://xd.adobe.com/view/cd4c3f0e-21ad-49ad-9670-12136cacd8ee-981f/

This version functions as above, but without the Coops UK accordion and with the added convenience of being able to click anywhere on the results panel to trigger the pop-up.

General Mobile Version

https://xd.adobe.com/view/f51ee4af-db90-4bda-9806-d10c7d7d0f36-a04d/ Click anywhere on the results panel to trigger the pop-up. The content within the pop-up is draggable / scrollabe. As with the other versions you can also close / open the pop-up by using the map marker or close button. The search option on the bottom nav with take you back to the search results screen.

ColmDC commented 1 month ago

Hi Marcel. When you say Co-ops UK specific version, what do you mean?

ColmDC commented 1 month ago

When you say Co-ops UK specific version, what do you mean?

This may not be what you meant, but just in case, there shouldn't be anything Co-ops UK specific in the design, or a different Co-ops UK version.

When we include non core fields for a co-op from an individual data source, it would be nice to make those extras fields visible, as in the Co-ops UK example you provide, but I think this is definitely in the nice to haves for Dehli. Given current timeline, I think we should postpone that. The only data source that may need special treatment is DotCoop, as we are using the .coop domains to define merge candidates.

Q: We need to confirm with DotCoop that they want all the .coop registrations of a co-op listed in the popup.

ms0ur1s commented 1 month ago

Hi Marcel. When you say Co-ops UK specific version, what do you mean?

Morning Colm, the two versions are for illustrative purposes only, to display layouts for co-ops with multiple data sets and Coops UK coops with Coops UK related data.

Coops UK data - hidden

Coops UK data - visible

Multiple data sources

ms0ur1s commented 1 month ago

This may not be what you meant, but just in case, there shouldn't be anything Co-ops UK specific in the design, or a different Co-ops UK version.

Cool, but showing Coops UK specific data was definitely mentioned in our last conversation as I noted it down, and the solution I proposed was to use an accordion as in the above images, with a working example demonstrated in the Coops UK prototype.

ms0ur1s commented 1 month ago

When we include non core fields for a co-op from an individual data source, it would be nice to make those extras fields visible, as in the Co-ops UK example you provide, but I think this is definitely in the nice to haves for Dehli. Given current timeline, I think we should postpone that. The only data source that may need special treatment is DotCoop, as we are using the .coop domains to define merge candidates.

Pretty sure this is what I've tried to illustrate in the prototypes, I've probably caused the confusion by my wording in the ticket. 😅

ms0ur1s commented 1 month ago

NOTE Removed the Create Coops UK specific mobile version task as it seemed unnecessary. A mobile version of the prototype already exists, as does a prototype showing the mechanism for displaying extra Coops UK data.

Will re-add if deemed necessary

ColmDC commented 1 month ago

Pretty sure this is what I've tried to illustrate in the prototypes, I've probably caused the confusion by my wording in the ticket.

it could be a wording confusion. You got time for a quick chat to clarify? @ms0ur1s

ColmDC commented 1 month ago

Q: We need to confirm with DotCoop that they want all the .coop registrations of a co-op listed in the popup.

Dotcoop do still want all registered domains listed.

ColmDC commented 1 month ago

Dotcoop do still want all registered domains listed. And hyperlinked.

"even if they don't resolve, people will still copy them and find them dead anyway - and we may get feedback that people find it odd that the addresses don't have links. In the future we will probably be doing some educational promotion to encourage users to redirect their defensive domains".

ColmDC commented 1 month ago

Dotcoop do still want all registered domains listed.

In our chat @ms0ur1s we agreed to put the dotcoop domains as the last section on the left panel, as there can be very many. We didn't discuss how to do it in the mobile version. It needs a little thought about the best place to put it. Would we have subscrolling in the white section? Doesn't seem right.

ms0ur1s commented 1 month ago

In our chat @ms0ur1s we agreed to put the dotcoop domains as the last section on the left panel, as there can be very many. We didn't discuss how to do it in the mobile version. It needs a little thought about the best place to put it. Would we have subscrolling in the white section? Doesn't seem right.

Let me have a think about this one.

ms0ur1s commented 1 month ago

Pop-up with Multiple Domains - Desktop

Note: The content within left hand pane of the pop-up is scrollable via the mouse scroll wheel or draggable via the mouse cursor. The scrollbar is for illustrative purposes only - to signify scrollable content.

I combined the content from two .coop registered coops: one with a long description and one with a large set of domains. The domains are in two columns, my thinking being that after 10 domains (or any arbitrary number) the domains could split into two columns, and once both hit 10 each column increments alternately. (Or something along those lines.)

https://xd.adobe.com/view/3ef8c8d0-84bb-480e-bdfe-113d11f1583b-6bab/

lin-d-hop commented 1 month ago

@ColmDC Are you now happy to sign of these designs? Is there anything outstanding on this?

ColmDC commented 1 month ago

@ms0ur1s was going to comment on the case where there are multiple dotcoop domains on the mobile version, but other than that happy with popup designs.

ms0ur1s commented 1 month ago

@ms0ur1s was going to comment on the case where there are multiple dotcoop domains on the mobile version, but other than that happy with popup designs.

@ColmDC, perhaps we could show the first ten and then have a show more on mobile?

ColmDC commented 1 month ago

@ColmDC, perhaps we could show the first ten and then have a show more on mobile?

Let's do that.

DigitalCommons / mykomap-monolith