From f7a28bc1212d6cc927e63ec744f39e8abb08cd44 Mon Sep 17 00:00:00 2001 From: Anand Chowdhary Date: Fri, 22 Jan 2021 19:17:06 +0530 Subject: [PATCH] :recycle: Move theme styles to global.css --- src/components/ActiveIncidents.svelte | 27 ++--- src/components/Graph.svelte | 22 +++- src/components/LiveStatus.svelte | 139 ++++++++++++++++---------- src/components/Nav.svelte | 78 +++++++-------- src/routes/error.svelte | 30 +++--- src/routes/rate-limit-exceeded.svelte | 57 +++++------ static/global.css | 48 +++++++++ 7 files changed, 232 insertions(+), 169 deletions(-) diff --git a/src/components/ActiveIncidents.svelte b/src/components/ActiveIncidents.svelte index 6e49b13..3bc49ca 100644 --- a/src/components/ActiveIncidents.svelte +++ b/src/components/ActiveIncidents.svelte @@ -39,25 +39,6 @@ }); - - {#if !incidents.length && !loading}
✅   {config.i18n.allSystemsOperational}
{/if} @@ -71,7 +52,7 @@
-

{incident.title.replace('🛑', '').replace('⚠️', '').trim()}

+

{incident.title.replace("🛑", "").replace("⚠️", "").trim()}

{config.i18n.activeIncidentSummary .replace(/\$DATE/g, new Date(incident.created_at).toLocaleString()) @@ -88,3 +69,9 @@ {/each} {/if} + + diff --git a/src/components/Graph.svelte b/src/components/Graph.svelte index 0d513db..6309d69 100644 --- a/src/components/Graph.svelte +++ b/src/components/Graph.svelte @@ -47,18 +47,30 @@ }); - -
{#if loading} {:else if data.length}

{config.i18n.sevelDayResponseTime}

+ options={{ + responsive: true, + maintainAspectRatio: true, + scales: { xAxes: [{ display: false, gridLines: { display: false } }] }, + }} + /> {/if}
diff --git a/src/components/LiveStatus.svelte b/src/components/LiveStatus.svelte index 8fa6e94..8caa993 100644 --- a/src/components/LiveStatus.svelte +++ b/src/components/LiveStatus.svelte @@ -38,45 +38,6 @@ }; - -

{config.i18n.liveStatus}

@@ -87,7 +48,8 @@ name="d" type="radio" on:change={changed} - id="data_day" /> + id="data_day" + />
+ id="data_week" + />
+ id="data_month" + />
+ id="data_year" + />
+ id="data_all" + />
-
+
{#if loading} {:else if sites.length} {#each sites as site}
+ style={`background-image: url("${graphsBaseUrl}/${site.slug}/response-time${ + selected === "day" + ? "-day" + : selected === "week" + ? "-week" + : selected === "month" + ? "-month" + : selected === "year" + ? "-year" + : "" + }.png`} + >

{site.name}

- {@html config.i18n.overallUptime.split('$UPTIME')[0]} - {selected === 'day' ? site.uptimeDay : selected === 'week' ? site.uptimeWeek : selected === 'month' ? site.uptimeMonth : selected === 'year' ? site.uptimeYear : site.uptime} - {@html config.i18n.overallUptime.split('$UPTIME')[1]} + {@html config.i18n.overallUptime.split("$UPTIME")[0]} + {selected === "day" + ? site.uptimeDay + : selected === "week" + ? site.uptimeWeek + : selected === "month" + ? site.uptimeMonth + : selected === "year" + ? site.uptimeYear + : site.uptime} + {@html config.i18n.overallUptime.split("$UPTIME")[1]}
- {@html config.i18n.averageResponseTime.split('$TIME')[0]} - {selected === 'day' ? site.timeDay : selected === 'week' ? site.timeWeek : selected === 'month' ? site.timeMonth : selected === 'year' ? site.timeYear : site.time} - {@html config.i18n.averageResponseTime.split('$TIME')[1]} + {@html config.i18n.averageResponseTime.split("$TIME")[0]} + {selected === "day" + ? site.timeDay + : selected === "week" + ? site.timeWeek + : selected === "month" + ? site.timeMonth + : selected === "year" + ? site.timeYear + : site.time} + {@html config.i18n.averageResponseTime.split("$TIME")[1]}
{/each} {/if}
+ + diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte index 7bbe4be..998c379 100644 --- a/src/components/Nav.svelte +++ b/src/components/Nav.svelte @@ -3,21 +3,50 @@ export let segment; + + - - diff --git a/src/routes/error.svelte b/src/routes/error.svelte index bca370d..942de84 100644 --- a/src/routes/error.svelte +++ b/src/routes/error.svelte @@ -2,22 +2,6 @@ import config from "../data/config.json"; - - {config.i18n.errorTitle} @@ -28,4 +12,16 @@

{config.i18n.errorText}

-{config.i18n.errorHome} +{config.i18n.errorHome} + + diff --git a/src/routes/rate-limit-exceeded.svelte b/src/routes/rate-limit-exceeded.svelte index 3a21e58..63c858b 100644 --- a/src/routes/rate-limit-exceeded.svelte +++ b/src/routes/rate-limit-exceeded.svelte @@ -26,33 +26,6 @@ }); - - {config.i18n.rateLimitExceededTitle} @@ -71,7 +44,8 @@ {config.i18n.rateLimitExceededErrorFix} {config.i18n.rateLimitExceededGeneratePAT} + target="_blank">{config.i18n.rateLimitExceededGeneratePAT}

{#if localStorageToken} @@ -84,8 +58,31 @@ + placeholder={config.i18n.rateLimitExceededCopyPastePAT} + /> - + {/if} + + diff --git a/static/global.css b/static/global.css index a51463c..f44e1d9 100644 --- a/static/global.css +++ b/static/global.css @@ -136,3 +136,51 @@ dl dd { .dark article { background-color: #002b29; } + +article.down { + background-color: #ffdce3; +} +article.degraded { + background-color: #ffdfad; +} +article.good { + background-color: #dcffeb; + color: #003300; +} + +.live-status article { + background-color: #fff; +} + +.dark article { + background-color: #700000; +} + +.changed + section .data { + background-color: #fdcb6e; +} + +nav { + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + background-color: #fff; +} +.dark nav { + background-color: #002b29; +} + +[aria-current] { + border-bottom: 2px solid #3498db; +} + +a.error-button { + border: 0.1rem solid rgba(0, 0, 0, 0.25); + background-color: #01a3a4; + color: #fff; + border-color: transparent; +} + +.submit-button { + background-color: #01a3a4; + color: #fff; + border-color: transparent; +}