From fd5bfd161d2cd0138458d837783ee6cd0f522dc9 Mon Sep 17 00:00:00 2001
From: nimbleghost <132819643+nimbleghost@users.noreply.github.com>
Date: Mon, 26 Jun 2023 23:19:58 +0200
Subject: [PATCH 1/3] Web app UI: make preferences responsive
---
web/src/components/Account.jsx | 2 +-
web/src/components/Pref.jsx | 100 ++++++++++++++++++---------------
2 files changed, 55 insertions(+), 47 deletions(-)
diff --git a/web/src/components/Account.jsx b/web/src/components/Account.jsx
index a6a624b8..977bf161 100644
--- a/web/src/components/Account.jsx
+++ b/web/src/components/Account.jsx
@@ -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>
diff --git a/web/src/components/Pref.jsx b/web/src/components/Pref.jsx
index a725d115..5e64c41f 100644
--- a/web/src/components/Pref.jsx
+++ b/web/src/components/Pref.jsx
@@ -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>
+);
From 4a1adaeab2e4e4ef9538f51982341a66d63044eb Mon Sep 17 00:00:00 2001
From: nimbleghost <132819643+nimbleghost@users.noreply.github.com>
Date: Mon, 26 Jun 2023 23:34:22 +0200
Subject: [PATCH 2/3] Make login and sign up form responsive
---
web/src/components/AvatarBox.jsx | 27 ++++++++++++++-------------
web/src/components/Login.jsx | 2 +-
web/src/components/Signup.jsx | 2 +-
3 files changed, 16 insertions(+), 15 deletions(-)
diff --git a/web/src/components/AvatarBox.jsx b/web/src/components/AvatarBox.jsx
index 10378683..37c85d4e 100644
--- a/web/src/components/AvatarBox.jsx
+++ b/web/src/components/AvatarBox.jsx
@@ -1,22 +1,23 @@
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";
+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) => (
- <Box
- sx={{
- display: "flex",
- flexGrow: 1,
- justifyContent: "center",
- flexDirection: "column",
- alignContent: "center",
- alignItems: "center",
- height: "100vh",
- }}
- >
+ <AvatarBoxContainer>
<Avatar sx={{ m: 2, width: 64, height: 64, borderRadius: 3 }} src={logo} variant="rounded" />
{props.children}
- </Box>
+ </AvatarBoxContainer>
);
export default AvatarBox;
diff --git a/web/src/components/Login.jsx b/web/src/components/Login.jsx
index 4efec255..5c1af249 100644
--- a/web/src/components/Login.jsx
+++ b/web/src/components/Login.jsx
@@ -45,7 +45,7 @@ const Login = () => {
return (
<AvatarBox>
<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
margin="dense"
required
diff --git a/web/src/components/Signup.jsx b/web/src/components/Signup.jsx
index 2e97956f..7da54c49 100644
--- a/web/src/components/Signup.jsx
+++ b/web/src/components/Signup.jsx
@@ -52,7 +52,7 @@ const Signup = () => {
return (
<AvatarBox>
<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
margin="dense"
required
From d51ca209924ac6206b8425f074161c04669fbc05 Mon Sep 17 00:00:00 2001
From: nimbleghost <132819643+nimbleghost@users.noreply.github.com>
Date: Mon, 26 Jun 2023 23:36:04 +0200
Subject: [PATCH 3/3] Use dvh for main height
This takes into account browser UI for the viewport calculation
---
web/src/components/App.jsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/web/src/components/App.jsx b/web/src/components/App.jsx
index 7fdc706e..9b939ea5 100644
--- a/web/src/components/App.jsx
+++ b/web/src/components/App.jsx
@@ -118,7 +118,7 @@ const Main = (props) => (
flexDirection: "column",
padding: 3,
width: { sm: `calc(100% - ${Navigation.width}px)` },
- height: "100vh",
+ height: "100dvh",
overflow: "auto",
backgroundColor: ({ palette }) => (palette.mode === "light" ? palette.grey[100] : palette.grey[900]),
}}