frontend
/
spa_instat_tv
1
0
Fork 0
Code Pull Requests 1 Releases Wiki Activity

style(#ott2821): min style fixes

Browse Source
keep-around/b214ac7012ef42593bee62c207888a2593bc5a38
Farber Denis 3 years ago
parent 9084cf588b
commit c6ed0b6f8a
3 changed files with 88 additions and 76 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 139
      src/features/MatchSidePlaylists/components/FiltersPopup/index.tsx
  2. 15
      src/features/MatchSidePlaylists/components/FiltersPopup/styled.tsx
  3. 10
      src/features/MatchSidePlaylists/components/TabEvents/styled.tsx

139
src/features/MatchSidePlaylists/components/FiltersPopup/index.tsx
Unescape View File

@ -20,6 +20,7 @@ import {
ItemText,
MainCheckboxContainer,
PopupContainer,
PopupInner,
PopupHeader,
Button,
ButtonConatiner,
@ -67,74 +68,76 @@ export const FiltersPopup = () => {
return (
<PopupContainer>
<CloseButtonContainer>
<CloseButton onClick={closePopup} />
</CloseButtonContainer>
<PopupHeader>
<HeaderText>
<T9n t='filter' />
</HeaderText>
</PopupHeader>
<PartBlock>
<MainCheckboxContainer>
<Checkbox
onChange={resetEvents}
checked={isEmpty(activeEvents)}
labelLexic='all_actions'
/>
</MainCheckboxContainer>
<ItemsContainer>
{map(uniqEvents, ((event) => (
<ItemBlock key={event}>
<Checkbox
checked={includes(activeEvents, event)}
onChange={toggleActiveEvents(event)}
labelLexic={event}
/>
</ItemBlock>
)))}
</ItemsContainer>
</PartBlock>
<PartBlock>
<MainCheckboxContainer>
<Checkbox
checked={isEmpty(activeFirstTeamPlayers)}
label={team1Name}
onChange={resetPlayers('team1')}
/>
</MainCheckboxContainer>
<ItemsContainer>
{map(matchPlaylists.players.team1, ((player) => (
<ItemBlock key={player.id}>
<Checkbox
onChange={toggleActivePlayers({ id: player.id, team: 'team1' })}
checked={includes(activeFirstTeamPlayers, player.id)}
label={(<Label player={player} />)}
/>
</ItemBlock>
)))}
</ItemsContainer>
</PartBlock>
<PartBlock>
<MainCheckboxContainer>
<Checkbox
checked={isEmpty(activeSecondTeamPlayers)}
label={team2Name}
onChange={resetPlayers('team2')}
/>
</MainCheckboxContainer>
<ItemsContainer>
{map(matchPlaylists.players.team2, ((player) => (
<ItemBlock key={player.id}>
<Checkbox
onChange={toggleActivePlayers({ id: player.id, team: 'team2' })}
checked={includes(activeSecondTeamPlayers, player.id)}
label={(<Label player={player} />)}
/>
</ItemBlock>
)))}
</ItemsContainer>
</PartBlock>
<PopupInner>
<CloseButtonContainer>
<CloseButton onClick={closePopup} />
</CloseButtonContainer>
<PopupHeader>
<HeaderText>
<T9n t='filter' />
</HeaderText>
</PopupHeader>
<PartBlock>
<MainCheckboxContainer>
<Checkbox
onChange={resetEvents}
checked={isEmpty(activeEvents)}
labelLexic='all_actions'
/>
</MainCheckboxContainer>
<ItemsContainer>
{map(uniqEvents, ((event) => (
<ItemBlock key={event}>
<Checkbox
checked={includes(activeEvents, event)}
onChange={toggleActiveEvents(event)}
labelLexic={event}
/>
</ItemBlock>
)))}
</ItemsContainer>
</PartBlock>
<PartBlock>
<MainCheckboxContainer>
<Checkbox
checked={isEmpty(activeFirstTeamPlayers)}
label={team1Name}
onChange={resetPlayers('team1')}
/>
</MainCheckboxContainer>
<ItemsContainer>
{map(matchPlaylists.players.team1, ((player) => (
<ItemBlock key={player.id}>
<Checkbox
onChange={toggleActivePlayers({ id: player.id, team: 'team1' })}
checked={includes(activeFirstTeamPlayers, player.id)}
label={(<Label player={player} />)}
/>
</ItemBlock>
)))}
</ItemsContainer>
</PartBlock>
<PartBlock>
<MainCheckboxContainer>
<Checkbox
checked={isEmpty(activeSecondTeamPlayers)}
label={team2Name}
onChange={resetPlayers('team2')}
/>
</MainCheckboxContainer>
<ItemsContainer>
{map(matchPlaylists.players.team2, ((player) => (
<ItemBlock key={player.id}>
<Checkbox
onChange={toggleActivePlayers({ id: player.id, team: 'team2' })}
checked={includes(activeSecondTeamPlayers, player.id)}
label={(<Label player={player} />)}
/>
</ItemBlock>
)))}
</ItemsContainer>
</PartBlock>
</PopupInner>
<ButtonConatiner>
<Button onClick={applyFilters}>
<T9n t='apply_filter' />

15
src/features/MatchSidePlaylists/components/FiltersPopup/styled.tsx
Unescape View File

@ -15,14 +15,11 @@ export const PopupContainer = styled.div`
display: flex;
flex-direction: column;
position: absolute;
overflow-y: auto;
z-index: 1000;
height: 100%;
right: 0;
top: 0;
${customScrollbar}
${isMobileDevice
? css`
position: fixed;
@ -34,6 +31,13 @@ export const PopupContainer = styled.div`
width: 651px;`}
`
export const PopupInner = styled.div`
max-height: 100%;
height: 100%;
overflow-y: auto;
${customScrollbar}
`
export const PopupHeader = styled.div`
flex: 0 0 auto;
${isMobileDevice
@ -62,8 +66,8 @@ export const HeaderText = styled.div`
font-style: normal;
font-weight: 700;
text-transform: uppercase;
color: #fff;
color: #FFFFFF;
${isMobileDevice
? css`
font-size: 12px;
@ -192,6 +196,9 @@ export const Button = styled.button`
width: 167px;`}
`
export const PlayerNumber = styled.span`
/* color: #ADADAD; */
color: rgba(255, 255, 255, 0.7);
/* letter-spacing: -0.078px; */
margin-right: 8px;
font-size: 11px;
line-height: 16px;

10
src/features/MatchSidePlaylists/components/TabEvents/styled.tsx
Unescape View File

@ -240,12 +240,11 @@ export const ButtonsBlock = styled.div`
export const HoverTooltip = styled.span`
display: flex;
background: #FFFFFF;
background: #fff;
border-radius: 6px;
left: 8px;
top: 30px;
transform: translate(-100%, -50%);
font-weight: 600;
font-size: 15px;
text-align: center;
flex-direction: column;
@ -253,9 +252,11 @@ export const HoverTooltip = styled.span`
justify-content: center;
align-items: center;
min-width: 160px;
height: 21px;
width: max-content;
line-height: 21px;
padding: 0 9px;
text-decoration: none;
color: #000000;
color: #000;
opacity: 0;
transition: all 0.1s ease;
pointer-events: none;
@ -289,6 +290,7 @@ export const Filters = styled.span<TFilters>`
export const SelectedEpisodes = styled.div`
display: flex;
align-items: center;
gap: 18px;
`

Write Preview
Loading…
Cancel
Save