feature(frontend): improve styling

Data5tream · Apr 5, 2023 · 3c41858 · 3c41858
1 parent 3a1017c
commit 3c41858
Show file tree

Hide file tree

Showing 6 changed files with 143 additions and 6 deletions.
diff --git a/frontend/src/app.html b/frontend/src/app.html
@@ -7,6 +7,6 @@
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
+		<div class="app">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/frontend/src/lib/components/PageFooter.svelte b/frontend/src/lib/components/PageFooter.svelte
@@ -0,0 +1,29 @@
+<footer>
+	<div class="content">
+		&copy; {new Date().getFullYear()}, Simon Stefan Barth | <a href='https://github.com/Data5tream' target='_blank' rel='noreferrer'>Github</a>
+	</div>
+</footer>
+
+<style>
+	footer {
+		width: 100%;
+		padding: 16px 0 8px;
+		background: var(--c-black);
+		color: var(--c-white);
+	}
+
+	.content {
+		max-width: 1400px;
+		margin: 0 auto;
+		font-family: monospace;
+		font-size: 16px;
+	}
+
+	a, a:visited {
+      color: var(--c-white);
+	}
+	a:hover, a:active {
+			background: var(--c-white);
+      color: var(--c-black);
+	}
+</style>
diff --git a/frontend/src/lib/components/StatusEntry.svelte b/frontend/src/lib/components/StatusEntry.svelte
@@ -1,23 +1,38 @@
 <script lang="ts">
 	import type { Watchpoint } from '../dataprovider';
+	import StatusIcon from './StatusIcon.svelte';
 
 	export let data: Watchpoint;
 </script>
 
 <div class="watchpoint">
 	<h4>{data.watchpoint.name}</h4>
-	Status: {data.status}<br />
-	URL: <a href={data.watchpoint.url} class="url">{data.watchpoint.url}</a>
+	<div class="content">
+		Status: <StatusIcon status={data.status} />
+		{data.status}<br />
+		URL: <a href={data.watchpoint.url} class="url">{data.watchpoint.url}</a>
+	</div>
 </div>
 
 <style>
 	.watchpoint {
 		flex: 1 0 0;
-		border: 1px solid #343434;
-		padding: 8px;
+		border: 1px solid var(--c-black);
 		min-width: 300px;
 	}
 
+	h4 {
+		background: var(--c-black);
+		color: var(--c-white);
+		letter-spacing: 0.15em;
+		margin: 0;
+		padding: 8px;
+	}
+
+	.content {
+		padding: 16px 8px 8px;
+	}
+
 	.url {
 		font-family: monospace;
 	}

diff --git a/frontend/src/lib/components/StatusIcon.svelte b/frontend/src/lib/components/StatusIcon.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	let iconClass = '';
+
+	export let status;
+
+	const getStatusClass = (status: number): string => {
+		let classString = '';
+
+		if (status === 200) {
+			classString += ' green';
+		} else if (status >= 201 && status < 400) {
+			classString += ' yellow';
+		} else if (status >= 400) {
+			classString += ' red';
+		}
+
+		return classString;
+	};
+
+	$: if (status) iconClass = getStatusClass(status);
+</script>
+
+<span class={iconClass} />
+
+<style>
+	span {
+		display: inline-block;
+		height: 0.8em;
+		width: 0.8em;
+		border-radius: 50%;
+		background: var(--c-gray);
+	}
+
+	.green {
+		background: var(--c-green);
+	}
+	.yellow {
+		background: var(--c-yellow);
+	}
+	.red {
+		background: var(--c-red);
+	}
+</style>
diff --git a/frontend/src/lib/main.css b/frontend/src/lib/main.css
@@ -0,0 +1,33 @@
+:root {
+	--c-white: #ddd;
+	--c-black: #333;
+	--c-gray: #666;
+	--c-green: #4caf50;
+	--c-yellow: #ffeb3b;
+	--c-red: #f44336;
+}
+
+html,
+body {
+	margin: 0;
+	padding: 0;
+	font-family: 'Open Sans', sans-serif;
+}
+
+.app {
+	display: grid;
+	min-height: 100vh;
+	grid-template-rows: 1fr auto;
+}
+
+@keyframes blink {
+	0% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
 	import type { StatusData } from '$lib/dataprovider';
 	import StatusList from '$lib/components/StatusList.svelte';
+	import PageFooter from '$lib/components/PageFooter.svelte';
+	import '$lib/main.css';
 
 	export let data: { status: StatusData };
 </script>
@@ -13,14 +15,29 @@
 		<StatusList bind:data={data.status.watchpoints} />
 	{/if}
 </main>
+<PageFooter />
 
 <style>
 	main {
+		width: 100%;
 		max-width: 1400px;
 		margin: 0 auto;
 	}
+
+	h1 {
+		display: inline-block;
+		background: var(--c-black);
+		color: var(--c-white);
+		padding: 8px 16px 8px 8px;
+		font-family: monospace;
+	}
+	h1:after {
+		content: '_';
+		animation: blink 2s infinite;
+	}
+
 	.error {
-		color: #870606;
+		color: var(--c-red);
 		font-size: 64px;
 	}
 </style>