From abc984f83b193858eecd28389295f925bb7fca84 Mon Sep 17 00:00:00 2001 From: Avram Tudor Date: Wed, 30 Jun 2021 12:01:47 +0300 Subject: [PATCH] fix(css) fix various layout issues on small screen sizes (#9464) --- css/_connection-status.scss | 2 ++ css/_mixins.scss | 10 ++++++++++ css/_prejoin.scss | 4 ++++ css/_premeeting-screens.scss | 9 +++++++-- .../virtual-background/_virtual-background.scss | 5 +++++ react/features/base/responsive-ui/constants.js | 5 +++++ .../components/web/audio/AudioSettingsPopup.js | 14 ++++++++++++-- .../components/web/video/VideoSettingsPopup.js | 12 +++++++++++- 8 files changed, 56 insertions(+), 5 deletions(-) diff --git a/css/_connection-status.scss b/css/_connection-status.scss index a7011bd29..b0ebacdec 100644 --- a/css/_connection-status.scss +++ b/css/_connection-status.scss @@ -11,6 +11,8 @@ line-height: 13px; margin: 0 auto; width: 320px; + + @include adjust-for-max-width(320px, 8px); } &-header { diff --git a/css/_mixins.scss b/css/_mixins.scss index 11ec2a6e7..51a4a42f3 100644 --- a/css/_mixins.scss +++ b/css/_mixins.scss @@ -206,3 +206,13 @@ bottom: 0; width: 35%; } + +/** + * Resizes elements width to fill the whole screen width with some margin + */ +@mixin adjust-for-max-width($width, $margin) { + @media (max-width: $width) { + margin: 0 $margin; + width: $width - 2 * $margin; + } +} diff --git a/css/_prejoin.scss b/css/_prejoin.scss index e5084b1ab..86f89afc7 100644 --- a/css/_prejoin.scss +++ b/css/_prejoin.scss @@ -113,6 +113,8 @@ &-dropdown-btns { width: 320px; padding: 8px 0; + + @include adjust-for-max-width(320px, 8px); } &-dropdown-btn { @@ -140,6 +142,8 @@ } &-dropdown-container { + margin-top: 16px; + & > div:nth-child(2) { background: #fff; padding: 0; diff --git a/css/_premeeting-screens.scss b/css/_premeeting-screens.scss index 928a91df8..9ff9a7f1d 100644 --- a/css/_premeeting-screens.scss +++ b/css/_premeeting-screens.scss @@ -30,16 +30,18 @@ .action-btn { border-radius: 3px; + box-sizing: border-box; color: #fff; cursor: pointer; display: inline-block; font-size: 15px; line-height: 24px; - margin-top: 16px; padding: 7px 16px; position: relative; text-align: center; - width: 286px; + width: 320px; + + @include adjust-for-max-width(320px, 8px); &.primary { background: #0376DA; @@ -175,6 +177,8 @@ text-align: center; width: 320px; + @include adjust-for-max-width(320px, 8px); + &.error { box-shadow: 0px 0px 4px 3px rgba(225, 45, 45, 0.4); } @@ -246,6 +250,7 @@ transition: background 0.16s ease-out; width: 320px; + @include adjust-for-max-width(320px, 8px); @include flex-centered(); svg { diff --git a/css/modals/virtual-background/_virtual-background.scss b/css/modals/virtual-background/_virtual-background.scss index afe97bd50..1909e17a1 100644 --- a/css/modals/virtual-background/_virtual-background.scss +++ b/css/modals/virtual-background/_virtual-background.scss @@ -87,6 +87,11 @@ font-size: 1.5vw; } @media (max-width: 432px){ + grid-template-columns: auto auto auto; + font-size: 1.5vw; + } + @media (max-width: 320px){ + grid-template-columns: auto auto auto; font-size: 1.5vw; } } diff --git a/react/features/base/responsive-ui/constants.js b/react/features/base/responsive-ui/constants.js index 59718bf6f..dbaa4a12b 100644 --- a/react/features/base/responsive-ui/constants.js +++ b/react/features/base/responsive-ui/constants.js @@ -13,3 +13,8 @@ export const ASPECT_RATIO_NARROW = Symbol('ASPECT_RATIO_NARROW'); * @type {Symbol} */ export const ASPECT_RATIO_WIDE = Symbol('ASPECT_RATIO_WIDE'); + +/** + * Smallest supported mobile width. + */ +export const SMALL_MOBILE_WIDTH = '320'; diff --git a/react/features/settings/components/web/audio/AudioSettingsPopup.js b/react/features/settings/components/web/audio/AudioSettingsPopup.js index 6d0739cc0..592bf8be9 100644 --- a/react/features/settings/components/web/audio/AudioSettingsPopup.js +++ b/react/features/settings/components/web/audio/AudioSettingsPopup.js @@ -10,6 +10,7 @@ import { setAudioOutputDevice as setAudioOutputDeviceAction } from '../../../../base/devices'; import { connect } from '../../../../base/redux'; +import { SMALL_MOBILE_WIDTH } from '../../../../base/responsive-ui/constants'; import { getCurrentMicDeviceId, getCurrentOutputDeviceId @@ -36,6 +37,11 @@ type Props = AudioSettingsContentProps & { * Callback executed when the popup closes. */ onClose: Function, + + /** + * The popup placement enum value. + */ + popupPlacement: string } /** @@ -52,7 +58,8 @@ function AudioSettingsPopup({ setAudioInputDevice, setAudioOutputDevice, onClose, - outputDevices + outputDevices, + popupPlacement }: Props) { return (
@@ -66,7 +73,7 @@ function AudioSettingsPopup({ setAudioOutputDevice = { setAudioOutputDevice } /> } isOpen = { isOpen } onClose = { onClose } - placement = 'top-start'> + placement = { popupPlacement }> {children}
@@ -80,7 +87,10 @@ function AudioSettingsPopup({ * @returns {Object} */ function mapStateToProps(state) { + const { clientWidth } = state['features/base/responsive-ui']; + return { + popupPlacement: clientWidth <= SMALL_MOBILE_WIDTH ? 'auto' : 'top-start', currentMicDeviceId: getCurrentMicDeviceId(state), currentOutputDeviceId: getCurrentOutputDeviceId(state), isOpen: getAudioSettingsVisibility(state), diff --git a/react/features/settings/components/web/video/VideoSettingsPopup.js b/react/features/settings/components/web/video/VideoSettingsPopup.js index 8dcfd1b76..451099220 100644 --- a/react/features/settings/components/web/video/VideoSettingsPopup.js +++ b/react/features/settings/components/web/video/VideoSettingsPopup.js @@ -8,6 +8,7 @@ import { setVideoInputDeviceAndUpdateSettings } from '../../../../base/devices'; import { connect } from '../../../../base/redux'; +import { SMALL_MOBILE_WIDTH } from '../../../../base/responsive-ui/constants'; import { getCurrentCameraDeviceId } from '../../../../base/settings'; import { toggleVideoSettings } from '../../../actions'; import { getVideoSettingsVisibility } from '../../../functions'; @@ -31,6 +32,11 @@ type Props = VideoSettingsProps & { * Callback executed when the popup closes. */ onClose: Function, + + /** + * The popup placement enum value. + */ + popupPlacement: string } /** @@ -43,6 +49,7 @@ function VideoSettingsPopup({ children, isOpen, onClose, + popupPlacement, setVideoInputDevice, videoDeviceIds }: Props) { @@ -56,7 +63,7 @@ function VideoSettingsPopup({ videoDeviceIds = { videoDeviceIds } /> } isOpen = { isOpen } onClose = { onClose } - placement = 'top-start'> + placement = { popupPlacement }> { children } @@ -71,9 +78,12 @@ function VideoSettingsPopup({ * @returns {Object} */ function mapStateToProps(state) { + const { clientWidth } = state['features/base/responsive-ui']; + return { currentCameraDeviceId: getCurrentCameraDeviceId(state), isOpen: getVideoSettingsVisibility(state), + popupPlacement: clientWidth <= SMALL_MOBILE_WIDTH ? 'auto' : 'top-start', videoDeviceIds: getVideoDeviceIds(state) }; }