parra/ntfy
parra/ntfy
1
0
Fork 0
mirror of https://github.com/binwiederhier/ntfy.git synced 2024-11-22 11:24:04 +01:00
Code Releases Activity

Web app UI: make preferences responsive

Browse source
This commit is contained in:
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>
{tokens?.length > 0 && <TokensTable tokens={tokens} />}
<div style={{ width: "100%", overflowX: "scroll" }}>{tokens?.length > 0 && <TokensTable tokens={tokens} />}</div>
</CardContent>
<CardActions>
<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";
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 justifyContent = props.alignTop ? "normal" : "center";
return (
<div
role="row"
style={{
display: "flex",
flexDirection: "row",
marginTop: "10px",
marginBottom: "20px",
}}
>
<div
role="cell"
id={props.labelId ?? ""}
aria-label={props.title}
style={{
flex: "1 0 40%",
display: "flex",
flexDirection: "column",
justifyContent,
paddingRight: "30px",
}}
>
const PrefRow = styled("div")`
display: flex;
flex-direction: row;
> :first-child {
flex: 1 0 40%;
display: flex;
flex-direction: column;
justify-content: ${(props) => (props.alignTop ? "normal" : "center")};
}
> :last-child {
flex: 1 0 calc(60% - 50px);
display: flex;
flex-direction: column;
justify-content: ${(props) => (props.alignTop ? "normal" : "center")};
}
@media (max-width: 1000px) {
flex-direction: column;
gap: 10px;
> :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>
<b>{props.title}</b>
{props.subtitle && <em> ({props.subtitle})</em>}
<em>{props.description}</em>
</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 role="cell">{props.children}</div>
</PrefRow>
);