diff --git a/src/App.js b/src/App.js index 90df0fa..f27b087 100644 --- a/src/App.js +++ b/src/App.js @@ -31,17 +31,22 @@ function App(){ transition: transitionWidth }, "rightCol": { - width: "0", overflow: "hidden", + width: "0", height: "100vh", transition: transitionWidth }, "rightColShift": { - width: "50vw", - flexShrink: "0", overflow: "auto", + width: "100vw", + flexShrink: "0", transition: transitionWidth - } + }, + [theme.breakpoints.up("md")]: { + "rightColShift": { + width: "40vw", + } + }, }); const classes = useStyles(); @@ -54,7 +59,7 @@ function App(){ - + diff --git a/src/ItemView.js b/src/ItemView.js index f375698..3d39e7e 100644 --- a/src/ItemView.js +++ b/src/ItemView.js @@ -1,20 +1,19 @@ -import React, { useState, useEffect } from 'react'; +import React from 'react'; import { ListItem, ListItemIcon, ListItemText, Paper, Typography, Divider } from '@material-ui/core'; -import FolderIcon from '@material-ui/icons/Folder'; import PersonIcon from '@material-ui/icons/Person'; import CalendarIcon from '@material-ui/icons/CalendarToday'; import AssignmentdIcon from '@material-ui/icons/AssignmentInd'; import InfoIcon from '@material-ui/icons/Info'; import ClockIcon from '@material-ui/icons/QueryBuilder'; +import ItemViewAppBar from './ItemViewAppBar' function ItemView(props){ return( - - - {props.activeItem["queue"] + " " + props.activeItem["number"]} - - + diff --git a/src/ItemViewAppBar.js b/src/ItemViewAppBar.js new file mode 100644 index 0000000..2c9e5ab --- /dev/null +++ b/src/ItemViewAppBar.js @@ -0,0 +1,39 @@ +import React from "react"; +import {makeStyles, Tooltip, Typography, AppBar, Toolbar, IconButton, Zoom} from "@material-ui/core" +import CloseItemViewIcon from '@material-ui/icons/ChevronRight'; + + +export default function ItemViewAppBar(props){ + const useStyles = makeStyles((theme) => ({ + closeButton: { + marginRight: theme.spacing(2), + }, + title: { + flexGrow: "1" + }, + })); + + const classes = useStyles(props.theme); + + return( + <> + + + props.setActiveItem({})} + TransitionComponent={Zoom} + > + + + + + + + {props.title} + + + + + ); +} \ No newline at end of file