fix mobile account
This commit is contained in:
parent
95bc2dfabc
commit
7d4ad34587
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user