Mobile Compatibility

2025-06-19 20:17:11 -05:00 · 2025-06-19 20:17:11 -05:00 · 1474ba29db
commit 1474ba29db
parent cbe002f4c4
9 changed files with 210 additions and 134 deletions
--- a/src/app.css
+++ b/src/app.css
@ -189,7 +189,7 @@ input[type='search']:-webkit-autofill, input[type='text']:-webkit-autofill, inpu
 .content {
    width: 100%;

-    @apply px-6;
+    @apply px-2;
 }


--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -3,6 +3,7 @@
 	import { onMount } from 'svelte';
 	import { updateUserState, userState } from '$lib/shared.svelte';
 	import { PERMISSIONS } from '$lib/consts';
+	import { MediaQuery } from 'svelte/reactivity';

 	let currentTheme: string = $state('');

@ -18,6 +19,15 @@
 		currentTheme = theme;
 	}

+	function toggleMenu() {
+		var menu = document.getElementById('mobile-menu')!;
+		if (menu.style.display === 'block') {
+			menu.style.display = 'none';
+		} else {
+			menu.style.display = 'block';
+		}
+	}
+
 	onMount(() => {
 		const savedTheme = document.documentElement.getAttribute('data-theme');
 		if (savedTheme) {
@ -31,11 +41,13 @@
 		updateUserState();
 	});

+	const largeScreen = new MediaQuery('min-width: 640px');
+
 	let { children } = $props();
 </script>

 <link
-	href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..40,400,0,0&display=block&icon_names=account_circle,arrow_drop_down,arrow_drop_up,calendar_today,call,check,close,cloud_upload,dark_mode,delete,description,edit,group,info,light_mode,login,mail,open_in_new,person,search,sell,store,upload,visibility,visibility_off,work"
+	href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..40,400,0,0&display=block&icon_names=account_circle,arrow_drop_down,arrow_drop_up,calendar_today,call,check,close,cloud_upload,dark_mode,delete,description,edit,group,info,light_mode,login,mail,menu,open_in_new,person,search,sell,store,upload,visibility,visibility_off,work"
 	rel="stylesheet"
 />

@ -50,57 +62,100 @@
 					src="/mdevtriangle.svg"
 					width="24"
 				/>
-				<div class="inline-block text-sm">Home</div>
+				<!--				<div class="inline-block text-sm">Home</div>-->
 			</a>
 			<!--		<a href="/about" class="hover-bg-color mr-1 rounded px-3 py-2 text-sm">About</a>-->
-			{#if (userState.perms & PERMISSIONS.VIEW) > 0}
-				<a href="/postings" class="hover-bg-color mr-1 rounded px-3 py-2 text-sm">Postings</a>
-			{/if}
-			{#if (userState.perms & PERMISSIONS.VIEW) > 0}
-				<a href="/companies" class="hover-bg-color mr-1 rounded px-3 py-2 text-sm">Companies</a>
-			{/if}
-			{#if (userState.perms & (PERMISSIONS.MANAGE_POSTINGS | PERMISSIONS.MANAGE_TAGS | PERMISSIONS.MANAGE_USERS)) > 0}
-				<a
-					href={(userState.perms & PERMISSIONS.MANAGE_POSTINGS) > 0
-						? '/admin/postings'
-						: (userState.perms & PERMISSIONS.MANAGE_USERS) > 0
-							? '/admin/users'
-							: // TODO: Implement tags
-								// : (userState.perms & PERMISSIONS.MANAGE_TAGS) > 0
-								// 	? '/admin/tags'
-								(userState.perms & PERMISSIONS.MANAGE_COMPANIES) > 0
-								? '/admin/companies'
-								: '/admin'}
-					class="hover-bg-color mr-1 rounded px-3 py-2 text-sm">Administration</a
-				>
+			{#if largeScreen.current}
+				{#if (userState.perms & PERMISSIONS.VIEW) > 0}
+					<a href="/postings" class="hover-bg-color mr-1 rounded px-3 py-2 text-sm">Postings</a>
+					<a href="/companies" class="hover-bg-color mr-1 rounded px-3 py-2 text-sm">Companies</a>
+				{/if}
+				{#if (userState.perms & (PERMISSIONS.MANAGE_POSTINGS | PERMISSIONS.MANAGE_TAGS | PERMISSIONS.MANAGE_USERS)) > 0}
+					<a
+						href={(userState.perms & PERMISSIONS.MANAGE_POSTINGS) > 0
+							? '/admin/postings'
+							: (userState.perms & PERMISSIONS.MANAGE_USERS) > 0
+								? '/admin/users'
+								: // TODO: Implement tags
+									// : (userState.perms & PERMISSIONS.MANAGE_TAGS) > 0
+									// 	? '/admin/tags'
+									(userState.perms & PERMISSIONS.MANAGE_COMPANIES) > 0
+									? '/admin/companies'
+									: '/admin'}
+						class="hover-bg-color mr-1 rounded px-3 py-2 text-sm">Administration</a
+					>
+				{/if}
 			{/if}
 		</nav>
 		<div>
-			<button class="" onclick={toggleTheme}>
-				<span class="material-symbols-outlined hover-bg-color rounded-full p-1">
-					{currentTheme === 'light' ? 'light_mode' : 'dark_mode'}
-				</span>
-			</button>
-			<a
-				class="hover-bg-color inline-block rounded p-1 align-top"
-				href={userState.id !== null ? '/account' : '/signin'}
+			<button
+				class="material-symbols-outlined hover-bg-color rounded-full p-1"
+				onclick={toggleTheme}
 			>
-				<span class="material-symbols-outlined inline-block h-min align-middle">
-					{userState.id !== null ? 'account_circle' : 'login'}
-				</span>
-				<span class="inline-block h-min align-middle text-sm">
-					{userState.id !== null ? 'Account' : 'Sign-in'}
-				</span>
-			</a>
+				{currentTheme === 'light' ? 'light_mode' : 'dark_mode'}
+			</button>
+			{#if largeScreen.current}
+				<a
+					class="hover-bg-color inline-block h-min rounded p-1 pr-2 align-top"
+					href={userState.id !== null ? '/account' : '/signin'}
+				>
+					<span class="material-symbols-outlined inline-block h-min align-top">
+						{userState.id !== null ? 'account_circle' : 'login'}
+					</span>
+					<span class="inline-block h-min align-top text-sm">
+						{userState.id !== null ? 'Account' : 'Sign-in'}
+					</span>
+				</a>
+			{:else}
+				<button
+					class="material-symbols-outlined hover-bg-color rounded-full p-1"
+					onclick={toggleMenu}>menu</button
+				>
+			{/if}
 		</div>
 	</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="/companies"
+				class="hover-bg-color mr-1 block rounded px-3 py-2 text-sm"
+				onclick={toggleMenu}>Companies</a
+			>
+		{/if}
+		{#if (userState.perms & (PERMISSIONS.MANAGE_POSTINGS | PERMISSIONS.MANAGE_TAGS | PERMISSIONS.MANAGE_USERS)) > 0}
+			<a
+				href={(userState.perms & PERMISSIONS.MANAGE_POSTINGS) > 0
+					? '/admin/postings'
+					: (userState.perms & PERMISSIONS.MANAGE_USERS) > 0
+						? '/admin/users'
+						: // TODO: Implement tags
+							// : (userState.perms & PERMISSIONS.MANAGE_TAGS) > 0
+							// 	? '/admin/tags'
+							(userState.perms & PERMISSIONS.MANAGE_COMPANIES) > 0
+							? '/admin/companies'
+							: '/admin'}
+				class="hover-bg-color mr-1 block rounded px-3 py-2 text-sm"
+				onclick={toggleMenu}>Administration</a
+			>
+		{/if}
+	</div>

 	<div class="flex-grow">
 		{@render children()}
 	</div>

-	<footer class="top-border bg-color footer flex h-min w-full justify-between p-2 text-center">
-		<div class="inline-block text-left align-top">
+	<footer
+		class="top-border bg-color footer {largeScreen.current
+			? 'flex'
+			: 'block'} h-min w-full justify-between p-2 text-center"
+	>
+		<div class="{largeScreen.current ? 'inline-block' : 'block'} text-left align-top">
+			<!--{#if largeScreen.current}-->
 			<div class="inline-block pr-3">
 				<p class="font-semibold">Drake Marino:</p>
 				<a class="hyperlink-color hyperlink-underline" href="mailto:drake@marinodev.com"
@ -113,21 +168,29 @@
 					>chetan@marinodev.com</a
 				>
 			</div>
+			<!--{/if}-->
 		</div>
-		<div class="inline-block align-top font-semibold">
-			<div class="font-semibold">MarinoDev</div>
-			<div class="font-normal">2025</div>
-		</div>
-		<div class="inline-block text-right align-top">
+		{#if largeScreen.current}
+			<div
+				class="{largeScreen.current ? 'inline-block' : 'block text-left'} align-top font-semibold"
+			>
+				<div class="font-semibold">MarinoDev</div>
+				<div class="font-normal">2025</div>
+			</div>
+		{/if}
+		<div class="{largeScreen.current ? 'inline-block text-right' : 'block text-left'} align-top">
+			<!--{#if largeScreen.current}-->
 			<div class="font-semibold">Source Code:</div>
 			<a
 				class="hyperlink-color hyperlink-underline"
 				href="https://git.marinodev.com/MarinoDev/FBLA25"
 				>https://git.marinodev.com/MarinoDev/FBLA25</a
 			>
+			<!--{/if}-->
 		</div>
 	</footer>
 </div>
+
 <!--<h3 class="pt-16 font-semibold">Contact Information:</h3>-->
 <!--<p>Drake Marino:</p>-->
 <!--<a href="mailto:drake@marinodev.com" class="hyperlink-color hyperlink-underline"-->
--- a/src/routes/admin/companies/+page.svelte
+++ b/src/routes/admin/companies/+page.svelte
@ -9,7 +9,7 @@
 </script>

 <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">
 				Company Management (Total: {data.companies?.length || 0})
--- a/src/routes/admin/postings/+page.svelte
+++ b/src/routes/admin/postings/+page.svelte
@ -13,7 +13,7 @@
 </script>

 <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">
 				Posting Management (Total: {data.postings?.length || 0})
--- a/src/routes/admin/users/+page.svelte
+++ b/src/routes/admin/users/+page.svelte
@ -18,7 +18,7 @@
 </script>

 <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">
 				User Account Management (Total: {data.users?.length || 0})
--- a/src/routes/companies/+page.svelte
+++ b/src/routes/companies/+page.svelte
@ -14,7 +14,7 @@

 <div class="base-container-small">
 	<div class="content">
-		<div class="elevated separator-borders mb-4 mt-4 rounded">
+		<div class="elevated separator-borders my-2 rounded">
 			<div class="flex justify-between">
 				<div class="inline-block p-3 font-semibold">Companies</div>
 				{#if (userState.perms & PERMISSIONS.MANAGE_COMPANIES) > 0 || (userState.perms & PERMISSIONS.SUBMIT_POSTINGS) > 0}
--- a/src/routes/postings/+page.svelte
+++ b/src/routes/postings/+page.svelte
@ -4,6 +4,7 @@
 	import { onMount } from 'svelte';
 	import { employmentTypeDisplayName, userState } from '$lib/shared.svelte';
 	import { PERMISSIONS } from '$lib/consts';
+	import { MediaQuery } from 'svelte/reactivity';

 	let details: Posting | undefined = $state<Posting>();

@ -38,6 +39,8 @@
 	onMount(async () => {
 		await fetchDetails(data.postings[0].id);
 	});
+
+	const wideScreen = new MediaQuery('min-width: 768px');
 </script>

 <div class="base-container">
@ -63,14 +66,18 @@
 			</div>
 		</form>
 		<div class="flex">
-			<div class="right-border inline-block w-1/3">
+			<div class="right-border inline-block {wideScreen.current ? 'w-1/3' : 'w-full'}">
 				{#each data.postings as posting}
 					<button
 						class="bottom-border block w-full p-4 text-left {details?.id === posting.id
 							? 'accent-bg-color'
 							: 'hover-bg-color'}"
 						onclick={() => {
-							fetchDetails(posting.id);
+							if (wideScreen.current) {
+								fetchDetails(posting.id);
+							} else {
+								window.location.href = `/postings/${posting.id}`;
+							}
 						}}
 					>
 						<img
@ -88,84 +95,87 @@
 					</button>
 				{/each}
 			</div>
-			{#if details !== undefined}
-				<div
-					class="elevated separator-borders top-with-navbar sticky mb-4 ml-4 inline-block h-min w-2/3 rounded p-4"
-				>
-					<div class="bottom-border flex justify-between pb-2">
-						<div class="inline-block">
-							<img
-								class="inline-block rounded"
-								src="/uploads/logos/{details.company.id || 'default'}.jpg"
-								alt="Company Logo"
-								height="64"
-								width="64"
-								onerror={(e) => logoFallback(e, details)}
-							/>
-							<div class="inline-block pl-2 align-top">
-								<h1>{details.title}</h1>
-								<a href="/companies/{details.company.id}" class="hover-hyperlink text-xl"
-									>{details.company.name}</a
-								>
+			{#if wideScreen.current}
+				{#if details !== undefined}
+					<div
+						class="elevated separator-borders top-with-navbar sticky mb-2 ml-2 inline-block h-min w-2/3 rounded p-4"
+					>
+						<div class="bottom-border flex justify-between pb-2">
+							<div class="inline-block">
+								<img
+									class="inline-block rounded"
+									src="/uploads/logos/{details.company.id || 'default'}.jpg"
+									alt="Company Logo"
+									height="64"
+									width="64"
+									onerror={(e) => logoFallback(e, details)}
+								/>
+								<div class="inline-block pl-2 align-top">
+									<h1>{details.title}</h1>
+									<a href="/companies/{details.company.id}" class="hover-hyperlink text-xl"
+										>{details.company.name}</a
+									>
+								</div>
 							</div>
+							{#if userState.perms >= 0 && ((userState.perms & PERMISSIONS.MANAGE_POSTINGS) > 0 || ((userState.perms & PERMISSIONS.SUBMIT_POSTINGS) > 0 && userState.companyId === details.company.id))}
+								<a
+									class="dull-primary-bg-color inline-block h-min rounded-md px-2.5 py-1 align-top"
+									href="/postings/{details.id}/manage/applications/">Manage posting</a
+								>
+							{:else if (userState.perms & PERMISSIONS.APPLY_FOR_JOBS) > 0}
+								<a
+									class="dull-primary-bg-color inline-block h-min rounded-md px-2.5 py-1 align-top"
+									href="/postings/{details.id}/apply">Apply</a
+								>
+							{:else}
+								Sign-in to apply
+							{/if}
 						</div>
-						{#if userState.perms >= 0 && ((userState.perms & PERMISSIONS.MANAGE_POSTINGS) > 0 || ((userState.perms & PERMISSIONS.SUBMIT_POSTINGS) > 0 && userState.companyId === details.company.id))}
-							<a
-								class="dull-primary-bg-color inline-block h-min rounded-md px-2.5 py-1 align-top"
-								href="/postings/{details.id}/manage/applications/">Manage posting</a
+						<div class="scrollbar-on-elevated details-height overflow-y-scroll">
+							<h2 class="pt-2 font-semibold">Contact</h2>
+							<p>{details.employer?.fullName} ({details.employer?.username})</p>
+							<a class="hover-hyperlink block" href="mailto:{details.employer?.email}"
+								>{details.employer?.email}</a
 							>
-						{:else if (userState.perms & PERMISSIONS.APPLY_FOR_JOBS) > 0}
-							<a
-								class="dull-primary-bg-color inline-block h-min rounded-md px-2.5 py-1 align-top"
-								href="/postings/{details.id}/apply">Apply</a
+							<a class="hover-hyperlink block" href="tel:{details.employer?.phone}"
+								>{details.employer?.phone}</a
 							>
-						{:else}
-							Sign-in to apply
-						{/if}
+							<h2 class="pt-2 font-semibold">Details</h2>
+							{#if details.employmentType}
+								<p>{employmentTypeDisplayName(details.employmentType)}</p>
+							{/if}
+							{#if details.address}
+								<a
+									href="https://www.google.com/maps/search/?api=1&query={details.address}"
+									class="block"
+									>Address: <span class="hover-hyperlink break-words">{details.address}</span></a
+								>
+							{/if}
+							{#if details.wage}
+								<p>Wage: {details.wage}</p>
+							{/if}
+							{#if details.createdAt}
+								<p>Posted: {details.createdAt.toLocaleDateString('en-US', dateFormatOptions)}</p>
+							{/if}
+							{#if details.link}
+								<a href={details.link} class="block"
+									>More information: <span class="hyperlink-color hyperlink-underline break-all"
+										>{details.link}</span
+									></a
+								>
+							{/if}
+							{#if details.flyerLink}
+								<a href={details.flyerLink} class="block"
+									>Flyer: <span class="hyperlink-color hyperlink-underline break-all"
+										>{details.flyerLink}</span
+									></a
+								>
+							{/if}
+							<h2 class="pt-2 font-semibold">Job Description</h2>
+							<p class="whitespace-pre-wrap">{details.description}</p>
+						</div>
 					</div>
-					<div class="scrollbar-on-elevated details-height overflow-y-scroll">
-						<h2 class="pt-2 font-semibold">Contact</h2>
-						<p>{details.employer?.fullName} ({details.employer?.username})</p>
-						<a class="hover-hyperlink block" href="mailto:{details.employer?.email}"
-							>{details.employer?.email}</a
-						>
-						<a class="hover-hyperlink block" href="tel:{details.employer?.phone}"
-							>{details.employer?.phone}</a
-						>
-						<h2 class="pt-2 font-semibold">Details</h2>
-						{#if details.employmentType}
-							<p>{employmentTypeDisplayName(details.employmentType)}</p>
-						{/if}
-						{#if details.address}
-							<a
-								href="https://www.google.com/maps/search/?api=1&query={details.address}"
-								class="block w-max"
-								>Address: <span class="hover-hyperlink">{details.address}</span></a
-							>
-						{/if}
-						{#if details.wage}
-							<p>Wage: {details.wage}</p>
-						{/if}
-						{#if details.createdAt}
-							<p>Posted: {details.createdAt.toLocaleDateString('en-US', dateFormatOptions)}</p>
-						{/if}
-						{#if details.link}
-							<a href={details.link} class="block w-max"
-								>More information: <span class="hyperlink-color hyperlink-underline"
-									>{details.link}</span
-								></a
-							>
-						{/if}
-						{#if details.flyerLink}
-							<a href={details.flyerLink} class="block w-max"
-								>Flyer: <span class="hyperlink-color hyperlink-underline">{details.flyerLink}</span
-								></a
-							>
-						{/if}
-						<h2 class="pt-2 font-semibold">Job Description</h2>
-						<p class="whitespace-pre-wrap">{details.description}</p>
-					</div>
-				</div>
+				{/if}
 			{/if}
 		</div>
 	</div>
--- a/src/routes/postings/[posting]/+page.svelte
+++ b/src/routes/postings/[posting]/+page.svelte
@ -20,7 +20,7 @@

 <div class="base-container-small">
 	<div class="content">
-		<div class="elevated separator-borders ml-4 mt-4 inline-block h-min w-full rounded p-4">
+		<div class="elevated separator-borders my-2 inline-block h-min w-full rounded p-4">
 			<div class="bottom-border elevated-bg flex justify-between pb-2">
 				<div class="inline-block">
 					<img
@ -66,8 +66,8 @@
 				{#if data.posting.address}
 					<a
 						href="https://www.google.com/maps/search/?api=1&query={data.posting.address}"
-						class="block w-max"
-						>Address: <span class="hover-hyperlink">{data.posting.address}</span></a
+						class="block"
+						>Address: <span class="hover-hyperlink break-words">{data.posting.address}</span></a
 					>
 				{/if}
 				{#if data.posting.wage}
@ -77,20 +77,23 @@
 					<p>Posted: {data.posting.createdAt.toLocaleDateString('en-US', dateFormatOptions)}</p>
 				{/if}
 				{#if data.posting.link}
-					<a href={data.posting.link} class="block w-max"
-						>More information: <span class="hyperlink-color hyperlink-underline"
+					<a href={data.posting.link} class="block"
+						>More information: <span class="hyperlink-color hyperlink-underline break-all"
 							>{data.posting.link}</span
 						></a
 					>
 				{/if}
 				{#if data.posting.flyerLink}
-					<a href={data.posting.flyerLink} class="block w-max"
-						>Flyer: <span class="hyperlink-color hyperlink-underline">{data.posting.flyerLink}</span
+					<a href={data.posting.flyerLink} class="block"
+						>Flyer: <span class="hyperlink-color hyperlink-underline break-all"
+							>{data.posting.flyerLink}</span
 						></a
 					>
 				{/if}
 				<h2 class="pt-2 font-semibold">Job Description</h2>
-				<p class="whitespace-pre-wrap">{data.posting.description}</p>
+				<p class="whitespace-pre-wrap break-words">
+					{data.posting.description}
+				</p>
 			</div>
 		</div>
 	</div>
--- a/src/routes/postings/[posting]/manage/applications/+page.svelte
+++ b/src/routes/postings/[posting]/manage/applications/+page.svelte
@ -39,7 +39,7 @@
 </script>

 <div class="content">
-	<div class="elevated separator-borders m-4 rounded">
+	<div class="elevated separator-borders my-2 rounded">
 		<div class="flex place-content-between">
 			<div class="p-3 font-semibold">
 				Application Management (Total: {data.applications?.length || 0})
@ -70,7 +70,7 @@
 				</button>
 				<div class="panel hidden p-2">
 					<div class="flex justify-between">
-						<div class="inline-block pr-4 min-w-max">
+						<div class="inline-block min-w-max pr-4">
 							{#if application.user?.email}
 								<p>Email: {application.user.email}</p>
 							{/if}