Block explorer UI redesgin. Initial Template built for blocks section.

This commit is contained in:
Chris Fenos 2018-08-18 12:52:48 -04:00
parent 6791890c21
commit 40e3a6a179
4 changed files with 19 additions and 30 deletions

View file

@ -1,5 +1,5 @@
.navHeader { .navHeader {
height: 25vh; height: 27.5vh;
background-color: #4f2e7e; background-color: #4f2e7e;
padding-top: 30pt; padding-top: 30pt;
padding-left: 2.5%; padding-left: 2.5%;
@ -13,7 +13,6 @@
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
font-size: 15px; font-size: 15px;
text-transform: uppercase; text-transform: uppercase;
} }
.buttonContainer { .buttonContainer {
@ -38,14 +37,4 @@
color: #4f2e7e; color: #4f2e7e;
background-color: #ffffff; background-color: #ffffff;
font-size: 8px; font-size: 8px;
} }
/*
button:active{
background-color: white;
}
button:focus {
background-color: white;
} */

View file

@ -5,19 +5,19 @@ import { Link } from 'react-router-dom'
const BlockTable = (props) => { const BlockTable = (props) => {
return ( return (
<tbody> <tbody>
<tr> <tr style={{ borderTop: '1px solid #e0defb' }}>
<td style={{paddingLeft: '30pt' }} ><Link to="/blocks/detail" onClick={() => props.detailBlockHandler(props.Number)}> <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} ><Link to="/blocks/detail" style={{ color: '#8f67c9' }} onClick={() => props.detailBlockHandler(props.Number)}>
{props.Number} {props.Number}
</Link></td> </Link></td>
<td style={{paddingLeft: '30pt' }} className={classes.addressTag}>{props.Hash}</td> <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} className={classes.addressTag}>{props.Hash}</td>
<td style={{paddingLeft: '30pt' }}>{props.AgeGet}</td> <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.AgeGet}</td>
<td style={{paddingLeft: '30pt' }}>{props.TxCount}</td> <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.TxCount}</td>
<td style={{paddingLeft: '30pt' }}>{props.UncleCount}</td> <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.UncleCount}</td>
<td style={{paddingLeft: '30pt' }} className={classes.addressTag}><Link to="/mined/blocks" onClick={() => props.getBlocksMined(props.Coinbase)}>{props.Coinbase}</Link></td> <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }} className={classes.addressTag}><Link to="/mined/blocks" style={{ color: '#8f67c9' }} onClick={() => props.getBlocksMined(props.Coinbase)}>{props.Coinbase}</Link></td>
<td style={{paddingLeft: '30pt' }}>{props.GasUsed}</td> <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.GasUsed}</td>
<td style={{paddingLeft: '30pt' }}>{props.GasLimit}</td> <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.GasLimit}</td>
<td style={{paddingLeft: '30pt' }}>TBD</td> <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>TBD</td>
<td style={{paddingLeft: '30pt' }}>{props.Reward}</td> <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}>{props.Reward}</td>
</tr> </tr>
</tbody> </tbody>
) )

View file

@ -2,8 +2,10 @@
border-spacing: 100rem; border-spacing: 100rem;
width: 95%; width: 95%;
margin: 0 auto; margin: 0 auto;
margin-top: -4%;
background-color: white; background-color: white;
top: 20vh;
left: 2.5%;
position: fixed;
} }
thead { thead {
@ -11,13 +13,11 @@ thead {
background-color: white; background-color: white;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
color: #593c83; color: #593c83;
} }
th { th {
background-color: white; background-color: white;
padding-right: 10px; padding: 15pt 30pt ;
padding: 25pt 30pt ;
color: #593c83; color: #593c83;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
} }
@ -26,9 +26,6 @@ td {
font-size: 6pt; font-size: 6pt;
background-color: white; background-color: white;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
/* padding: 25px;
margin-left: 25px; */
} }
.addressTag { .addressTag {

View file

@ -99,7 +99,10 @@ class App extends Component {
<BrowserRouter> <BrowserRouter>
<div style={{backgroundColor:"#f7f8f9", paddingBottom:"5%" }}> <div style={{backgroundColor:"#f7f8f9", paddingBottom:"5%" }}>
{/* <div className={"row"}> */}
<Nav /> <Nav />
{/* </div> */}
<Route path="/" exact render={({ match }) => <Route path="/" exact render={({ match }) =>
<Home/>} <Home/>}