RWD/my profile and members #4577

eshark9312 · 2023-10-15T15:02:30Z

Pioneer Responsive Design #1794

Designs:

vercel · 2023-10-15T15:02:35Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
dao	✅ Ready (Inspect)	Visit Preview	Oct 21, 2023 8:18am
pioneer-2	✅ Ready (Inspect)	Visit Preview	Oct 21, 2023 8:18am
pioneer-2-storybook	✅ Ready (Inspect)	Visit Preview	Oct 21, 2023 8:18am

thesan

About the my profile page:

Since Pioneer doesn't mobile wallet nothing interesting can be done from a mobile in there. Therefore I think we should hide "My profile" from the mobile navigation.

About the members page:

It looks good over all but the role filter part:

is too small compare to the design:

As a result the button on the select are a bit squeezed:

packages/ui/src/memberships/modals/BuyMembershipModal/BuyMembershipModal.tsx

packages/ui/src/memberships/modals/InviteMemberModal/InviteMemberModal.tsx

thesan · 2023-10-16T16:32:47Z

packages/ui/src/common/components/Modal/Modal.tsx

@@ -65,6 +67,8 @@ export const Modal = ({ onClose, modalHeight = 'm', children, modalSize, isDark,

  useEscape(() => onClose())

+  if ((screenSize === 'xxs' || screenSize === 'xs') && modalSize !== 'xs') return null


However I don't think this is the right place to handle this globally. Instead could you do that in the GlobalModals component please ?

This way some exception can be added for some of the modals. Also instead of just returning null I think a small modal should be shown with a message like:

This action requires a browser extension, please visit this page from a desktop browser
Finally the condition shouldn't be just be the window size because it would mean that if someone reduce their window for a moment they would lose all the data the input in a modal. As a result I think that:

it should check this whether a wallet is connected (if it is nothing should be shown).

instead of checking screenSize, the browser screen.width should be used here.

I see what you mean, if no wallet is connected so there is no membership, then the banner appears on the top of the screen.

https://www.figma.com/file/EaObQEN95O0IWjSVTUQ5NN/Pioneer-RWD?type=design&node-id=1353-54052&mode=dev

packages/ui/src/app/GlobalModals.tsx

Co-authored-by: Theophile Sandoz <[email protected]>

polikosi · 2023-10-26T17:53:38Z

tested on: https://pioneer-2-om5olcd78-joystream.vercel.app/#/settings?network-config=https://3.73.121.180.nip.io/network/config.json

My profile

XXS - 320px
✅My profile -> My accounts

⚠️My profile -> My memberships
Active membership should be min 872px.

⚠️Invite a member
This page should not be displayed

After refreshing the page, I received the following message

⚠️Insufficient budget
The user should not receive this message. This modal is not displayed on this screen size.

⚠️Add membership
The user should not receive this message. This modal is not displayed on this screen size.

⚠️Add membership: Authorize transaction
The same problem. This page should not be displayed.

⚠️Add membership: Success modal
The same problem. This page should not be displayed.

XS - 425px
✅My profile -> My accounts

⚠️My profile -> My memberships
Active membership should be min 872px.

⚠️Invite a member
The same problem. This page should not be displayed.

⚠️Insufficient budget
The user should not receive this message. This modal is not displayed on this screen size.

⚠️Add membership
The same problem. The user should not receive this message. This modal is not displayed on this screen size.

⚠️Add membership: Authorize transaction
The user should not receive this message. This modal is not displayed on this screen size.

⚠️Add membership: Success modal
The same problem. This page should not be displayed.

SM - 768px
✅My profile -> My accounts

⚠️My profile -> My memberships
Buttoms are stacked verically but should be horizontally.

✅Invite a member

✅Insufficient budget

✅Add membership

✅Add membership: Authorize transaction

✅Add membership: Success modal

MD - 1024px
⚠️My profile -> My accounts
Cards should be placed in a 3 columns.

✅My profile -> My memberships

✅Invite a member

✅Insufficient budget

✅Add membership

✅Add membership: Authorize transaction

✅Add membership: Success modal

LG - 1440px
✅My profile -> My accounts

✅My profile -> My memberships

✅Invite a member

✅Insufficient budget

✅Add membership

✅Add membership: Authorize transaction

✅Add membership: Success modal

polikosi · 2023-10-27T15:45:47Z

My mebers

✅XXS - 320px

⚠️XS - 425px
Meber type and roles should be staked horizontally

⚠️SM - 768px

✅MD - 1024px

✅LG - 1440px

eshark9312 · 2023-11-01T15:52:07Z

@polikosi
I addressed all problem on the last RWD PR, you can check here.

polikosi · 2023-11-02T19:26:54Z

tested on: https://dao-7pvcye50j-joystream.vercel.app

My profile

There is one problem and several remarks

Problem:
❌Add membership: Success modal
Actual result: Page is crashed (i get white screen) after creating membership
Expected result: I receive a modal notification about successful membership creation

Remarks:
I think it would be good to move it a little to the left so that the question mark is visible. Screen: 768px, 1024px, 1440px
⚠️Add membership: Authorize transaction

⚠️My profile -> My accounts
Cards should be placed in a 3 columns. Screen - 1024px.

I think this message is needed where we show nothing. For example: Invite a member modal (screen: 320px, 425px), etc.

polikosi · 2023-11-02T19:39:20Z

My mebers

XXS - 320px
⚠️Top and bottom padding should be set to 16px

⚠️SM - 768px
The search bar and select should be on the same line as "Mebmers"

eshark9312 · 2023-11-03T01:35:49Z

@polikosi
I pushed a commit to address all but one of the issues above, please check here.
What do you mean with

I think this message is needed where we show nothing. For example: Invite a member modal (screen: 320px, 425px), etc.

This message appears when clicking Invite a member or Add Membership button.

polikosi · 2023-11-03T08:55:43Z

This message appears when clicking Invite a member or Add Membership button.

Yes, that's what I mean.

polikosi · 2023-11-03T09:01:21Z

@eshark9312 Yes, everything is working as expected. Good job, thank you.

eshark9312 added 6 commits October 15, 2023 09:59

fix Accounts list to be scrollable

ef902c5

fix Statistics gap to be 16px when smaller than lg

423e3c4

fix Profile/Mymemberships header responsive

34e84b2

fix Mymembershiplist scrollable

f03312e

fix invite/add member modal

24caa22

fix members page filter

b973237

vercel bot deployed to Preview – pioneer-2-storybook October 15, 2023 15:05 View deployment

vercel bot deployed to Preview – dao October 15, 2023 15:07 View deployment

vercel bot deployed to Preview – pioneer-2 October 15, 2023 15:07 View deployment

eshark9312 added 3 commits October 15, 2023 10:14

fix modals responsive, disable some

df2e060

fix sidebarSlider

8b16cd9

fix Pagination responsiveness

9048820

vercel bot deployed to Preview – pioneer-2-storybook October 15, 2023 15:27 View deployment

vercel bot deployed to Preview – pioneer-2 October 15, 2023 15:30 View deployment

vercel bot deployed to Preview – dao October 15, 2023 15:30 View deployment

chrlschwb approved these changes Oct 15, 2023

View reviewed changes

fix memberlistitem min-width

afbab71

vercel bot deployed to Preview – pioneer-2-storybook October 15, 2023 17:23 View deployment

vercel bot deployed to Preview – pioneer-2 October 15, 2023 17:25 View deployment

vercel bot deployed to Preview – dao October 15, 2023 17:25 View deployment

eshark9312 changed the title ~~Rdw/my profile and members~~ RWD/my profile and members Oct 15, 2023

chrlschwb added community-dev issue suitable for community-dev pipeline jsg-code-review labels Oct 16, 2023

thesan requested changes Oct 16, 2023

View reviewed changes

fix width and padding of memberlistfilter box

35a0603

vercel bot deployed to Preview – pioneer-2-storybook October 17, 2023 01:01 View deployment

vercel bot deployed to Preview – dao October 17, 2023 01:02 View deployment

vercel bot deployed to Preview – pioneer-2 October 17, 2023 01:02 View deployment

vercel bot deployed to Preview – pioneer-2-storybook October 17, 2023 01:40 View deployment

vercel bot deployed to Preview – pioneer-2 October 18, 2023 18:10 View deployment

vercel bot deployed to Preview – dao October 18, 2023 18:11 View deployment

chrlschwb added the jsg-code-review label Oct 20, 2023

thesan requested changes Oct 20, 2023

View reviewed changes

packages/ui/src/app/GlobalModals.tsx Outdated Show resolved Hide resolved

thesan removed the jsg-code-review label Oct 20, 2023

Update packages/ui/src/app/GlobalModals.tsx

d216159

Co-authored-by: Theophile Sandoz <[email protected]>

vercel bot deployed to Preview – pioneer-2-storybook October 21, 2023 00:16 View deployment

vercel bot deployed to Preview – dao October 21, 2023 00:19 View deployment

vercel bot deployed to Preview – pioneer-2 October 21, 2023 00:19 View deployment

update GlobalModal

a0cd48b

vercel bot deployed to Preview – pioneer-2-storybook October 21, 2023 08:16 View deployment

vercel bot deployed to Preview – pioneer-2 October 21, 2023 08:18 View deployment

vercel bot deployed to Preview – dao October 21, 2023 08:18 View deployment

eshark9312 requested a review from thesan October 21, 2023 12:06

thesan approved these changes Oct 23, 2023

View reviewed changes

thesan merged commit 7481d71 into Joystream:responsive Oct 23, 2023
3 checks passed

chrlschwb added the qa-task label Oct 24, 2023

chrlschwb added the qa-tests-failed label Oct 30, 2023

polikosi added qa-tested-ready-for-prod and removed qa-tests-failed labels Nov 3, 2023

chrlschwb removed the qa-task label Nov 6, 2023

eshark9312 mentioned this pull request Nov 21, 2023

Rwd/qa #4636

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

RWD/my profile and members #4577

RWD/my profile and members #4577

eshark9312 commented Oct 15, 2023 •

edited

Loading

vercel bot commented Oct 15, 2023 •

edited

Loading

thesan left a comment

thesan Oct 16, 2023

eshark9312 Oct 17, 2023

polikosi commented Oct 26, 2023 •

edited

Loading

polikosi commented Oct 27, 2023

eshark9312 commented Nov 1, 2023 •

edited

Loading

polikosi commented Nov 2, 2023

polikosi commented Nov 2, 2023

eshark9312 commented Nov 3, 2023 •

edited

Loading

polikosi commented Nov 3, 2023

polikosi commented Nov 3, 2023

		@@ -65,6 +67,8 @@ export const Modal = ({ onClose, modalHeight = 'm', children, modalSize, isDark,

		useEscape(() => onClose())

		if ((screenSize === 'xxs' \|\| screenSize === 'xs') && modalSize !== 'xs') return null

RWD/my profile and members #4577

RWD/my profile and members #4577

Conversation

eshark9312 commented Oct 15, 2023 • edited Loading

vercel bot commented Oct 15, 2023 • edited Loading

thesan left a comment

Choose a reason for hiding this comment

About the my profile page:

About the members page:

thesan Oct 16, 2023

Choose a reason for hiding this comment

eshark9312 Oct 17, 2023

Choose a reason for hiding this comment

polikosi commented Oct 26, 2023 • edited Loading

My profile

polikosi commented Oct 27, 2023

My mebers

eshark9312 commented Nov 1, 2023 • edited Loading

polikosi commented Nov 2, 2023

My profile

There is one problem and several remarks

polikosi commented Nov 2, 2023

My mebers

eshark9312 commented Nov 3, 2023 • edited Loading

polikosi commented Nov 3, 2023

polikosi commented Nov 3, 2023

eshark9312 commented Oct 15, 2023 •

edited

Loading

vercel bot commented Oct 15, 2023 •

edited

Loading

polikosi commented Oct 26, 2023 •

edited

Loading

eshark9312 commented Nov 1, 2023 •

edited

Loading

eshark9312 commented Nov 3, 2023 •

edited

Loading