Merge pull request #784 from nimbleghost/pref-responsive

Web app UI: make preferences responsive
pull/786/head
Philipp C. Heckel 2023-06-26 20:45:07 -04:00 committed by GitHub
commit 0b3e268f2c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 72 additions and 63 deletions

View File

@ -785,7 +785,7 @@ const Tokens = () => {
}} }}
/> />
</Paragraph> </Paragraph>
{tokens?.length > 0 && <TokensTable tokens={tokens} />} <div style={{ width: "100%", overflowX: "scroll" }}>{tokens?.length > 0 && <TokensTable tokens={tokens} />}</div>
</CardContent> </CardContent>
<CardActions> <CardActions>
<Button onClick={handleCreateClick}>{t("account_tokens_table_create_token_button")}</Button> <Button onClick={handleCreateClick}>{t("account_tokens_table_create_token_button")}</Button>

View File

@ -118,7 +118,7 @@ const Main = (props) => (
flexDirection: "column", flexDirection: "column",
padding: 3, padding: 3,
width: { sm: `calc(100% - ${Navigation.width}px)` }, width: { sm: `calc(100% - ${Navigation.width}px)` },
height: "100vh", height: "100dvh",
overflow: "auto", overflow: "auto",
backgroundColor: ({ palette }) => (palette.mode === "light" ? palette.grey[100] : palette.grey[900]), backgroundColor: ({ palette }) => (palette.mode === "light" ? palette.grey[100] : palette.grey[900]),
}} }}

View File

@ -1,22 +1,23 @@
import * as React from "react"; import * as React from "react";
import { Avatar, Box } from "@mui/material"; import { Avatar, Box, styled } from "@mui/material";
import logo from "../img/ntfy-filled.svg"; import logo from "../img/ntfy-filled.svg";
const AvatarBoxContainer = styled(Box)`
display: flex;
flex-grow: 1;
justify-content: center;
flex-direction: column;
align-content: center;
align-items: center;
height: 100dvh;
max-width: min(400px, 90dvw);
margin: auto;
`;
const AvatarBox = (props) => ( const AvatarBox = (props) => (
<Box <AvatarBoxContainer>
sx={{
display: "flex",
flexGrow: 1,
justifyContent: "center",
flexDirection: "column",
alignContent: "center",
alignItems: "center",
height: "100vh",
}}
>
<Avatar sx={{ m: 2, width: 64, height: 64, borderRadius: 3 }} src={logo} variant="rounded" /> <Avatar sx={{ m: 2, width: 64, height: 64, borderRadius: 3 }} src={logo} variant="rounded" />
{props.children} {props.children}
</Box> </AvatarBoxContainer>
); );
export default AvatarBox; export default AvatarBox;

View File

@ -45,7 +45,7 @@ const Login = () => {
return ( return (
<AvatarBox> <AvatarBox>
<Typography sx={{ typography: "h6" }}>{t("login_title")}</Typography> <Typography sx={{ typography: "h6" }}>{t("login_title")}</Typography>
<Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1, maxWidth: 400 }}> <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
<TextField <TextField
margin="dense" margin="dense"
required required

View File

@ -1,31 +1,50 @@
import { styled } from "@mui/material";
import * as React from "react"; import * as React from "react";
export const PrefGroup = (props) => <div role="table">{props.children}</div>; export const PrefGroup = styled("div", { attrs: { role: "table" } })`
display: flex;
flex-direction: column;
gap: 20px;
`;
export const Pref = (props) => { const PrefRow = styled("div")`
const justifyContent = props.alignTop ? "normal" : "center"; display: flex;
return ( flex-direction: row;
<div
role="row" > :first-child {
style={{ flex: 1 0 40%;
display: "flex", display: flex;
flexDirection: "row", flex-direction: column;
marginTop: "10px", justify-content: ${(props) => (props.alignTop ? "normal" : "center")};
marginBottom: "20px", }
}}
> > :last-child {
<div flex: 1 0 calc(60% - 50px);
role="cell" display: flex;
id={props.labelId ?? ""} flex-direction: column;
aria-label={props.title} justify-content: ${(props) => (props.alignTop ? "normal" : "center")};
style={{ }
flex: "1 0 40%",
display: "flex", @media (max-width: 1000px) {
flexDirection: "column", flex-direction: column;
justifyContent, gap: 10px;
paddingRight: "30px",
}} > :first-child,
> > :last-child {
flex: unset;
}
> :last-child {
.MuiFormControl-root {
margin: 0;
}
}
}
`;
export const Pref = (props) => (
<PrefRow role="row" alignTop={props.alignTop}>
<div role="cell" id={props.labelId ?? ""} aria-label={props.title}>
<div> <div>
<b>{props.title}</b> <b>{props.title}</b>
{props.subtitle && <em> ({props.subtitle})</em>} {props.subtitle && <em> ({props.subtitle})</em>}
@ -36,17 +55,6 @@ export const Pref = (props) => {
</div> </div>
)} )}
</div> </div>
<div <div role="cell">{props.children}</div>
role="cell" </PrefRow>
style={{ );
flex: "1 0 calc(60% - 50px)",
display: "flex",
flexDirection: "column",
justifyContent,
}}
>
{props.children}
</div>
</div>
);
};

View File

@ -52,7 +52,7 @@ const Signup = () => {
return ( return (
<AvatarBox> <AvatarBox>
<Typography sx={{ typography: "h6" }}>{t("signup_title")}</Typography> <Typography sx={{ typography: "h6" }}>{t("signup_title")}</Typography>
<Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1, maxWidth: 400 }}> <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
<TextField <TextField
margin="dense" margin="dense"
required required