From 7bdfc54e21cbce57709248cd5e68ece762a18c33 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Mon, 12 Feb 2024 16:03:41 -0800
Subject: feat(settings): small sync and feeds

---
 src/lib/Settings/Category.svelte |  5 ++++-
 src/routes/settings/+page.svelte | 32 ++++++++++++++++++++++++++------
 2 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/src/lib/Settings/Category.svelte b/src/lib/Settings/Category.svelte
index adf5f883..ad3ff6d2 100644
--- a/src/lib/Settings/Category.svelte
+++ b/src/lib/Settings/Category.svelte
@@ -2,6 +2,7 @@
 	export let title = '';
 	export let id = title.toLowerCase();
 	export let open = true;
+	export let newLine = true;
 </script>
 
 <details {open} {id}>
@@ -12,4 +13,6 @@
 	<slot />
 </details>
 
-<p />
+{#if newLine}
+	<p />
+{/if}
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index c21d6746..e98a0978 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -62,12 +62,17 @@
 {#if data.user === undefined}
 	<LogInRestricted />
 {:else}
-	<Category title={$locale().settings.settingsSync.title} id="sync" open={false}>
-		<SettingSync />
-	</Category>
-	<Category title={$locale().settings.rssFeeds.title} id="feeds">
-		<RssFeeds user={data.user} />
-	</Category>
+	<div class="small-categories">
+		<Category title={$locale().settings.settingsSync.title} id="sync" newLine={false}>
+			<SettingSync />
+		</Category>
+		<Category title={$locale().settings.rssFeeds.title} id="feeds" newLine={false}>
+			<RssFeeds user={data.user} />
+		</Category>
+	</div>
+
+	<p />
+
 	<Category title={$locale().settings.display.title}><Display /></Category>
 	<Category title={$locale().settings.calculation.title}><Calculation /></Category>
 	<Category title={$locale().settings.cache.title}><Cache /></Category>
@@ -85,3 +90,18 @@
 	</Category>
 	<Category title={$locale().settings.attributions.title} open={false}><Attributions /></Category>
 {/if}
+
+<style>
+	.small-categories {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 1rem;
+		align-items: start;
+	}
+
+	@media (max-width: 600px) {
+		.small-categories {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>
-- 
cgit v1.2.3