astra
/
ntfy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Web app UI: make preferences responsive

pull/784/head
nimbleghost 2023-06-26 23:19:58 +02:00
parent 5627097a6c
commit fd5bfd161d
2 changed files with 55 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/Account.jsx
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>

100
web/src/components/Pref.jsx
View File

@ -1,52 +1,60 @@
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>
<b>{props.title}</b>
{props.subtitle && <em> ({props.subtitle})</em>}
</div>
{props.description && (
<div> <div>
<b>{props.title}</b> <em>{props.description}</em>
{props.subtitle && <em> ({props.subtitle})</em>}
</div> </div>
{props.description && ( )}
<div>
<em>{props.description}</em>
</div>
)}
</div>
<div
role="cell"
style={{
flex: "1 0 calc(60% - 50px)",
display: "flex",
flexDirection: "column",
justifyContent,
}}
>
{props.children}
</div>
</div> </div>
); <div role="cell">{props.children}</div>
}; </PrefRow>
);