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; margin-top: 0;
} }
form {
display: flex;
flex-direction: column;
}
${ props => !props.noBackground && css` ${ props => !props.noBackground && css`
background: var(--secondary-header); background: var(--secondary-header);
` } ` }

View file

@ -54,13 +54,15 @@ export function InputModal({
]} ]}
onClose={onClose} onClose={onClose}
> >
{ field ? <Overline error={error} block> <form>
{field} { field ? <Overline error={error} block>
</Overline> : (error && <Overline error={error} type="error" block />) } {field}
<InputBox </Overline> : (error && <Overline error={error} type="error" block />) }
value={value} <InputBox
onChange={e => setValue(e.currentTarget.value)} value={value}
/> onChange={e => setValue(e.currentTarget.value)}
/>
</form>
</Modal> </Modal>
); );
} }

View file

@ -34,14 +34,15 @@ const Routes = styled.div`
export default function App() { export default function App() {
const path = useLocation().pathname; const path = useLocation().pathname;
const fixedBottomNav = (path === '/' || path === '/settings' || path.startsWith("/friends")); const fixedBottomNav = (path === '/' || path === '/settings' || path.startsWith("/friends"));
const inSettings = path === '/settings'; const inSettings = path.includes('/settings');
const inChannel = path.includes('/channel'); const inChannel = path.includes('/channel');
const inSpecial = path.startsWith('/invite') || path.startsWith("/friends") || path.startsWith("/settings");
return ( return (
<OverlappingPanels <OverlappingPanels
width="100vw" width="100vw"
height="100vh" height="100vh"
leftPanel={inSettings ? undefined : { width: 292, component: <LeftSidebar /> }} leftPanel={inSpecial ? undefined : { width: 292, component: <LeftSidebar /> }}
rightPanel={(!inSettings && inChannel) ? { width: 240, component: <RightSidebar /> } : undefined} rightPanel={(!inSettings && inChannel) ? { width: 240, component: <RightSidebar /> } : undefined}
bottomNav={{ bottomNav={{
component: <BottomNavigation />, component: <BottomNavigation />,

View file

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