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

fix(#2429): add mobile version

Browse Source
keep-around/6d73cf8d041b080ae76ce71754b6cad580363787
Andrei Dekterev 4 years ago
parent 008ca4d99d
commit 6d73cf8d04
3 changed files with 143 additions and 47 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. 6
      Makefile
  2. 124
      src/features/UserAccount/components/PagePaymentsHistory/index.tsx
  3. 60
      src/features/UserAccount/components/PagePaymentsHistory/styled.tsx

6
Makefile
Unescape View File

@ -169,13 +169,13 @@ e-stage: build-e
f-stage: build-f
rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@10.0.3.8:/usr/local/www/ott-staging/f-wwwroot/
g-stage: build-f
g-stage: build-g
rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@10.0.3.8:/usr/local/www/ott-staging/g-wwwroot/
h-stage: build-f
h-stage: build-h
rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@10.0.3.8:/usr/local/www/ott-staging/h-wwwroot/
i-stage: build-f
i-stage: build-i
rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@10.0.3.8:/usr/local/www/ott-staging/i-wwwroot/
test:

124
src/features/UserAccount/components/PagePaymentsHistory/index.tsx
Unescape View File

@ -1,5 +1,7 @@
import { T9n } from 'features/T9n'
import { isMobileDevice } from 'config/userAgent'
import format from 'date-fns/format'
import { usePaymentHistory } from './hooks'
@ -12,6 +14,11 @@ import {
TBody,
TRow,
Td,
ScPaymentDate,
ScFirstBlock,
ScSecondBlock,
ScPayment,
ScText,
} from './styled'
export const PagePaymentsHistory = () => {
@ -21,42 +28,89 @@ export const PagePaymentsHistory = () => {
return (
<Wrapper>
<Table>
<THead>
<TRow>
<Th>
<T9n t='subscription_plan' />
</Th>
<Th>
<T9n t='sum' />
</Th>
<Th>
<T9n t='payment_date' />
</Th>
<Th>
<T9n t='payment_method' />
</Th>
</TRow>
</THead>
<TBody>
{payments.map(({
card,
currency,
id,
price,
sub_name,
sub_option,
ts_payment,
}: any) => (
<TRow key={id}>
<Td className='subscription'>{sub_option} — {sub_name}</Td>
<Td>{currency} {price}</Td>
<Td>{formattedDate(ts_payment)}</Td>
<Td>{card}</Td>
{isMobileDevice ? (
<>
{payments.map(
({
card,
currency,
id,
price,
sub_name,
sub_option,
ts_payment,
}: any) => (
<ScPayment key={id}>
<ScFirstBlock>
<Th>
<T9n t='payment_date' />
<ScPaymentDate>{formattedDate(ts_payment)}</ScPaymentDate>
</Th>
<Th>
<T9n t='sum' />
<ScPaymentDate>
{currency} {price}
</ScPaymentDate>
</Th>
</ScFirstBlock>
<ScSecondBlock>
<Th className='subscription'>
<T9n t='subscription_plan' />
<ScText>{sub_option} — {sub_name}</ScText>
</Th>
<Th>
<T9n t='payment_method' />
<ScText>{card}</ScText>
</Th>
</ScSecondBlock>
</ScPayment>
),
)}
</>
) : (
<Table>
<THead>
<TRow>
<Th>
<T9n t='subscription_plan' />
</Th>
<Th>
<T9n t='sum' />
</Th>
<Th>
<T9n t='payment_date' />
</Th>
<Th>
<T9n t='payment_method' />
</Th>
</TRow>
))}
</TBody>
</Table>
</THead>
<TBody>
{payments.map(
({
card,
currency,
id,
price,
sub_name,
sub_option,
ts_payment,
}: any) => (
<TRow key={id}>
<Td className='subscription'>
{sub_option} — {sub_name}
</Td>
<Td>
{currency} {price}
</Td>
<Td>{formattedDate(ts_payment)}</Td>
<Td>{card}</Td>
</TRow>
),
)}
</TBody>
</Table>
)}
</Wrapper>
)
}

60
src/features/UserAccount/components/PagePaymentsHistory/styled.tsx
Unescape View File

@ -3,17 +3,24 @@ import styled, { css } from 'styled-components/macro'
import { devices } from 'config'
import { isMobileDevice } from 'config/userAgent'
import { customScrollbar } from 'features/Common/customScrollbar'
export const Wrapper = styled.div`
margin-top: 26px;
overflow-y: auto;
max-height: 70vh;
${customScrollbar}
${isMobileDevice
? css`
@media (orientation: landscape){
margin-top: 0;
max-height: 100%;
}
`
: ''}
overflow-y: auto;
`
export const Table = styled.table``
@ -21,7 +28,8 @@ export const Table = styled.table``
export const THead = styled.thead``
export const Th = styled.th`
padding: 0 20px;
/* padding-right: 20px; */
width: 250px;
padding-bottom: 25px;
font-weight: 500;
font-size: 18px;
@ -57,11 +65,10 @@ export const Th = styled.th`
} */
${isMobileDevice
? css`
font-size: 12px;
vertical-align: baseline;
:not(:nth-child(1)){
padding-right: 5px;
}
font-size: 10px;
display: flex;
flex-direction: column;
padding: 5px 0;
`
: ''}
`
@ -70,12 +77,14 @@ export const TBody = styled.tbody``
export const TRow = styled.tr`
td.subscription {
width: 350px;
text-transform: capitalize;
}
`
export const Td = styled.td`
padding: 0 20px;
/* padding-right: 20px; */
width: 250px;
padding-bottom: 20px;
font-size: 18px;
line-height: 22px;
@ -97,3 +106,36 @@ export const Td = styled.td`
`
: ''}
`
export const ScPaymentDate = styled.div`
font-weight: 500;
font-size: 14px;
line-height: 17px;
color: #FFFFFF;
`
export const ScFirstBlock = styled.div`
display: flex;
flex-direction: row;
`
export const ScSecondBlock = styled.div`
display: flex;
flex-direction: column;
.subscription {
width: 100%;
word-wrap: break-word;
}
`
export const ScPayment = styled.div`
margin-bottom: 25px;
`
export const ScText = styled.span`
font-weight: 500;
font-size: 14px;
line-height: 17px;
color: rgba(255, 255, 255, 0.6);
`

Write Preview
Loading…
Cancel
Save