Sync modal: Adjust to Bootstrap changes (#4485)

Fixes #4484.
This commit is contained in:
d11n
2022-12-31 09:24:29 +01:00
committed by GitHub
parent eb6d01c21e
commit e96feb36cd

View File

@@ -2,26 +2,27 @@
@inject IEnumerable<ISyncSummaryProvider> SyncSummaryProviders;
@if (SyncSummaryProviders.Any(provider => !provider.AllAvailable()))
{
<!-- Modal -->
<div id="syncModal" class="modal-dialog">
<div class="modal-content">
<a class="modal-header btn-link border-0 text-decoration-none cursor-pointer align-items-center" data-bs-toggle="collapse" data-bs-target="#syncModalContent">
<h4 class="modal-title h5 fw-semibold">Your nodes are synching …</h4>
<vc:icon symbol="caret-down"/>
</a>
<div id="syncModalContent" class="collapse show">
<div class="modal-body pt-0">
<p>Your node is synching the entire blockchain and validating the consensus rules.</p>
@foreach (var provider in SyncSummaryProviders)
{
<partial name="@provider.Partial"/>
}
<p class="mb-0">
<a href="https://www.youtube.com/watch?v=OrYDehC-8TU" target="_blank" rel="noreferrer noopener">Watch this video</a>
to understand the importance of blockchain synchronization.
If you really don't want to sync and you are familiar with the command line, check
<a href="https://docs.btcpayserver.org/Docker/fastsync/" target="_blank" rel="noreferrer noopener">FastSync</a>.
</p>
<div id="syncModal" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<a class="modal-header btn-link border-0 text-decoration-none cursor-pointer align-items-center" data-bs-toggle="collapse" data-bs-target="#syncModalContent">
<h4 class="modal-title h5 fw-semibold">Your nodes are synching …</h4>
<vc:icon symbol="caret-down"/>
</a>
<div id="syncModalContent" class="collapse show">
<div class="modal-body pt-0">
<p>Your node is synching the entire blockchain and validating the consensus rules.</p>
@foreach (var provider in SyncSummaryProviders)
{
<partial name="@provider.Partial"/>
}
<p class="mb-0">
<a href="https://www.youtube.com/watch?v=OrYDehC-8TU" target="_blank" rel="noreferrer noopener">Watch this video</a>
to understand the importance of blockchain synchronization.
If you really don't want to sync and you are familiar with the command line, check
<a href="https://docs.btcpayserver.org/Docker/fastsync/" target="_blank" rel="noreferrer noopener">FastSync</a>.
</p>
</div>
</div>
</div>
</div>
@@ -29,16 +30,24 @@
<style>
#syncModal {
--btcpay-modal-border-color: var(--btcpay-body-border-light);
--outer-margin-horizontal: var(--content-padding-horizontal);
--outer-margin-vertical: 50px;
position: fixed;
display: unset;
z-index: 1040;
height: auto;
top: auto;
left: auto;
bottom: 0;
right: 0;
margin: var(--outer-margin-vertical) var(--outer-margin-horizontal);
width: 500px;
overflow: hidden;
max-width: calc(100% - var(--outer-margin-horizontal) * 2);
}
#syncModal .modal-dialog {
margin: 0;
}
#syncModal .modal-body {
/* 92px is so that the header is still displayed */
max-height: min(360px, calc(100vh - 92px - var(--outer-margin-vertical) * 2));