fix: Redirect setting style

frappe · Sep 21, 2024 · 0c4e84e · 0c4e84e
1 parent b7902eb
commit 0c4e84e
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 31 deletions.
diff --git a/frontend/src/components/Settings/GlobalRedirects.vue b/frontend/src/components/Settings/GlobalRedirects.vue
@@ -1,41 +1,44 @@
 <template>
-	<div>
-		<div class="flex flex-col justify-between gap-5">
-			<div class="flex flex-col justify-between text-sm">
-				<div class="flex border-b border-outline-gray-1 py-2 text-text-icons-gray-5">
-					<span class="w-1/2">From URL</span>
-					<span class="w-1/2 pl-2">To URL</span>
-				</div>
+	<div class="overflow-hidden">
+		<div class="mb-5">
+			<div class="flex gap-4 px-[2px] py-2">
+				<BuilderInput
+					type="text"
+					v-model="redirectMap.from"
+					:hideClearButton="true"
+					required
+					placeholder="From" />
+				<BuilderInput
+					type="text"
+					v-model="redirectMap.to"
+					:hideClearButton="true"
+					required
+					placeholder="To" />
+			</div>
+			<button
+				class="flex w-fit cursor-pointer items-center gap-2 px-[2px] py-1 text-base text-text-icons-gray-5"
+				@click="addRedirect">
+				<FeatherIcon name="plus" class="size-4" />
+				<span>Add Redirect</span>
+			</button>
+		</div>
+		<div class="h-full overflow-hidden text-sm">
+			<div
+				class="sticky top-0 flex rounded-t-md border-b border-outline-gray-1 bg-surface-gray-1 py-2 text-text-icons-gray-5">
+				<span class="w-1/2 pl-2">From URL</span>
+				<span class="w-1/2 pl-2">To URL</span>
+			</div>
+			<div class="h-[calc(100%-115px)] overflow-y-auto">
 				<div
-					class="group flex items-center rounded-sm border-b border-outline-gray-1 px-2 py-2 text-base text-text-icons-gray-6 hover:bg-surface-gray-2"
+					class="group flex items-center rounded-sm border-b border-outline-gray-1 px-2 py-2 text-sm text-text-icons-gray-6 hover:bg-surface-gray-2"
 					v-for="row in rows">
-					<span class="w-1/2">{{ row.from }}</span>
-					<span class="ml-3 w-1/2 pl-2">{{ row.to }}</span>
+					<code class="w-1/2 truncate">{{ row.from }}</code>
+					<code class="ml-3 w-1/2 truncate pl-2">{{ row.to }}</code>
 					<FeatherIcon
 						name="trash"
 						class="size-3 cursor-pointer text-text-icons-gray-5"
 						@click="deleteRedirect(row.id)" />
 				</div>
-				<div class="flex gap-4 py-2">
-					<BuilderInput
-						type="text"
-						v-model="redirectMap.from"
-						:hideClearButton="true"
-						required
-						placeholder="From" />
-					<BuilderInput
-						type="text"
-						v-model="redirectMap.to"
-						:hideClearButton="true"
-						required
-						placeholder="To" />
-				</div>
-				<div
-					class="flex cursor-pointer items-center gap-2 py-1 text-base text-text-icons-gray-5"
-					@click="addRedirect">
-					<FeatherIcon name="plus" class="size-4" />
-					<span>Add Redirect</span>
-				</div>
 			</div>
 		</div>
 	</div>

diff --git a/frontend/src/data/routeRedirects.ts b/frontend/src/data/routeRedirects.ts
@@ -5,7 +5,7 @@ const routeRedirects = createListResource({
 	doctype: "Website Route Redirect",
 	parent: "Website Settings",
 	fields: ["source", "target", "redirect_http_status", "name"],
-	orderBy: "modified desc",
+	orderBy: "creation desc",
 	cache: "routeRedirects",
 	start: 0,
 	pageLength: 100,