Improve styling for terminal logs and details table

pull/1/head
ninabreznik 8 years ago committed by yann300
parent 84a30d55ab
commit 1ac03a7ce6
  1. 2
      assets/css/universal-dapp.css
  2. 26
      src/app/execution/txLogger.js

@ -215,7 +215,7 @@
padding: 0 0.4em; padding: 0 0.4em;
box-sizing: border-box; box-sizing: border-box;
float: left; float: left;
word-wrap: break-word; min-width: 100%;
} }
#runTabView .contractProperty.hasArgs input { #runTabView .contractProperty.hasArgs input {

@ -17,12 +17,17 @@ var css = csjs`
.log { .log {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
justify-content: space-between;
}
.txBlock, .txVM {
color: ${styles.colors.violet};
width: 45%;
} }
.txTable, .tr, .td { .txTable, .tr, .td {
border: 1px solid ${styles.colors.lightOrange};
border-collapse: collapse; border-collapse: collapse;
font-size: 10px; font-size: 10px;
color: ${styles.colors.grey}; color: ${styles.colors.grey};
border: 1px dashed ${styles.colors.black};
} }
#txTable { #txTable {
width: 450px; width: 450px;
@ -32,6 +37,9 @@ var css = csjs`
.tr, .td { .tr, .td {
padding: 4px; padding: 4px;
} }
.tableTitle {
width: 25%;
}
.buttons { .buttons {
display: flex; display: flex;
} }
@ -229,36 +237,36 @@ function createTable (opts) {
var table = yo` var table = yo`
<table class="${css.txTable}" id="txTable"> <table class="${css.txTable}" id="txTable">
<tr class="${css.tr}"> <tr class="${css.tr}">
<td class="${css.td}">from</td> <td class="${css.td} ${css.tableTitle}"> from </td>
<td class="${css.td}">${from}</td> <td class="${css.td}">${from}</td>
</tr class="${css.tr}"> </tr class="${css.tr}">
<tr class="${css.tr}"> <tr class="${css.tr}">
<td class="${css.td}">to:</td> <td class="${css.td}"> to </td>
<td class="${css.td}">${to}</td> <td class="${css.td}">${to}</td>
</tr class="${css.tr}"> </tr class="${css.tr}">
<tr class="${css.tr}"> <tr class="${css.tr}">
<td class="${css.td}">value:</td> <td class="${css.td}"> value </td>
<td class="${css.td}">${value(val)} wei</td> <td class="${css.td}">${value(val)} wei</td>
</tr class="${css.tr}"> </tr class="${css.tr}">
<tr class="${css.tr}"> <tr class="${css.tr}">
<td class="${css.td}">input:</td> <td class="${css.td}"> input </td>
<td class="${css.td}">${helper.shortenHexData(input)}</td> <td class="${css.td}">${helper.shortenHexData(input)}</td>
</tr class="${css.tr}"> </tr class="${css.tr}">
<tr class="${css.tr}"> <tr class="${css.tr}">
<td class="${css.td}">hash:</td> <td class="${css.td}"> hash </td>
<td class="${css.td}">${hash}</td> <td class="${css.td}">${hash}</td>
</tr class="${css.tr}"> </tr class="${css.tr}">
<tr class="${css.tr}"> <tr class="${css.tr}">
<td class="${css.td}">gas:</td> <td class="${css.td}"> gas </td>
<td class="${css.td}">${gas}</td> <td class="${css.td}">${gas}</td>
</tr class="${css.tr}"> </tr class="${css.tr}">
</table> </table>
` `
if (opts.logs) { if (opts.logs) {
var logs = opts.logs var logs = opts.logs
var logs = yo` logs = yo`
<tr class="${css.tr}"> <tr class="${css.tr}">
<td class="${css.td}">logs:</td> <td class="${css.td}"> logs </td>
<td class="${css.td}">${logs}</td> <td class="${css.td}">${logs}</td>
</tr class="${css.tr}"> </tr class="${css.tr}">
` `

Loading…
Cancel
Save