fix(css) fix various layout issues on small screen sizes (#9464)
This commit is contained in:
parent
d9bfeecb5b
commit
abc984f83b
|
@ -11,6 +11,8 @@
|
||||||
line-height: 13px;
|
line-height: 13px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
width: 320px;
|
width: 320px;
|
||||||
|
|
||||||
|
@include adjust-for-max-width(320px, 8px);
|
||||||
}
|
}
|
||||||
|
|
||||||
&-header {
|
&-header {
|
||||||
|
|
|
@ -206,3 +206,13 @@
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: 35%;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -113,6 +113,8 @@
|
||||||
&-dropdown-btns {
|
&-dropdown-btns {
|
||||||
width: 320px;
|
width: 320px;
|
||||||
padding: 8px 0;
|
padding: 8px 0;
|
||||||
|
|
||||||
|
@include adjust-for-max-width(320px, 8px);
|
||||||
}
|
}
|
||||||
|
|
||||||
&-dropdown-btn {
|
&-dropdown-btn {
|
||||||
|
@ -140,6 +142,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&-dropdown-container {
|
&-dropdown-container {
|
||||||
|
margin-top: 16px;
|
||||||
|
|
||||||
& > div:nth-child(2) {
|
& > div:nth-child(2) {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
|
@ -30,16 +30,18 @@
|
||||||
|
|
||||||
.action-btn {
|
.action-btn {
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
box-sizing: border-box;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
margin-top: 16px;
|
|
||||||
padding: 7px 16px;
|
padding: 7px 16px;
|
||||||
position: relative;
|
position: relative;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 286px;
|
width: 320px;
|
||||||
|
|
||||||
|
@include adjust-for-max-width(320px, 8px);
|
||||||
|
|
||||||
&.primary {
|
&.primary {
|
||||||
background: #0376DA;
|
background: #0376DA;
|
||||||
|
@ -175,6 +177,8 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 320px;
|
width: 320px;
|
||||||
|
|
||||||
|
@include adjust-for-max-width(320px, 8px);
|
||||||
|
|
||||||
&.error {
|
&.error {
|
||||||
box-shadow: 0px 0px 4px 3px rgba(225, 45, 45, 0.4);
|
box-shadow: 0px 0px 4px 3px rgba(225, 45, 45, 0.4);
|
||||||
}
|
}
|
||||||
|
@ -246,6 +250,7 @@
|
||||||
transition: background 0.16s ease-out;
|
transition: background 0.16s ease-out;
|
||||||
width: 320px;
|
width: 320px;
|
||||||
|
|
||||||
|
@include adjust-for-max-width(320px, 8px);
|
||||||
@include flex-centered();
|
@include flex-centered();
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
|
|
|
@ -87,6 +87,11 @@
|
||||||
font-size: 1.5vw;
|
font-size: 1.5vw;
|
||||||
}
|
}
|
||||||
@media (max-width: 432px){
|
@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;
|
font-size: 1.5vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -13,3 +13,8 @@ export const ASPECT_RATIO_NARROW = Symbol('ASPECT_RATIO_NARROW');
|
||||||
* @type {Symbol}
|
* @type {Symbol}
|
||||||
*/
|
*/
|
||||||
export const ASPECT_RATIO_WIDE = Symbol('ASPECT_RATIO_WIDE');
|
export const ASPECT_RATIO_WIDE = Symbol('ASPECT_RATIO_WIDE');
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Smallest supported mobile width.
|
||||||
|
*/
|
||||||
|
export const SMALL_MOBILE_WIDTH = '320';
|
||||||
|
|
|
@ -10,6 +10,7 @@ import {
|
||||||
setAudioOutputDevice as setAudioOutputDeviceAction
|
setAudioOutputDevice as setAudioOutputDeviceAction
|
||||||
} from '../../../../base/devices';
|
} from '../../../../base/devices';
|
||||||
import { connect } from '../../../../base/redux';
|
import { connect } from '../../../../base/redux';
|
||||||
|
import { SMALL_MOBILE_WIDTH } from '../../../../base/responsive-ui/constants';
|
||||||
import {
|
import {
|
||||||
getCurrentMicDeviceId,
|
getCurrentMicDeviceId,
|
||||||
getCurrentOutputDeviceId
|
getCurrentOutputDeviceId
|
||||||
|
@ -36,6 +37,11 @@ type Props = AudioSettingsContentProps & {
|
||||||
* Callback executed when the popup closes.
|
* Callback executed when the popup closes.
|
||||||
*/
|
*/
|
||||||
onClose: Function,
|
onClose: Function,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The popup placement enum value.
|
||||||
|
*/
|
||||||
|
popupPlacement: string
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -52,7 +58,8 @@ function AudioSettingsPopup({
|
||||||
setAudioInputDevice,
|
setAudioInputDevice,
|
||||||
setAudioOutputDevice,
|
setAudioOutputDevice,
|
||||||
onClose,
|
onClose,
|
||||||
outputDevices
|
outputDevices,
|
||||||
|
popupPlacement
|
||||||
}: Props) {
|
}: Props) {
|
||||||
return (
|
return (
|
||||||
<div className = 'audio-preview'>
|
<div className = 'audio-preview'>
|
||||||
|
@ -66,7 +73,7 @@ function AudioSettingsPopup({
|
||||||
setAudioOutputDevice = { setAudioOutputDevice } /> }
|
setAudioOutputDevice = { setAudioOutputDevice } /> }
|
||||||
isOpen = { isOpen }
|
isOpen = { isOpen }
|
||||||
onClose = { onClose }
|
onClose = { onClose }
|
||||||
placement = 'top-start'>
|
placement = { popupPlacement }>
|
||||||
{children}
|
{children}
|
||||||
</InlineDialog>
|
</InlineDialog>
|
||||||
</div>
|
</div>
|
||||||
|
@ -80,7 +87,10 @@ function AudioSettingsPopup({
|
||||||
* @returns {Object}
|
* @returns {Object}
|
||||||
*/
|
*/
|
||||||
function mapStateToProps(state) {
|
function mapStateToProps(state) {
|
||||||
|
const { clientWidth } = state['features/base/responsive-ui'];
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
popupPlacement: clientWidth <= SMALL_MOBILE_WIDTH ? 'auto' : 'top-start',
|
||||||
currentMicDeviceId: getCurrentMicDeviceId(state),
|
currentMicDeviceId: getCurrentMicDeviceId(state),
|
||||||
currentOutputDeviceId: getCurrentOutputDeviceId(state),
|
currentOutputDeviceId: getCurrentOutputDeviceId(state),
|
||||||
isOpen: getAudioSettingsVisibility(state),
|
isOpen: getAudioSettingsVisibility(state),
|
||||||
|
|
|
@ -8,6 +8,7 @@ import {
|
||||||
setVideoInputDeviceAndUpdateSettings
|
setVideoInputDeviceAndUpdateSettings
|
||||||
} from '../../../../base/devices';
|
} from '../../../../base/devices';
|
||||||
import { connect } from '../../../../base/redux';
|
import { connect } from '../../../../base/redux';
|
||||||
|
import { SMALL_MOBILE_WIDTH } from '../../../../base/responsive-ui/constants';
|
||||||
import { getCurrentCameraDeviceId } from '../../../../base/settings';
|
import { getCurrentCameraDeviceId } from '../../../../base/settings';
|
||||||
import { toggleVideoSettings } from '../../../actions';
|
import { toggleVideoSettings } from '../../../actions';
|
||||||
import { getVideoSettingsVisibility } from '../../../functions';
|
import { getVideoSettingsVisibility } from '../../../functions';
|
||||||
|
@ -31,6 +32,11 @@ type Props = VideoSettingsProps & {
|
||||||
* Callback executed when the popup closes.
|
* Callback executed when the popup closes.
|
||||||
*/
|
*/
|
||||||
onClose: Function,
|
onClose: Function,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The popup placement enum value.
|
||||||
|
*/
|
||||||
|
popupPlacement: string
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -43,6 +49,7 @@ function VideoSettingsPopup({
|
||||||
children,
|
children,
|
||||||
isOpen,
|
isOpen,
|
||||||
onClose,
|
onClose,
|
||||||
|
popupPlacement,
|
||||||
setVideoInputDevice,
|
setVideoInputDevice,
|
||||||
videoDeviceIds
|
videoDeviceIds
|
||||||
}: Props) {
|
}: Props) {
|
||||||
|
@ -56,7 +63,7 @@ function VideoSettingsPopup({
|
||||||
videoDeviceIds = { videoDeviceIds } /> }
|
videoDeviceIds = { videoDeviceIds } /> }
|
||||||
isOpen = { isOpen }
|
isOpen = { isOpen }
|
||||||
onClose = { onClose }
|
onClose = { onClose }
|
||||||
placement = 'top-start'>
|
placement = { popupPlacement }>
|
||||||
{ children }
|
{ children }
|
||||||
</InlineDialog>
|
</InlineDialog>
|
||||||
</div>
|
</div>
|
||||||
|
@ -71,9 +78,12 @@ function VideoSettingsPopup({
|
||||||
* @returns {Object}
|
* @returns {Object}
|
||||||
*/
|
*/
|
||||||
function mapStateToProps(state) {
|
function mapStateToProps(state) {
|
||||||
|
const { clientWidth } = state['features/base/responsive-ui'];
|
||||||
|
|
||||||
return {
|
return {
|
||||||
currentCameraDeviceId: getCurrentCameraDeviceId(state),
|
currentCameraDeviceId: getCurrentCameraDeviceId(state),
|
||||||
isOpen: getVideoSettingsVisibility(state),
|
isOpen: getVideoSettingsVisibility(state),
|
||||||
|
popupPlacement: clientWidth <= SMALL_MOBILE_WIDTH ? 'auto' : 'top-start',
|
||||||
videoDeviceIds: getVideoDeviceIds(state)
|
videoDeviceIds: getVideoDeviceIds(state)
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue