CSS Styling
This commit is contained in:
Roman Krček
@@ -2,75 +2,72 @@
|
||||
let { data } = $props();
|
||||
</script>
|
||||
|
||||
<div class="p-4 sm:p-6">
|
||||
<h1 class="mb-6 text-2xl font-bold text-gray-800">User Dashboard</h1>
|
||||
<h1 class="mt-2 mb-4 text-center text-2xl font-bold">User Dashboard</h1>
|
||||
|
||||
<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
||||
<!-- Left Column: User Profile -->
|
||||
<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 flex-grow flex-col items-center text-center">
|
||||
<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"
|
||||
>
|
||||
{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 class="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
||||
<!-- Left Column: User Profile -->
|
||||
<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 flex-grow flex-col items-center text-center">
|
||||
<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"
|
||||
>
|
||||
{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>
|
||||
|
||||
<!-- 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 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
@@ -45,9 +45,9 @@
|
||||
});
|
||||
</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 */
|
||||
#qr-scanner :global(img[alt='Info icon']),
|
||||
#qr-scanner :global(img[alt='Camera based scan']) {
|
||||
@@ -58,21 +58,51 @@
|
||||
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) {
|
||||
min-height: auto !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>
|
||||
Reference in New Issue
Block a user