fixed margin causing app to scroll when it shouldn't
This commit is contained in:
parent
e56c5f0781
commit
ffa060cee8
3 changed files with 73 additions and 75 deletions
|
|
@ -11,71 +11,73 @@ import SideNavigator from "navigation/SideNavigator";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import BottomNavigator from "navigation/BottomNavigator";
|
import BottomNavigator from "navigation/BottomNavigator";
|
||||||
|
|
||||||
const useStyles = makeStyles((theme: Theme) => ({
|
const useStyles = makeStyles((theme: Theme) => {
|
||||||
|
return ({
|
||||||
appBar: {
|
appBar: {
|
||||||
zIndex: theme.zIndex.drawer + 1,
|
zIndex: theme.zIndex.drawer + 1,
|
||||||
backgroundImage: "none", // This prevents de-saturation of header in dark mode
|
backgroundImage: "none", // This prevents de-saturation of header in dark mode
|
||||||
backgroundColor: "#272727"
|
backgroundColor: theme.palette.mode === "light" ? "#3b3b3b" : "#272727"
|
||||||
},
|
},
|
||||||
toolbar: {
|
toolbar: {
|
||||||
marginLeft: theme.spacing(0.5),
|
marginLeft: theme.spacing(0.5),
|
||||||
[theme.breakpoints.up("md")]: {
|
[theme.breakpoints.up("md")]: {
|
||||||
marginLeft: theme.spacing(1.5)
|
marginLeft: theme.spacing(1.5)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
buttonContainer: {
|
buttonContainer: {
|
||||||
marginRight: theme.spacing(0.5),
|
marginRight: theme.spacing(0.5),
|
||||||
[theme.breakpoints.up("md")]: {
|
[theme.breakpoints.up("md")]: {
|
||||||
marginRight: theme.spacing(1.5)
|
marginRight: theme.spacing(1.5)
|
||||||
},
|
},
|
||||||
color: getSignatureAccentColour() + " !important"
|
color: getSignatureAccentColour() + " !important"
|
||||||
},
|
},
|
||||||
button: {
|
button: {
|
||||||
color: getSignatureAccentColour() + " !important"
|
color: getSignatureAccentColour() + " !important"
|
||||||
},
|
},
|
||||||
hide: {
|
hide: {
|
||||||
display: "none"
|
display: "none"
|
||||||
},
|
},
|
||||||
logoContainer: {
|
logoContainer: {
|
||||||
display: "flex",
|
display: "flex",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
height: "56px",
|
height: "56px",
|
||||||
justifyContent: "flex-start",
|
justifyContent: "flex-start",
|
||||||
[theme.breakpoints.up("md")]: {
|
[theme.breakpoints.up("md")]: {
|
||||||
height: "64px"
|
height: "64px"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
logoLink: {
|
logoLink: {
|
||||||
display: "flex",
|
display: "flex",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
borderRadius: "5px",
|
borderRadius: "5px",
|
||||||
backgroundColor: hasTransparentLogoBG()
|
backgroundColor: hasTransparentLogoBG()
|
||||||
? ""
|
? ""
|
||||||
: theme.palette.mode === "light"
|
: theme.palette.mode === "light"
|
||||||
? "#fff"
|
? "#fff"
|
||||||
: "#0000"
|
: "#0000"
|
||||||
},
|
},
|
||||||
HeaderLogo: {
|
HeaderLogo: {
|
||||||
objectFit: "cover",
|
objectFit: "cover",
|
||||||
height: "56px",
|
height: "56px",
|
||||||
width: "auto",
|
width: "auto",
|
||||||
padding: theme.spacing(1),
|
padding: theme.spacing(1),
|
||||||
[theme.breakpoints.up("md")]: {
|
[theme.breakpoints.up("md")]: {
|
||||||
height: "64px"
|
height: "64px"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
appBarRight: {
|
appBarRight: {
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "row",
|
flexDirection: "row",
|
||||||
marginLeft: theme.spacing(2),
|
marginLeft: theme.spacing(2),
|
||||||
marginRight: theme.spacing(1),
|
marginRight: theme.spacing(1),
|
||||||
[theme.breakpoints.up("md")]: {
|
[theme.breakpoints.up("md")]: {
|
||||||
marginLeft: theme.spacing(3),
|
marginLeft: theme.spacing(3),
|
||||||
marginRight: theme.spacing(2)
|
marginRight: theme.spacing(2)
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
}));
|
})
|
||||||
|
});
|
||||||
|
|
||||||
export default function Header() {
|
export default function Header() {
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -22,16 +22,16 @@ const reducer = (state: GlobalState, action: GlobalStateAction): GlobalState =>
|
||||||
|
|
||||||
const useStyles = makeStyles((theme: Theme) => ({
|
const useStyles = makeStyles((theme: Theme) => ({
|
||||||
appContent: {
|
appContent: {
|
||||||
marginTop: 56,
|
paddingTop: 56,
|
||||||
marginBottom: 56,
|
paddingBottom: 56,
|
||||||
marginLeft: "0px",
|
paddingLeft: "0px",
|
||||||
[theme.breakpoints.up("sm")]: {
|
[theme.breakpoints.up("sm")]: {
|
||||||
marginTop: 64,
|
paddingTop: 64,
|
||||||
marginBottom: 0
|
paddingBottom: 0,
|
||||||
},
|
},
|
||||||
[theme.breakpoints.up("md")]: {
|
[theme.breakpoints.up("md")]: {
|
||||||
marginLeft: theme.spacing(9)
|
paddingLeft: theme.spacing(9)
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
container: {
|
container: {
|
||||||
backgroundColor: theme.palette.background.default,
|
backgroundColor: theme.palette.background.default,
|
||||||
|
|
|
||||||
|
|
@ -329,10 +329,6 @@ export default function Router() {
|
||||||
|
|
||||||
<Route path="/logout" element={<Logout />} />
|
<Route path="/logout" element={<Logout />} />
|
||||||
<Route path="grainbags/:bagID" element={<GrainBag />} />
|
<Route path="grainbags/:bagID" element={<GrainBag />} />
|
||||||
{/*
|
|
||||||
<ErrorBoundary FallbackComponent={ErrorFallback}>
|
|
||||||
<Route path="*" element={<RelativeRoutes/>} />
|
|
||||||
</ErrorBoundary> */}
|
|
||||||
|
|
||||||
<Route path="*" element={<RelativeRoutes/>} />
|
<Route path="*" element={<RelativeRoutes/>} />
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue