mirror of
https://github.com/aljazceru/btcpayserver.git
synced 2025-12-30 04:04:21 +01:00
d958b1808c
* Make Sync Modal remeber collapsed state This makes the sync modal use the bootstrap collapse component instead of animatecss. It also removed animatecss as it seemed to be only used there. Also, it will now remember if you collapsed it between page loads which since the new eth stuff keeps asking to configure it on my dev env. * Sync modal improvements - Use chevron icon and indicate toggle state - Smooth opening animation by toggling element without padding - Better modal content padding - Run JS immediately to prevent flickering Co-authored-by: Dennis Reimann <mail@dennisreimann.de>
62 lines
2.5 KiB
Plaintext
62 lines
2.5 KiB
Plaintext
@using BTCPayServer.Contracts
|
|
@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-toggle="collapse" data-target="#syncModalContent">
|
|
<h4 class="modal-title">Your nodes are synching...</h4>
|
|
<span class="fa fa-chevron-down" style="font-size:1em;"></span>
|
|
</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>
|
|
<a href="https://www.youtube.com/watch?v=OrYDehC-8TU" target="_blank">Watch this video</a> to understand the importance of blockchain synchronization.
|
|
</p>
|
|
<p class="mb-0">If you really don't want to synch and you are familiar with the command line, check <a href="https://github.com/btcpayserver/btcpayserver-docker/blob/master/contrib/FastSync/README.md" target="_blank">FastSync</a>.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
var syncModalContent = $('#syncModalContent');
|
|
if (localStorage.getItem("sync-collapsed")){
|
|
syncModalContent.removeClass("show");
|
|
}
|
|
syncModalContent.on('hidden.bs.collapse', function () {
|
|
localStorage.setItem("sync-collapsed", "true");
|
|
}).on('shown.bs.collapse', function () {
|
|
localStorage.removeItem("sync-collapsed");
|
|
});
|
|
</script>
|
|
<style type="text/css">
|
|
#syncModal {
|
|
position: fixed;
|
|
bottom: 10px;
|
|
right: 10px;
|
|
margin: 0;
|
|
z-index: 1000;
|
|
width: 500px;
|
|
max-width: 100%;
|
|
}
|
|
#syncModal .modal-body {
|
|
max-height: 400px;
|
|
overflow-y: scroll;
|
|
}
|
|
#syncModal .fa-chevron-down {
|
|
transition: transform .35s;
|
|
}
|
|
#syncModal .collapsed .fa-chevron-down {
|
|
transform: rotate(-90deg);
|
|
}
|
|
</style>
|
|
}
|