Web app UI: make preferences responsive
parent
5627097a6c
commit
fd5bfd161d
|
@ -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>
|
||||||
|
|
|
@ -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>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
Loading…
Reference in New Issue