mirror of
https://github.com/lemeow125/Borrowing-TrackerFrontend.git
synced 2024-11-17 06:19:27 +08:00
student and teacher dashboard responsive
This commit is contained in:
parent
8427414c25
commit
04ce14a5a0
6 changed files with 19 additions and 20 deletions
|
@ -1,7 +1,6 @@
|
||||||
|
|
||||||
import styles from "../../../styles";
|
import styles from "../../../styles";
|
||||||
import { Button } from "@mui/material";
|
import { Button } from "@mui/material";
|
||||||
import AddBoxIcon from "@mui/icons-material/AddBox";
|
|
||||||
import { colors } from "../../../styles";
|
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
export default function StudentDashboard() {
|
export default function StudentDashboard() {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
@ -17,7 +16,7 @@ export default function StudentDashboard() {
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
flexWrap: "wrap",
|
flexWrap: "wrap",
|
||||||
marginTop: "40px",
|
marginTop: "40px",
|
||||||
|
width: "100%"
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
|
@ -28,11 +27,10 @@ export default function StudentDashboard() {
|
||||||
...styles.flex_column,
|
...styles.flex_column,
|
||||||
...{
|
...{
|
||||||
alignSelf: "center",
|
alignSelf: "center",
|
||||||
justifyContent: "center",
|
|
||||||
flexWrap: "wrap",
|
|
||||||
backgroundColor: "#CCDDFF",
|
backgroundColor: "#CCDDFF",
|
||||||
paddingInline: "90px",
|
borderRadius: "20px",
|
||||||
borderRadius: "20px"
|
paddingInline: "100px",
|
||||||
|
width: "100%",
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
|
@ -43,9 +41,8 @@ export default function StudentDashboard() {
|
||||||
<p
|
<p
|
||||||
style={{
|
style={{
|
||||||
...styles.text_dark_blue,
|
...styles.text_dark_blue,
|
||||||
|
fontSize: "15px",
|
||||||
...styles.text_M,
|
|
||||||
fontSize: "15px"
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
CLICK TO REQUEST BORROW ITEMS
|
CLICK TO REQUEST BORROW ITEMS
|
||||||
|
|
|
@ -39,10 +39,11 @@ export default function StudentTransactionListView() {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<div >
|
<div style={{ width: "100%" }}>
|
||||||
<div style={{
|
<div style={{
|
||||||
marginTop: "60px",
|
marginTop: "60px",
|
||||||
|
width: "85%",
|
||||||
|
marginInline: "6.5%"
|
||||||
}}>
|
}}>
|
||||||
<TransactionFilterMenu filter={filter} setFilter={setFilter} />
|
<TransactionFilterMenu filter={filter} setFilter={setFilter} />
|
||||||
<div style={{ marginTop: "16px" }} />
|
<div style={{ marginTop: "16px" }} />
|
||||||
|
|
|
@ -48,7 +48,7 @@ export default function TeacherTransactionListView() {
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
...styles.flex_column,
|
...styles.flex_column,
|
||||||
...{ height: "50vh", overflowY: "scroll" },
|
...{ height: "50vh", overflowY: "scroll", width: "85%", marginInline: "6.5%" },
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{transactions.data ? (
|
{transactions.data ? (
|
||||||
|
|
|
@ -18,11 +18,11 @@ export default function TransactionEntry(props: props) {
|
||||||
style={{
|
style={{
|
||||||
alignSelf: "center",
|
alignSelf: "center",
|
||||||
justifySelf: "center",
|
justifySelf: "center",
|
||||||
width: "584px",
|
|
||||||
backgroundColor: colors.header_color,
|
backgroundColor: colors.header_color,
|
||||||
borderRadius: 16,
|
borderRadius: 16,
|
||||||
margin: "10px",
|
marginTop: "10px",
|
||||||
paddingTop: "15px",
|
paddingTop: "15px",
|
||||||
|
width: "100%"
|
||||||
|
|
||||||
}}
|
}}
|
||||||
onClick={props.onClick}
|
onClick={props.onClick}
|
||||||
|
|
|
@ -41,10 +41,11 @@ export default function TransactionFilterMenu(props: props) {
|
||||||
alignSelf: "center",
|
alignSelf: "center",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
flexWrap: "wrap",
|
flexWrap: "wrap",
|
||||||
|
width: "100%"
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<FormControl sx={{ width: "384px" }}>
|
<FormControl sx={{ width: "550px", marginInline: "30px" }}>
|
||||||
<InputLabel style={{ backgroundColor: "white", padding: 0 }}>
|
<InputLabel style={{ backgroundColor: "white", padding: 0 }}>
|
||||||
Filter Transactions
|
Filter Transactions
|
||||||
</InputLabel>
|
</InputLabel>
|
||||||
|
|
|
@ -21,10 +21,10 @@ export default function Dashboard() {
|
||||||
style={{
|
style={{
|
||||||
...styles.flex_column,
|
...styles.flex_column,
|
||||||
...{
|
...{
|
||||||
flexWrap: "wrap",
|
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
marginLeft: "16px",
|
alignItems: "center",
|
||||||
marginRight: "16px",
|
marginInline: "10px"
|
||||||
|
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|
Loading…
Reference in a new issue