Skip to content

fix(ui): mobile responsive for meeting join page #152

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
asithade merged 3 commits into from
Nov 14, 2025
Merged

fix(ui): mobile responsive for meeting join page #152

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
829818f
fix(ui): mobile responsive for meeting join page
asithade Nov 14, 2025
6adf459
fix: logged out mobile responsive view
asithade Nov 14, 2025
15eb680
Merge branch 'main' into fix/LFXV2-742
asithade Nov 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 20 additions & 11 deletions apps/lfx-one/src/app/modules/meetings/meeting-join/meeting-join.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<!-- Project Logo -->
@if (project()?.logo_url) {
<div class="flex items-center justify-center mb-6">
<img [src]="project()?.logo_url" [alt]="project()?.name" class="w-auto h-20" />
<img [src]="project()?.logo_url" [alt]="project()?.name" class="w-auto h-10 md:h-20" />
</div>
}

Expand Down Expand Up @@ -68,7 +68,7 @@
</div>

<!-- Content Row: Title/Details + Join Button (if immediate) -->
<div class="flex justify-between items-start gap-6 mb-4">
<div class="flex flex-col md:flex-row justify-between items-start gap-6 mb-4">
<!-- Left Column: Title + Details -->
<div class="flex-1 flex flex-col gap-4 justify-between h-full">
<div class="flex flex-col gap-4 h-full">
Expand Down Expand Up @@ -147,7 +147,7 @@ <h1 class="font-medium text-base text-neutral-950 leading-tight" [attr.data-test
<!-- Right Column: Join Button (immediate meetings) or RSVP (future meetings) -->
@if (canJoinMeeting()) {
<!-- Join Button - Immediate Meeting -->
<div class="w-[296px]">
<div class="w-full md:w-[296px]">
<lfx-button
label="Join Meeting"
icon="fa-light fa-video"
Expand All @@ -163,7 +163,7 @@ <h1 class="font-medium text-base text-neutral-950 leading-tight" [attr.data-test
</div>
} @else if (authenticated() && meeting().organizer) {
<!-- RSVP Details - Future Meeting (Authenticated Organizers) -->
<div class="w-[296px] flex flex-col gap-3">
<div class="w-full md:w-[296px] flex flex-col gap-3">
<lfx-meeting-rsvp-details
[meeting]="meeting()"
[project]="project()"
Expand All @@ -190,7 +190,7 @@ <h1 class="font-medium text-base text-neutral-950 leading-tight" [attr.data-test
</div>
} @else if (authenticated()) {
<!-- RSVP Container - Future Meeting (Authenticated Non-Organizers) -->
<div class="w-[296px]">
<div class="w-full md:w-[296px]">
<lfx-rsvp-button-group [meeting]="meeting()" [occurrenceId]="currentOccurrence()?.occurrence_id"> </lfx-rsvp-button-group>
</div>
}
Expand Down Expand Up @@ -270,9 +270,9 @@ <h3 class="text-gray-600 text-sm font-normal">Resources</h3>
<div class="flex flex-col gap-3">
<p class="text-sm text-neutral-950">I am signed in as:</p>

<div class="bg-blue-50 border border-blue-500/50 rounded px-3 py-2 flex items-center gap-3">
<div class="bg-blue-50 border border-blue-500/50 rounded px-3 py-2 flex flex-wrap items-center gap-3">
<!-- Avatar -->
<div class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center">
<div class="hidden md:flex w-12 h-12 bg-blue-600 rounded-full items-center justify-center">
<span class="text-white text-2xl font-medium">{{ (user.name || 'User').substring(0, 2).toUpperCase() }}</span>
</div>

Expand All @@ -293,7 +293,7 @@ <h3 class="text-gray-600 text-sm font-normal">Resources</h3>
<!-- Signed Out State -->
<div class="flex flex-col gap-6">
<!-- Sign In CTA -->
<div class="bg-blue-50 border border-blue-500/50 rounded px-3 py-2 flex items-center justify-between gap-3">
<div class="bg-blue-50 border border-blue-500/50 rounded px-3 py-2 flex flex-wrap items-center justify-between gap-3">
<div class="flex items-center gap-3">
<i class="fa-light fa-arrow-right-to-bracket text-blue-600 text-2xl"></i>
<div>
Expand All @@ -302,7 +302,14 @@ <h3 class="text-gray-600 text-sm font-normal">Resources</h3>
</div>
</div>

<lfx-button size="small" label="Sign In" icon="fa-light fa-arrow-right-to-bracket" severity="info" [href]="'/login?returnTo=' + returnTo()">
<lfx-button
class="w-full md:w-auto"
styleClass="w-full md:w-auto"
size="small"
label="Sign In"
icon="fa-light fa-arrow-right-to-bracket"
severity="info"
[href]="'/login?returnTo=' + returnTo()">
</lfx-button>
</div>

Expand All @@ -317,7 +324,7 @@ <h3 class="text-gray-600 text-sm font-normal">Resources</h3>

<form [formGroup]="joinForm" class="flex flex-col gap-4">
<!-- Name + Email Row -->
<div class="flex gap-4">
<div class="flex flex-col md:flex-row gap-4">
<div class="flex-1">
<label class="flex items-center gap-1 text-xs text-blue-900 mb-2">
<i class="fa-light fa-user text-gray-600"></i>
Expand Down Expand Up @@ -369,8 +376,10 @@ <h3 class="text-gray-600 text-sm font-normal">Resources</h3>
</div>

<!-- Submit Button -->
<div class="flex justify-end">
<div class="flex justify-end md:justify-center">
<lfx-button
class="w-full md:w-auto"
styleClass="w-full md:w-auto"
size="small"
label="Join Meeting"
icon="fa-light fa-arrow-right-to-bracket"
Expand Down