OwlBoard
/
owlboard-svelte
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Run prettier

This commit is contained in:
Fred Boniface 2024-06-23 23:48:40 +01:00
parent 3db490a0bb
commit 4fbec34f24
2 changed files with 69 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
src/routes/more/statistics/+page.svelte
View File

@ -13,7 +13,7 @@
return await res.json(); return await res.json();
} }
function U2L(input: Date|number): string { function U2L(input: Date | number): string {
if (input instanceof Date) { if (input instanceof Date) {
return input.toLocaleString(); return input.toLocaleString();
} }
@ -68,69 +68,69 @@
<h2>Browser Features</h2> <h2>Browser Features</h2>
{#await featureDetect()} {#await featureDetect()}
Checking browser features Checking browser features
{:then features} {:then features}
<h3>Critical Features</h3> <h3>Critical Features</h3>
{#if !features.critical} {#if !features.critical}
<p>OwlBoard will not function properly without these browser features. If you see any crosses here <p>
you may need to update your browser or choose another browser. Chrome, Edge, Firefox, Brave & Samsung Browser OwlBoard will not function properly without these browser features. If you see any crosses here you may need to update your browser or choose another browser. Chrome,
have been tested. Edge, Firefox, Brave & Samsung Browser have been tested.
</p> </p>
{/if} {/if}
<ul class="feature-list"> <ul class="feature-list">
<li> <li>
Fetch <span class="feature-status {features.missing.includes('fetch') ? 'cross' : 'tick'}"> Fetch <span class="feature-status {features.missing.includes('fetch') ? 'cross' : 'tick'}">
{features.missing.includes('fetch') ? '✗' : '✓'} {features.missing.includes("fetch") ? "✗" : "✓"}
</span> </span>
</li> </li>
<li> <li>
Local Storage <span class="feature-status {features.missing.includes('localStorage') ? 'cross' : 'tick'}"> Local Storage <span class="feature-status {features.missing.includes('localStorage') ? 'cross' : 'tick'}">
{features.missing.includes('localStorage') ? '✗' : '✓'} {features.missing.includes("localStorage") ? "✗" : "✓"}
</span> </span>
</li> </li>
<li> <li>
Session Storage <span class="feature-status {features.missing.includes('sessionStorage') ? 'cross' : 'tick'}"> Session Storage <span class="feature-status {features.missing.includes('sessionStorage') ? 'cross' : 'tick'}">
{features.missing.includes('sessionStorage') ? '✗' : '✓'} {features.missing.includes("sessionStorage") ? "✗" : "✓"}
</span> </span>
</li> </li>
<li> <li>
Promises <span class="feature-status {features.missing.includes('promise') ? 'cross' : 'tick'}"> Promises <span class="feature-status {features.missing.includes('promise') ? 'cross' : 'tick'}">
{features.missing.includes('promise') ? '✗' : '✓'} {features.missing.includes("promise") ? "✗" : "✓"}
</span> </span>
</li> </li>
</ul> </ul>
<h3>Nice-to-have Features</h3> <h3>Nice-to-have Features</h3>
{#if !features.nice} {#if !features.nice}
<p>OwlBoard may run slowly or be missing some functions without these browser features. If you see any crosses here <p>
you may want to update your browser or choose another browser for improved performance. Chrome, Edge, Firefox, OwlBoard may run slowly or be missing some functions without these browser features. If you see any crosses here you may want to update your browser or choose another
Brave & Samsung Browser have been tested. browser for improved performance. Chrome, Edge, Firefox, Brave & Samsung Browser have been tested.
</p> </p>
{/if} {/if}
<ul class="feature-list"> <ul class="feature-list">
<li> <li>
Geolocation <span class="feature-status {features.missing.includes('geolocation') ? 'cross' : 'tick'}"> Geolocation <span class="feature-status {features.missing.includes('geolocation') ? 'cross' : 'tick'}">
{features.missing.includes('geolocation') ? '✗' : '✓'} {features.missing.includes("geolocation") ? "✗" : "✓"}
</span> </span>
</li> </li>
<li> <li>
Service Worker <span class="feature-status {features.missing.includes('serviceWorker') ? 'cross' : 'tick'}"> Service Worker <span class="feature-status {features.missing.includes('serviceWorker') ? 'cross' : 'tick'}">
{features.missing.includes('serviceWorker') ? '✗' : '✓'} {features.missing.includes("serviceWorker") ? "✗" : "✓"}
</span> </span>
</li> </li>
<li> <li>
Dialog <span class="feature-status {features.missing.includes('dialog') ? 'cross' : 'tick'}"> Dialog <span class="feature-status {features.missing.includes('dialog') ? 'cross' : 'tick'}">
{features.missing.includes('dialog') ? '✗' : '✓'} {features.missing.includes("dialog") ? "✗" : "✓"}
</span> </span>
</li> </li>
<li> <li>
Popover API <span class="feature-status {features.missing.includes('popover') ? 'cross' : 'tick'}"> Popover API <span class="feature-status {features.missing.includes('popover') ? 'cross' : 'tick'}">
{features.missing.includes('popover') ? '✗' : '✓'} {features.missing.includes("popover") ? "✗" : "✓"}
</span> </span>
</li> </li>
</ul> </ul>
{:catch error} {:catch error}
Failed to detect browser features: {error.message} Failed to detect browser features: {error.message}
{/await} {/await}
<Nav /> <Nav />
@ -148,34 +148,34 @@
margin-top: 8px; margin-top: 8px;
} }
.feature-list { .feature-list {
list-style-type: none; /* Remove bullet points */ list-style-type: none; /* Remove bullet points */
padding: 0; padding: 0;
text-align: center; /* Center the list */ text-align: center; /* Center the list */
} }
.feature-list li { .feature-list li {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin: 8px 0; margin: 8px 0;
} }
.feature-status { .feature-status {
display: inline-block; display: inline-block;
width: 20px; width: 20px;
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;
text-align: center; text-align: center;
border-radius: 50%; border-radius: 50%;
color: white; color: white;
margin-left: 8px; margin-left: 8px;
} }
.tick { .tick {
background-color: green; background-color: green;
} }
.cross { .cross {
background-color: red; background-color: red;
} }
</style> </style>