RWD/my profile and members (#4577)

* fix Accounts list to be scrollable * fix Statistics gap to be 16px when smaller than lg * fix Profile/Mymemberships header responsive * fix Mymembershiplist scrollable * fix invite/add member modal * fix members page filter * fix modals responsive, disable some * fix sidebarSlider * fix Pagination responsiveness * fix memberlistitem min-width * fix width and padding of memberlistfilter box * fix modals * replace window.innerWidth with screen.width * mock width of the screen * hide modal when decreasing the width of the window * hide My Profile in the navigation slider in mobile * update responsive provider, add not support mobile modal * Update packages/ui/src/app/GlobalModals.tsx Co-authored-by: Theophile Sandoz <[email protected]> * update GlobalModal --------- Co-authored-by: Theophile Sandoz <[email protected]>
Joystream · Oct 23, 2023 · 7481d71 · 7481d71
1 parent 528ed99
commit 7481d71
Show file tree

Hide file tree

Showing 16 changed files with 169 additions and 65 deletions.
diff --git a/packages/ui/src/accounts/components/Accounts.tsx b/packages/ui/src/accounts/components/Accounts.tsx
@@ -99,6 +99,7 @@ interface HeaderProps {
 }
 
 const AccountsWrap = styled.div`
+  overflow: auto;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 16px auto;

diff --git a/packages/ui/src/app/GlobalModals.tsx b/packages/ui/src/app/GlobalModals.tsx
@@ -25,9 +25,11 @@ import { TransferModal, TransferModalCall } from '@/accounts/modals/TransferModa
 import { FailureModal } from '@/common/components/FailureModal'
 import { Loading } from '@/common/components/Loading'
 import { ModalGlass } from '@/common/components/Modal'
+import { NotSupportMobileModal } from '@/common/components/NotSupportMobileModal'
 import { SearchResultsModal, SearchResultsModalCall } from '@/common/components/Search/SearchResultsModal'
 import { SuccessModal } from '@/common/components/SuccessModal'
 import { useModal } from '@/common/hooks/useModal'
+import { useResponsive } from '@/common/hooks/useResponsive'
 import { useTransactionStatus } from '@/common/hooks/useTransactionStatus'
 import { ConfirmModal } from '@/common/modals/ConfirmModal/ConfirmModal'
 import { OnBoardingModal, OnBoardingModalCall } from '@/common/modals/OnBoardingModal'
@@ -203,10 +205,13 @@ export const MODAL_WITH_CLOSE_CONFIRMATION: ModalNames[] = [
   'VoteForProposalModal',
 ]
 
+const NON_TRANSACTIONAL_MODALS: ModalNames[] = ['Member', 'ApplicationDetails', 'VoteRationaleModal', 'SearchResults']
+
 export const GlobalModals = () => {
   const { modal, hideModal, currentModalMachine, showModal, modalData, isClosing } = useModal()
   const { active: activeMember } = useMyMemberships()
   const { status } = useTransactionStatus()
+  const { supportTransactions } = useResponsive()
   const Modal = useMemo(() => (modal && modal in modals ? memo(() => modals[modal as ModalNames]) : null), [modal])
 
   const [container, setContainer] = useState(document.body)
@@ -217,6 +222,10 @@ export const GlobalModals = () => {
 
   const potentialFallback = useGlobalModalHandler(currentModalMachine, hideModal)
 
+  if (modal && !supportTransactions && !NON_TRANSACTIONAL_MODALS.includes(modal as ModalNames)) {
+    return <NotSupportMobileModal onClose={hideModal} />
+  }
+
   if (modal && !GUEST_ACCESSIBLE_MODALS.includes(modal as ModalNames) && !activeMember) {
     showModal<SwitchMemberModalCall>({
       modal: 'SwitchMember',

diff --git a/packages/ui/src/app/components/SideBar.tsx b/packages/ui/src/app/components/SideBar.tsx
@@ -32,6 +32,7 @@ import { NavigationHeader } from '@/common/components/page/Sidebar/NavigationHea
 import { NAVIGATION_LINK_GAP, NavigationLink } from '@/common/components/page/Sidebar/NavigationLink'
 import { Colors, RemoveScrollbar } from '@/common/constants'
 import { useNetworkEndpoints } from '@/common/hooks/useNetworkEndpoints'
+import { useResponsive } from '@/common/hooks/useResponsive'
 import { useToggle } from '@/common/hooks/useToggle'
 import { CouncilRoutes, ElectionRoutes } from '@/council/constants'
 import { useElectionStage } from '@/council/hooks/useElectionStage'
@@ -59,6 +60,7 @@ export const SideBar = () => {
 }
 
 export const SideBarContent = () => {
+  const { supportTransactions } = useResponsive()
   const [comingSoonListActive, toggleComingSoonListActive] = useToggle(false)
   const { stage: electionStage } = useElectionStage()
   const [endpoints] = useNetworkEndpoints()
@@ -75,11 +77,13 @@ export const SideBarContent = () => {
           {/*    Overview*/}
           {/*  </NavigationLink>*/}
           {/*</NavigationLinksItem>*/}
-          <NavigationLinksItem>
-            <NavigationLink to={ProfileRoutes.profile} icon={<MyProfileIcon />}>
-              My profile
-            </NavigationLink>
-          </NavigationLinksItem>
+          {supportTransactions && (
+            <NavigationLinksItem>
+              <NavigationLink to={ProfileRoutes.profile} icon={<MyProfileIcon />}>
+                My profile
+              </NavigationLink>
+            </NavigationLinksItem>
+          )}
           <NavigationLinksItem>
             <NavigationLink to={WorkingGroupsRoutes.groups} icon={<WorkingGroupsIcon />}>
               Working Groups

diff --git a/packages/ui/src/app/components/SideBarSlider.tsx b/packages/ui/src/app/components/SideBarSlider.tsx
@@ -25,7 +25,7 @@ export const SideBarSlider = React.memo(({ setOpen }: Props) => {
   useEscape(() => hideSideBarSlider())
 
   return (
-    <SidePaneGlass onClick={onBackgroundClick}>
+    <SidePaneGlassWrapper onClick={onBackgroundClick}>
       <SideBarWarpper>
         <NavigationInnerWrapper>
           <SliderHeader>
@@ -36,7 +36,7 @@ export const SideBarSlider = React.memo(({ setOpen }: Props) => {
           <SideBarContent />
         </NavigationInnerWrapper>
       </SideBarWarpper>
-    </SidePaneGlass>
+    </SidePaneGlassWrapper>
   )
 })
 
@@ -72,3 +72,9 @@ const CloseIconWrapper = styled.div`
     background-color: ${Colors.Black[600]};
   }
 `
+
+const SidePaneGlassWrapper = styled(SidePaneGlass)`
+  @media (max-width: 767px) {
+    display: flex;
+  }
+`
diff --git a/packages/ui/src/app/pages/Profile/MyMemberships.tsx b/packages/ui/src/app/pages/Profile/MyMemberships.tsx
@@ -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'
@@ -14,7 +15,7 @@ export const MyMemberships = () => (
   <PageLayout
     header={
       <PageHeaderWrapper>
-        <PageHeaderRow>
+        <MyMembershipsHeaderWrapper>
           <PageTitle>My Profile</PageTitle>
           <ButtonsGroup>
             <InviteMemberButton size="medium">Invite a member</InviteMemberButton>
@@ -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;
+      }
+    }
+  }
+`
diff --git a/packages/ui/src/common/components/Modal/Modal.tsx b/packages/ui/src/common/components/Modal/Modal.tsx
@@ -222,7 +222,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':

diff --git a/packages/ui/src/common/components/NotSupportMobileModal.tsx b/packages/ui/src/common/components/NotSupportMobileModal.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+
+import { Modal, ModalBody, ModalHeader } from '@/common/components/Modal'
+import { TextMedium } from '@/common/components/typography'
+
+interface Props {
+  onClose: () => void
+}
+
+export const NotSupportMobileModal = ({ onClose }: Props) => (
+  <Modal onClose={onClose} modalSize="xs">
+    <ModalHeader onClick={onClose} title="" />
+    <ModalBody>
+      <TextMedium>This action requires a browser extension, please visit this page from a desktop browser.</TextMedium>
+    </ModalBody>
+  </Modal>
+)
diff --git a/packages/ui/src/common/components/Pagination/Pagination.tsx b/packages/ui/src/common/components/Pagination/Pagination.tsx
@@ -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
@@ -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
@@ -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"

diff --git a/packages/ui/src/common/components/statistics/Statistics.tsx b/packages/ui/src/common/components/statistics/Statistics.tsx
@@ -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>`

diff --git a/packages/ui/src/common/providers/responsive/context.ts b/packages/ui/src/common/providers/responsive/context.ts
@@ -3,9 +3,11 @@ import { createContext } from 'react'
 export interface UseResponsive {
   size: 'xxs' | 'xs' | 'sm' | 'md' | 'lg'
   isMobile: boolean
+  supportTransactions: boolean
 }
 
 export const ResponsiveContext = createContext<UseResponsive>({
   size: 'lg',
   isMobile: false,
+  supportTransactions: true,
 })
diff --git a/packages/ui/src/common/providers/responsive/provider.tsx b/packages/ui/src/common/providers/responsive/provider.tsx
@@ -32,6 +32,7 @@ export const ResponsiveProvider = (props: Props) => {
           ? 'xs'
           : 'xxs',
       isMobile: windowWidth < 1024,
+      supportTransactions: screen.width >= 768,
     }),
     [windowWidth]
   )

diff --git a/packages/ui/src/memberships/components/MemberList/Members.tsx b/packages/ui/src/memberships/components/MemberList/Members.tsx
@@ -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'
@@ -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>
@@ -48,6 +49,10 @@ export const MemberList = ({ isLoading, members, getSortProps, searchFilter }: M
           </ListItem>
         ))}
       </List>
-    </div>
+    </MemberListWrapper>
   )
 }
+
+const MemberListWrapper = styled.div`
+  overflow: auto;
+`