Improve custom node details toggling

This commit is contained in:
Dennis Reimann 2021-04-21 14:38:53 +02:00
parent 8a9bea4603
commit aae5cce175
No known key found for this signature in database
GPG Key ID: 5009E1797F03F8D0

View File

@ -70,6 +70,29 @@
padding: .75rem 1rem; padding: .75rem 1rem;
border-radius: .25rem; border-radius: .25rem;
} }
#CustomSetup > ul > li {
padding: 0;
}
#CustomSetup > ul > li + li {
border-top: 1px solid var(--btcpay-border-color-medium);
}
a[data-toggle="collapse"] {
display: flex;
align-items: center;
justify-content: space-between;
color: inherit;
padding: 1rem 0;
text-decoration: none
}
a[data-toggle="collapse"] .icon {
transform: rotate(90deg);
transition: transform 200ms;
width: 24px;
height: 24px;
}
a[data-toggle="collapse"][aria-expanded="true"] .icon {
transform: rotate(270deg);
}
</style> </style>
<form method="post" class="mt-n2 text-center"> <form method="post" class="mt-n2 text-center">
@ -94,16 +117,15 @@
<button id="test" name="command" type="submit" value="test" class="btn btn-secondary text-nowrap mb-2">Test connection</button> <button id="test" name="command" type="submit" value="test" class="btn btn-secondary text-nowrap mb-2">Test connection</button>
</div> </div>
<span asp-validation-for="ConnectionString" class="text-danger"></span> <span asp-validation-for="ConnectionString" class="text-danger"></span>
<p class="mt-4 mb-2"> <p class="mt-4 mb-2">BTCPay Server currently supports:</p>
BTCPay Server currently supports:
<span class="text-secondary">(click to show examples)</span>
</p>
<ul> <ul>
<li> <li>
<a class="d-inline-block text-decoration-none" data-toggle="collapse" href="#c-lightning-notes" role="button" aria-expanded="false" aria-controls="c-lightning-notes">c-lightning</a> <a data-toggle="collapse" href="#c-lightning-notes" role="button" aria-expanded="false" aria-controls="c-lightning-notes">
via TCP or unix domain socket connection <span><strong>c-lightning</strong> via TCP or unix domain socket connection</span>
<vc:icon symbol="caret-right"/>
</a>
<div id="c-lightning-notes" class="collapse"> <div id="c-lightning-notes" class="collapse">
<ul class="py-2"> <ul class="pb-3">
<li> <li>
<code><b>type=</b>clightning;<b>server=</b>unix://root/.lightning/lightning-rpc</code> <code><b>type=</b>clightning;<b>server=</b>unix://root/.lightning/lightning-rpc</code>
</li> </li>
@ -114,10 +136,12 @@
</div> </div>
</li> </li>
<li> <li>
<a class="d-inline-block text-decoration-none" data-toggle="collapse" href="#charge-notes" role="button" aria-expanded="false" aria-controls="charge-notes">Lightning Charge</a> <a data-toggle="collapse" href="#charge-notes" role="button" aria-expanded="false" aria-controls="charge-notes">
via HTTPS <span><strong>Lightning Charge</strong> via HTTPS</span>
<vc:icon symbol="caret-right"/>
</a>
<div id="charge-notes" class="collapse"> <div id="charge-notes" class="collapse">
<ul class="py-2"> <ul class="pb-3">
<li> <li>
<code><b>type=</b>charge;<b>server=</b>https://charge:8080/;<b>api-token=</b>myapitoken...</code> <code><b>type=</b>charge;<b>server=</b>https://charge:8080/;<b>api-token=</b>myapitoken...</code>
</li> </li>
@ -125,10 +149,12 @@
</div> </div>
</li> </li>
<li> <li>
<a class="d-inline-block text-decoration-none" data-toggle="collapse" href="#eclair-notes" role="button" aria-expanded="false" aria-controls="eclair-notes">Eclair</a> <a data-toggle="collapse" href="#eclair-notes" role="button" aria-expanded="false" aria-controls="eclair-notes">
via HTTPS <span><strong>Eclair</strong> via HTTPS</span>
<vc:icon symbol="caret-right"/>
</a>
<div id="eclair-notes" class="collapse"> <div id="eclair-notes" class="collapse">
<ul class="py-2"> <ul class="pb-3">
<li> <li>
<code><b>type=</b>eclair;<b>server=</b>https://eclair:8080/;<b>password=</b>eclairpassword...</code> <code><b>type=</b>eclair;<b>server=</b>https://eclair:8080/;<b>password=</b>eclairpassword...</code>
</li> </li>
@ -136,10 +162,12 @@
</div> </div>
</li> </li>
<li> <li>
<a class="d-inline-block text-decoration-none" data-toggle="collapse" href="#lnd-notes" role="button" aria-expanded="false" aria-controls="lnd-notes">LND</a> <a data-toggle="collapse" href="#lnd-notes" role="button" aria-expanded="false" aria-controls="lnd-notes">
via the REST proxy <span><strong>LND</strong> via the REST proxy</span>
<vc:icon symbol="caret-right"/>
</a>
<div id="lnd-notes" class="collapse"> <div id="lnd-notes" class="collapse">
<ul class="py-2"> <ul class="pb-3">
<li> <li>
<code><b>type=</b>lnd-rest;<b>server=</b>https://mylnd:8080/;<b>macaroon=</b>abef263adfe...</code> <code><b>type=</b>lnd-rest;<b>server=</b>https://mylnd:8080/;<b>macaroon=</b>abef263adfe...</code>
</li> </li>