From 7d4ad34587db0d10a4b25d4884b45af423aba123 Mon Sep 17 00:00:00 2001
From: Drake Marino <drake@marinodev.com>
Date: Thu, 19 Jun 2025 20:42:33 -0500
Subject: [PATCH] fix mobile account

---
 src/routes/+layout.svelte                |  21 ++--
 src/routes/account/+page.svelte          | 116 ++++++++++++-----------
 src/routes/account/settings/+page.svelte |   2 +-
 3 files changed, 77 insertions(+), 62 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index a7d6534..ef5b5e7 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -117,14 +117,12 @@
 		</div>
 		<div id="mobile-menu" class="hidden">
 			{#if (userState.perms & PERMISSIONS.VIEW) > 0}
-				<a
-					href="/postings"
-					class="hover-bg-color mr-1 block rounded px-3 py-2 text-sm"
-					onclick={toggleMenu}>Postings</a
+				<a href="/postings" class="hover-bg-color mr-1 block px-3 py-2 text-sm" onclick={toggleMenu}
+					>Postings</a
 				>
 				<a
 					href="/companies"
-					class="hover-bg-color mr-1 block rounded px-3 py-2 text-sm"
+					class="hover-bg-color mr-1 block px-3 py-2 text-sm"
 					onclick={toggleMenu}>Companies</a
 				>
 			{/if}
@@ -140,10 +138,21 @@
 								(userState.perms & PERMISSIONS.MANAGE_COMPANIES) > 0
 								? '/admin/companies'
 								: '/admin'}
-					class="hover-bg-color mr-1 block rounded px-3 py-2 text-sm"
+					class="hover-bg-color mr-1 block px-3 py-2 text-sm"
 					onclick={toggleMenu}>Administration</a
 				>
 			{/if}
+			<a
+				class="hover-bg-color block h-min p-1 pr-2 align-top"
+				href={userState.id !== null ? '/account' : '/signin'}
+			>
+				<span class="material-symbols-outlined h-min align-top">
+					{userState.id !== null ? 'account_circle' : 'login'}
+				</span>
+				<span class="h-min align-top text-sm">
+					{userState.id !== null ? 'Account' : 'Sign-in'}
+				</span>
+			</a>
 		</div>
 	</nav>
 
diff --git a/src/routes/account/+page.svelte b/src/routes/account/+page.svelte
index 5e3184f..0027421 100644
--- a/src/routes/account/+page.svelte
+++ b/src/routes/account/+page.svelte
@@ -2,6 +2,7 @@
 	import { onMount } from 'svelte';
 	import type { PageProps } from './$types';
 	import type { Company } from '$lib/types';
+	import { MediaQuery } from 'svelte/reactivity';
 
 	let applicationToDelete: number = $state(0);
 	let { data }: PageProps = $props();
@@ -138,50 +139,54 @@
 			console.error('Error uploading file:', error);
 		}
 	}
+
+	const largeScreen = new MediaQuery('min-width: 640px');
 </script>
 
 <div class="base-container">
 	<div class="content flex py-4">
-		<div class="elevated separator-borders m-2 inline-block h-min min-w-max rounded align-top">
-			<div class="inline-block p-4">
-				<img
-					alt="User avatar"
-					class="mb-2 inline-block rounded-lg"
-					height="240"
-					id="avatar"
-					onerror={avatarFallback}
-					src="/uploads/avatars/{data.user.id
-						? data.user.id
-						: 'default'}.svg?timestamp=${Date.now()}"
-					width="240"
-				/>
-				{#if data.user.fullName}
-					<h2 class="text-center font-semibold">{data.user.fullName}</h2>
-					<h3 class="text-center">{data.user.username}</h3>
+		{#if largeScreen.current}
+			<div class="elevated separator-borders m-2 inline-block h-min min-w-max rounded align-top">
+				<div class="inline-block p-4">
+					<img
+						alt="User avatar"
+						class="mb-2 inline-block rounded-lg"
+						height="240"
+						id="avatar"
+						onerror={avatarFallback}
+						src="/uploads/avatars/{data.user.id
+							? data.user.id
+							: 'default'}.svg?timestamp=${Date.now()}"
+						width="240"
+					/>
+					{#if data.user.fullName}
+						<h2 class="text-center font-semibold">{data.user.fullName}</h2>
+						<h3 class="text-center">{data.user.username}</h3>
+					{/if}
+					{#if !data.user.fullName}
+						<h2 class="text-center font-semibold">{data.user.username}</h2>
+					{/if}
+				</div>
+				{#if data.user.email}
+					<div class="top-border p-3">
+						<span class="material-symbols-outlined align-middle">mail</span>
+						<a class="hover-hyperlink" href="mailto:{data.user.email}">{data.user.email}</a>
+					</div>
 				{/if}
-				{#if !data.user.fullName}
-					<h2 class="text-center font-semibold">{data.user.username}</h2>
+				{#if data.user.phone}
+					<div class="top-border p-3">
+						<span class="material-symbols-outlined align-middle">call</span>
+						<a class="hover-hyperlink" href="tel:{data.user.phone}">{data.user.phone}</a>
+					</div>
+				{/if}
+				{#if data.user.createdAt}
+					<div class="top-border p-3">
+						<span class="material-symbols-outlined align-middle">calendar_today</span>
+						Joined {data.user.createdAt.toLocaleDateString('en-US', dateFormatOptions)}
+					</div>
 				{/if}
 			</div>
-			{#if data.user.email}
-				<div class="top-border p-3">
-					<span class="material-symbols-outlined align-middle">mail</span>
-					<a class="hover-hyperlink" href="mailto:{data.user.email}">{data.user.email}</a>
-				</div>
-			{/if}
-			{#if data.user.phone}
-				<div class="top-border p-3">
-					<span class="material-symbols-outlined align-middle">call</span>
-					<a class="hover-hyperlink" href="tel:{data.user.phone}">{data.user.phone}</a>
-				</div>
-			{/if}
-			{#if data.user.createdAt}
-				<div class="top-border p-3">
-					<span class="material-symbols-outlined align-middle">calendar_today</span>
-					Joined {data.user.createdAt.toLocaleDateString('en-US', dateFormatOptions)}
-				</div>
-			{/if}
-		</div>
+		{/if}
 		<div class="inline-block w-full">
 			<div class="elevated separator-borders m-2 h-min w-full rounded">
 				<div class="bottom-border flex place-content-between">
@@ -261,41 +266,42 @@
 				<div class="elevated separator-borders m-2 inline-block h-min w-full rounded">
 					<div class="p-3 font-semibold">Pending applications</div>
 					{#each data.applications as application}
-						<button class="top-border flex justify-between p-2 accordion">
+						<button class="top-border accordion flex justify-between p-2">
 							<div class="inline-block">
-								<div class="font-semibold text-left">
+								<div class="text-left font-semibold">
 									Applied to: <a
 										class="hover-hyperlink font-normal"
 										href="/postings/{application.postingId}">{application.postingTitle}</a
 									>
 								</div>
-								<div class="font-semibold text-left">
+								<div class="text-left font-semibold">
 									Applied on: <span class="font-normal"
 										>{application.createdAt.toLocaleDateString('en-US', dateFormatOptions)}</span
 									>
 								</div>
 							</div>
-							<div class="material-symbols-outlined align-top pt-3 pr-3">arrow_drop_down</div>
+							<div class="material-symbols-outlined pr-3 pt-3 align-top">arrow_drop_down</div>
 						</button>
-						<div class="panel hidden p-2 justify-between">
+						<div class="panel hidden justify-between p-2">
 							<div class="inline-block">
-
-<!--							<h2>Candidate Statement</h2>-->
-							<h3 class="low-emphasis-text">
-								Why do you believe you are the best fit for this role?
-							</h3>
-							<p class="whitespace-pre-wrap">{application.candidateStatement}</p>
+								<!--							<h2>Candidate Statement</h2>-->
+								<h3 class="low-emphasis-text">
+									Why do you believe you are the best fit for this role?
+								</h3>
+								<p class="whitespace-pre-wrap">{application.candidateStatement}</p>
 							</div>
-							<div class="mt-3 mr-3">
-
-							<a href="account/editapplication?id={application.id}" class="mr-3 material-symbols-outlined hyperlink-color">edit</a>
+							<div class="mr-3 mt-3">
+								<a
+									href="account/editapplication?id={application.id}"
+									class="material-symbols-outlined hyperlink-color mr-3">edit</a
+								>
 								<button
 									class="material-symbols-outlined danger-color inline-block"
 									onclick={() => {
-									applicationToDelete = application.id;
-									openConfirm();
-								}}
-								>delete
+										applicationToDelete = application.id;
+										openConfirm();
+									}}
+									>delete
 								</button>
 							</div>
 						</div>
diff --git a/src/routes/account/settings/+page.svelte b/src/routes/account/settings/+page.svelte
index 465d69a..2702f9d 100644
--- a/src/routes/account/settings/+page.svelte
+++ b/src/routes/account/settings/+page.svelte
@@ -88,7 +88,7 @@
 
 <div class="base-container">
 	<div class="content">
-		<div class="elevated separator-borders m-4 rounded">
+		<div class="elevated separator-borders my-2 rounded">
 			<div class="bottom-border flex place-content-between">
 				<div class="p-3 font-semibold">Edit Account</div>
 			</div>