diff --git a/Makefile b/Makefile index 4b467971..406a15d8 100644 --- a/Makefile +++ b/Makefile @@ -82,7 +82,7 @@ stage: build rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/wwwroot/ a-stage: build - rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/a-wwwroot/ + rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@10.0.3.8:/usr/local/www/ott-staging/a-wwwroot/ b-stage: build rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/b-wwwroot/ diff --git a/src/features/App/AuthenticatedApp.tsx b/src/features/App/AuthenticatedApp.tsx index 500b186f..7b627bed 100644 --- a/src/features/App/AuthenticatedApp.tsx +++ b/src/features/App/AuthenticatedApp.tsx @@ -22,6 +22,7 @@ import { MatchPopup, MatchPopupStore } from 'features/MatchPopup' import { BuyMatchPopup, BuyMatchPopupStore } from 'features/BuyMatchPopup' import { PreferencesPopup, PreferencesPopupStore } from 'features/PreferencesPopup' import { TournamentsPopup } from 'features/TournamentsPopup' +import { TournamentPopupStore } from 'features/TournamentsPopup/store' import { CardsStore } from 'features/CardsStore' import { NoNetworkPopup, NoNetworkPopupStore } from 'features/NoNetworkPopup' @@ -43,40 +44,43 @@ export const AuthenticatedApp = () => { - - - - - - { client.name === 'facr' ? : } - + + + + + + + { client.name === 'facr' ? : } + - {/* в Switch как прямой children можно рендерить только Route или Redirect */} - - - - - - - - - - - - - - - - - - - - - - {!isProduction && } - - - + {/* в Switch как прямой children + можно рендерить только Route или Redirect */} + + + + + + + + + + + + + + + + + + + + + + {!isProduction && } + + + + diff --git a/src/features/ItemsList/styled.tsx b/src/features/ItemsList/styled.tsx index 581c181f..752370c0 100644 --- a/src/features/ItemsList/styled.tsx +++ b/src/features/ItemsList/styled.tsx @@ -18,12 +18,12 @@ export const Item = styled.li` ${isMobileDevice ? css` - @media (max-width: 650px),(orientation: landscape){ - &:not(:last-child) { - margin-bottom: 10px; + @media (max-width: 650px), (orientation: landscape) { + &:not(:last-child) { + margin-bottom: 10px; + } } - } - ` + ` : ''}; ` @@ -42,8 +42,8 @@ export const StyledLink = styled(ProfileLink)` } ${isMobileDevice ? css` - height: 33px; - ` + height: 33px; + ` : ''}; ` @@ -53,6 +53,7 @@ export const ItemInfo = styled.div` ` export const Name = styled(NameBase)` + margin-bottom: 5px; display: block; font-weight: 600; font-size: 0.65rem; @@ -64,37 +65,40 @@ export const Name = styled(NameBase)` overflow: hidden; ${isMobileDevice ? css` - font-size: 14px; - line-height: 14px; - margin-bottom: 2px; - ` + font-size: 14px; + line-height: 14px; + margin-bottom: 2px; + ` : ''}; ` export const Flag = styled.img` - width: 0.567rem; - height: 0.567rem; - margin: 0 0.19rem; + width: 0.75rem; + height: 0.75rem; + margin: 0 0.19rem 0 0; object-fit: contain; object-position: center; ${isMobileDevice ? css` - width: 12px; - height: 10px; - margin: 0 5px; - ` + width: 12px; + height: 10px; + margin: 0 5px 0 0; + ` : ''}; ` export const TeamOrCountry = styled(NameBase)` font-weight: normal; - font-size: 0.49rem; + font-size: 0.625rem; line-height: 0.75rem; color: rgba(255, 255, 255, 0.7); + :hover { + text-decoration: none; + } ${isMobileDevice ? css` - font-size: 10px; - line-height: 14px; - ` + font-size: 10px; + line-height: 14px; + ` : ''}; ` diff --git a/src/features/Menu/index.tsx b/src/features/Menu/index.tsx index ed40518c..3cba50bb 100644 --- a/src/features/Menu/index.tsx +++ b/src/features/Menu/index.tsx @@ -5,7 +5,7 @@ import { client } from 'config/clients' import { PAGES } from 'config/pages' import { usePreferencesStore } from 'features/PreferencesPopup' -import { useTournamentsPopup } from 'features/TournamentsPopup/hooks' +import { useTournamentPopupStore } from 'features/TournamentsPopup/store' import { FavoritesMobilePopup } from '../FavoritesMobilePopup' import { @@ -16,7 +16,7 @@ import { export const Menu = () => { const { openPopup } = usePreferencesStore() - const { open } = useTournamentsPopup() + const { open } = useTournamentPopupStore() const isHomePage = useRouteMatch(PAGES.home)?.isExact return ( @@ -24,7 +24,7 @@ export const Menu = () => { {isMobileDevice && } { isHomePage && !client.disabledPreferences && ( - + ) diff --git a/src/features/PreferencesPopup/components/TournamentInfo/index.tsx b/src/features/PreferencesPopup/components/TournamentInfo/index.tsx index 2ecaf185..b1c73dd2 100644 --- a/src/features/PreferencesPopup/components/TournamentInfo/index.tsx +++ b/src/features/PreferencesPopup/components/TournamentInfo/index.tsx @@ -21,6 +21,8 @@ const Wrapper = styled.div` ` const StyledName = styled(Name)` + font-size: 14px; + ${isMobileDevice ? css` @media (max-width: 650px){ @@ -35,14 +37,15 @@ const StyledName = styled(Name)` ` type Props = { + isIcon?: boolean, tournament: Tournament, } -export const TournamentInfo = ({ tournament }: Props) => ( +export const TournamentInfo = ({ isIcon, tournament }: Props) => ( - + {isIcon && } diff --git a/src/features/TournamentsPopup/hooks.tsx b/src/features/TournamentsPopup/hooks.tsx deleted file mode 100644 index c6f527a6..00000000 --- a/src/features/TournamentsPopup/hooks.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { useToggle } from 'hooks' - -export const useTournamentsPopup = () => { - const { - close, - isOpen, - open, - } = useToggle() - - return { - close, - isOpen, - open, - } -} diff --git a/src/features/TournamentsPopup/index.tsx b/src/features/TournamentsPopup/index.tsx index 1e05a4b4..62dccf08 100644 --- a/src/features/TournamentsPopup/index.tsx +++ b/src/features/TournamentsPopup/index.tsx @@ -1,30 +1,24 @@ -// import { HeaderActions, CloseButton } from 'features/PopupComponents' -// import { T9n } from 'features/T9n' - -// import { SportsList } from './components/SportList' -// import { TournamentsBlock } from './components/TournamentsBlock' -import { HeaderActions, CloseButton } from 'features/PopupComponents' import { T9n } from 'features/T9n' -import { TournamentInfo } from 'features/PreferencesPopup/components/TournamentInfo' +import { ProfileTypes, SportTypes } from 'config' -import { - Modal, - Wrapper, - Header, - HeaderTitle, - Body, - // Footer, - // ApplyButton, -} from 'features/PreferencesPopup/styled' +import { Wrapper } from 'features/PreferencesPopup/styled' import { Tournaments } from 'requests/getSportTournaments' -import { ScItem, ScTournament, ScTournamentList } from './styled' +import { + ScItem, + ScBody, + ScList, + ScHeaderTitle, + ScTournamentList, + ScModalContainer, + StyledLink, +} from './styled' -import { useTournamentsPopup } from './hooks' +import { useTournamentPopupStore } from './store' export const TournamentsPopup = () => { - const { close, isOpen } = useTournamentsPopup() + const { close, isOpen } = useTournamentPopupStore() const tournaments: Tournaments = [ { @@ -89,51 +83,193 @@ export const TournamentsPopup = () => { }, ] - const teams = [ + const teams: Tournaments = [ { - 'Czech Republic': 23, + country: { + id: 231, + name_eng: 'Czech Republic', + name_rus: 'Чешская Республика', + }, + gender: null, + id: 23, + name_eng: 'Czech Republic', + name_rus: 'Чехия', + short_name_eng: 'Czech Republic', + short_name_rus: 'Чехия', + sport: 1, + tournament_type: 1, }, { - 'A ženy': 2719, + country: { + id: 231, + name_eng: 'Czech Republic', + name_rus: 'Чешская Республика', + }, + gender: null, + id: 2719, + name_eng: 'A ženy', + name_rus: 'A ženy', + short_name_eng: 'A ženy', + short_name_rus: 'A ženy', + sport: 1, + tournament_type: 1, }, { - U21: 528, + country: { + id: 231, + name_eng: 'Czech Republic', + name_rus: 'Чешская Республика', + }, + gender: null, + id: 528, + name_eng: 'U21', + name_rus: 'U21', + short_name_eng: 'U21', + short_name_rus: 'U21', + sport: 1, + tournament_type: 1, }, { - U20: 17018, + country: { + id: 231, + name_eng: 'Czech Republic', + name_rus: 'Чешская Республика', + }, + gender: null, + id: 17018, + name_eng: 'U20', + name_rus: 'U20', + short_name_eng: 'U20', + short_name_rus: 'U20', + sport: 1, + tournament_type: 1, }, { - U19: 567, + country: { + id: 231, + name_eng: 'Czech Republic', + name_rus: 'Чешская Республика', + }, + gender: null, + id: 567, + name_eng: 'U19', + name_rus: 'U19', + short_name_eng: 'U19', + short_name_rus: 'U19', + sport: 1, + tournament_type: 1, }, { - WU19: 16306, + country: { + id: 231, + name_eng: 'Czech Republic', + name_rus: 'Чешская Республика', + }, + gender: null, + id: 16306, + name_eng: 'WU19', + name_rus: 'WU19', + short_name_eng: 'WU19', + short_name_rus: 'WU19', + sport: 1, + tournament_type: 1, }, { - U18: 1189, + country: { + id: 231, + name_eng: 'Czech Republic', + name_rus: 'Чешская Республика', + }, + gender: null, + id: 1189, + name_eng: 'U18', + name_rus: 'U18', + short_name_eng: 'U18', + short_name_rus: 'U18', + sport: 1, + tournament_type: 1, }, { - U17: 480, + country: { + id: 231, + name_eng: 'Czech Republic', + name_rus: 'Чешская Республика', + }, + gender: null, + id: 480, + name_eng: 'U17', + name_rus: 'U17', + short_name_eng: 'U17', + short_name_rus: 'U17', + sport: 1, + tournament_type: 1, }, { - WU17: 16920, + country: { + id: 231, + name_eng: 'Czech Republic', + name_rus: 'Чешская Республика', + }, + gender: null, + id: 16920, + name_eng: 'WU17', + name_rus: 'WU17', + short_name_eng: 'WU17', + short_name_rus: 'WU17', + sport: 1, + tournament_type: 1, }, { - U16: 6032, + country: { + id: 231, + name_eng: 'Czech Republic', + name_rus: 'Чешская Республика', + }, + gender: null, + id: 6032, + name_eng: 'U16', + name_rus: 'U16', + short_name_eng: 'U16', + short_name_rus: 'U16', + sport: 1, + tournament_type: 1, }, { - U15: 17624, + country: { + id: 231, + name_eng: 'Czech Republic', + name_rus: 'Чешская Республика', + }, + gender: null, + id: 17624, + name_eng: 'U15', + name_rus: 'U15', + short_name_eng: 'U15', + short_name_rus: 'U15', + sport: 1, + tournament_type: 1, }, { - WU15: 114440, + country: { + id: 231, + name_eng: 'Czech Republic', + name_rus: 'Чешская Республика', + }, + gender: null, + id: 114440, + name_eng: 'WU15', + name_rus: 'WU15', + short_name_eng: 'WU15', + short_name_rus: 'WU15', + sport: 1, + tournament_type: 1, }, ] - console.log('isOpen', isOpen) - return ( - + -
+ {/*
@@ -143,20 +279,44 @@ export const TournamentsPopup = () => { -
- +
*/} + + + + + + + {tournaments.map((tournament) => ( + + + + ))} + + - {tournaments.map((tournament) => ( - - - - - - ))} + + + + + {teams.map((team) => ( + + + + ))} + - {/* 123 */} - +
-
+ ) } diff --git a/src/features/TournamentsPopup/store/hooks/index.tsx b/src/features/TournamentsPopup/store/hooks/index.tsx new file mode 100644 index 00000000..82d82b7d --- /dev/null +++ b/src/features/TournamentsPopup/store/hooks/index.tsx @@ -0,0 +1,13 @@ +import { useState } from 'react' + +export const useTournamentPopup = () => { + const [isOpen, setIsOpen] = useState(false) + const close = () => setIsOpen(false) + const open = () => setIsOpen(true) + + return { + close, + isOpen, + open, + } +} diff --git a/src/features/TournamentsPopup/store/index.tsx b/src/features/TournamentsPopup/store/index.tsx new file mode 100644 index 00000000..4e8ffdf5 --- /dev/null +++ b/src/features/TournamentsPopup/store/index.tsx @@ -0,0 +1,20 @@ +import type { ReactNode } from 'react' +import { createContext, useContext } from 'react' + +import { useTournamentPopup } from './hooks' + +type Context = ReturnType +type Props = { children: ReactNode } + +const TournamentPopupContext = createContext({} as Context) + +export const TournamentPopupStore = ({ children }: Props) => { + const value = useTournamentPopup() + return ( + + {children} + + ) +} + +export const useTournamentPopupStore = () => useContext(TournamentPopupContext) diff --git a/src/features/TournamentsPopup/styled.tsx b/src/features/TournamentsPopup/styled.tsx index 0942ec14..32c56dd4 100644 --- a/src/features/TournamentsPopup/styled.tsx +++ b/src/features/TournamentsPopup/styled.tsx @@ -2,17 +2,84 @@ import styled, { css } from 'styled-components/macro' import { isMobileDevice } from 'config/userAgent' -import { Modal } from 'features/PreferencesPopup/styled' +import { ModalWindow } from 'features/Modal/styled' +import { Modal as BaseModal } from 'features/Modal' +import { TournamentInfo } from 'features/PreferencesPopup/components/TournamentInfo' +import { ProfileLink } from 'features/ProfileLink' +import { customScrollbar } from 'features/Common' +import { HeaderTitle } from 'features/PreferencesPopup/styled' -export const ScTournamentList = styled.div` +export const ScModalContainer = styled(BaseModal)` + ${ModalWindow} { + width: 616px; + max-height: 95vh; + overflow-y: auto; + + ${customScrollbar} + + ${isMobileDevice + ? css` + width: 95vw; + ` + : '' +}; + } + } ` -export const ScTournament = styled.div` - margin-top: 15px; +export const ScBody = styled.div` + padding: 25px 40px 0 42px; + display: flex; + ${isMobileDevice + ? css` + @media (max-width: 650px) { + padding: 13px 25px 0; + flex-direction: column; + align-items: center; + } + + @media (orientation: landscape) { + padding: 22px 23px 0 29px; + } + ` + : ''}; ` -export const ScTeamsList = styled.div` +export const ScHeaderTitle = styled(HeaderTitle)` + margin: 15px; + + ${isMobileDevice + ? css` + display: flex; + align-self: center; + ` + : ''}; ` -export const ScItem = styled.li` +export const ScTournamentList = styled.div` + width: 50%; + margin-bottom: 20px; ` + +export const ScList = styled.div` + max-width: 212px; + margin-top: 20px; + overflow-y: scroll; +` + +export const StyledLink = styled(ProfileLink)` + margin: 5px; + + display: flex; + align-items: flex-start; + color: white; + padding: 10px; + + &:hover { + text-decoration: underline; + background-color: #2d323d; + border-radius: 2px; + } +` + +export const ScItem = styled(TournamentInfo)``