ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

openvidu-components: Made prejoin page responsive

pull/750/head
csantosm 2022-09-07 12:01:04 +02:00
parent b20da507c3
commit 74cfa1e567
5 changed files with 48 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.css
View File

@ -1,6 +1,6 @@
.container {
height: calc(100% - 64px);
padding: 50px 80px;
padding: 30px 60px;
background-color: var(--ov-light-color);
}
@ -58,9 +58,11 @@ hr {
}
#prejoin-container ::ng-deep .mat-drawer-container,
#prejoin-container ::ng-deep .sidenav-menu {
background-color: var(--ov-light-color) !important;
#prejoin-container ::ng-deep .sidenav-menu,
#prejoin-container ::ng-deep #session-container {
background-color: transparent !important;
}
#prejoin-container ::ng-deep .sidenav-menu {
width: 320px;
}
@ -121,7 +123,7 @@ hr {
border-radius: var(--ov-video-radius);
}
@media only screen and (max-width: 480px) {
@media only screen and (max-width: 480px) {
.container,
.media-panel-container,
.buttons-container {
@ -142,7 +144,7 @@ hr {
}
@media only screen and (min-width: 480px) and (max-width: 959px) {
.container,
/* .container, */
.media-panel-container,
.buttons-container {
padding: 0;
@ -161,8 +163,4 @@ hr {
padding-top: 0px;
max-width: 600px;
}
.media-panel {
align-items: flex-start !important;
}
}

8
openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.html
View File

@ -8,9 +8,9 @@
</mat-toolbar>
</div>
<div class="container" id="prejoin-container" fxLayout.gt-sm="row" fxLayout.lt-md="column">
<div fxFlex.gt-sm="65%" fxFlex.lt-md="55%" fxLayoutAlign="center center" id="layout-container">
<ov-session [usedInPrejoinPage]="true">
<div class="container" id="prejoin-container" fxLayout.landscape="row" fxLayout.lt-md="column" fxLayout.md="row" fxLayout.gt-md="row">
<div fxFlex.lt-sm="50%" fxFlex.lt-md="50%" fxFlex.md="45%" fxFlex.gt-md="45%" fxLayoutAlign="center center" id="layout-container">
<ov-session [usedInPrejoinPage]="true" class="ov-session">
<ng-template #panel *ngIf="!isMinimal && showBackgroundEffectsButton">
<ov-panel>
<ng-template #backgroundEffectsPanel>
@ -38,7 +38,7 @@
</ng-template>
</ov-session>
</div>
<div fxFlex.gt-sm="35%" fxFlex.lt-md="45%" fxLayoutAlign="center center" class="media-panel" *ngIf="localParticipant">
<div fxFlex.lt-md="50%" fxFlex.md="55%" fxFlex.gt-md="55%" fxLayoutAlign="center center" class="media-panel" *ngIf="localParticipant">
<div fxLayout="column" fxLayoutGap="10px" class="media-panel-container">
<div fxLayout.gt-sm="column" fxLayout.lt-md="column" fxLayoutGap="10px" fxFlex="33%">
<div fxFlex.gt-sm="100%" fxFlex.lt-md="33%" fxLayoutAlign="center center" fxFlexFill class="nickname-container">

4
openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.css
View File

@ -103,3 +103,7 @@
::ng-deep .mat-form-field.mat-focused .mat-form-field-ripple {
background-color: var(--ov-panel-text-color) !important;
}
::ng-deep .mat-drawer {
background-color: transparent !important;
}

29
openvidu-components-angular/projects/openvidu-angular/src/lib/config/custom-flexlayout-breakpoints.ts Normal file
View File

@ -0,0 +1,29 @@
import { BREAKPOINT, LayoutDirective } from '@angular/flex-layout';
import { Directive } from '@angular/core';
import { } from '@angular/flex-layout';
const LANDSCAPE_BREAKPOINTS = [
{
alias: 'landscape',
suffix: 'Landscape',
mediaQuery: 'screen and (orientation: landscape)',
overlapping: false,
priority: 2001
}
];
export const CustomBreakPointsProvider = {
provide: BREAKPOINT,
useValue: LANDSCAPE_BREAKPOINTS,
multi: true
};
const selector = `[fxLayout.landscape]`;
const inputs = ['fxLayout.landscape'];
@Directive({ selector, inputs })
export class CustomLayoutExtensionDirective extends LayoutDirective {
protected inputs = inputs;
}

5
openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts
View File

@ -60,6 +60,7 @@ import { NicknameInputComponent } from './components/settings/nickname-input/nic
import { LangSelectorComponent } from './components/settings/lang-selector/lang-selector.component';
import { SubtitlesSettingComponent } from './components/settings/subtitles/subtitles.component';
import { CaptionsComponent } from './components/captions/captions.component';
import { CustomBreakPointsProvider, CustomLayoutExtensionDirective } from './config/custom-flexlayout-breakpoints';
const publicComponents = [
AdminDashboardComponent,
@ -104,7 +105,8 @@ const privateComponents = [
SearchByStringPropertyPipe,
ThumbnailFromUrlPipe,
StreamTypesEnabledPipe,
TranslatePipe
TranslatePipe,
CustomLayoutExtensionDirective,
],
imports: [
CommonModule,
@ -120,6 +122,7 @@ const privateComponents = [
ActionService,
CdkOverlayContainer,
{ provide: OverlayContainer, useClass: CdkOverlayContainer },
CustomBreakPointsProvider,
ChatService,
PanelService,
DeviceService,