ZF/jitsi-meet
1
0
Fork 0
mirror of https://gitcode.com/GitHub_Trending/ji/jitsi-meet.git synced 2025-12-30 03:12:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix (mobile-layout) change "vh" to "dvh" for all layouts (#13840)

Browse Source 
* Convert all vh units to dvh; fixing layout for mobile browsers such as Chrome for Android.
This commit is contained in:
Thomas Egebrand Gram
2023-09-20 11:19:54 +02:00
committed by GitHub
parent d04515c35a
commit f74b6cd82f
15 changed files with 23 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
css/_reactions-menu.scss
View File

@@ -154,17 +154,17 @@ $reactionCount: 20;
}
70% {
transform: translate(40px, -70vh) scale(1.5);
transform: translate(40px, -70dvh) scale(1.5);
opacity: 1;
}
75% {
transform: translate(40px, -70vh) scale(1.5);
transform: translate(40px, -70dvh) scale(1.5);
opacity: 1;
}
100% {
transform: translate(140px, -50vh) scale(1);
transform: translate(140px, -50dvh) scale(1);
opacity: 0;
}
}
@@ -187,17 +187,17 @@ $reactionCount: 20;
}
70% {
transform: translate(#{$topX}px, -#{$topY}vh) scale(1.5);
transform: translate(#{$topX}px, -#{$topY}dvh) scale(1.5);
opacity: 1;
}
75% {
transform: translate(#{$topX}px, -#{$topY}vh) scale(1.5);
transform: translate(#{$topX}px, -#{$topY}dvh) scale(1.5);
opacity: 1;
}
100% {
transform: translate(#{$bottomX}px, -#{$bottomY}vh) scale(1);
transform: translate(#{$bottomX}px, -#{$bottomY}dvh) scale(1);
opacity: 0;
}
}

6
css/_videolayout_default.scss
View File

@@ -266,10 +266,10 @@
#avatarContainer {
border-radius: 50%;
display: inline-block;
height: 50vh;
margin-top: 25vh;
height: 50dvh;
margin-top: 25dvh;
overflow: hidden;
width: 50vh;
width: 50dvh;
#avatar {
height: 100%;

2
css/_welcome_page.scss
View File

@@ -10,7 +10,7 @@ body.welcome-page {
flex-direction: column;
font-family: $welcomePageFontFamily;
justify-content: space-between;
min-height: 100vh;
min-height: 100dvh;
position: relative;
.header {

2
css/deep-linking/_mobile.scss
View File

@@ -1,6 +1,6 @@
.deep-linking-mobile {
background-color: #fff;
height: 100vh;
height: 100dvh;
overflow: auto;
position: relative;
width: 100vw;

2
react/features/base/ui/constants.web.ts
View File

@@ -139,7 +139,7 @@ export const commonStyles = (theme: Theme) => {
alignItems: 'center',
background: 'rgba(0,0,0,0.6)',
display: 'flex',
height: '100vh',
height: '100dvh',
justifyContent: 'center',
left: 0,
position: 'absolute' as const,

2
react/features/chat/components/web/Chat.tsx
View File

@@ -90,7 +90,7 @@ const useStyles = makeStyles()(theme => {
zIndex: 300,
'@media (max-width: 580px)': {
height: '100vh',
height: '100dvh',
position: 'fixed',
left: 0,
right: 0,

2
react/features/deep-linking/components/DeepLinkingMobilePage.web.tsx
View File

@@ -30,7 +30,7 @@ const useStyles = makeStyles()((theme: Theme) => {
container: {
background: '#1E1E1E',
width: '100vw',
height: '100vh',
height: '100dvh',
overflowX: 'hidden',
overflowY: 'auto',
justifyContent: 'center',

2
react/features/invite/components/dial-in-summary/web/DialInSummary.tsx
View File

@@ -93,7 +93,7 @@ const styles = (theme: Theme) => {
color: theme.palette.text01
},
scrollable: {
height: '100vh',
height: '100dvh',
overflowY: 'scroll' as const
},
roomName: {

2
react/features/participants-pane/components/web/ParticipantsPane.tsx
View File

@@ -48,7 +48,7 @@ const useStyles = makeStyles()(theme => {
},
'@media (max-width: 580px)': {
height: '100vh',
height: '100dvh',
position: 'fixed',
left: 0,
right: 0,

2
react/features/settings/components/web/audio/AudioSettingsContent.tsx
View File

@@ -98,7 +98,7 @@ const useStyles = makeStyles()(theme => {
right: 'auto',
margin: 0,
marginBottom: theme.spacing(1),
maxHeight: 'calc(100vh - 100px)',
maxHeight: 'calc(100dvh - 100px)',
overflow: 'auto',
width: '300px'
},

2
react/features/settings/components/web/video/VideoSettingsContent.tsx
View File

@@ -62,7 +62,7 @@ export interface IProps {
const useStyles = makeStyles()(theme => {
return {
container: {
maxHeight: 'calc(100vh - 100px)',
maxHeight: 'calc(100dvh - 100px)',
overflow: 'auto',
margin: 0,
marginBottom: theme.spacing(1),

2
react/features/toolbox/components/web/Drawer.tsx
View File

@@ -37,7 +37,7 @@ interface IProps {
const useStyles = makeStyles()(theme => {
return {
drawerMenuContainer: {
height: '100vh',
height: '100dvh',
display: 'flex',
alignItems: 'flex-end'
},

4
react/features/toolbox/components/web/OverflowMenuButton.tsx
View File

@@ -80,7 +80,7 @@ const useStyles = makeStyles<{ overflowDrawer: boolean; reactionsMenuHeight: num
right: 'auto',
margin: 0,
marginBottom: '8px',
maxHeight: overflowDrawer ? undefined : 'calc(100vh - 100px)',
maxHeight: overflowDrawer ? undefined : 'calc(100dvh - 100px)',
paddingBottom: overflowDrawer ? undefined : 0,
minWidth: '240px',
overflow: 'hidden'
@@ -88,7 +88,7 @@ const useStyles = makeStyles<{ overflowDrawer: boolean; reactionsMenuHeight: num
content: {
position: 'relative',
maxHeight: overflowDrawer
? `calc(100% - ${reactionsMenuHeight}px - 16px)` : `calc(100vh - 100px - ${reactionsMenuHeight}px)`,
? `calc(100% - ${reactionsMenuHeight}px - 16px)` : `calc(100dvh - 100px - ${reactionsMenuHeight}px)`,
overflowY: 'auto'
},
footer: {

2
react/features/toolbox/components/web/Toolbox.tsx
View File

@@ -153,7 +153,7 @@ const useStyles = makeStyles()(() => {
right: 'auto',
margin: 0,
marginBottom: '8px',
maxHeight: 'calc(100vh - 100px)',
maxHeight: 'calc(100dvh - 100px)',
minWidth: '240px'
},

2
react/features/toolbox/constants.ts
View File

@@ -36,7 +36,7 @@ export const NOT_APPLICABLE = 'N/A';
export const TOOLBAR_TIMEOUT = 4000;
export const DRAWER_MAX_HEIGHT = '80vh - 64px';
export const DRAWER_MAX_HEIGHT = '80dvh - 64px';
export const NOTIFY_CLICK_MODE = {
ONLY_NOTIFY: 'ONLY_NOTIFY',