From 0f5c531694b11c5fe15bb3b524d85de41dc45d74 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Fri, 2 Jul 2021 20:57:48 +0100
Subject: [PATCH] Fix modals with horizontal form components. Fix invite /
friends menu having sidebars.
---
src/components/ui/Modal.tsx | 5 +++++
src/context/intermediate/modals/Input.tsx | 16 +++++++++-------
src/pages/RevoltApp.tsx | 5 +++--
src/pages/settings/server/Panes.module.scss | 1 +
4 files changed, 18 insertions(+), 9 deletions(-)
diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx
index 2faecde..6926508 100644
--- a/src/components/ui/Modal.tsx
+++ b/src/components/ui/Modal.tsx
@@ -55,6 +55,11 @@ const ModalContent = styled.div<{ [key in 'attachment' | 'noBackground' | 'borde
margin-top: 0;
}
+ form {
+ display: flex;
+ flex-direction: column;
+ }
+
${ props => !props.noBackground && css`
background: var(--secondary-header);
` }
diff --git a/src/context/intermediate/modals/Input.tsx b/src/context/intermediate/modals/Input.tsx
index fd8d44e..f25b992 100644
--- a/src/context/intermediate/modals/Input.tsx
+++ b/src/context/intermediate/modals/Input.tsx
@@ -54,13 +54,15 @@ export function InputModal({
]}
onClose={onClose}
>
- { field ? <Overline error={error} block>
- {field}
- </Overline> : (error && <Overline error={error} type="error" block />) }
- <InputBox
- value={value}
- onChange={e => setValue(e.currentTarget.value)}
- />
+ <form>
+ { field ? <Overline error={error} block>
+ {field}
+ </Overline> : (error && <Overline error={error} type="error" block />) }
+ <InputBox
+ value={value}
+ onChange={e => setValue(e.currentTarget.value)}
+ />
+ </form>
</Modal>
);
}
diff --git a/src/pages/RevoltApp.tsx b/src/pages/RevoltApp.tsx
index ad93f0c..0584660 100644
--- a/src/pages/RevoltApp.tsx
+++ b/src/pages/RevoltApp.tsx
@@ -34,14 +34,15 @@ const Routes = styled.div`
export default function App() {
const path = useLocation().pathname;
const fixedBottomNav = (path === '/' || path === '/settings' || path.startsWith("/friends"));
- const inSettings = path === '/settings';
+ const inSettings = path.includes('/settings');
const inChannel = path.includes('/channel');
+ const inSpecial = path.startsWith('/invite') || path.startsWith("/friends") || path.startsWith("/settings");
return (
<OverlappingPanels
width="100vw"
height="100vh"
- leftPanel={inSettings ? undefined : { width: 292, component: <LeftSidebar /> }}
+ leftPanel={inSpecial ? undefined : { width: 292, component: <LeftSidebar /> }}
rightPanel={(!inSettings && inChannel) ? { width: 240, component: <RightSidebar /> } : undefined}
bottomNav={{
component: <BottomNavigation />,
diff --git a/src/pages/settings/server/Panes.module.scss b/src/pages/settings/server/Panes.module.scss
index cbf8e5a..b34d3b7 100644
--- a/src/pages/settings/server/Panes.module.scss
+++ b/src/pages/settings/server/Panes.module.scss
@@ -81,6 +81,7 @@
.overview {
height: 85vh; //TOFIX change later
display: flex;
+
.list {
overflow-y: scroll;
}
--
GitLab