From 0752bf129ed447f818c2b1a342fd7cf6ed227522 Mon Sep 17 00:00:00 2001
From: Drake Marino <drake@marinodev.com>
Date: Thu, 19 Jun 2025 20:22:03 -0500
Subject: [PATCH] Mobile Admin and contrast

---
 src/app.css                     |  2 +-
 src/routes/admin/+layout.svelte | 89 ++++++++++++++++++---------------
 2 files changed, 50 insertions(+), 41 deletions(-)

diff --git a/src/app.css b/src/app.css
index ba7dbbd..2096704 100644
--- a/src/app.css
+++ b/src/app.css
@@ -20,7 +20,7 @@
 [data-theme='dark'] {
     --text-color: #f4f4f4;
     --bg-color: #0c0c0c;
-    --hover-bg-color: #1c1e1e;
+    --hover-bg-color: #2c2e2e;
     --separator-line-color: #2e343d;
     --low-emphasis-text-color: #999999;
     --primary-color: #1F96F3;
diff --git a/src/routes/admin/+layout.svelte b/src/routes/admin/+layout.svelte
index 50c9b6b..b659220 100644
--- a/src/routes/admin/+layout.svelte
+++ b/src/routes/admin/+layout.svelte
@@ -2,50 +2,59 @@
 	import { page } from '$app/state';
 	import { userState } from '$lib/shared.svelte';
 	import { PERMISSIONS } from '$lib/consts';
+	import { MediaQuery } from 'svelte/reactivity';
+
+	const largeScreen = new MediaQuery('min-width: 1024px');
 
 	let { children } = $props();
 </script>
 
-<div class="bottom-border h-10 pt-2 text-center">
-	{#if (userState.perms & PERMISSIONS.MANAGE_POSTINGS) > 0}
-		<a
-			href="/admin/postings"
-			class="p-2 {page.url.pathname.startsWith('/admin/postings')
-				? 'primary-underline font-bold'
-				: 'low-emphasis-text low-emphasis-text-button'}"
-			><span class="material-symbols-outlined align-bottom">work</span> Postings</a
-		>
-	{/if}
-	{#if (userState.perms & PERMISSIONS.MANAGE_USERS) > 0}
-		<a
-			href="/admin/users"
-			class="p-2 {page.url.pathname.startsWith('/admin/users')
-				? 'primary-underline font-bold'
-				: 'low-emphasis-text low-emphasis-text-button'}"
-			><span class="material-symbols-outlined align-bottom">group</span> Users</a
-		>
-	{/if}
-	<!--TODO-->
-	<!--{#if (userState.perms & PERMISSIONS.MANAGE_TAGS) > 0}-->
-	<!--	<a-->
-	<!--		href="/admin/tags"-->
-	<!--		class="{page.url.pathname.startsWith('/admin/tags')-->
-	<!--			? 'primary-underline font-bold'-->
-	<!--			: 'low-emphasis-text low-emphasis-text-button'} p-2"-->
-	<!--		><span class="material-symbols-outlined align-bottom">sell</span> Tags</a-->
-	<!--	>-->
-	<!--{/if}-->
-	{#if (userState.perms & PERMISSIONS.MANAGE_COMPANIES) > 0}
-		<a
-			href="/admin/companies"
-			class="{page.url.pathname.startsWith('/admin/companies')
-				? 'primary-underline font-bold'
-				: 'low-emphasis-text low-emphasis-text-button'} p-2"
-			><span class="material-symbols-outlined align-bottom">store</span> Companies</a
-		>
-	{/if}
-</div>
+{#if largeScreen.current}
+	<div class="bottom-border h-10 pt-2 text-center">
+		{#if (userState.perms & PERMISSIONS.MANAGE_POSTINGS) > 0}
+			<a
+				href="/admin/postings"
+				class="p-2 {page.url.pathname.startsWith('/admin/postings')
+					? 'primary-underline font-bold'
+					: 'low-emphasis-text low-emphasis-text-button'}"
+				><span class="material-symbols-outlined align-bottom">work</span> Postings</a
+			>
+		{/if}
+		{#if (userState.perms & PERMISSIONS.MANAGE_USERS) > 0}
+			<a
+				href="/admin/users"
+				class="p-2 {page.url.pathname.startsWith('/admin/users')
+					? 'primary-underline font-bold'
+					: 'low-emphasis-text low-emphasis-text-button'}"
+				><span class="material-symbols-outlined align-bottom">group</span> Users</a
+			>
+		{/if}
+		<!--TODO-->
+		<!--{#if (userState.perms & PERMISSIONS.MANAGE_TAGS) > 0}-->
+		<!--	<a-->
+		<!--		href="/admin/tags"-->
+		<!--		class="{page.url.pathname.startsWith('/admin/tags')-->
+		<!--			? 'primary-underline font-bold'-->
+		<!--			: 'low-emphasis-text low-emphasis-text-button'} p-2"-->
+		<!--		><span class="material-symbols-outlined align-bottom">sell</span> Tags</a-->
+		<!--	>-->
+		<!--{/if}-->
+		{#if (userState.perms & PERMISSIONS.MANAGE_COMPANIES) > 0}
+			<a
+				href="/admin/companies"
+				class="{page.url.pathname.startsWith('/admin/companies')
+					? 'primary-underline font-bold'
+					: 'low-emphasis-text low-emphasis-text-button'} p-2"
+				><span class="material-symbols-outlined align-bottom">store</span> Companies</a
+			>
+		{/if}
+	</div>
+{/if}
 
 <div class="base-container">
-	{@render children()}
+	{#if largeScreen.current}
+		{@render children()}
+	{:else}
+		<h2 class="m-3 text-center">Please use a computer to view the admin page!</h2>
+	{/if}
 </div>