Merge pull request 'CSS Styling' (#21) from development into main
Reviewed-on: #21
This commit is contained in:
@@ -2,75 +2,72 @@
|
|||||||
let { data } = $props();
|
let { data } = $props();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="p-4 sm:p-6">
|
<h1 class="mt-2 mb-4 text-center text-2xl font-bold">User Dashboard</h1>
|
||||||
<h1 class="mb-6 text-2xl font-bold text-gray-800">User Dashboard</h1>
|
|
||||||
|
|
||||||
<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
||||||
<!-- Left Column: User Profile -->
|
<!-- Left Column: User Profile -->
|
||||||
<div class="lg:col-span-1">
|
<div class="lg:col-span-1">
|
||||||
<div class="flex h-full flex-col rounded-lg border border-gray-300 bg-white p-6">
|
<div class="flex h-full flex-col rounded-lg border border-gray-300 bg-white p-6">
|
||||||
<div class="flex flex-grow flex-col items-center text-center">
|
<div class="flex flex-grow flex-col items-center text-center">
|
||||||
<div
|
<div
|
||||||
class="mb-4 flex h-24 w-24 items-center justify-center rounded-full bg-gray-200 text-4xl font-bold text-gray-600"
|
class="mb-4 flex h-24 w-24 items-center justify-center rounded-full bg-gray-200 text-4xl font-bold text-gray-600"
|
||||||
>
|
>
|
||||||
{data.profile?.display_name?.[0]?.toUpperCase() ?? 'U'}
|
{data.profile?.display_name?.[0]?.toUpperCase() ?? 'U'}
|
||||||
</div>
|
|
||||||
<h2 class="text-xl font-semibold text-gray-900">{data.profile?.display_name}</h2>
|
|
||||||
<p class="text-sm text-gray-500">{data.user?.email}</p>
|
|
||||||
</div>
|
|
||||||
<div class="mt-6 text-center">
|
|
||||||
<a
|
|
||||||
href="/auth/signout"
|
|
||||||
class="text-sm text-red-500 transition hover:text-red-700 hover:underline"
|
|
||||||
>Sign Out</a
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
|
<h2 class="text-xl font-semibold text-gray-900">{data.profile?.display_name}</h2>
|
||||||
|
<p class="text-sm text-gray-500">{data.user?.email}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="mt-6 text-center">
|
||||||
|
<a
|
||||||
<!-- Right Column: Information -->
|
href="/auth/signout"
|
||||||
<div class="space-y-6 lg:col-span-2">
|
class="text-sm text-red-500 transition hover:text-red-700 hover:underline">Sign Out</a
|
||||||
<!-- Role Information -->
|
>
|
||||||
<div class="rounded-lg border border-gray-300 bg-white p-6">
|
|
||||||
<h2 class="mb-4 text-lg font-semibold text-gray-900">Your Role</h2>
|
|
||||||
<dl class="grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-2">
|
|
||||||
<div class="sm:col-span-1">
|
|
||||||
<dt class="text-sm font-medium text-gray-500">Section</dt>
|
|
||||||
<dd class="mt-1 text-sm font-semibold text-gray-900">
|
|
||||||
{data.profile?.section?.name ?? 'N/A'}
|
|
||||||
</dd>
|
|
||||||
</div>
|
|
||||||
<div class="sm:col-span-1">
|
|
||||||
<dt class="text-sm font-medium text-gray-500">Position</dt>
|
|
||||||
<dd class="mt-1 text-sm font-semibold text-gray-900">
|
|
||||||
{data.profile?.section_position ?? 'N/A'}
|
|
||||||
</dd>
|
|
||||||
</div>
|
|
||||||
</dl>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- User Guide -->
|
|
||||||
<div class="rounded-lg border border-gray-300 bg-white p-6">
|
|
||||||
<h2 class="mb-2 text-lg font-semibold text-gray-900">User Guide</h2>
|
|
||||||
<p class="text-sm leading-relaxed text-gray-700">
|
|
||||||
To scan a QR code, head over to <strong>Scanner</strong> in the top right corner. Click
|
|
||||||
on "Start Scanning" and allow camera permissions. If your camera gets stuck, simply
|
|
||||||
refresh the page or click "Stop Scanning" and then "Start Scanning" again. When you scan
|
|
||||||
a QR code, the participant's ticket is automatically marked as scanned.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Events Manager Guide -->
|
|
||||||
{#if data.profile?.section_position === 'events_manager'}
|
|
||||||
<div class="rounded-lg border border-gray-300 bg-white p-6">
|
|
||||||
<h2 class="mb-2 text-lg font-semibold text-gray-900">Events Manager Guide</h2>
|
|
||||||
<p class="text-sm leading-relaxed text-gray-700">
|
|
||||||
As an Events Manager, you have access to the <strong>Events</strong> section. Here you
|
|
||||||
can create new events, manage participants by syncing with Google Sheets, send email
|
|
||||||
invitations with QR codes, and view event statistics.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Right Column: Information -->
|
||||||
|
<div class="space-y-6 lg:col-span-2">
|
||||||
|
<!-- Role Information -->
|
||||||
|
<div class="rounded-lg border border-gray-300 bg-white p-6">
|
||||||
|
<h2 class="mb-4 text-lg font-semibold text-gray-900">Your Role</h2>
|
||||||
|
<dl class="grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-2">
|
||||||
|
<div class="sm:col-span-1">
|
||||||
|
<dt class="text-sm font-medium text-gray-500">Section</dt>
|
||||||
|
<dd class="mt-1 text-sm font-semibold text-gray-900">
|
||||||
|
{data.profile?.section?.name ?? 'N/A'}
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
<div class="sm:col-span-1">
|
||||||
|
<dt class="text-sm font-medium text-gray-500">Position</dt>
|
||||||
|
<dd class="mt-1 text-sm font-semibold text-gray-900">
|
||||||
|
{data.profile?.section_position ?? 'N/A'}
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- User Guide -->
|
||||||
|
<div class="rounded-lg border border-gray-300 bg-white p-6">
|
||||||
|
<h2 class="mb-2 text-lg font-semibold text-gray-900">User Guide</h2>
|
||||||
|
<p class="text-sm leading-relaxed text-gray-700">
|
||||||
|
To scan a QR code, head over to <strong>Scanner</strong> in the top right corner. Click on "Start
|
||||||
|
Scanning" and allow camera permissions. If your camera gets stuck, simply refresh the page or
|
||||||
|
click "Stop Scanning" and then "Start Scanning" again. When you scan a QR code, the participant's
|
||||||
|
ticket is automatically marked as scanned.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Events Manager Guide -->
|
||||||
|
{#if data.profile?.section_position === 'events_manager'}
|
||||||
|
<div class="rounded-lg border border-gray-300 bg-white p-6">
|
||||||
|
<h2 class="mb-2 text-lg font-semibold text-gray-900">Events Manager Guide</h2>
|
||||||
|
<p class="text-sm leading-relaxed text-gray-700">
|
||||||
|
As an Events Manager, you have access to the <strong>Events</strong> section. Here you can
|
||||||
|
create new events, manage participants by syncing with Google Sheets, send email invitations
|
||||||
|
with QR codes, and view event statistics.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -45,9 +45,9 @@
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div id="qr-scanner" class="w-full h-full max-w-none overflow-hidden rounded-lg border border-gray-300"></div>
|
<div id="qr-scanner" class="w-full h-full max-w-none overflow-hidden rounded"></div>
|
||||||
|
|
||||||
<style>
|
<style lang="postcss">
|
||||||
/* Hide unwanted icons */
|
/* Hide unwanted icons */
|
||||||
#qr-scanner :global(img[alt='Info icon']),
|
#qr-scanner :global(img[alt='Info icon']),
|
||||||
#qr-scanner :global(img[alt='Camera based scan']) {
|
#qr-scanner :global(img[alt='Camera based scan']) {
|
||||||
@@ -58,21 +58,51 @@
|
|||||||
color: black !important;
|
color: black !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Change camera permission button text */
|
|
||||||
#qr-scanner :global(#html5-qrcode-button-camera-permission) {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
#qr-scanner :global(#html5-qrcode-button-camera-permission::after) {
|
|
||||||
position: absolute;
|
|
||||||
inset: auto 0 0;
|
|
||||||
display: block;
|
|
||||||
content: 'Allow camera access';
|
|
||||||
visibility: visible;
|
|
||||||
padding: 10px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#qr-scanner :global(#qr-scanner__scan_region) {
|
#qr-scanner :global(#qr-scanner__scan_region) {
|
||||||
min-height: auto !important;
|
min-height: auto !important;
|
||||||
aspect-ratio: 1 !important;
|
aspect-ratio: 1 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#qr-scanner :global(button.html5-qrcode-element) {
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
padding-top: 0.5rem;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
background-color: #2563eb;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 500;
|
||||||
|
transition-property: background-color, border-color, color, fill, stroke;
|
||||||
|
transition-duration: 150ms;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#qr-scanner :global(button.html5-qrcode-element:hover) {
|
||||||
|
background-color: #1d4ed8;
|
||||||
|
}
|
||||||
|
|
||||||
|
#qr-scanner :global(button.html5-qrcode-element:focus) {
|
||||||
|
box-shadow: 0 0 0 2px #60a5fa, 0 0 0 4px #fff;
|
||||||
|
}
|
||||||
|
#qr-scanner :global(input) {
|
||||||
|
border-radius: 0.375rem; /* rounded-md */
|
||||||
|
border-width: 1px;
|
||||||
|
border-color: #d1d5db; /* border-gray-300 */
|
||||||
|
padding-left: 1rem; /* px-4 */
|
||||||
|
padding-right: 1rem;
|
||||||
|
padding-top: 0.5rem; /* py-2 */
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
background-color: #f9fafb; /* bg-gray-50 */
|
||||||
|
color: #111827; /* text-gray-900 */
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
outline: none;
|
||||||
|
transition-property: border-color, box-shadow;
|
||||||
|
transition-duration: 150ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
#qr-scanner :global(input:focus) {
|
||||||
|
border-color: #2563eb; /* border-blue-600 */
|
||||||
|
box-shadow: 0 0 0 2px #60a5fa;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user