(Fix) - Settings ui break (#1073)
* Adds useWindowDimensions hook Uses useWindowDimensions hook to render the address on ownerAddressTable depending of the size of the screen * Fix table width for medium sizes * Reduces padding for medium screen sizes Also simplifies js logic for adding cut addresses * Adjust the padding for larger screens * Adjust the padding for larger screens Co-authored-by: Mikhail Mikheev <mmvsha73@gmail.com>
This commit is contained in:
parent
822903c83d
commit
36e78e00b4
|
@ -9,10 +9,17 @@
|
|||
|
||||
@media only screen and (max-width: #{$screenLg}px) {
|
||||
.page {
|
||||
padding: 72px $lg 0px $lg;
|
||||
padding: 72px $lg 0 $lg;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: #{$screenLg}px) and (max-width: 1360px) {
|
||||
.page {
|
||||
padding: 96px 120px 0 120px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.center {
|
||||
align-self: center;
|
||||
}
|
||||
|
|
|
@ -4,16 +4,31 @@ import EtherScanLink from 'src/components/EtherscanLink'
|
|||
import Identicon from 'src/components/Identicon'
|
||||
import Block from 'src/components/layout/Block'
|
||||
import Paragraph from 'src/components/layout/Paragraph'
|
||||
import { useWindowDimensions } from '../../../../container/hooks/useWindowDimensions'
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
const OwnerAddressTableCell = (props) => {
|
||||
const { address, knownAddress, showLinks, userName } = props
|
||||
const [cut, setCut] = useState(undefined)
|
||||
const { width } = useWindowDimensions()
|
||||
|
||||
useEffect(() => {
|
||||
if (width <= 900) {
|
||||
setCut(6)
|
||||
} else if (width <= 1024) {
|
||||
setCut(12)
|
||||
} else {
|
||||
setCut(undefined)
|
||||
}
|
||||
}, [width])
|
||||
|
||||
return (
|
||||
<Block justify="left">
|
||||
<Identicon address={address} diameter={32} />
|
||||
{showLinks ? (
|
||||
<div style={{ marginLeft: 10, flexShrink: 1, minWidth: 0 }}>
|
||||
{userName}
|
||||
<EtherScanLink knownAddress={knownAddress} type="address" value={address} />
|
||||
<EtherScanLink knownAddress={knownAddress} type="address" value={address} cut={cut} />
|
||||
</div>
|
||||
) : (
|
||||
<Paragraph style={{ marginLeft: 10 }}>{address}</Paragraph>
|
||||
|
|
|
@ -0,0 +1,24 @@
|
|||
import { useState, useEffect } from 'react'
|
||||
|
||||
function getWindowDimensions() {
|
||||
const { innerWidth: width, innerHeight: height } = window
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
}
|
||||
}
|
||||
|
||||
export const useWindowDimensions = (): { width: number; height: number } => {
|
||||
const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions())
|
||||
|
||||
useEffect(() => {
|
||||
function handleResize() {
|
||||
setWindowDimensions(getWindowDimensions())
|
||||
}
|
||||
|
||||
window.addEventListener('resize', handleResize)
|
||||
return () => window.removeEventListener('resize', handleResize)
|
||||
}, [])
|
||||
|
||||
return windowDimensions
|
||||
}
|
Loading…
Reference in New Issue