Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RWD/my profile and members #4577

Merged
merged 19 commits into from
Oct 23, 2023
Merged

RWD/my profile and members #4577

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
ef902c5
fix Accounts list to be scrollable
eshark9312 Sep 8, 2023
423e3c4
fix Statistics gap to be 16px when smaller than lg
eshark9312 Sep 8, 2023
34e84b2
fix Profile/Mymemberships header responsive
eshark9312 Sep 18, 2023
f03312e
fix Mymembershiplist scrollable
eshark9312 Sep 18, 2023
24caa22
fix invite/add member modal
eshark9312 Sep 18, 2023
b973237
fix members page filter
eshark9312 Sep 20, 2023
df2e060
fix modals responsive, disable some
eshark9312 Sep 22, 2023
8b16cd9
fix sidebarSlider
eshark9312 Sep 24, 2023
9048820
fix Pagination responsiveness
eshark9312 Sep 24, 2023
afbab71
fix memberlistitem min-width
eshark9312 Sep 27, 2023
35a0603
fix width and padding of memberlistfilter box
eshark9312 Oct 16, 2023
b561188
fix modals
eshark9312 Oct 17, 2023
ffcb871
replace window.innerWidth with screen.width
eshark9312 Oct 17, 2023
bb8f7aa
mock width of the screen
eshark9312 Oct 17, 2023
b9b048d
hide modal when decreasing the width of the window
eshark9312 Oct 17, 2023
7ea6f34
hide My Profile in the navigation slider in mobile
eshark9312 Oct 17, 2023
a2347a3
update responsive provider, add not support mobile modal
eshark9312 Oct 18, 2023
d216159
Update packages/ui/src/app/GlobalModals.tsx
eshark9312 Oct 21, 2023
a0cd48b
update GlobalModal
eshark9312 Oct 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/ui/src/accounts/components/Accounts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@ interface HeaderProps {
}

const AccountsWrap = styled.div`
overflow: auto;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 16px auto;
Expand Down
10 changes: 8 additions & 2 deletions packages/ui/src/app/components/SideBarSlider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export const SideBarSlider = React.memo(({ setOpen }: Props) => {
useEscape(() => hideSideBarSlider())

return (
<SidePaneGlass onClick={onBackgroundClick}>
<SidePaneGlassWrapper onClick={onBackgroundClick}>
<SideBarWarpper>
<NavigationInnerWrapper>
<SliderHeader>
Expand All @@ -36,7 +36,7 @@ export const SideBarSlider = React.memo(({ setOpen }: Props) => {
<SideBarContent />
</NavigationInnerWrapper>
</SideBarWarpper>
</SidePaneGlass>
</SidePaneGlassWrapper>
)
})

Expand Down Expand Up @@ -72,3 +72,9 @@ const CloseIconWrapper = styled.div`
background-color: ${Colors.Black[600]};
}
`

const SidePaneGlassWrapper = styled(SidePaneGlass)`
@media (max-width: 767px) {
display: flex;
}
`
27 changes: 25 additions & 2 deletions packages/ui/src/app/pages/Profile/MyMemberships.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react'
import styled from 'styled-components'

import { PageLayout, PageHeaderWrapper, PageHeaderRow } from '@/app/components/PageLayout'
import { ButtonsGroup } from '@/common/components/buttons'
Expand All @@ -14,7 +15,7 @@ export const MyMemberships = () => (
<PageLayout
header={
<PageHeaderWrapper>
<PageHeaderRow>
<MyMembershipsHeaderWrapper>
<PageTitle>My Profile</PageTitle>
<ButtonsGroup>
<InviteMemberButton size="medium">Invite a member</InviteMemberButton>
Expand All @@ -23,10 +24,32 @@ export const MyMemberships = () => (
Add Membership
</AddMembershipButton>
</ButtonsGroup>
</PageHeaderRow>
</MyMembershipsHeaderWrapper>
<MyProfileTabs />
</PageHeaderWrapper>
}
main={<Memberships />}
/>
)

const MyMembershipsHeaderWrapper = styled(PageHeaderRow)`
@media (max-width: 768px) {
display: flex;
flex-direction: column;
gap: 16px;

${ButtonsGroup} {
grid-auto-flow: row;
grid-row-gap: 8px;
width: 100%;

button {
width: 100%;
display: flex;
justify-content: center;
align-items: center:
gap: 4px;
}
}
}
`
6 changes: 5 additions & 1 deletion packages/ui/src/common/components/Modal/Modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import styled, { ThemedStyledProps } from 'styled-components'

import { ConnectionStatusDot } from '@/app/components/ConnectionStatusDot'
import { useEscape } from '@/common/hooks/useEscape'
import { useResponsive } from '@/common/hooks/useResponsive'

import { Animations, BorderRad, Colors, Fonts, RemoveScrollbar, Shadows, ZIndex } from '../../constants'
import { CloseButton } from '../buttons'
Expand Down Expand Up @@ -57,6 +58,7 @@ interface ModalProps {
}

export const Modal = ({ onClose, modalHeight = 'm', children, modalSize, isDark, className }: ModalProps) => {
const { size: screenSize } = useResponsive()
function onBackgroundClick(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
if (e.target === e.currentTarget) {
onClose()
Expand All @@ -65,6 +67,8 @@ export const Modal = ({ onClose, modalHeight = 'm', children, modalSize, isDark,

useEscape(() => onClose())

if ((screenSize === 'xxs' || screenSize === 'xs') && modalSize !== 'xs') return null
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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:

  1. it should check this whether a wallet is connected (if it is nothing should be shown).
  2. instead of checking screenSize, the browser screen.width should be used here.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

OnboardingoverlayCapture


return (
<>
<ModalGlass onClick={onBackgroundClick} />
Expand Down Expand Up @@ -222,7 +226,7 @@ export const ModalWrap = styled.section<ModalWrapProps>`
'modalfooter';
grid-area: modal;
background-color: ${Colors.White};
width: 100%;
width: calc(100% - 64px);
max-width: ${({ modalMaxSize }) => {
switch (modalMaxSize) {
case 'xs':
Expand Down
6 changes: 4 additions & 2 deletions packages/ui/src/common/components/Pagination/Pagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import styled from 'styled-components'

import { Arrow } from '@/common/components/icons'
import { BorderRad, Colors, Fonts, Transitions } from '@/common/constants/styles'
import { useResponsive } from '@/common/hooks/useResponsive'

interface PaginationProps {
pageCount?: number
Expand All @@ -14,6 +15,7 @@ interface PaginationProps {

export const Pagination: FC<PaginationProps> = ({ pageCount = 0, handlePageChange, page }) => {
const history = useHistory()
const { size } = useResponsive()

if (pageCount < 2) {
return null
Expand All @@ -27,8 +29,8 @@ export const Pagination: FC<PaginationProps> = ({ pageCount = 0, handlePageChang
<StyledPaginateContainer>
<ReactPaginate
pageCount={pageCount}
marginPagesDisplayed={3}
pageRangeDisplayed={3}
marginPagesDisplayed={size === 'xxs' || size === 'xs' ? 1 : 3}
pageRangeDisplayed={size === 'xxs' ? 1 : 3}
containerClassName="pagination"
pageLinkClassName="pagination__link"
pageClassName="page"
Expand Down
4 changes: 4 additions & 0 deletions packages/ui/src/common/components/SidePane/SidePane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,10 @@ export const SidePaneGlass = styled.div<{ onClick?: MouseEventHandler<HTMLDivEle
color: ${Colors.Black[900]};
z-index: ${ZIndex.modal};

@media (max-width: 767px) {
display: none;
}

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

and here

${({ onClick }) =>
onClick
? css`
Expand Down
5 changes: 4 additions & 1 deletion packages/ui/src/common/components/statistics/Statistics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,13 @@ interface StatisticsLayoutProps {
export const Statistics = styled.div<StatisticsLayoutProps>`
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: ${({ gapSize }) => (gapSize === 's' ? '16px' : '24px')};
gap: 16px;
width: 100%;
max-width: 100%;
${({ withMargin }) => (withMargin ? 'margin-top: 8px;' : null)};
@media (min-width: 1440px) {
gap: ${({ gapSize }) => (gapSize === 's' ? '16px' : '24px')};
}
`

export const StatisticsThreeColumns = styled.div<StatisticsLayoutProps>`
Expand Down
9 changes: 7 additions & 2 deletions packages/ui/src/memberships/components/MemberList/Members.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react'
import styled from 'styled-components'

import { MembershipOrderByInput } from '@/common/api/queries'
import { List, ListItem } from '@/common/components/List'
Expand Down Expand Up @@ -30,7 +31,7 @@ export const MemberList = ({ isLoading, members, getSortProps, searchFilter }: M
}

return (
<div>
<MemberListWrapper>
<ListHeaders $colLayout={colLayoutByType('Member')}>
<SortHeader {...getSortProps('handle')}>Memberships</SortHeader>
<ListHeader>Roles</ListHeader>
Expand All @@ -48,6 +49,10 @@ export const MemberList = ({ isLoading, members, getSortProps, searchFilter }: M
</ListItem>
))}
</List>
</div>
</MemberListWrapper>
)
}

const MemberListWrapper = styled.div`
overflow: auto;
`
121 changes: 72 additions & 49 deletions packages/ui/src/memberships/components/MemberListFilters/MemberListFilters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,53 +147,54 @@ export const MemberListFilters = ({ memberCount, onApply }: MemberListFiltersPro
<FieldsHeader>
<ItemCount count={memberCount}>All members</ItemCount>
</FieldsHeader>

<SelectMemberRoles
value={roles}
onChange={(value) => {
dispatch({ type: 'change', field: 'roles', value })
onApply({ ...filters, roles: value })
}}
onApply={applyFilters}
onClear={() => {
dispatch({ type: 'change', field: 'roles', value: [] })
onApply({ ...filters, roles: [] })
}}
/>
<ToggleContainer>
<FilterLabel>Member Type</FilterLabel>

<TogglableIcon
tooltipText="Founding Member"
value={onlyFounder}
<FilterContentWrapper>
<SelectMemberRoles
value={roles}
onChange={(value) => {
dispatch({ type: 'change', field: 'onlyFounder', value })
onApply({ ...filters, onlyFounder: value })
dispatch({ type: 'change', field: 'roles', value })
onApply({ ...filters, roles: value })
}}
>
<FounderMemberIcon />
</TogglableIcon>
<TogglableIcon
tooltipText="Council Member"
value={onlyCouncil}
onChange={(value) => {
dispatch({ type: 'change', field: 'onlyCouncil', value })
onApply({ ...filters, onlyCouncil: value })
}}
>
<CouncilMemberIcon />
</TogglableIcon>
<TogglableIcon
tooltipText="Verified Member"
value={onlyVerified}
onChange={(value) => {
dispatch({ type: 'change', field: 'onlyVerified', value })
onApply({ ...filters, onlyVerified: value })
onApply={applyFilters}
onClear={() => {
dispatch({ type: 'change', field: 'roles', value: [] })
onApply({ ...filters, roles: [] })
}}
>
<VerifiedMemberIcon />
</TogglableIcon>
</ToggleContainer>
/>
<ToggleContainer>
<FilterLabel>Member Type</FilterLabel>

<TogglableIcon
tooltipText="Founding Member"
value={onlyFounder}
onChange={(value) => {
dispatch({ type: 'change', field: 'onlyFounder', value })
onApply({ ...filters, onlyFounder: value })
}}
>
<FounderMemberIcon />
</TogglableIcon>
<TogglableIcon
tooltipText="Council Member"
value={onlyCouncil}
onChange={(value) => {
dispatch({ type: 'change', field: 'onlyCouncil', value })
onApply({ ...filters, onlyCouncil: value })
}}
>
<CouncilMemberIcon />
</TogglableIcon>
<TogglableIcon
tooltipText="Verified Member"
value={onlyVerified}
onChange={(value) => {
dispatch({ type: 'change', field: 'onlyVerified', value })
onApply({ ...filters, onlyVerified: value })
}}
>
<VerifiedMemberIcon />
</TogglableIcon>
</ToggleContainer>
</FilterContentWrapper>
</MembersFilterBox>
</Wrapper>
)
Expand All @@ -208,16 +209,20 @@ const Wrapper = styled.div`
width: 440px;
flex-direction: row-reverse;

@media (max-width: 768px) {
width: 100%;
flex-direction: column-reverse;
}

label {
> *:first-child {
height: 100%;
height: 40px;
}
}
}
`

const MembersFilterBox = styled(FilterBox)`
height: 72px;
margin-top: 8px;

${Fields} {
Expand All @@ -226,10 +231,10 @@ const MembersFilterBox = styled(FilterBox)`
gap: 16px;
padding: 8px 16px;
height: 100%;
}

${SelectContainer} {
flex-basis: 220px;
@media (max-width: 768px) {
flex-direction: column;
}
}
`

Expand All @@ -240,11 +245,29 @@ const FieldsHeader = styled.div`
margin-right: auto;
`

const FilterContentWrapper = styled.div`
display: flex;
gap: 16px;

${SelectContainer} {
width: 196px;
}

@media (max-width: 425px) {
flex-direction: column;
}

@media (max-width: 768px) {
margin-right: auto;
}
`

const ToggleContainer = styled.div`
display: grid;
gap: 4px 8px;
grid-template-columns: auto 1fr;
height: 48px;
width: fit-content;

& > :first-child {
grid-column: span 3;
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/memberships/components/MemberListItem/Fields.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export const colLayoutByType = (kind: MemberItemKind) => {
const roles = kind !== 'MyMember' ? 136 : 164
const created = 90
const referrer = 50
const count = kind !== 'MyMember' ? 20 : 76
const count = 76
const total = 120

switch (kind) {
Expand Down
1 change: 1 addition & 0 deletions packages/ui/src/memberships/components/MembersSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ const MembershipsGroup = styled.div`
'accountslist';
grid-row-gap: 5px;
width: 100%;
overflow: auto;
`

const MembershipsHeaders = styled(ListHeaders)`
Expand Down
Loading