flip/flipside-js
1
0
Fork 0
mirror of https://github.com/FlipsideCrypto/flipside-js.git synced 2026-02-06 10:48:11 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update styles on table widget.

Browse Source
This commit is contained in:
Jim Myers 2019-01-18 10:20:32 -05:00
parent 45870d0590
commit 3aa54a6e34
3 changed files with 36 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
index.html
View File

@ -19,10 +19,13 @@
width: 500px;
}
#widget-1,
#widget-2 {
#widget-1 {
background: black;
}
#widget-2 {
width: 300px;
background: #33435e;
}
</style>
</head>
<body>
@ -31,14 +34,17 @@
<div class="wrapper"><div id="widget-2"></div></div>
<script>
const flipside = new Flipside("a7936778-4f87-4790-889f-3ab617271458");
const flipside = new Flipside("<YOUR-API-KEY>");
flipside.createFCAS("widget-0", "btc");
flipside.createFCAS("widget-1", "btc", {
logo: false,
mini: true,
dark: true
});
flipside.createTable("widget-2", "btc", { dark: true });
flipside.createTable("widget-2", "btc", {
dark: true,
borderColor: "#737e8d"
});
</script>
</body>
</html>

34
src/table/index.js
View File

@ -63,18 +63,26 @@ export default class Table extends Component {
rank = "s";
}
let tdStyle = this.props.borderColor
? { borderBottom: `1px solid ${this.props.borderColor}` }
: { borderBottom: "1px solid #737e8d" };
const learnMoreUrl = this.props.learnMoreUrl
? this.props.learnMoreUrl
: "https://flipsidecrypto.com/monitors";
return (
<div class={`fs-table fs-table--${dark ? "dark" : "light"}`}>
<table>
<tr class="fs-table-fcas">
<th>FCAS</th>
<td>
<th style={tdStyle}>FCAS</th>
<td style={tdStyle}>
<span class={`fs-table-rank fs-table-rank--${rank}`}>{rank}</span>
</td>
<td>
<td style={tdStyle}>
<span class="fs-table-fcas-score">{fcas.value}</span>
</td>
<td>
<td style={tdStyle}>
7d
<span class={`fs-table-trend fs-table-trend--${fcas.trend}`}>
{calculateDiff(fcas.value, fcas.percent_change)}
@ -83,9 +91,11 @@ export default class Table extends Component {
</tr>
<tr>
<th colspan="2">User Activity</th>
<td>{utility.value}</td>
<td>
<th style={tdStyle} colspan="2">
User Activity
</th>
<td style={tdStyle}>{utility.value}</td>
<td style={tdStyle}>
7d
<span class={`fs-table-trend fs-table-trend--${utility.trend}`}>
{calculateDiff(utility.value, utility.percent_change)}
@ -94,9 +104,11 @@ export default class Table extends Component {
</tr>
<tr>
<th colspan="2">Developer Behavior</th>
<td>{dev.value}</td>
<td>
<th style={tdStyle} colspan="2">
Developer Behavior
</th>
<td style={tdStyle}>{dev.value}</td>
<td style={tdStyle}>
7d
<span class={`fs-table-trend fs-table-trend--${dev.trend}`}>
{calculateDiff(dev.value, dev.percent_change)}
@ -104,7 +116,7 @@ export default class Table extends Component {
</td>
</tr>
</table>
<a class="fs-table-link" href="#">
<a class="fs-table-link" href={learnMoreUrl}>
Want to know more about these scores?
</a>
</div>

7
src/table/styles.scss
View File

@ -1,7 +1,8 @@
.fs-table {
white-space: nowrap;
font-size: 18px;
font-size: 14px;
color: #000;
font-weight: 400;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@ -24,14 +25,13 @@
td {
text-align: right;
padding-left: 5%;
padding-left: 10px;
}
th,
td {
font-weight: normal;
line-height: 44px;
border-bottom: 1px solid #ccc;
}
}
@ -54,7 +54,6 @@
font-weight: bold;
border-radius: 2px;
line-height: 28px;
margin-bottom: 5px;
text-transform: uppercase;
color: #000;
}