fix: Improve web app design

Add more .container breakpoints for smaller sizes, similar to bootstrap container. Adjust table to take 2 thirds until desktop breakpoint. Make table cell text centered. Move page title to be a separate columns section. Adjust padding of table at mobile breakpoint. Removed unused scss import.
alcroito · Mar 2, 2023 · 5eab22d · 5eab22d
1 parent db3f08b
commit 5eab22d
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 15 deletions.
diff --git a/webclients/svelte/src/app.scss b/webclients/svelte/src/app.scss
@@ -5,6 +5,33 @@
 
 @import 'bulma/sass/utilities/_all';
 @import 'bulma/sass/base/_all';
+
+// Needs to be before bulma/sass/elements/container
+// Extra breakpoints for container when targeting tablet and mobile-big.
+$container-offset: (2 * $gap) !default;
+$container-max-width: $fullhd !default;
+$mobile-big: 576px;
+
+@mixin mobile-big {
+	@media screen and (min-width: $mobile-big) {
+		@content;
+	}
+}
+@mixin tablet-no-print {
+	@media screen and (min-width: $tablet) {
+		@content;
+	}
+}
+.container {
+	@include mobile-big {
+		// Empirically chosen so there's no jump when resizing.
+		max-width: 560px;
+	}
+	@include tablet-no-print {
+		max-width: min($tablet, $container-max-width) - $container-offset;
+	}
+}
+
 @import 'bulma/sass/elements/_all';
 @import 'bulma/sass/form/_all';
 @import 'bulma/sass/components/_all';
@@ -14,3 +41,10 @@
 
 @import '@fortawesome/fontawesome-free/css/fontawesome.css';
 @import '@fortawesome/fontawesome-free/css/solid.css';
+
+@include mobile {
+	.px-3-mobile {
+		padding-left: 0.75rem;
+		padding-right: 0.75rem;
+	}
+}
diff --git a/webclients/svelte/src/components/DomainRecordIpChanges.svelte b/webclients/svelte/src/components/DomainRecordIpChanges.svelte
@@ -56,9 +56,9 @@
 					<tbody>
 						{#each $query.data.changes as entry}
 							<tr>
-								<td>{entry.name}</td>
-								<td>{entry.set_ip}</td>
-								<td>{dayjs(entry.attempt_date).fromNow()}</td>
+								<td class="has-text-centered">{entry.name}</td>
+								<td class="has-text-centered">{entry.set_ip}</td>
+								<td class="has-text-centered">{dayjs(entry.attempt_date).fromNow()}</td>
 							</tr>
 						{/each}
 					</tbody>

diff --git a/webclients/svelte/src/components/NavBar.svelte b/webclients/svelte/src/components/NavBar.svelte
@@ -26,7 +26,7 @@
 			<span aria-hidden="true" />
 		</a>
 
-		<a class="navbar-item ml-1" href={base}>
+		<a class="navbar-item" href={base}>
 			<figure class="image">
 				<img src={logo} alt="logo" />
 			</figure>

diff --git a/webclients/svelte/src/components/PageHeader.svelte b/webclients/svelte/src/components/PageHeader.svelte
@@ -2,20 +2,20 @@
 	import NavBar from './NavBar.svelte';
 </script>
 
-<div class="page-header-wrapper">
-	<header class="page-header container is-max-desktop">
+<div class="header-wrapper">
+	<header class="header container">
 		<NavBar />
 	</header>
 </div>
 
 <style lang="scss">
 	@import '../variables.scss';
 
-	.page-header {
+	.header {
 		max-width: 760px;
 	}
 
-	.page-header-wrapper {
+	.header-wrapper {
 		border-bottom: 1px solid $page-header-border-color;
 		background-color: #fff;
 	}

diff --git a/webclients/svelte/src/routes/+page.svelte b/webclients/svelte/src/routes/+page.svelte
@@ -2,20 +2,19 @@
 	import DomainRecordIpChanges from '../components/DomainRecordIpChanges.svelte';
 </script>
 
-<div class="container px-3">
+<div class="container px-3-mobile">
+	<div class="py-5 has-text-centered">
+		<h1 class="title">Dashboard</h1>
+	</div>
+
 	<div class="columns is-centered">
-		<div class="column is-8">
-			<div class="py-5 has-text-centered">
-				<h1 class="title">Dashboard</h1>
-			</div>
+		<div class="column is-two-thirds-desktop">
 			<DomainRecordIpChanges />
 		</div>
 	</div>
 </div>
 
 <style lang="scss">
-	@import '../variables.scss';
-
 	.title {
 		margin: 0;
 		font-size: 1.5rem;