Fix modals with horizontal form components.

Fix invite / friends menu having sidebars.
This commit is contained in:
Paul 2021-07-02 20:57:48 +01:00
parent b0332c882b
commit 0f5c531694
4 changed files with 18 additions and 9 deletions

View file

@ -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);
` }

View file

@ -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>
);
}

View file

@ -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 />,

View file

@ -81,6 +81,7 @@
.overview {
height: 85vh; //TOFIX change later
display: flex;
.list {
overflow-y: scroll;
}