feat: review columns (do not show update) and make space for tools

junobuild · Feb 5, 2025 · f754664 · f754664
1 parent 8543d6d
commit f754664
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 25 deletions.
diff --git a/src/frontend/src/lib/components/auth/User.svelte b/src/frontend/src/lib/components/auth/User.svelte
@@ -11,12 +11,13 @@
 
 	let { user }: Props = $props();
 
-	let { owner, created_at, updated_at, data } = $derived(user);
+	let { owner, created_at, data } = $derived(user);
 
 	let { provider } = $derived(data);
 </script>
 
 <tr>
+	<td></td>
 	<td><Identifier small={false} identifier={owner.toText()} /></td>
 	<td class="providers">
 		{#if provider === 'internet_identity'}
@@ -25,12 +26,29 @@
 			<IconNFID />
 		{/if}
 	</td>
-	<td>{formatToDate(created_at)}</td>
-	<td>{formatToDate(updated_at)}</td>
+	<td class="created">{formatToDate(created_at)}</td>
 </tr>
 
 <style lang="scss">
+	@use '../../styles/mixins/media';
+
 	.providers {
 		vertical-align: middle;
 	}
+
+	.providers {
+		display: none;
+
+		@include media.min-width(small) {
+			display: table-cell;
+		}
+	}
+
+	.created {
+		display: none;
+
+		@include media.min-width(medium) {
+			display: table-cell;
+		}
+	}
 </style>
diff --git a/src/frontend/src/lib/components/auth/Users.svelte b/src/frontend/src/lib/components/auth/Users.svelte
@@ -62,10 +62,10 @@
 	<table>
 		<thead>
 			<tr>
+				<th class="tools"></th>
 				<th class="identifier"> {$i18n.users.identifier} </th>
 				<th class="providers"> {$i18n.users.provider} </th>
 				<th class="created"> {$i18n.users.created} </th>
-				<th class="updated"> {$i18n.users.updated} </th>
 			</tr>
 		</thead>
 
@@ -92,32 +92,29 @@
 <style lang="scss">
 	@use '../../styles/mixins/media';
 
-	.providers,
-	.created,
-	.updated {
+	.tools {
+		width: 48px;
+	}
+
+	.providers {
 		display: none;
 
-		@include media.min-width(medium) {
-			display: table-header-group;
+		@include media.min-width(small) {
+			display: table-cell;
 		}
 	}
 
-	.identifier {
-		width: 100%;
-	}
+	.created {
+		display: none;
 
-	@include media.min-width(medium) {
-		.identifier {
-			width: 260px;
+		@include media.min-width(medium) {
+			display: table-cell;
 		}
+	}
 
+	@include media.min-width(small) {
 		.providers {
-			width: 120px;
-		}
-
-		.providers,
-		.created {
-			display: table-cell;
+			width: 220px;
 		}
 	}
 
@@ -129,9 +126,5 @@
 		.providers {
 			width: inherit;
 		}
-
-		.updated {
-			display: table-cell;
-		}
 	}
 </style>