Hover indicator and handling case with only one currency

This commit is contained in:
rockstardev 2018-07-17 22:54:09 -05:00
parent a2d17bfa7e
commit c40b47b1dd
2 changed files with 50 additions and 28 deletions

View File

@ -42,27 +42,36 @@
</div>
</div>
<div class="single-item-order__right">
<div class="payment__currencies" onclick="openPaymentMethodDialog()">
<img v-bind:src="srvModel.cryptoImage" />
<span>
@if (Model.AvailableCryptos.Count == 1)
{
<div class="payment__currencies">
<img v-bind:src="srvModel.cryptoImage" />
{{srvModel.paymentMethodName}}
({{srvModel.cryptoCode}})
</span>
</div>
<div id="vexPopupDialog">
<ul class="vexmenu">
@foreach (var crypto in Model.AvailableCryptos)
{
<li class="vexmenuitem">
<a href="@crypto.Link" onclick="return closePaymentMethodDialog('@crypto.PaymentMethodId');">
<img alt="@crypto.PaymentMethodName" src="@crypto.CryptoImage" />
@crypto.PaymentMethodName
<span>@crypto.CryptoCode</span>
</a>
</li>
}
</ul>
</div>
</div>
}
else
{
<div class="payment__currencies" onclick="openPaymentMethodDialog()">
<img v-bind:src="srvModel.cryptoImage" />
<span class="clickable_underline">{{srvModel.paymentMethodName}} ({{srvModel.cryptoCode}})</span>
<span class="clickable_indicator fa fa-angle-right"></span>
</div>
<div id="vexPopupDialog">
<ul class="vexmenu">
@foreach (var crypto in Model.AvailableCryptos)
{
<li class="vexmenuitem">
<a href="@crypto.Link" onclick="return closePaymentMethodDialog('@crypto.PaymentMethodId');">
<img alt="@crypto.PaymentMethodName" src="@crypto.CryptoImage" />
@crypto.PaymentMethodName
<span>@crypto.CryptoCode</span>
</a>
</li>
}
</ul>
</div>
}
<div class="payment__spinner">
<partial name="Checkout-Spinner" />
</div>

View File

@ -28,13 +28,13 @@
height: 24px;
}
.vexmenuitem:hover {
background-color: #eee;
}
.vexmenuitem:hover {
background-color: #eee;
}
.vexmenuitem:last-child {
border-bottom: none;
}
.vexmenuitem:last-child {
border-bottom: none;
}
#vexPopupDialog {
display: none;
@ -49,6 +49,19 @@
height: 32px;
}
.payment__currencies span {
border-bottom: 1px dotted gray;
}
.clickable_underline {
border-bottom: 1px dotted #ccc;
}
.payment__currencies:hover .clickable_underline {
border-bottom: 1px dotted black;
}
.clickable_indicator {
margin-right: -10px;
opacity: 0.3;
}
.payment__currencies:hover .clickable_indicator {
opacity: 1;
}