mirrors/btcpayserver
1
0
Fork 0
mirror of https://github.com/btcpayserver/btcpayserver.git synced 2024-11-19 18:11:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

Simple Payment Request and Pull Payment Views Improvements (#3127)

Browse Source 
* adds border radius to payment request view

* adds border radius to pull payments view

* spacings + font weights

* paddings + font weights

* updates text color

* updates font weights + text colors

* padding consistency

* switches padding to empty state

* update

* another padding fix

* Add "no details provided" when empty description

Co-authored-by: Samuel Adams <samuel.atwood@gmail.com>
This commit is contained in:
dstrukt 2021-11-21 20:56:43 -08:00 committed by GitHub
parent 194c0f14cb
commit 6ff659fb99
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 36 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
BTCPayServer/Views/PaymentRequest/ViewPaymentRequest.cshtml
View File

@ -1,4 +1,4 @@
@using BTCPayServer.Services.Invoices @using BTCPayServer.Services.Invoices
@using BTCPayServer.Client.Models @using BTCPayServer.Client.Models
@using BTCPayServer.Abstractions.Contracts @using BTCPayServer.Abstractions.Contracts
@model BTCPayServer.Models.PaymentRequestViewModels.ViewPaymentRequestViewModel @model BTCPayServer.Models.PaymentRequestViewModels.ViewPaymentRequestViewModel
@ -83,10 +83,10 @@
&nbsp; &nbsp;
<span class="text-nowrap d-print-none" v-text="lastUpdated" v-cloak>@Model.LastUpdated.ToString("g")</span> <span class="text-nowrap d-print-none" v-text="lastUpdated" v-cloak>@Model.LastUpdated.ToString("g")</span>
<span class="text-nowrap d-none d-print-block" v-text="lastUpdatedDate">@Model.LastUpdated.ToString("g")</span> <span class="text-nowrap d-none d-print-block" v-text="lastUpdatedDate">@Model.LastUpdated.ToString("g")</span>
<button type="button" class="btn btn-link d-none d-lg-inline-block d-print-none border-0 p-0 ms-4 only-for-js" v-on:click="window.print" v-cloak> <button type="button" class="btn btn-link fw-semibold d-none d-lg-inline-block d-print-none border-0 p-0 ms-4 only-for-js" v-on:click="window.print" v-cloak>
Print Print
</button> </button>
<button type="button" class="btn btn-link d-none d-lg-inline-block d-print-none border-0 p-0 ms-4 only-for-js" v-on:click="window.copyUrlToClipboard" v-cloak> <button type="button" class="btn btn-link fw-semibold d-none d-lg-inline-block d-print-none border-0 p-0 ms-4 only-for-js" v-on:click="window.copyUrlToClipboard" v-cloak>
Copy Link Copy Link
</button> </button>
</div> </div>
@ -203,34 +203,38 @@
<partial name="_StatusMessage" model="@(new ViewDataDictionary(ViewData){ { "Margin", "mb-4" } })" /> <partial name="_StatusMessage" model="@(new ViewDataDictionary(ViewData){ { "Margin", "mb-4" } })" />
<div class="row"> <div class="row">
<div class="col col-12 col-lg-6 mb-4"> <div class="col col-12 col-lg-6 mb-4">
<div class="bg-tile h-100 m-0 p-3 p-sm-5"> <div class="bg-tile h-100 m-0 p-3 p-sm-5 rounded">
<h2 class="h4 mb-3">Invoice Summary</h2> <h2 class="h4 mb-3">Invoice Summary</h2>
<div v-html="srvModel.description"> @if (!string.IsNullOrEmpty(Model.Description) && Model.Description != "<br>")
@if (!string.IsNullOrEmpty(Model.Description) && Model.Description != "<br>") {
{ <div v-html="srvModel.description">
@Safe.Raw(Model.Description) @Safe.Raw(Model.Description)
} </div>
</div> }
else
{
<p class="text-muted mt-3 mb-0">No details provided.</p>
}
</div> </div>
</div> </div>
<div class="col col-12 col-lg-6 mb-4"> <div class="col col-12 col-lg-6 mb-4">
<div class="bg-tile h-100 m-0 p-3 p-sm-5"> <div class="bg-tile h-100 m-0 p-3 p-sm-5 rounded">
<h2 class="h4 mb-3">Payment Details</h2> <h2 class="h4 mb-3">Payment Details</h2>
<dl class="mb-0 mt-md-4"> <dl class="mb-0 mt-md-4">
<div class="d-flex d-print-inline-block flex-column mb-4 me-5"> <div class="d-flex d-print-inline-block flex-column mb-4 me-5">
<dt class="h4 fw-normal text-nowrap text-primary text-print-default order-2 order-sm-1 mb-0" v-text="srvModel.amountDueFormatted">@Model.AmountDueFormatted</dt> <dt class="h4 fw-semibold text-nowrap text-primary text-print-default order-2 order-sm-1 mb-1" v-text="srvModel.amountDueFormatted">@Model.AmountDueFormatted</dt>
<dd class="text-muted order-1 order-sm-2 mb-1" data-test="amount-due-title">Amount due</dd> <dd class="order-1 order-sm-2 mb-1" data-test="amount-due-title">Amount due</dd>
</div> </div>
<div class="progress bg-light d-none d-sm-flex mb-sm-4 d-print-none" style="height:5px"> <div class="progress bg-light d-none d-sm-flex mb-sm-4 d-print-none" style="height:5px">
<div class="progress-bar bg-primary" role="progressbar" style="width:@((Model.AmountCollected/Model.Amount)*100)%" v-bind:style="{ width: (srvModel.amountCollected/srvModel.amount*100) + '%' }"></div> <div class="progress-bar bg-primary" role="progressbar" style="width:@((Model.AmountCollected/Model.Amount)*100)%" v-bind:style="{ width: (srvModel.amountCollected/srvModel.amount*100) + '%' }"></div>
</div> </div>
<div class="d-flex d-print-inline-block flex-column mb-4 me-5 d-sm-inline-flex mb-sm-0"> <div class="d-flex d-print-inline-block flex-column mb-4 me-5 d-sm-inline-flex mb-sm-0">
<dt class="h4 fw-normal text-nowrap order-2 order-sm-1 mb-0" v-text="srvModel.amountCollectedFormatted">@Model.AmountCollectedFormatted</dt> <dt class="h4 fw-semibold text-nowrap order-2 order-sm-1 mb-1" v-text="srvModel.amountCollectedFormatted">@Model.AmountCollectedFormatted</dt>
<dd class="text-muted order-1 order-sm-2 mb-1">Amount paid</dd> <dd class="order-1 order-sm-2 mb-1">Amount paid</dd>
</div> </div>
<div class="d-flex d-print-inline-block flex-column mb-0 d-sm-inline-flex float-sm-end"> <div class="d-flex d-print-inline-block flex-column mb-0 d-sm-inline-flex float-sm-end">
<dt class="h4 text-sm-end fw-normal text-nowrap order-2 order-sm-1 mb-0" v-text="srvModel.amountFormatted">@Model.AmountFormatted</dt> <dt class="h4 text-sm-end fw-semibold text-nowrap order-2 order-sm-1 mb-1" v-text="srvModel.amountFormatted">@Model.AmountFormatted</dt>
<dd class="text-muted text-sm-end order-1 order-sm-2 mb-1">Total requested</dd> <dd class="text-sm-end order-1 order-sm-2 mb-1">Total requested</dd>
</div> </div>
</dl> </dl>
</div> </div>
@ -238,13 +242,13 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<div class="bg-tile h-100 m-0 p-3 p-sm-5"> <div class="bg-tile h-100 m-0 p-3 p-sm-5 rounded">
<h2 class="h4 mb-3">Payment History</h2> <h2 class="h4 mb-0">Payment History</h2>
<div class="table-responsive"> <div class="table-responsive">
<noscript> <noscript>
@if (Model.Invoices == null || !Model.Invoices.Any()) @if (Model.Invoices == null || !Model.Invoices.Any())
{ {
<p class="text-muted">No payments made yet.</p> <p class="text-muted mt-3 mb-0">No payments made yet.</p>
} }
else else
{ {
@ -310,7 +314,7 @@
</noscript> </noscript>
<template v-if="!srvModel.invoices || srvModel.invoices.length == 0"> <template v-if="!srvModel.invoices || srvModel.invoices.length == 0">
<p class="text-muted">No payments made yet.</p> <p class="text-muted mt-3 mb-0">No payments made yet.</p>
</template> </template>
<template v-else> <template v-else>
<table v-for="invoice of srvModel.invoices" :key="invoice.id" class="invoice table"> <table v-for="invoice of srvModel.invoices" :key="invoice.id" class="invoice table">

24
BTCPayServer/Views/PullPayment/ViewPullPayment.cshtml
View File

@ -93,7 +93,7 @@
} }
<div class="row"> <div class="row">
<div class="col col-12 col-lg-6 mb-4"> <div class="col col-12 col-lg-6 mb-4">
<div class="bg-tile h-100 m-0 p-3 p-sm-5"> <div class="bg-tile h-100 m-0 p-3 p-sm-5 rounded">
@if (!Model.Title.IsNullOrWhiteSpace()) @if (!Model.Title.IsNullOrWhiteSpace())
{ {
<h2 class="h4 mb-3">@Model.Title</h2> <h2 class="h4 mb-3">@Model.Title</h2>
@ -107,7 +107,7 @@
<span class="text-muted text-nowrap">Last Updated</span> <span class="text-muted text-nowrap">Last Updated</span>
&nbsp; &nbsp;
<span class="text-nowrap">@Model.LastRefreshed.ToString("g")</span> <span class="text-nowrap">@Model.LastRefreshed.ToString("g")</span>
<button type="button" class="btn btn-link d-none d-lg-inline-block d-print-none border-0 p-0 ms-4 only-for-js" id="copyLink"> <button type="button" class="btn btn-link fw-semibold d-none d-lg-inline-block d-print-none border-0 p-0 ms-4 only-for-js" id="copyLink">
Copy Link Copy Link
</button> </button>
</div> </div>
@ -126,23 +126,23 @@
</div> </div>
</div> </div>
<div class="col col-12 col-lg-6 mb-4"> <div class="col col-12 col-lg-6 mb-4">
<div class="bg-tile h-100 m-0 p-3 p-sm-5"> <div class="bg-tile h-100 m-0 p-3 p-sm-5 rounded">
<h2 class="h4 mb-3">Payment Details</h2> <h2 class="h4 mb-3">Payment Details</h2>
<dl class="mb-0 mt-md-4"> <dl class="mb-0 mt-md-4">
<div class="d-flex d-print-inline-block flex-column mb-4 me-5"> <div class="d-flex d-print-inline-block flex-column mb-4 me-5">
<dt class="h4 fw-normal text-nowrap text-primary text-print-default order-2 order-sm-1 mb-0">@Model.AmountDueFormatted</dt> <dt class="h4 fw-semibold text-nowrap text-primary text-print-default order-2 order-sm-1 mb-1">@Model.AmountDueFormatted</dt>
<dd class="text-muted order-1 order-sm-2 mb-1">Available claim</dd> <dd class="order-1 order-sm-2 mb-1">Available claim</dd>
</div> </div>
<div class="progress bg-light d-none d-sm-flex mb-sm-4 d-print-none" style="height:5px"> <div class="progress bg-light d-none d-sm-flex mb-sm-4 d-print-none" style="height:5px">
<div class="progress-bar bg-primary" role="progressbar" style="width:@((Model.AmountCollected / Model.Amount) * 100)%"></div> <div class="progress-bar bg-primary" role="progressbar" style="width:@((Model.AmountCollected / Model.Amount) * 100)%"></div>
</div> </div>
<div class="d-flex d-print-inline-block flex-column mb-4 me-5 d-sm-inline-flex mb-sm-0"> <div class="d-flex d-print-inline-block flex-column mb-4 me-5 d-sm-inline-flex mb-sm-0">
<dt class="h4 fw-normal text-nowrap order-2 order-sm-1 mb-0">@Model.AmountCollectedFormatted</dt> <dt class="h4 fw-semibold text-nowrap order-2 order-sm-1 mb-1">@Model.AmountCollectedFormatted</dt>
<dd class="text-muted order-1 order-sm-2 mb-1">Already claimed</dd> <dd class="order-1 order-sm-2 mb-1">Already claimed</dd>
</div> </div>
<div class="d-flex d-print-inline-block flex-column mb-0 d-sm-inline-flex float-sm-end"> <div class="d-flex d-print-inline-block flex-column mb-0 d-sm-inline-flex float-sm-end">
<dt class="h4 text-sm-end fw-normal text-nowrap order-2 order-sm-1 mb-0">@Model.AmountFormatted</dt> <dt class="h4 text-sm-end fw-semibold text-nowrap order-2 order-sm-1 mb-1">@Model.AmountFormatted</dt>
<dd class="text-muted text-sm-end order-1 order-sm-2 mb-1">Claim limit</dd> <dd class="text-sm-end order-1 order-sm-2 mb-1">Claim limit</dd>
</div> </div>
</dl> </dl>
</div> </div>
@ -150,8 +150,8 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<div class="bg-tile h-100 m-0 p-3 p-sm-5"> <div class="bg-tile h-100 m-0 p-3 p-sm-5 rounded">
<h2 class="h4 mb-3">Claims</h2> <h2 class="h4 mb-0">Claims</h2>
<div class="table-responsive"> <div class="table-responsive">
@if (Model.Payouts.Any()) @if (Model.Payouts.Any())
{ {
@ -190,7 +190,7 @@
} }
else else
{ {
<p class="text-muted">No claim made yet.</p> <p class="text-muted mt-3 mb-0">No claim made yet.</p>
} }
</div> </div>
</div> </div>