neoris/openvidu-meet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

frontend: refactor step indicator layout for improved responsiveness and structure

Browse Source
This commit is contained in:
Carlos Santos 2025-12-16 17:22:11 +01:00
parent 59ea1f881b
commit d925cb7843
9 changed files with 163 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
meet-ce/frontend/projects/shared-meet-components/src/lib/components/step-indicator/step-indicator.component.scss
View File

@ -181,8 +181,7 @@
}
.mat-stepper-vertical {
position: absolute;
left: 10;
// Remove absolute positioning to work with flexbox
}
.mat-step-header .mat-step-icon-selected {

6
meet-ce/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-basic-creation/room-basic-creation.component.scss
View File

@ -4,9 +4,11 @@
@include design-tokens.ov-page-content;
@include design-tokens.ov-container;
padding: var(--ov-meet-spacing-xl);
max-width: 600px;
// padding: var(--ov-meet-spacing-xl);
// max-width: 600px;
max-width: 100%;
margin: 0 auto;
justify-content: center;
.page-header {
display: flex;

33
meet-ce/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/room-wizard.component.html
View File

@ -6,20 +6,24 @@
editMode ? 'Edit your room settings' : 'Create and configure your video room in a few simple steps'
}}
</p>
@if (!isBasicCreation()) {
<ov-step-indicator
[steps]="steps()"
[currentStepIndex]="currentStepIndex()"
[allowNavigation]="true"
[editMode]="editMode"
(stepClick)="onStepClick($event)"
>
</ov-step-indicator>
}
</header>
<main class="wizard-content">
<section class="step-content ov-surface">
<div class="wizard-body">
@if (!isBasicCreation()) {
<aside class="wizard-sidebar">
<ov-step-indicator
[steps]="steps()"
[currentStepIndex]="currentStepIndex()"
[allowNavigation]="true"
[editMode]="editMode"
(stepClick)="onStepClick($event)"
>
</ov-step-indicator>
</aside>
}
<main class="wizard-content">
<section class="step-content ov-surface">
@if (isCreatingRoom()) {
<!-- Room Creation Loading State -->
<div class="room-creation-loading">
@ -70,8 +74,9 @@
}
}
}
</section>
</main>
</section>
</main>
</div>
<footer class="wizard-footer">
@if (isBasicCreation()) {

168
meet-ce/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/room-wizard.component.scss
View File

@ -1,60 +1,94 @@
@use '../../../../../../../../src/assets/styles/design-tokens';
// Main wizard container - fills viewport height exactly
.wizard-container {
@include design-tokens.ov-container;
@include design-tokens.ov-page-content;
min-height: 600px;
gap: 0;
padding-top: 0;
@include design-tokens.ov-theme-transition;
display: flex;
flex-direction: column;
height: 100%;
max-height: 100%;
max-width: var(--ov-meet-container-max-width);
margin: 0 auto;
padding: var(--ov-meet-spacing-lg) var(--ov-meet-spacing-xl);
gap: var(--ov-meet-spacing-lg);
overflow: hidden; // Prevent page scroll
}
// Header section - fixed at top
.wizard-header {
@include design-tokens.ov-get-started-header;
flex-shrink: 0;
text-align: center;
// padding-bottom: var(--ov-meet-spacing-md);
h2 {
margin-bottom: var(--ov-meet-spacing-md);
font-size: var(--ov-meet-font-size-xxl);
font-weight: var(--ov-meet-font-weight-light);
color: var(--ov-meet-text-primary);
.subtitle {
margin: 0;
color: var(--ov-meet-text-secondary);
font-size: var(--ov-meet-font-size-lg);
line-height: var(--ov-meet-line-height-normal);
}
}
// Body section - contains sidebar and main content
.wizard-body {
flex: 1 1 0; // Grow to fill space, shrink if needed, base size 0
display: flex;
gap: var(--ov-meet-spacing-xl);
min-height: 0; // Critical for flexbox overflow
max-height: calc(100% - 64px - var(--ov-meet-spacing-lg) - var(--ov-meet-spacing-lg) - 27px - var(--ov-meet-spacing-lg) - var(--ov-meet-spacing-lg) - 57px); // Calculate available height
align-items: stretch;
// overflow: hidden; // Prevent body overflow
}
// Sidebar for step indicator (large screens)
.wizard-sidebar {
flex-shrink: 0;
width: 280px;
display: flex;
flex-direction: column;
}
// Main content area
.wizard-content {
flex: 1;
display: flex;
justify-content: center;
align-items: flex-start;
align-items: center;
min-height: 0; // Critical for flexbox overflow
}
// Step content card
.step-content {
@include design-tokens.ov-section-card;
width: 100%;
max-width: 700px;
height: -webkit-fill-available;
height: -moz-available;
height: fill-available;
max-height: 100%;
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
& {
// Inner content should be centered vertically when small
> :first-child {
width: 100%;
max-width: 600px;
min-height: 450px;
max-height: 450px;
flex-direction: column;
justify-content: flex-start;
display: flex;
overflow-y: auto;
min-height: min-content;
height: 100%;
}
}
.step-content > :first-child {
margin: auto 0;
width: 100%;
min-height: min-content;
}
// Footer section - fixed at bottom
.wizard-footer {
flex: 1;
flex-shrink: 0;
display: flex;
justify-content: center;
// padding-top: var(--ov-meet-spacing-md);
.basic-nav,
.wizard-nav {
width: 100%;
max-width: 650px;
max-width: 700px;
display: flex;
flex-direction: column;
}
@ -62,6 +96,7 @@
.basic-nav .wizard-navigation {
padding: var(--ov-meet-spacing-md) 0 0 0;
}
.cancel-button {
@include design-tokens.ov-button-base;
border-radius: var(--ov-meet-radius-sm);
@ -170,17 +205,70 @@
}
}
// Responsive design using the system mixins
// Responsive design
// Large desktop: sidebar on left (>=1200px)
@media (min-width: 1200px) {
.wizard-body {
flex-direction: row;
}
.wizard-sidebar {
display: flex;
}
}
// Medium screens: move step indicator to top (768px - 1199px)
@media (max-width: 1199px) and (min-width: 769px) {
.wizard-body {
flex-direction: column;
gap: var(--ov-meet-spacing-md);
}
.wizard-sidebar {
width: 100%;
max-width: 100%;
flex-shrink: 0;
}
.step-content {
max-width: 800px;
}
}
// Tablet and below: compact vertical step indicator (<=768px)
@include design-tokens.ov-tablet-down {
.wizard-container {
padding: var(--ov-meet-spacing-md);
gap: var(--ov-meet-spacing-md);
height: 100vh;
max-height: 100vh;
overflow: hidden;
}
.wizard-header {
padding-bottom: var(--ov-meet-spacing-md);
padding-bottom: var(--ov-meet-spacing-sm);
h2 {
font-size: var(--ov-meet-font-size-xl);
.subtitle {
font-size: var(--ov-meet-font-size-md);
}
}
.wizard-body {
flex-direction: column;
gap: var(--ov-meet-spacing-md);
}
.wizard-sidebar {
width: 100%;
flex-shrink: 0;
}
.wizard-footer {
padding-top: var(--ov-meet-spacing-sm);
.basic-nav,
.wizard-nav {
max-width: 100%;
}
}
@ -199,10 +287,22 @@
}
}
// Mobile: further optimizations
@include design-tokens.ov-mobile-down {
.wizard-container {
padding: var(--ov-meet-spacing-sm);
height: 100vh;
max-height: 100vh;
overflow: hidden;
}
.wizard-header {
h2 {
font-size: var(--ov-meet-font-size-lg);
.subtitle {
font-size: var(--ov-meet-font-size-sm);
}
}
.room-creation-loading {
padding: var(--ov-meet-spacing-md);
}
}

2
meet-ce/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/recording-config/recording-config.component.scss
View File

@ -4,7 +4,7 @@
@include design-tokens.ov-page-content;
@include design-tokens.ov-container;
padding: var(--ov-meet-spacing-sm);
justify-content: center;
.step-header {
display: flex;

2
meet-ce/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/recording-layout/recording-layout.component.scss
View File

@ -4,7 +4,7 @@
@include design-tokens.ov-page-content;
@include design-tokens.ov-container;
padding: var(--ov-meet-spacing-sm);
justify-content: center;
.step-header {
display: flex;

2
meet-ce/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/room-config/room-config.component.scss
View File

@ -4,7 +4,7 @@
@include design-tokens.ov-page-content;
@include design-tokens.ov-container;
padding: var(--ov-meet-spacing-sm);
justify-content: center;
.step-header {
display: flex;

2
meet-ce/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/room-details/room-details.component.scss
View File

@ -4,7 +4,7 @@
@include design-tokens.ov-page-content;
@include design-tokens.ov-container;
padding: var(--ov-meet-spacing-md);
justify-content: center;
.step-header {
display: flex;

1
meet-ce/frontend/src/assets/styles/_mixins-layout.scss
View File

@ -15,6 +15,7 @@
max-width: var(--ov-meet-container-max-width);
margin: 0 auto;
padding: var(--ov-meet-spacing-lg) var(--ov-meet-spacing-xl) var(--ov-meet-spacing-xl) var(--ov-meet-spacing-xl);
height: calc(100% - (64px + var(--ov-meet-spacing-lg))); // Full height minus header and footer
}
// Mixin for truncated text