Skip to content
This repository has been archived by the owner on Jan 5, 2024. It is now read-only.

include external markets on landing page #150

Merged
merged 1 commit into from
Nov 3, 2016
Merged

include external markets on landing page #150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
237 changes: 115 additions & 122 deletions src/app/app.js
View file
Open in desktop

Large diffs are not rendered by default.

484 changes: 272 additions & 212 deletions src/app/landing/landing.js
View file
Open in desktop

Large diffs are not rendered by default.

138 changes: 70 additions & 68 deletions src/app/landing/landing.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,101 +14,92 @@
}

.landing h5 {
font-size:14px;
font-size:12px;
font-weight:bold;
text-align:left;
margin:5px;
margin-top:15px;
overflow:hidden;
margin:15px 5px 5px 5px;
}

.landing sign {
margin-right: -4px;
}

.landing h5 b {
margin-top: 5px;
display: inline-block
}

.landing h5 small {
font-size:90%;
}

.landing .stats ul {
list-style:none;
margin:0;
margin:10px 5px 30px 5px;
display:table;
width:100%;
height:250px;
border:1px solid #eee;
background:#f8f8f8;
border-radius:2px;
color:#555;
}

.landing .stats li {
padding:8px;
border-radius:2px;
margin:3px;
line-height:25px;
line-height:27px;
font-size: 13px;
display:table-row;
color:#999;
}

.landing .stats .volume-stats li:hover {
background: #eee;
}

.landing .stats .status {
width: 5px;
display: table-cell;
border-bottom: 1px solid #e5e5e5;
}

.landing .stats li.selected {
background: #e5e5e5 !important;
color: #000;
}

.landing .stats li.selected .status {
background: #2A98D0;
}

.landing .stats label {
vertical-align:middle;
display:table-cell;
text-align:left;
color:#888;
padding:5px 10px 5px 20px;
padding:5px 12px;
border-bottom:1px solid #e5e5e5;
cursor: pointer;
}

.landing .stats .volume-stats label {
padding-left: 7px;
}

.landing .stats label small {
font-size:70%;
color:#aaa;
font-size: 85%;
opacity: .65;
}

.landing .stat {
vertical-align: middle;
display: table-cell;
font-size: 18px;
font-size: 16px;
text-align: right;
padding: 5px;
padding: 5px 10px;
border-bottom: 1px solid #e5e5e5;
font-weight: bold;
}

.landing .details {
vertical-align:middle;
display:table-cell;
font-size:10px;
cursor:pointer;
color:#ccc;
min-width: 65px;
border-bottom:1px solid #e5e5e5;
font-weight:bold;

img {
width:21px;
margin-bottom:2px;
opacity:.15;
padding: 3px;
border-radius: 20px;
background:#aaa;
}
}

.landing .details:hover {
text-decoration:underline;
color:#999;

img {
width: 21px;
opacity: .4;
background: #aaa;
}
}

.landing .details .selected {
color:#666;

img {
opacity:1;
background:#ccc;
}
cursor: pointer;
color: #555;
}

.landing .stat small {
color:#777;
font-weight:normal;
.landing li.selected .stat {
color: #111;
}

.landing .stat .loader {
Expand All @@ -118,13 +109,14 @@
}

.landing .stats li:last-child .stat,
.landing .stats li:last-child .status,
.landing .stats li:last-child label,
.landing .stats li:last-child .details {
border-bottom:none;
}

.landing #metricDetail {
height:250px;
height:320px;
margin-top:20px;
}

Expand Down Expand Up @@ -169,13 +161,26 @@
}

.dark .landing ul {
background:#1a1a1a;
border-color:#252525;
background:#171717;
border-color:#333;
}

.dark .landing .stats .volume-stats li:hover {
background: #343638;
}

.dark .landing .stats li.selected {
background: #485057 !important;
color: #ddd;
}

.dark .landing .stats li.selected .stat {
color: #fff;
}

.dark .landing .stat,
.dark .stats label,
.dark .stats .details {
.dark .stats .status {
border-bottom-color:#2a2a2a;
}

Expand Down Expand Up @@ -206,9 +211,6 @@
}
}

.dark .landing .stats label small {
color:#666;
}

.dark .landing .stat small {
font-weight:bold;
Expand Down
99 changes: 55 additions & 44 deletions src/app/landing/landing.tpl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,78 +9,89 @@ <h3>Welcome to Ripple Charts</h3>
</p>
</div>
<div class="row">
<div class="col-md-6 stats">
<div class="col-md-6 stats">
<h5>
Ripple Network Stats
<select id="valueCurrency" class="valueCurrencySelect"></select>
<span class="valueRateDisplay" ng-bind="valueRateDisplay"></span>
<b>Volume Stats (24 hours)</b>
<select class="valueCurrencySelect" ng-model="selectedCurrency"
ng-options="currency for currency in currencies"></select>
<span class="valueRateDisplay" ng-bind="valueRatePair"></span>
<span class="valueRateDisplay"
ng-show="selectedCurrency !== 'XRP'"
ng-bind="valueRate"></span>
</h5>
<ul>
<li>
<label>XRP Capitalization:</label>
<ul class="volume-stats">
<li ng-class="{selected:selectedMetric === metrics.totalTradeVolume}"
ng-click="showMetricDetails('totalTradeVolume')">
<div class="status"></div>
<label ng-bind-html="metrics.totalTradeVolume.label | trust"></label>
<div class="stat">
<span ng-show="valueRate" ng-bind="xrpCapitalization"></span>
<img ng-hide="xrpCapitalization" src="assets/images/rippleThrobber.png" class="loader"/>
<sign ng-show="metrics.totalTradeVolume.converted"
ng-bind="sign"></sign>
<span ng-show="metrics.totalTradeVolume.converted" ng-bind="metrics.totalTradeVolume.converted | number:2"></span>
<img ng-hide="metrics.totalTradeVolume.converted" src="assets/images/rippleThrobber.png" class="loader"/>
</div>
<div class="details"></div>
</li>
<li>
<label>24hr Payment Volume:</label>
<li ng-class="{selected:selectedMetric === metrics.tradeVolumeRCL}"
ng-click="showMetricDetails('tradeVolumeRCL')">
<div class="status"></div>
<label ng-bind-html="metrics.tradeVolumeRCL.label | trust"></label>
<div class="stat">
<span ng-show="valueRate" ng-bind="paymentVolume"></span>
<img ng-hide="paymentVolume" src="assets/images/rippleThrobber.png" class="loader"/>
<sign ng-show="metrics.tradeVolumeRCL.converted"
ng-bind="sign"></sign>
<span ng-show="metrics.tradeVolumeRCL.converted" ng-bind="metrics.tradeVolumeRCL.converted | number:2"></span>
<img ng-hide="metrics.tradeVolumeRCL.converted" src="assets/images/rippleThrobber.png" class="loader"/>
</div>
<div class="details">
<div ng-show="paymentVolume && paymentVolume != ' '" ng-click="metricDetail='paymentVolume'" ng-class="{selected : metricDetail == 'paymentVolume' }">
Detail
<img src="assets/images/triangle.svg"/>
</div>
</li>
<li ng-class="{selected:selectedMetric === metrics.paymentVolumeRCL}"
ng-click="showMetricDetails('paymentVolumeRCL')">
<div class="status"></div>
<label ng-bind-html="metrics.paymentVolumeRCL.label | trust"></label>
<div class="stat">
<sign ng-show="metrics.paymentVolumeRCL.converted"
ng-bind="sign"></sign>
<span ng-show="metrics.paymentVolumeRCL.converted" ng-bind="metrics.paymentVolumeRCL.converted | number:2"></span>
<img ng-hide="metrics.paymentVolumeRCL.converted" src="assets/images/rippleThrobber.png" class="loader"/>
</div>
</li>
</ul>
<h5>
Ripple Network Stats
</h5>
<ul>
<li>
<label>24hr Trade Volume:</label>
<label>Total XRP</label>
<div class="stat">
<span ng-show="valueRate" ng-bind="tradeVolume"></span>
<img ng-hide="tradeVolume" src="assets/images/rippleThrobber.png" class="loader"/>
</div>
<div class="details">
<div ng-show="tradeVolume && tradeVolume != ' '" ng-click="metricDetail='tradeVolume'" ng-class="{selected : metricDetail == 'tradeVolume' }">
Detail
<img src="assets/images/triangle.svg"/>
</div>
<span ng-bind="totalXRP | number:2"></span>
<img ng-hide="totalXRP"
src="assets/images/rippleThrobber.png" class="loader"/>
</div>
</li>
<li>
<label>Total XRP:</label>
<label ng-bind-html="metrics.capitalizationXRP.label | trust"></label>
<div class="stat">
<span ng-bind="totalCoins"></span>
<img ng-hide="totalCoins" src="assets/images/rippleThrobber.png" class="loader"/>
<sign ng-show="metrics.capitalizationXRP.converted"
ng-bind="sign"></sign>
<span ng-show="metrics.capitalizationXRP.converted" ng-bind="metrics.capitalizationXRP.converted | number:2"></span>
<img ng-hide="metrics.capitalizationXRP.converted" src="assets/images/rippleThrobber.png" class="loader"/>
</div>
<div class="details"></div>
</li>
<li>
<label>Ledger #:</label>
<label>Ledger Number</label>
<div class="stat">
<span ng-bind="ledgerIndex"></span>
<img ng-hide="ledgerIndex" src="assets/images/rippleThrobber.png" class="loader"/>
<span ng-show="ledgerIndex" ng-bind="ledgerIndex | number:0"></span>
<img ng-hide="ledgerIndex" src="assets/images/rippleThrobber.png" class="loader"/>
</div>
<div class="details"></div>
</li>
<li>
<label># of Ripple accounts:</label>
<label ng-bind-html="metrics.numAccounts.label | trust"></label>
<div class="stat">
<span ng-bind="totalAccounts"></span>
<img ng-hide="totalAccounts" src="assets/images/rippleThrobber.png" class="loader"/>
<span ng-bind="metrics.numAccounts.total | number:0 "></span>
<img ng-hide="metrics.numAccounts.total" src="assets/images/rippleThrobber.png" class="loader"/>
</div>
<div class="details"></div>
</li>
</ul>
</div>
<div class="col-md-6">
<h5>
<span ng-bind="metricDetailTitle"></span>
<a class="explore" href="#/trade-volume" ng-show="metricDetail === 'tradeVolume'">Explore</a>
</h5>
<div id="metricDetail"></div>
</div>
</div>
Expand Down
Loading