mirror of
https://github.com/Qortal/qortal-mobile.git
synced 2025-03-15 04:12:32 +00:00
welcome small screens
This commit is contained in:
parent
4b65471139
commit
1c43396c75
@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
|
||||
|
||||
<title>Qortal Extension</title>
|
||||
|
@ -78,7 +78,7 @@ export const ThingsToDoInitial = ({ myAddress, name, hasGroups, balance }) => {
|
||||
<Box
|
||||
sx={{
|
||||
width: "322px",
|
||||
height: isMobile ? "165px" : "250px",
|
||||
minHeight: isMobile ? "165px" : "250px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
bgcolor: "background.paper",
|
||||
|
@ -4,6 +4,7 @@ import {
|
||||
BottomNavigationAction,
|
||||
ButtonBase,
|
||||
Typography,
|
||||
useMediaQuery,
|
||||
} from "@mui/material";
|
||||
import { Home, Groups, Message, ShowChart } from "@mui/icons-material";
|
||||
import Box from "@mui/material/Box";
|
||||
@ -67,6 +68,7 @@ export const MobileFooter = ({
|
||||
hasUnreadDirects
|
||||
}) => {
|
||||
const [value, setValue] = React.useState(0);
|
||||
const isSmallScreen = useMediaQuery("(max-width:370px)"); // Define a custom breakpoint
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
@ -95,9 +97,16 @@ export const MobileFooter = ({
|
||||
setIsOpenDrawerProfile(true);
|
||||
}}
|
||||
icon={
|
||||
<IconWrapper color="rgba(250, 250, 250, 0.5)" label="Wallet">
|
||||
<>
|
||||
{isSmallScreen ? (
|
||||
<WalletIcon color="rgba(250, 250, 250, 0.5)" />
|
||||
) : (
|
||||
<IconWrapper color="rgba(250, 250, 250, 0.5)" label="Wallet">
|
||||
<WalletIcon color="rgba(250, 250, 250, 0.5)" />
|
||||
</IconWrapper>
|
||||
)}
|
||||
</>
|
||||
|
||||
}
|
||||
sx={{ color: value === 0 ? "white" : "gray", padding: "0px 10px" }}
|
||||
/>
|
||||
@ -106,14 +115,21 @@ export const MobileFooter = ({
|
||||
setMobileViewMode("groups");
|
||||
}}
|
||||
icon={
|
||||
<IconWrapper color="rgba(250, 250, 250, 0.5)" label="Hubs">
|
||||
<>
|
||||
{isSmallScreen ? (
|
||||
<HubsIcon color={hasUnreadGroups ? "var(--unread)" : "rgba(250, 250, 250, 0.5)"} />
|
||||
) : (
|
||||
<IconWrapper color="rgba(250, 250, 250, 0.5)" label="Hubs">
|
||||
<HubsIcon color={hasUnreadGroups ? "var(--unread)" : "rgba(250, 250, 250, 0.5)"} />
|
||||
</IconWrapper>
|
||||
)}
|
||||
</>
|
||||
|
||||
}
|
||||
sx={{
|
||||
color: value === 0 ? "white" : "gray",
|
||||
paddingLeft: "10px",
|
||||
paddingRight: "42px",
|
||||
paddingLeft: isSmallScreen ? '0px' : "10px",
|
||||
paddingRight: isSmallScreen ? '30px' : "42px",
|
||||
}}
|
||||
/>
|
||||
</BottomNavigation>
|
||||
@ -173,14 +189,22 @@ export const MobileFooter = ({
|
||||
setMobileViewModeKeepOpen("messaging");
|
||||
}}
|
||||
icon={
|
||||
<IconWrapper label="Messaging" color="rgba(250, 250, 250, 0.5)">
|
||||
<>
|
||||
{isSmallScreen ? (
|
||||
<MessagingIcon color={hasUnreadDirects ? "var(--unread)" :"rgba(250, 250, 250, 0.5)"} />
|
||||
|
||||
) : (
|
||||
<IconWrapper label="Messaging" color="rgba(250, 250, 250, 0.5)">
|
||||
<MessagingIcon color={hasUnreadDirects ? "var(--unread)" :"rgba(250, 250, 250, 0.5)"} />
|
||||
</IconWrapper>
|
||||
)}
|
||||
</>
|
||||
|
||||
}
|
||||
sx={{
|
||||
color: value === 2 ? "white" : "gray",
|
||||
paddingLeft: "55px",
|
||||
paddingRight: "10px",
|
||||
paddingLeft: isSmallScreen ? '30px' : "55px",
|
||||
paddingRight: isSmallScreen ? '0px' : "10px",
|
||||
}}
|
||||
/>
|
||||
<BottomNavigationAction
|
||||
@ -189,9 +213,17 @@ export const MobileFooter = ({
|
||||
}}
|
||||
|
||||
icon={
|
||||
<IconWrapper label="Trading" color="rgba(250, 250, 250, 0.5)">
|
||||
|
||||
<>
|
||||
{isSmallScreen ? (
|
||||
<TradingIcon color="rgba(250, 250, 250, 0.5)" />
|
||||
|
||||
) : (
|
||||
<IconWrapper label="Trading" color="rgba(250, 250, 250, 0.5)">
|
||||
<TradingIcon color="rgba(250, 250, 250, 0.5)" />
|
||||
</IconWrapper>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
sx={{ color: value === 3 ? "white" : "gray", padding: "0px 10px" }}
|
||||
/>
|
||||
|
Loading…
x
Reference in New Issue
Block a user