Remove viewport units
This commit is contained in:
parent
77aff4f829
commit
11eb137184
5 changed files with 76 additions and 60 deletions
|
@ -2,7 +2,7 @@
|
|||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.splitContainer {
|
||||
|
|
|
@ -8,6 +8,7 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
|
@ -15,7 +16,7 @@
|
|||
flex-direction: column;
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.formContainer {
|
||||
|
|
105
src/Room.jsx
105
src/Room.jsx
|
@ -300,57 +300,64 @@ function RoomSetupView({
|
|||
</RightNav>
|
||||
</Header>
|
||||
<div className={styles.joinRoom}>
|
||||
<h1>New Call</h1>
|
||||
{hasLocalParticipant && (
|
||||
<p>Warning, you are signed into this call on another device.</p>
|
||||
)}
|
||||
<div className={styles.preview}>
|
||||
{state === GroupCallState.LocalCallFeedUninitialized && (
|
||||
<p className={styles.webcamPermissions}>
|
||||
Webcam/microphone permissions needed to join the call.
|
||||
</p>
|
||||
)}
|
||||
{state === GroupCallState.InitializingLocalCallFeed && (
|
||||
<p className={styles.webcamPermissions}>
|
||||
Accept webcam/microphone permissions to join the call.
|
||||
</p>
|
||||
)}
|
||||
<video ref={videoRef} muted playsInline disablePictureInPicture />
|
||||
{state === GroupCallState.LocalCallFeedInitialized && (
|
||||
<>
|
||||
<Button
|
||||
className={styles.joinCallButton}
|
||||
disabled={state !== GroupCallState.LocalCallFeedInitialized}
|
||||
onPress={onEnter}
|
||||
>
|
||||
Join call now
|
||||
</Button>
|
||||
<div className={styles.previewButtons}>
|
||||
<MicButton
|
||||
muted={microphoneMuted}
|
||||
onPress={toggleMicrophoneMuted}
|
||||
/>
|
||||
<VideoButton
|
||||
muted={localVideoMuted}
|
||||
onPress={toggleLocalVideoMuted}
|
||||
/>
|
||||
<OverflowMenu
|
||||
roomId={roomId}
|
||||
setShowInspector={setShowInspector}
|
||||
showInspector={showInspector}
|
||||
client={client}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
<div className={styles.joinRoomContent}>
|
||||
<h1>New Call</h1>
|
||||
{hasLocalParticipant && (
|
||||
<p>Warning, you are signed into this call on another device.</p>
|
||||
)}
|
||||
<div className={styles.preview}>
|
||||
{state === GroupCallState.LocalCallFeedUninitialized && (
|
||||
<p className={styles.webcamPermissions}>
|
||||
Webcam/microphone permissions needed to join the call.
|
||||
</p>
|
||||
)}
|
||||
{state === GroupCallState.InitializingLocalCallFeed && (
|
||||
<p className={styles.webcamPermissions}>
|
||||
Accept webcam/microphone permissions to join the call.
|
||||
</p>
|
||||
)}
|
||||
<video ref={videoRef} muted playsInline disablePictureInPicture />
|
||||
{state === GroupCallState.LocalCallFeedInitialized && (
|
||||
<>
|
||||
<Button
|
||||
className={styles.joinCallButton}
|
||||
disabled={state !== GroupCallState.LocalCallFeedInitialized}
|
||||
onPress={onEnter}
|
||||
>
|
||||
Join call now
|
||||
</Button>
|
||||
<div className={styles.previewButtons}>
|
||||
<MicButton
|
||||
muted={microphoneMuted}
|
||||
onPress={toggleMicrophoneMuted}
|
||||
/>
|
||||
<VideoButton
|
||||
muted={localVideoMuted}
|
||||
onPress={toggleLocalVideoMuted}
|
||||
/>
|
||||
<OverflowMenu
|
||||
roomId={roomId}
|
||||
setShowInspector={setShowInspector}
|
||||
showInspector={showInspector}
|
||||
client={client}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<p>Or</p>
|
||||
<CopyButton
|
||||
value={window.location.href}
|
||||
className={styles.copyButton}
|
||||
>
|
||||
Copy call link and join later
|
||||
</CopyButton>
|
||||
</div>
|
||||
<div className={styles.joinRoomFooter}>
|
||||
<Link className={styles.homeLink} to="/">
|
||||
Take me Home
|
||||
</Link>
|
||||
</div>
|
||||
<p>Or</p>
|
||||
<CopyButton value={window.location.href} className={styles.copyButton}>
|
||||
Copy call link and join later
|
||||
</CopyButton>
|
||||
<Link className={styles.homeLink} to="/">
|
||||
Take me Home
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -18,13 +18,14 @@ limitations under the License.
|
|||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
min-height: -webkit-fill-available;
|
||||
overflow: hidden;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.inRoom {
|
||||
width: 100vw;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.joinRoom {
|
||||
|
@ -33,7 +34,18 @@ limitations under the License.
|
|||
align-items: center;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.joinRoomContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.joinRoomFooter {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.homeLink {
|
||||
|
@ -139,10 +151,6 @@ limitations under the License.
|
|||
}
|
||||
|
||||
@media (min-width: 800px) {
|
||||
.room {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.roomContainer {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
|
|
@ -129,7 +129,7 @@ body {
|
|||
html,
|
||||
body,
|
||||
#root {
|
||||
height: 100vh;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#root {
|
||||
|
|
Loading…
Reference in a new issue