Index/polyplus
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

minor: redesign debug page to use bootstrap collapse elements

Browse source
This commit is contained in:
Index 2024-07-01 20:07:05 -05:00
parent 5294df3e1d
commit 4fce8c95cc
1 changed files with 32 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
js/extra-pages.js
View file

@ -256,6 +256,10 @@ if (window.location.pathname.split('/')[3] === 'polyplus' && window.location.has
font-size: 0.9rem; font-size: 0.9rem;
margin-top: -4px; margin-top: -4px;
} }
.card:has([data-bs-toggle="collapse"]):not(:has(.card-body.collapse.show)) a:has(.card-header), .card:has([data-bs-toggle="collapse"]):not(:has(.card-body.collapse.show)) .card-header {
border-radius: inherit;
}
</style> </style>
<div class="text-center mb-3"> <div class="text-center mb-3">
<h1 class="text-center" style="font-size: 4.6rem;">Poly+ Debug</h1> <h1 class="text-center" style="font-size: 4.6rem;">Poly+ Debug</h1>
@ -264,9 +268,13 @@ if (window.location.pathname.split('/')[3] === 'polyplus' && window.location.has
<div class="row"> <div class="row">
<div class="col" style="padding-left: 0px;"> <div class="col" style="padding-left: 0px;">
<div class="card mb-3"> <div class="card mb-3">
<div class="card-body"> <a class="text-reset" data-bs-toggle="collapse" href="#settings" role="button" aria-expanded="false" aria-controls="settings">
<span class="badge bg-primary mb-1">Sync</span> <div class="card-header">
<h2>Settings</h2> <span class="badge bg-primary">Sync</span>
Settings
</div>
</a>
<div class="card-body collapse" id="settings">
<div style="padding: 10px; background: #171717; font-family: monospace; color: orange; font-size: 0.8rem; border-radius: 10px; position: relative;"> <div style="padding: 10px; background: #171717; font-family: monospace; color: orange; font-size: 0.8rem; border-radius: 10px; position: relative;">
${JSON.stringify((sync.PolyPlus_Settings || {}), null, 2) ${JSON.stringify((sync.PolyPlus_Settings || {}), null, 2)
.replaceAll('\n','<br>') .replaceAll('\n','<br>')
@ -277,9 +285,13 @@ if (window.location.pathname.split('/')[3] === 'polyplus' && window.location.has
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div class="card-body"> <a class="text-reset" data-bs-toggle="collapse" href="#inventory-cache" role="button" aria-expanded="false" aria-controls="inventory-cache">
<span class="badge bg-secondary mb-1">Local</span> <div class="card-header">
<h3>Inventory Cache</h3> <span class="badge bg-secondary">Local</span>
Inventory Cache
</div>
</a>
<div class="card-body collapse" id="inventory-cache">
<div style="padding: 10px; background: #171717; font-family: monospace; color: orange; font-size: 0.8rem; border-radius: 10px; position: relative;"> <div style="padding: 10px; background: #171717; font-family: monospace; color: orange; font-size: 0.8rem; border-radius: 10px; position: relative;">
${JSON.stringify((local.PolyPlus_InventoryCache || {data: [], requested: "never"}), null, 2) ${JSON.stringify((local.PolyPlus_InventoryCache || {data: [], requested: "never"}), null, 2)
.replaceAll('\n','<br>') .replaceAll('\n','<br>')
@ -299,9 +311,13 @@ if (window.location.pathname.split('/')[3] === 'polyplus' && window.location.has
</div> </div>
</div> </div>
<div class="card mb-3"> <div class="card mb-3">
<div class="card-body"> <a class="text-reset" data-bs-toggle="collapse" href="#pinned-games" role="button" aria-expanded="false" aria-controls="pinned-games">
<span class="badge bg-primary mb-1">Sync</span> <div class="card-header">
<h3>Pinned Games (${(sync.PolyPlus_PinnedGames || []).length})</h3> <span class="badge bg-primary">Sync</span>
Pinned Games (${(sync.PolyPlus_PinnedGames || []).length})
</div>
</a>
<div class="card-body collapse" id="pinned-games">
<div style="padding: 10px; background: #171717; font-family: monospace; color: orange; font-size: 0.8rem; border-radius: 10px; position: relative;"> <div style="padding: 10px; background: #171717; font-family: monospace; color: orange; font-size: 0.8rem; border-radius: 10px; position: relative;">
${JSON.stringify((sync.PolyPlus_PinnedGames || []), null, 2) ${JSON.stringify((sync.PolyPlus_PinnedGames || []), null, 2)
.replaceAll('\n','<br>') .replaceAll('\n','<br>')
@ -312,9 +328,13 @@ if (window.location.pathname.split('/')[3] === 'polyplus' && window.location.has
</div> </div>
</div> </div>
<div class="card mb-3"> <div class="card mb-3">
<div class="card-body"> <a class="text-reset" data-bs-toggle="collapse" href="#item-wishlist" role="button" aria-expanded="false" aria-controls="item-wishlist">
<span class="badge bg-primary mb-1">Sync</span> <div class="card-header">
<h3>Item Wishlist (${(sync.PolyPlus_ItemWishlist || []).length})</h3> <span class="badge bg-primary">Sync</span>
Item Wishlist (${(sync.PolyPlus_ItemWishlist || []).length})
</div>
</a>
<div class="card-body collapse" id="item-wishlist">
<div style="padding: 10px; background: #171717; font-family: monospace; color: orange; font-size: 0.8rem; border-radius: 10px; position: relative;"> <div style="padding: 10px; background: #171717; font-family: monospace; color: orange; font-size: 0.8rem; border-radius: 10px; position: relative;">
${JSON.stringify((sync.PolyPlus_ItemWishlist || []), null, 2) ${JSON.stringify((sync.PolyPlus_ItemWishlist || []), null, 2)
.replaceAll('\n','<br>') .replaceAll('\n','<br>')