Made page headers more homogeneous

fractal-analytics-platform · Jan 9, 2024 · f9f2199 · f9f2199
1 parent cd820fe
commit f9f2199
Show file tree

Hide file tree

Showing 18 changed files with 54 additions and 52 deletions.
diff --git a/src/lib/components/projects/ProjectDatasetsList.svelte b/src/lib/components/projects/ProjectDatasetsList.svelte
@@ -55,7 +55,7 @@
 <div class="container p-0 mt-4">
 	<div class="row">
 		<div class="col-sm-2">
-			<p class="lead">Datasets</p>
+			<h3 class="fw-light">Datasets</h3>
 		</div>
 		<div class="col-sm-10">
 			<div class="row justify-content-end">

diff --git a/src/lib/components/projects/ProjectsList.svelte b/src/lib/components/projects/ProjectsList.svelte
@@ -96,7 +96,7 @@
 	}
 </script>
 
-<p class="lead">Projects list</p>
+<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
@@ -63,7 +63,7 @@
 <div class="container p-0 mt-5">
 	<div class="row">
 		<div class="col-sm-2">
-			<p class="lead">Workflows</p>
+			<h3 class="fw-light">Workflows</h3>
 		</div>
 		<div class="col-sm-10">
 			<div class="row justify-content-end">

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -5,7 +5,7 @@
 	$: userLoggedIn = !!$page.data.userInfo;
 </script>
 
-<h1>Welcome to Fractal web client.</h1>
+<h1 class="fw-light">Welcome to Fractal web client.</h1>
 
 <div>
 	<p>
@@ -30,15 +30,15 @@
 	</div>
 
 	{#if env.PUBLIC_FRACTAL_ADMIN_SUPPORT_EMAIL}
-		<h3>Where to get support</h3>
+		<h3 class="fw-light">Where to get support</h3>
 		<p>
 			<a href="mailto:{env.PUBLIC_FRACTAL_ADMIN_SUPPORT_EMAIL}">
 				{env.PUBLIC_FRACTAL_ADMIN_SUPPORT_EMAIL}
 			</a>
 		</p>
 	{/if}
 
-	<h3>Links</h3>
+	<h3 class="fw-light">Links</h3>
 
 	<ul>
 		<li>

diff --git a/src/routes/admin/+page.svelte b/src/routes/admin/+page.svelte
@@ -1,4 +1,4 @@
-<h3>Admin area</h3>
+<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" />

diff --git a/src/routes/admin/jobs/+page.svelte b/src/routes/admin/jobs/+page.svelte
@@ -268,9 +268,18 @@
 	}
 </script>
 
-<div class="container">
+<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">
-		<h1>Jobs</h1>
+		<h1 class="fw-light">Jobs</h1>
 	</div>
 
 	<div class="row">

diff --git a/src/routes/admin/users/+page.svelte b/src/routes/admin/users/+page.svelte
@@ -48,7 +48,7 @@
 	Register new user
 </a>
 
-<h3>Users list</h3>
+<h1 class="fw-light">Users list</h1>
 
 <table class="table mt-3">
 	<thead>

diff --git a/src/routes/admin/users/[userId]/+page.svelte b/src/routes/admin/users/[userId]/+page.svelte
@@ -20,7 +20,7 @@
 	</ol>
 </nav>
 
-<h3 class="mb-3">User #{user.id} ({user.email})</h3>
+<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">

diff --git a/src/routes/admin/users/[userId]/edit/+page.svelte b/src/routes/admin/users/[userId]/edit/+page.svelte
@@ -36,6 +36,6 @@
 	</ol>
 </nav>
 
-<h3 class="mb-3">Editing user #{user.id} ({user.email})</h3>
+<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
@@ -42,6 +42,6 @@
 	</ol>
 </nav>
 
-<h3 class="mb-3">Registering new user</h3>
+<h1 class="fw-light mb-4">Registering new user</h1>
 
 <UserEditor {user} {save} />
diff --git a/src/routes/auth/login/+page.svelte b/src/routes/auth/login/+page.svelte
@@ -44,7 +44,7 @@
 	});
 </script>
 
-<div class="container">
+<div>
 	{#if userLoggedIn}
 		<div class="row mt-4">
 			<div class="col">
@@ -53,7 +53,7 @@
 		</div>
 	{:else}
 		<div class="row">
-			<h1>Login</h1>
+			<h1 class="fw-light">Login</h1>
 		</div>
 		{#if showSessionExpiredMessage}
 			<div class="row">
@@ -64,7 +64,7 @@
 		{/if}
 		<div class="row">
 			<div class="col-md-4">
-				<h3 class="mt-2">Local account</h3>
+				<h3 class="mt-2 fw-light">Local account</h3>
 				<form method="POST">
 					<div class="mb-3">
 						<label for="userEmail" class="form-label">Email address</label>
@@ -98,7 +98,7 @@
 		{#if oauth2Provider}
 			<div class="row">
 				<div class="col mt-5">
-					<h3>External account</h3>
+					<h3 class="fw-light">External account</h3>
 					<div id="externalLoginError" />
 					<button type="button" on:click={oauth2Login} class="btn btn-primary">
 						{#if oauth2Provider === 'github'}

diff --git a/src/routes/jobs/+page.svelte b/src/routes/jobs/+page.svelte
@@ -20,9 +20,7 @@
 	}
 </script>
 
-<div class="container">
-	<div class="d-flex justify-content-between align-items-center my-3">
-		<h1>Jobs of user "{$page.data.userInfo.email}"</h1>
-	</div>
-	<JobsList {jobUpdater} columnsToHide={['user_email']} />
+<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/profile/+page.svelte b/src/routes/profile/+page.svelte
@@ -50,7 +50,7 @@
 	}
 </script>
 
-<h3>My profile</h3>
+<h1 class="fw-light">My profile</h1>
 
 <div class="row mt-4">
 	<div class="col-lg-10 col-xl-8">

diff --git a/src/routes/projects/[projectId]/+page.svelte b/src/routes/projects/[projectId]/+page.svelte
@@ -78,18 +78,21 @@
 </div>
 
 {#if project}
-	<div class="container">
-		<div class="d-flex justify-content-between align-items-center my-3">
-			<h1>Project {project.name} #{project.id}</h1>
-		</div>
-
-		<StandardDismissableAlert message={projectUpdatesSuccessMessage} />
-		<ProjectDatasetsList {datasets} />
-		<WorkflowsList {workflows} projectId={project.id} />
+	<div class="d-flex justify-content-between align-items-center my-3">
+		<h1 class="fw-light">Project {project.name} #{project.id}</h1>
 	</div>
+
+	<StandardDismissableAlert message={projectUpdatesSuccessMessage} />
+	<ProjectDatasetsList {datasets} />
+	<WorkflowsList {workflows} projectId={project.id} />
 {/if}
 
-<Modal id="editProjectModal" centered={true} bind:this={editProjectModal} onOpen={onEditProjectModalOpen}>
+<Modal
+	id="editProjectModal"
+	centered={true}
+	bind:this={editProjectModal}
+	onOpen={onEditProjectModalOpen}
+>
 	<svelte:fragment slot="header">
 		<h5 class="modal-title">Project properties</h5>
 	</svelte:fragment>

diff --git a/src/routes/projects/[projectId]/datasets/[datasetId]/+page.svelte b/src/routes/projects/[projectId]/datasets/[datasetId]/+page.svelte
@@ -68,15 +68,15 @@
 </div>
 
 {#if dataset}
-	<div class="container">
+	<div>
 		<div class="d-flex justify-content-between align-items-center my-3">
-			<h1>Dataset {dataset.name} #{dataset.id}</h1>
+			<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">
-					<span class="lead py-3">Dataset properties</span>
+					<h3 class="fw-light mt-1">Dataset properties</h3>
 				</div>
 				<ul class="list-group">
 					<li class="list-group-item text-bg-light">
@@ -107,7 +107,7 @@
 			</div>
 			<div class="col-8">
 				<div class="d-flex align-items-center justify-content-between">
-					<span class="lead py-3">Dataset resources</span>
+					<h3 class="fw-light mt-1">Dataset resources</h3>
 				</div>
 				<table class="table table-bordered caption-top align-middle">
 					<thead class="bg-light">

diff --git a/src/routes/projects/[projectId]/workflows/[workflowId]/jobs/+page.svelte b/src/routes/projects/[projectId]/workflows/[workflowId]/jobs/+page.svelte
@@ -44,10 +44,8 @@
 		<div />
 	</div>
 
-	<div class="container">
-		<div class="d-flex justify-content-between align-items-center my-3">
-			<h1>Jobs of workflow "{workflow.name}"</h1>
-		</div>
-		<JobsList columnsToHide={['project', 'workflow', 'user_email']} {jobUpdater} />
+	<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/sandbox/jsonschema/+page.svelte b/src/routes/sandbox/jsonschema/+page.svelte
@@ -10,7 +10,7 @@
 
 </script>
 
-<h1>Sandbox page for jsonschema</h1>
+<h1 class="fw-light">Sandbox page for jsonschema</h1>
 
 <SchemaInput {jsonSchema} bind:parsedSchema={schema} bind:parsedData={schemaData}></SchemaInput>
 

diff --git a/src/routes/tasks/+page.svelte b/src/routes/tasks/+page.svelte
@@ -192,18 +192,12 @@
 	onDestroy(unsubscribe);
 </script>
 
-<div class="container">
-	<div class="d-flex justify-content-between align-items-center">
-		<nav aria-label="breadcrumb">
-			<ol class="breadcrumb">
-				<li class="breadcrumb-item active" aria-current="page">Tasks</li>
-			</ol>
-		</nav>
-	</div>
+<div>
+	<h1 class="fw-light mb-4">Tasks</h1>
 
 	<div class="mb-2" id="errorSection" />
 
-	<p class="lead">Add tasks</p>
+	<h3 class="fw-light">Add tasks</h3>
 
 	<div class="form-check-inline">Package type:</div>
 
@@ -246,7 +240,7 @@
 	</div>
 
 	<div class="row mt-4">
-		<p class="lead">Task List</p>
+		<h3 class="fw-light">Task List</h3>
 		<div class="col-12">
 			<table class="table align-middle">
 				<thead class="table-light">