More changes to page headers and breadcrumbs

zonia3000 · zonia3000 · commit 73702f6c47af · 2024-01-10T09:54:21.000+01:00
diff --git a/src/lib/components/projects/ProjectDatasetsList.svelte b/src/lib/components/projects/ProjectDatasetsList.svelte
@@ -57,7 +57,7 @@
 		<div class="col-sm-2">
 			<h3 class="fw-light">Datasets</h3>
 		</div>
-		<div class="col-sm-10">
+		<div class="col-sm-10 mb-2">
 			<div class="row justify-content-end">
 				<div class="col-auto">
 					<div class="input-group">
diff --git a/src/lib/components/projects/ProjectsList.svelte b/src/lib/components/projects/ProjectsList.svelte
@@ -96,7 +96,6 @@
 	}
 </script>
 
-<h1 class="fw-light">Projects list</h1>
 <div class="container">
 	<div class="row mt-3 mb-3">
 		<div class="col-sm-12">
diff --git a/src/lib/components/projects/WorkflowsList.svelte b/src/lib/components/projects/WorkflowsList.svelte
@@ -64,7 +64,7 @@
 		<div class="col-sm-2">
 			<h3 class="fw-light">Workflows</h3>
 		</div>
-		<div class="col-sm-10">
+		<div class="col-sm-10 mb-2">
 			<div class="row justify-content-end">
 				<div class="col-auto">
 					<div class="input-group">
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -14,7 +14,7 @@
 	// Detects page change
 	$: if ($navigating) cleanupModalBackdrop();
 
-	$: adminArea = $page.url.pathname.startsWith('/admin');
+	$: selectedSection = getSelectedSection($page.url.pathname);
 
 	/**
 	 * Removes the modal backdrop that remains stuck at page change.
@@ -40,6 +40,20 @@
 		};
 	}
 
+	/**
+	 * @param {string} pathname
+	 */
+	function getSelectedSection(pathname) {
+		if (pathname === '/') {
+			return 'home';
+		}
+		for (const section of ['projects', 'tasks', 'jobs', 'admin', 'auth']) {
+			if (pathname.startsWith(`/${section}`)) {
+				return section;
+			}
+		}
+	}
+
 	let loading = true;
 
 	onMount(() => {
@@ -55,21 +69,25 @@
 		<div class="container d-flex flex-wrap">
 			<ul class="nav me-auto">
 				<li class="nav-item">
-					<a href="/" class="nav-link">Home</a>
+					<a href="/" class="nav-link" class:active={selectedSection === 'home'}> Home </a>
 				</li>
 				{#if userLoggedIn}
 					<li class="nav-item">
-						<a href="/projects" class="nav-link">Projects</a>
+						<a href="/projects" class="nav-link" class:active={selectedSection === 'projects'}>
+							Projects
+						</a>
 					</li>
 					<li class="nav-item">
-						<a href="/tasks" class="nav-link">Tasks</a>
+						<a href="/tasks" class="nav-link" class:active={selectedSection === 'tasks'}> Tasks </a>
 					</li>
 					<li class="nav-item">
-						<a href="/jobs" class="nav-link">Jobs</a>
+						<a href="/jobs" class="nav-link" class:active={selectedSection === 'jobs'}> Jobs </a>
 					</li>
 					{#if isAdmin}
 						<li class="nav-item">
-							<a href="/admin" class="nav-link">Admin area</a>
+							<a href="/admin" class="nav-link" class:admin-active={selectedSection === 'admin'}>
+								Admin area
+							</a>
 						</li>
 					{/if}
 				{/if}
@@ -94,13 +112,15 @@
 					</li>
 				{:else}
 					<li class="nav-item">
-						<a href="/auth/login" class="nav-link">Login</a>
+						<a href="/auth/login" class="nav-link" class:active={selectedSection === 'auth'}>
+							Login
+						</a>
 					</li>
 				{/if}
 			</ul>
 		</div>
 	</nav>
-	{#if adminArea}
+	{#if selectedSection === 'admin'}
 		<div class="admin-border" />
 	{/if}
 	<div class="container p-4">
@@ -129,6 +149,16 @@
 </main>
 
 <style>
+	.nav-link.active {
+		background-color: #eee;
+		border-bottom-width: 3px;
+		border-bottom-style: solid;
+	}
+
+	.nav-link.admin-active {
+		background-color: #eee;
+	}
+
 	.admin-border {
 		height: 8px;
 		background-color: #dc3545;
diff --git a/src/routes/admin/+page.svelte b/src/routes/admin/+page.svelte
@@ -1,5 +1,3 @@
-<h1 class="fw-light mt-2 mb-3">Admin area</h1>
-
 <a href="/admin/users" class="btn btn-primary mt-3">
 	<i class="bi bi-people-fill" />
 	Manage users
diff --git a/src/routes/admin/jobs/+page.svelte b/src/routes/admin/jobs/+page.svelte
@@ -269,16 +269,7 @@
 </script>
 
 <div>
-	<nav aria-label="breadcrumb">
-		<ol class="breadcrumb">
-			<li class="breadcrumb-item">
-				<a href="/admin">Admin area</a>
-			</li>
-			<li class="breadcrumb-item active" aria-current="page">Jobs</li>
-		</ol>
-	</nav>
-
-	<div class="d-flex justify-content-between align-items-center my-3">
+	<div class="d-flex justify-content-between align-items-center mb-3">
 		<h1 class="fw-light">Jobs</h1>
 	</div>
 
diff --git a/src/routes/admin/users/+page.svelte b/src/routes/admin/users/+page.svelte
@@ -34,15 +34,6 @@
 	});
 </script>
 
-<nav aria-label="breadcrumb">
-	<ol class="breadcrumb">
-		<li class="breadcrumb-item">
-			<a href="/admin">Admin area</a>
-		</li>
-		<li class="breadcrumb-item active" aria-current="page">Manage users</li>
-	</ol>
-</nav>
-
 <a href="/admin/users/register" class="btn btn-primary float-end">
 	<i class="bi bi-person-fill-add" />
 	Register new user
diff --git a/src/routes/admin/users/[userId]/+page.svelte b/src/routes/admin/users/[userId]/+page.svelte
@@ -20,8 +20,6 @@
 	</ol>
 </nav>
 
-<h1 class="mb-3 fw-light">User #{user.id} ({user.email})</h1>
-
 <div class="row mt-4">
 	<div class="col-md-8 col-lg-6">
 		<table class="table">
diff --git a/src/routes/admin/users/[userId]/edit/+page.svelte b/src/routes/admin/users/[userId]/edit/+page.svelte
@@ -36,6 +36,4 @@
 	</ol>
 </nav>
 
-<h1 class="mb-3 fw-light">Editing user #{user.id} ({user.email})</h1>
-
 <UserEditor {user} {save} />
diff --git a/src/routes/admin/users/register/+page.svelte b/src/routes/admin/users/register/+page.svelte
@@ -31,7 +31,7 @@
 </script>
 
 <nav aria-label="breadcrumb">
-	<ol class="breadcrumb">
+	<ol class="breadcrumb mb-4">
 		<li class="breadcrumb-item">
 			<a href="/admin">Admin area</a>
 		</li>
@@ -42,6 +42,4 @@
 	</ol>
 </nav>
 
-<h1 class="fw-light mb-4">Registering new user</h1>
-
 <UserEditor {user} {save} />
diff --git a/src/routes/jobs/+page.svelte b/src/routes/jobs/+page.svelte
@@ -1,6 +1,5 @@
 <script>
 	import JobsList from '$lib/components/jobs/JobsList.svelte';
-	import { page } from '$app/stores';
 	import { AlertError } from '$lib/common/errors';
 
 	/**
@@ -20,7 +19,4 @@
 	}
 </script>
 
-<div class="d-flex justify-content-between align-items-center mt-2">
-	<h1 class="fw-light">Jobs of user "{$page.data.userInfo.email}"</h1>
-</div>
 <JobsList {jobUpdater} columnsToHide={['user_email']} />
diff --git a/src/routes/projects/[projectId]/+page.svelte b/src/routes/projects/[projectId]/+page.svelte
@@ -54,32 +54,21 @@
 	}
 </script>
 
-<div class="d-flex justify-content-between align-items-center">
-	<nav aria-label="breadcrumb">
-		<ol class="breadcrumb">
-			<li class="breadcrumb-item" aria-current="page">
-				<a href="/projects">Projects</a>
-			</li>
-			{#if project}
-				<li class="breadcrumb-item active" aria-current="page">{project.name}</li>
-			{/if}
-		</ol>
-	</nav>
-	<div>
-		<button
-			class="btn btn-light"
-			data-bs-toggle="modal"
-			data-bs-target="#editProjectModal"
-			on:click={() => (updatedProjectName = project.name)}
-		>
-			<i class="bi-pencil" />
-		</button>
-	</div>
-</div>
-
 {#if project}
-	<div class="d-flex justify-content-between align-items-center my-3">
-		<h1 class="fw-light">Project {project.name} #{project.id}</h1>
+	<div class="d-flex justify-content-between align-items-center">
+		<div class="d-flex justify-content-between align-items-center mt-2 mb-2">
+			<h1 class="fw-light">Project {project.name} #{project.id}</h1>
+		</div>
+		<div>
+			<button
+				class="btn btn-light"
+				data-bs-toggle="modal"
+				data-bs-target="#editProjectModal"
+				on:click={() => (updatedProjectName = project.name)}
+			>
+				<i class="bi-pencil" />
+			</button>
+		</div>
 	</div>
 
 	<StandardDismissableAlert message={projectUpdatesSuccessMessage} />
diff --git a/src/routes/projects/[projectId]/datasets/[datasetId]/+page.svelte b/src/routes/projects/[projectId]/datasets/[datasetId]/+page.svelte
@@ -69,10 +69,6 @@
 
 {#if dataset}
 	<div>
-		<div class="d-flex justify-content-between align-items-center my-3">
-			<h1 class="fw-light">Dataset {dataset.name} #{dataset.id}</h1>
-		</div>
-
 		<div class="row mt-2">
 			<div class="col-4">
 				<div class="d-flex align-items-center justify-content-between">
diff --git a/src/routes/projects/[projectId]/workflows/[workflowId]/jobs/+page.svelte b/src/routes/projects/[projectId]/workflows/[workflowId]/jobs/+page.svelte
@@ -44,8 +44,5 @@
 		<div />
 	</div>
 
-	<div class="d-flex justify-content-between align-items-center my-3">
-		<h1 class="fw-light">Jobs of workflow "{workflow.name}"</h1>
-	</div>
 	<JobsList columnsToHide={['project', 'workflow', 'user_email']} {jobUpdater} />
 {/if}
diff --git a/src/routes/tasks/+page.svelte b/src/routes/tasks/+page.svelte
@@ -193,8 +193,6 @@
 </script>
 
 <div>
-	<h1 class="fw-light mb-4">Tasks</h1>
-
 	<div class="mb-2" id="errorSection" />
 
 	<h3 class="fw-light">Add tasks</h3>

Original file line number	Diff line number	Diff line change
`@@ -96,7 +96,6 @@`
`96`	`96`	`}`
`97`	`97`	`</script>`
`98`	`98`
`99`		`-<h1 class="fw-light">Projects list</h1>`
`100`	`99`	`<div class="container">`
`101`	`100`	`<div class="row mt-3 mb-3">`
`102`	`101`	`<div class="col-sm-12">`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-<h1 class="fw-light mt-2 mb-3">Admin area</h1>`
`2`		`-`
`3`	`1`	`<a href="/admin/users" class="btn btn-primary mt-3">`
`4`	`2`	`<i class="bi bi-people-fill" />`
`5`	`3`	`Manage users`