From 9174369fb5073aff1105319fe10dd59af761d59e Mon Sep 17 00:00:00 2001 From: Robert Long Date: Fri, 10 Dec 2021 10:54:18 -0800 Subject: [PATCH] Fix mobile styles --- src/CallList.module.css | 9 +- src/ConferenceCallManagerHooks.jsx | 40 +-- src/Header.module.css | 11 +- src/Home.jsx | 387 ++++++++++++++--------------- src/Home.module.css | 45 ++-- src/Modal.jsx | 8 +- src/Modal.module.css | 18 +- src/Room.module.css | 1 - src/SelectInput.module.css | 3 +- src/SettingsModal.jsx | 1 + src/Tabs.module.css | 4 +- src/button/Button.module.css | 1 + src/index.css | 9 +- 13 files changed, 277 insertions(+), 260 deletions(-) diff --git a/src/CallList.module.css b/src/CallList.module.css index 907cc98..4cffe4b 100644 --- a/src/CallList.module.css +++ b/src/CallList.module.css @@ -1,12 +1,13 @@ .callTile { display: flex; - width: 329px; + min-width: 240px; height: 94px; padding: 12px; text-decoration: none; background-color: var(--bgColor2); border-radius: 8px; overflow: hidden; + box-sizing: border-box; } .avatar, @@ -54,9 +55,7 @@ } .callList { - display: flex; - flex-wrap: wrap; - justify-content: flex-start; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; - flex: 1; } diff --git a/src/ConferenceCallManagerHooks.jsx b/src/ConferenceCallManagerHooks.jsx index 03f06bc..53d4b9e 100644 --- a/src/ConferenceCallManagerHooks.jsx +++ b/src/ConferenceCallManagerHooks.jsx @@ -297,7 +297,6 @@ export function ClientProvider({ homeserverUrl, children }) { loading: false, isGuest: false, isAuthenticated: true, - isGuest: false, userName: client.getUserIdLocalpart(), }); @@ -407,40 +406,21 @@ export async function createRoom(client, name) { return room_alias || room_id; } -export function useCreateRoom(client) { - const [creatingRoom, setCreatingRoom] = useState(false); - const [createRoomError, setCreateRoomError] = useState(); - - const onCreateRoom = useCallback( - (roomName) => { - setCreateRoomError(undefined); - setCreatingRoom(true); - - return createRoom(client, roomName).catch((error) => { - setCreateRoomError(error); - setCreatingRoom(false); - }); - }, - [client] - ); - - return { - creatingRoom, - createRoomError, - createRoom: onCreateRoom, - }; -} - -export function useCreateRoomAsPasswordlessUser() { - const { register } = useClient(); +export function useCreateRoom() { + const { register, client } = useClient(); const [creatingRoom, setCreatingRoom] = useState(false); const [createRoomError, setCreateRoomError] = useState(); const onCreateRoom = useCallback( (roomName, userName) => { async function onCreateRoom(roomName, userName) { - const client = await register(userName, randomString(16)); - return await createRoom(client, roomName); + let _client = client; + + if (!_client) { + _client = await register(userName, randomString(16)); + } + + return await createRoom(_client, roomName); } setCreateRoomError(undefined); @@ -451,7 +431,7 @@ export function useCreateRoomAsPasswordlessUser() { setCreatingRoom(false); }); }, - [register] + [register, client] ); return { diff --git a/src/Header.module.css b/src/Header.module.css index dc0950b..dc2b8ca 100644 --- a/src/Header.module.css +++ b/src/Header.module.css @@ -3,16 +3,17 @@ display: flex; justify-content: space-between; align-items: center; - height: 64px; user-select: none; flex-shrink: 0; } .nav { display: flex; + flex: 1; align-items: center; white-space: nowrap; - margin: 0 20px; + padding: 0 20px; + height: 64px; } .logo { @@ -25,6 +26,10 @@ margin-right: 12px; } +.rightNav { + justify-content: flex-end; +} + .rightNav > * { margin-right: 24px; } @@ -88,7 +93,7 @@ } @media (min-width: 800px) { - .header { + .nav { height: 98px; } } diff --git a/src/Home.jsx b/src/Home.jsx index 8d57a59..600cc62 100644 --- a/src/Home.jsx +++ b/src/Home.jsx @@ -21,7 +21,6 @@ import { useGroupCallRooms, usePublicRooms, useCreateRoom, - useCreateRoomAsPasswordlessUser, } from "./ConferenceCallManagerHooks"; import { Header, HeaderLogo, LeftNav, RightNav } from "./Header"; import styles from "./Home.module.css"; @@ -35,21 +34,8 @@ import { ErrorModal } from "./ErrorModal"; export function Home() { const { isAuthenticated, isGuest, loading, error, client } = useClient(); - if (loading) { - return
Loading...
; - } else if (error) { - return ; - } else if (!isAuthenticated || isGuest) { - return ; - } else { - return ; - } -} - -function UnregisteredView() { const history = useHistory(); - const { createRoomError, creatingRoom, createRoom } = - useCreateRoomAsPasswordlessUser(); + const { createRoomError, creatingRoom, createRoom } = useCreateRoom(); const onCreateRoom = useCallback( (e) => { @@ -59,7 +45,9 @@ function UnregisteredView() { const userName = data.get("userName"); createRoom(roomName, userName).then((roomIdOrAlias) => { - history.push(`/room/${roomIdOrAlias}`); + if (roomIdOrAlias) { + history.push(`/room/${roomIdOrAlias}`); + } }); }, [history] @@ -75,78 +63,112 @@ function UnregisteredView() { [history] ); + if (loading) { + return
Loading...
; + } else if (error) { + return ; + } else if (!isAuthenticated || isGuest) { + return ( + + ); + } else { + return ( + + ); + } +} + +function UnregisteredView({ + onCreateRoom, + createRoomError, + creatingRoom, + onJoinRoom, +}) { return ( -
-
-
- - - - - - -
-
-
-
-

Join a call

- - - - - - -
-
-
-

Create a call

- - - - - - - {createRoomError && ( +
+
+ + + + + + +
+
+
+
+
+ +

Join a call

- {createRoomError.message} + - )} - - - - + + + + +
+
+

Create a call

+ + + + + + + {createRoomError && ( + + {createRoomError.message} + + )} + + + +
+
@@ -154,32 +176,13 @@ function UnregisteredView() { ); } -function RegisteredView({ client }) { - const history = useHistory(); - const { createRoomError, creatingRoom, createRoom } = useCreateRoom(client); - - const onCreateRoom = useCallback( - (e) => { - e.preventDefault(); - const data = new FormData(e.target); - const roomName = data.get("roomName"); - - createRoom(roomName).then((roomIdOrAlias) => { - history.push(`/room/${roomIdOrAlias}`); - }); - }, - [history] - ); - - const onJoinRoom = useCallback( - (e) => { - e.preventDefault(); - const data = new FormData(e.target); - const roomId = data.get("roomId"); - history.push(`/room/${roomId}`); - }, - [history] - ); +function RegisteredView({ + client, + onCreateRoom, + createRoomError, + creatingRoom, + onJoinRoom, +}) { const publicRooms = usePublicRooms( client, import.meta.env.VITE_PUBLIC_SPACE_ROOM_ID @@ -189,93 +192,87 @@ function RegisteredView({ client }) { const hideCallList = publicRooms.length === 0 && recentRooms.length === 0; return ( -
-
-
- - - - {hideCallList && ( - - - - )} -
-
-
-
-

Join a call

- - - - - - -
-
-
-

Create a call

- - - - {createRoomError && ( - - {createRoomError.message} - - )} - - - -
-
-
-
- {!hideCallList && ( -
-
- - - - -
+
+
+ + + + + + +
+
+
- {publicRooms.length > 0 && ( - - )} - {recentRooms.length > 0 && ( - - )} +
+
+

Join a call

+ + + + + + +
+
+
+

Create a call

+ + + + {createRoomError && ( + + {createRoomError.message} + + )} + + + +
+
- )} + {!hideCallList && ( +
+
+ {publicRooms.length > 0 && ( + + )} + {recentRooms.length > 0 && ( + + )} +
+
+ )} +
); } diff --git a/src/Home.module.css b/src/Home.module.css index b9f79f4..669702b 100644 --- a/src/Home.module.css +++ b/src/Home.module.css @@ -1,7 +1,14 @@ .home { display: flex; flex: 1; - height: 100%; + flex-direction: column; + min-height: 100vh; +} + +.splitContainer { + display: flex; + flex: 1; + flex-direction: column; } .left, @@ -11,13 +18,8 @@ flex: 1; } -.left { - background-color: var(--bgColor2); -} - .fullWidth { background-color: var(--bgColor1); - overflow-y: auto; } .centered { @@ -50,7 +52,7 @@ } .left .content hr { - width: 100%; + width: calc(100% - 24px); border: none; border-top: 1px solid var(--bgColor4); color: var(--textColor2); @@ -60,20 +62,17 @@ font-weight: 600; font-size: 15px; line-height: 24px; + margin: 0 12px; } .left .content hr:after { - background-color: var(--bgColor2); + background-color: var(--bgColor1); content: "OR"; padding: 0 12px; position: relative; top: -12px; } -.fullWidth .content hr:after { - background-color: var(--bgColor1); -} - .left .content form { display: flex; flex-direction: column; @@ -97,14 +96,32 @@ } .left .content form:last-child { - padding-bottom: 0; + padding-bottom: 40px; } .right .content { padding: 113px 40px 40px 40px; - overflow-y: auto; } .right .content h3:first-child { margin-top: 0; } + +@media (min-width: 800px) { + .left { + background-color: var(--bgColor2); + } + + .leftNav:not(.fullWidth) { + background-color: var(--bgColor2); + } + + .splitContainer { + flex-direction: row; + } + + .fullWidth .content hr:after, + .left .content hr:after { + background-color: var(--bgColor2); + } +} diff --git a/src/Modal.jsx b/src/Modal.jsx index 4423975..f1d4d6e 100644 --- a/src/Modal.jsx +++ b/src/Modal.jsx @@ -14,7 +14,7 @@ import styles from "./Modal.module.css"; import classNames from "classnames"; export function Modal(props) { - const { title, children, className } = props; + const { title, children, className, mobileFullScreen } = props; const modalRef = useRef(); const { overlayProps, underlayProps } = useOverlay(props, modalRef); usePreventScroll(); @@ -34,7 +34,11 @@ export function Modal(props) { {...dialogProps} {...modalProps} ref={modalRef} - className={classNames(styles.modal, className)} + className={classNames( + styles.modal, + { [styles.mobileFullScreen]: mobileFullScreen }, + className + )} >

{title}

diff --git a/src/Modal.module.css b/src/Modal.module.css index a466844..c9270eb 100644 --- a/src/Modal.module.css +++ b/src/Modal.module.css @@ -15,7 +15,8 @@ background: #21262c; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15); border-radius: 8px; - width: 420px; + max-width: 90vw; + min-width: 288px; } .modalHeader { @@ -47,3 +48,18 @@ .content p { margin-top: 0; } + +@media (max-width: 799px) { + .modal.mobileFullScreen { + position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + max-width: none; + max-height: none; + border-radius: 0; + } +} diff --git a/src/Room.module.css b/src/Room.module.css index f8b3ecd..567a55c 100644 --- a/src/Room.module.css +++ b/src/Room.module.css @@ -40,7 +40,6 @@ limitations under the License. .preview { position: relative; - width: 100%; max-width: 816px; border-radius: 24px; overflow: hidden; diff --git a/src/SelectInput.module.css b/src/SelectInput.module.css index 4f048d6..8bdb56e 100644 --- a/src/SelectInput.module.css +++ b/src/SelectInput.module.css @@ -22,7 +22,7 @@ font-size: 15px; color: var(--textColor1); height: 40px; - width: 320px; + max-width: 100%; } .selectedItem { @@ -33,7 +33,6 @@ } .popover { - width: 320px; } .option:first-child { diff --git a/src/SettingsModal.jsx b/src/SettingsModal.jsx index 7525697..cfead7e 100644 --- a/src/SettingsModal.jsx +++ b/src/SettingsModal.jsx @@ -29,6 +29,7 @@ export function SettingsModal({ diff --git a/src/Tabs.module.css b/src/Tabs.module.css index 289c44f..232e46e 100644 --- a/src/Tabs.module.css +++ b/src/Tabs.module.css @@ -6,13 +6,14 @@ .tabList { display: flex; flex-direction: column; - width: 190px; list-style: none; padding: 0; margin: 0; } .tab { + max-width: 190px; + min-width: fit-content; height: 32px; border-radius: 8px; background-color: transparent; @@ -56,4 +57,5 @@ flex-direction: column; flex: 1; padding: 0 40px; + overflow-y: auto; } diff --git a/src/button/Button.module.css b/src/button/Button.module.css index ef26519..646915f 100644 --- a/src/button/Button.module.css +++ b/src/button/Button.module.css @@ -124,6 +124,7 @@ limitations under the License. height: 40px; transition: border-color 250ms, background-color 250ms; padding: 0 20px; + flex-shrink: 0; } .copyButton span { diff --git a/src/index.css b/src/index.css index d509dc8..f2ac11b 100644 --- a/src/index.css +++ b/src/index.css @@ -159,10 +159,7 @@ details[open] > summary { margin-bottom: 16px; } -*[data-overlay-container] { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; +#root > [data-overlay-container] { + position: relative; + height: 100%; }