(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:
Agustin Pane 2020-07-03 09:23:30 -03:00 committed by GitHub
parent 822903c83d
commit 36e78e00b4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 48 additions and 2 deletions

View File

@ -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;
}

View File

@ -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>

View File

@ -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
}