Commit 1ac03a7c authored by ninabreznik's avatar ninabreznik Committed by yann300

Improve styling for terminal logs and details table

parent 84a30d55
...@@ -215,7 +215,7 @@ ...@@ -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` ...@@ -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` ...@@ -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) { ...@@ -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}">
` `
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment