mirror of https://github.com/OpenVidu/openvidu.git
ov-components: improve prejoin component and enhance SCSS styles for better layout and responsiveness
Carlos Santos
parent
0f06c15a78
commit
1b9396ca1b
|
|
@ -3,9 +3,12 @@
|
|||
} @else {
|
||||
<div class="prejoin-container" id="prejoin-container" [class.mobile]="viewportService.isMobile()" [class.name-error]="!!_error">
|
||||
<!-- Top Language Toolbar -->
|
||||
<div class="top-toolbar" *ngIf="!isMinimal">
|
||||
<ov-lang-selector [compact]="false" class="language-selector" (onLangChanged)="onLangChanged.emit($event)"> </ov-lang-selector>
|
||||
@if (!isMinimal) {
|
||||
<div class="top-toolbar">
|
||||
<ov-lang-selector [compact]="false" class="language-selector" (onLangChanged)="onLangChanged.emit($event)">
|
||||
</ov-lang-selector>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Loading State -->
|
||||
@if (isLoading) {
|
||||
|
|
|
|||
|
|
@ -21,13 +21,18 @@
|
|||
}
|
||||
|
||||
.prejoin-content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
max-width: 520px;
|
||||
margin: 0 auto;
|
||||
|
||||
.prejoin-main {
|
||||
max-width: 480px;
|
||||
width: 100%;
|
||||
background: var(--ov-surface-color, #ffffff);
|
||||
border-radius: var(--ov-surface-radius);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -75,23 +80,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Main Content
|
||||
.prejoin-main {
|
||||
width: 100%;
|
||||
max-width: 520px;
|
||||
max-height: 544px;
|
||||
background: var(--ov-surface-color, #ffffff);
|
||||
border-radius: var(--ov-surface-radius);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
transform: translateZ(0);
|
||||
|
||||
// Video Preview Section
|
||||
.video-preview-section {
|
||||
padding: 0;
|
||||
.video-preview-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
|
@ -99,6 +89,7 @@
|
|||
border-radius: var(--ov-surface-radius) var(--ov-surface-radius) 0 0;
|
||||
overflow: hidden;
|
||||
background: var(--ov-video-background);
|
||||
|
||||
.video-frame {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -181,10 +172,10 @@
|
|||
|
||||
// Configuration Section
|
||||
.configuration-section {
|
||||
padding: 24px 24px 24px; // Added top padding since video has no padding
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 24px;
|
||||
gap: 10px;
|
||||
flex-flow: column;
|
||||
|
||||
.input-section {
|
||||
::ng-deep .name-input {
|
||||
|
|
@ -291,39 +282,56 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mobile Layout Optimization
|
||||
.prejoin-container.mobile {
|
||||
padding: 0;
|
||||
.prejoin-main {
|
||||
align-items: stretch;
|
||||
|
||||
.prejoin-content {
|
||||
max-width: none;
|
||||
height: 100vh;
|
||||
|
||||
.prejoin-main {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
max-height: none;
|
||||
border-radius: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.configuration-section {
|
||||
padding: 20px 10px;
|
||||
justify-content: center;
|
||||
gap: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.video-preview-section {
|
||||
// Video section takes remaining space after configuration
|
||||
flex: 1;
|
||||
height: 50vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0; // Allow flexbox to shrink
|
||||
|
||||
.video-preview-container {
|
||||
flex: 1;
|
||||
height: 75vh;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
aspect-ratio: unset;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.configuration-section {
|
||||
// Configuration section adapts to content
|
||||
flex: 0 0 auto;
|
||||
padding: 16px;
|
||||
gap: 16px;
|
||||
|
||||
// Ensure minimum usable space but allow growth
|
||||
min-height: fit-content;
|
||||
max-height: 40vh; // Prevent taking too much space
|
||||
overflow-y: auto; // Scroll if content is too tall
|
||||
}
|
||||
|
||||
.vb-container {
|
||||
// Virtual background panel also adapts to content
|
||||
flex: 0 0 auto;
|
||||
max-height: 40vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInFromRight {
|
||||
|
|
@ -337,28 +345,21 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Responsive Design
|
||||
@media (max-width: 640px) {
|
||||
.prejoin-container {
|
||||
// Responsive Design for Desktop/Tablet
|
||||
@media (max-width: 640px) and (min-height: 640px) {
|
||||
.prejoin-container:not(.mobile) {
|
||||
padding: 16px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.prejoin-content {
|
||||
max-width: 100%;
|
||||
|
||||
.prejoin-main {
|
||||
max-width: 100%;
|
||||
border-radius: var(--ov-surface-radius);
|
||||
}
|
||||
|
||||
.video-preview-section {
|
||||
padding: 0px 0px 12px;
|
||||
|
||||
.video-preview-container {
|
||||
aspect-ratio: 4/3;
|
||||
}
|
||||
}
|
||||
|
||||
.configuration-section {
|
||||
padding: 0 20px 20px;
|
||||
padding: 20px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
|
|
@ -366,14 +367,14 @@
|
|||
padding: 16px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.prejoin-container {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) and (min-height: 640px) {
|
||||
.prejoin-container:not(.mobile) {
|
||||
padding: 12px;
|
||||
|
||||
.configuration-section {
|
||||
padding: 0 16px 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.video-overlay .device-controls {
|
||||
|
|
@ -393,15 +394,17 @@
|
|||
padding: 12px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 640px) {
|
||||
.prejoin-container {
|
||||
align-items: flex-start;
|
||||
padding-top: 60px; // Add space for top toolbar
|
||||
}
|
||||
|
||||
// Short screens - optimize for horizontal space
|
||||
@media (max-height: 640px) and (min-width: 640px) {
|
||||
.prejoin-container:not(.mobile) {
|
||||
align-items: flex-start;
|
||||
padding-top: 60px; // Space for top toolbar
|
||||
|
||||
.video-preview-section .video-preview-container {
|
||||
aspect-ratio: 4/3; // Keep the taller aspect ratio even on small screens
|
||||
aspect-ratio: 16/9; // Wider aspect ratio for short screens
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue