Skip to content

Commit

Permalink
♻️ Move theme styles to global.css
Browse files Browse the repository at this point in the history
  • Loading branch information
@AnandChowdhary
AnandChowdhary committed Jan 22, 2021
1 parent 8fb6eea commit f7a28bc
Show file tree
Hide file tree
Showing 7 changed files with 232 additions and 169 deletions.
27 changes: 7 additions & 20 deletions src/components/ActiveIncidents.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,25 +39,6 @@
});
</script>

<style>
section {
margin-bottom: 2rem;
}
article {
background-color: #ffdce3;
}
article.degraded {
background-color: #ffdfad;
}
article.good {
background-color: #dcffeb;
color: #003300;
}
:global(.dark) article {
background-color: #700000;
}
</style>

{#if !incidents.length && !loading}
<article class="good">✅ &nbsp; {config.i18n.allSystemsOperational}</article>
{/if}
Expand All @@ -71,7 +52,7 @@
<article class="down link {incident.title.includes('degraded') ? 'degraded' : ''}">
<div class="f">
<div>
<h4>{incident.title.replace('🛑', '').replace('⚠️', '').trim()}</h4>
<h4>{incident.title.replace("🛑", "").replace("⚠️", "").trim()}</h4>
<div>
{config.i18n.activeIncidentSummary
.replace(/\$DATE/g, new Date(incident.created_at).toLocaleString())
Expand All @@ -88,3 +69,9 @@
{/each}
{/if}
</section>

<style>
section {
margin-bottom: 2rem;
}
</style>
22 changes: 17 additions & 5 deletions src/components/Graph.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,18 +47,30 @@
});
</script>

<style>
</style>

<section bind:clientWidth={width}>
{#if loading}
<Loading />
{:else if data.length}
<h2>{config.i18n.sevelDayResponseTime}</h2>
<Line
data={{ labels, datasets: [{ label: config.i18n.responseTimeMs, backgroundColor: config.graphBackgroundColor || '#89e0cf', borderColor: config.graphBorderColor || '#1abc9c', data }] }}
data={{
labels,
datasets: [
{
label: config.i18n.responseTimeMs,
backgroundColor: config.graphBackgroundColor || "#89e0cf",
borderColor: config.graphBorderColor || "#1abc9c",
data,
},
],
}}
{width}
height={400}
options={{ responsive: true, maintainAspectRatio: true, scales: { xAxes: [{ display: false, gridLines: { display: false } }] } }} />
options={{
responsive: true,
maintainAspectRatio: true,
scales: { xAxes: [{ display: false, gridLines: { display: false } }] },
}}
/>
{/if}
</section>
139 changes: 85 additions & 54 deletions src/components/LiveStatus.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,45 +38,6 @@
};
</script>

<style>
article {
background-size: contain;
background-position: top right;
background-repeat: no-repeat;
}
.icon {
height: 1rem;
margin-right: 0.33rem;
vertical-align: middle;
transform: scale(1.1) translateY(-0.1rem);
}
a {
text-decoration: none;
}
.r input:checked + label {
font-weight: bold;
}
.r input {
display: none;
}
.r label {
margin-left: 1rem;
}
.data {
transition: 0.3s;
}
.changed + section {
background-color: transparent;
}
.data {
padding: 0.15rem 0.25rem;
border-radius: 0.2rem;
}
.changed + section .data {
background-color: #fdcb6e;
}
</style>

<div class="f changed" bind:this={form}>
<h2>{config.i18n.liveStatus}</h2>
<form class="f r">
Expand All @@ -87,7 +48,8 @@
name="d"
type="radio"
on:change={changed}
id="data_day" /><label for="data_day">{config.i18n.duration24H || '24h'}</label>
id="data_day"
/><label for="data_day">{config.i18n.duration24H || "24h"}</label>
</div>
<div>
<input
Expand All @@ -96,7 +58,8 @@
name="d"
type="radio"
on:change={changed}
id="data_week" /><label for="data_week">{config.i18n.duration7D || '7d'}</label>
id="data_week"
/><label for="data_week">{config.i18n.duration7D || "7d"}</label>
</div>
<div>
<input
Expand All @@ -105,7 +68,8 @@
name="d"
type="radio"
on:change={changed}
id="data_month" /><label for="data_month">{config.i18n.duration30D || '30d'}</label>
id="data_month"
/><label for="data_month">{config.i18n.duration30D || "30d"}</label>
</div>
<div>
<input
Expand All @@ -114,7 +78,8 @@
name="d"
type="radio"
on:change={changed}
id="data_year" /><label for="data_year">{config.i18n.duration1Y || '1y'}</label>
id="data_year"
/><label for="data_year">{config.i18n.duration1Y || "1y"}</label>
</div>
<div>
<input
Expand All @@ -123,35 +88,101 @@
name="d"
type="radio"
on:change={changed}
id="data_all" /><label for="data_all">{config.i18n.durationAll || 'all'}</label>
id="data_all"
/><label for="data_all">{config.i18n.durationAll || "all"}</label>
</div>
</form>
</div>
<section>
<section class="live-status">
{#if loading}
<Loading />
{:else if sites.length}
{#each sites as site}
<article
class={`${site.status} link`}
style={`background-image: url("${graphsBaseUrl}/${site.slug}/response-time${selected === 'day' ? '-day' : selected === 'week' ? '-week' : selected === 'month' ? '-month' : selected === 'year' ? '-year' : ''}.png`}>
style={`background-image: url("${graphsBaseUrl}/${site.slug}/response-time${
selected === "day"
? "-day"
: selected === "week"
? "-week"
: selected === "month"
? "-month"
: selected === "year"
? "-year"
: ""
}.png`}
>
<h4>
<img class="icon" alt="" src={site.icon} />
<a href={`${config.path}/history/${site.slug}`}>{site.name}</a>
</h4>
<div>
{@html config.i18n.overallUptime.split('$UPTIME')[0]}
<span
class="data">{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]}</span>
{@html config.i18n.overallUptime.split("$UPTIME")[0]}
<span class="data"
>{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]}</span
>
</div>
<div>
{@html config.i18n.averageResponseTime.split('$TIME')[0]}
<span
class="data">{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]}</span>
{@html config.i18n.averageResponseTime.split("$TIME")[0]}
<span class="data"
>{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]}</span
>
</div>
</article>
{/each}
{/if}
</section>

<style>
article {
background-size: contain;
background-position: top right;
background-repeat: no-repeat;
}
.icon {
height: 1rem;
margin-right: 0.33rem;
vertical-align: middle;
transform: scale(1.1) translateY(-0.1rem);
}
a {
text-decoration: none;
}
.r input:checked + label {
font-weight: bold;
}
.r input {
display: none;
}
.r label {
margin-left: 1rem;
}
.data {
transition: 0.3s;
}
.changed + section {
background-color: transparent;
}
.data {
padding: 0.15rem 0.25rem;
border-radius: 0.2rem;
}
</style>
78 changes: 35 additions & 43 deletions src/components/Nav.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,50 @@
export let segment;
</script>

<nav>
<div class="container">
{#if config["status-website"] && config["status-website"].logoUrl}
<div>
<a href={config["status-website"].logoHref || config.path} class="logo">
<img alt="" src={config["status-website"].logoUrl} />
<div>{config["status-website"].name}</div>
</a>
</div>
{/if}
<ul>
{#if config["status-website"] && config["status-website"].navbar}
{#each config["status-website"].navbar as item}
<li>
<a
aria-current={segment === (item.href === "/" ? undefined : item.href)
? "page"
: undefined}
href={item.href.replace("$OWNER", config.owner).replace("$REPO", config.repo)}>
{item.title}
</a>
</li>
{/each}
{/if}
{#if config["status-website"] && config["status-website"].navbarGitHub && !config["status-website"].navbar}
<li>
<a href={`https://github.com/${config.owner}/${config.repo}`}>
{config.i18n.navGitHub}
</a>
</li>
{/if}
</ul>
</div>
</nav>

<style>
nav {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
font-weight: 300;
padding: 0 1em;
background-color: #fff;
margin-bottom: 2rem;
white-space: nowrap;
overflow-x: auto;
}
:global(.dark) nav {
background-color: #002b29;
}
ul {
margin: 0;
padding: 0;
Expand All @@ -27,10 +56,6 @@
justify-content: center;
}
[aria-current] {
border-bottom: 2px solid #3498db;
}
a {
text-decoration: none;
padding: 1.5rem 2rem;
Expand All @@ -56,36 +81,3 @@
align-items: center;
}
</style>

<nav>
<div class="container">
{#if config['status-website'] && config['status-website'].logoUrl}
<div>
<a href={config['status-website'].logoHref || config.path} class="logo">
<img alt="" src={config['status-website'].logoUrl} />
<div>{config['status-website'].name}</div>
</a>
</div>
{/if}
<ul>
{#if config['status-website'] && config['status-website'].navbar}
{#each config['status-website'].navbar as item}
<li>
<a
aria-current={segment === (item.href === '/' ? undefined : item.href) ? 'page' : undefined}
href={item.href.replace('$OWNER', config.owner).replace('$REPO', config.repo)}>
{item.title}
</a>
</li>
{/each}
{/if}
{#if config['status-website'] && config['status-website'].navbarGitHub && !config['status-website'].navbar}
<li>
<a href={`https://github.com/${config.owner}/${config.repo}`}>
{config.i18n.navGitHub}
</a>
</li>
{/if}
</ul>
</div>
</nav>
Loading

0 comments on commit f7a28bc

Please sign in to comment.