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

Commit

Permalink
include external markets on landing page (#150)
Browse files Browse the repository at this point in the history
  • Loading branch information
@shekenahglory
shekenahglory authored Nov 3, 2016
1 parent 6f2fff5 commit 57be3b1
Show file tree
Hide file tree
Showing 11 changed files with 1,249 additions and 1,043 deletions.
237 changes: 115 additions & 122 deletions src/app/app.js
View file

Large diffs are not rendered by default.

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

Large diffs are not rendered by default.

138 changes: 70 additions & 68 deletions src/app/landing/landing.less
View file
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
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

0 comments on commit 57be3b1

Please sign in to comment.