From 7a1155101041b169e938ee456afccc2d3bb821e3 Mon Sep 17 00:00:00 2001 From: Hawk Date: Sat, 18 Apr 2020 20:45:54 +0200 Subject: [PATCH 1/3] redesigned drawer --- backend/package.json | 2 +- frontend/src/App.js | 23 ++++++++++-- frontend/src/components/navigation.js | 50 +++++++++++++++++++++------ 3 files changed, 60 insertions(+), 15 deletions(-) diff --git a/backend/package.json b/backend/package.json index 55df2d5..91ef49c 100644 --- a/backend/package.json +++ b/backend/package.json @@ -17,4 +17,4 @@ "node-fetch": "^2.6.0", "nodemon": "^2.0.2" } -} \ No newline at end of file +} diff --git a/frontend/src/App.js b/frontend/src/App.js index 4a814cb..4348a7e 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -3,6 +3,7 @@ import { BrowserRouter } from "react-router-dom"; import Navbar from "./components/navigation"; +import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; import "./App.css"; @@ -10,11 +11,27 @@ import "./App.css"; class App extends Component { render() { + const theme = createMuiTheme({ + palette: { + primary: { + main: "#0B1929", + light: "#9daac1" + }, + secondary: { + main: "#FFC800", + light: "#ffdf7b" + } + } + }) + //change basename in browserrouter if uri changes return ( - - - + + + + + + ); } } diff --git a/frontend/src/components/navigation.js b/frontend/src/components/navigation.js index c4967e9..eb7a6f0 100644 --- a/frontend/src/components/navigation.js +++ b/frontend/src/components/navigation.js @@ -6,7 +6,6 @@ import CssBaseline from '@material-ui/core/CssBaseline'; import AppBar from '@material-ui/core/AppBar'; import Toolbar from '@material-ui/core/Toolbar'; import List from '@material-ui/core/List'; -import Typography from '@material-ui/core/Typography'; import Divider from '@material-ui/core/Divider'; import IconButton from '@material-ui/core/IconButton'; import MenuIcon from '@material-ui/icons/Menu'; @@ -20,21 +19,26 @@ import Link1 from '@material-ui/core/Link'; import { Link } from "react-router-dom"; import SearchIcon from '@material-ui/icons/Search'; import InputBase from '@material-ui/core/InputBase'; +import EmojiObjectsIcon from '@material-ui/icons/EmojiObjects'; +import { ListItemIcon } from '@material-ui/core'; +import Tooltip from '@material-ui/core/Tooltip'; +import Zoom from '@material-ui/core/Zoom'; -const drawerWidth = 240; - +const drawerWidth = 64; +const drawerWidthOpen = 240; const useStyles = makeStyles((theme) => ({ root: { display: 'flex', }, appBar: { + zIndex: theme.zIndex.drawer + 1, transition: theme.transitions.create(['margin', 'width'], { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen, }), }, appBarShift: { - width: `calc(100% - ${drawerWidth}px)`, + width: `calc(100% - ${drawerWidthOpen}px)`, marginLeft: drawerWidth, transition: theme.transitions.create(['margin', 'width'], { easing: theme.transitions.easing.easeOut, @@ -50,8 +54,21 @@ const useStyles = makeStyles((theme) => ({ drawer: { width: drawerWidth, flexShrink: 0, + whiteSpace: 'nowrap' }, - drawerPaper: { + drawerOpen: { + width: drawerWidthOpen, + transition: theme.transitions.create('width', { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.enteringScreen, + }), + }, + drawerClose: { + transition: theme.transitions.create('width', { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + overflowX: 'hidden', width: drawerWidth, }, drawerHeader: { @@ -69,7 +86,7 @@ const useStyles = makeStyles((theme) => ({ easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen, }), - marginLeft: -drawerWidth, + marginLeft: 0, }, contentShift: { transition: theme.transitions.create('margin', { @@ -175,12 +192,16 @@ export default function Navigation() {
@@ -191,9 +212,16 @@ export default function Navigation() { {['Resources'].map((text, index) => ( + + + + + + + ))} From eb7b373774e5bc351eaba5214b0ec77ad254c3b0 Mon Sep 17 00:00:00 2001 From: Hawk Date: Sat, 18 Apr 2020 21:44:57 +0200 Subject: [PATCH 2/3] added resource images #9 --- frontend/src/components/navigation.js | 2 +- .../src/components/selectResource/index.js | 20 +------ .../components/selectResource/resourceCard.js | 57 +++++++++++++++++++ 3 files changed, 61 insertions(+), 18 deletions(-) create mode 100644 frontend/src/components/selectResource/resourceCard.js diff --git a/frontend/src/components/navigation.js b/frontend/src/components/navigation.js index eb7a6f0..d4e0f2d 100644 --- a/frontend/src/components/navigation.js +++ b/frontend/src/components/navigation.js @@ -214,7 +214,7 @@ export default function Navigation() { {['Resources'].map((text, index) => ( - + diff --git a/frontend/src/components/selectResource/index.js b/frontend/src/components/selectResource/index.js index 269876a..ab39ab9 100644 --- a/frontend/src/components/selectResource/index.js +++ b/frontend/src/components/selectResource/index.js @@ -8,6 +8,8 @@ import { Link } from 'react-router-dom'; import Link1 from '@material-ui/core/Link'; import ListItem from '@material-ui/core/ListItem'; import ListItemText from '@material-ui/core/ListItemText'; +import CardMedia from '@material-ui/core/CardMedia'; +import ResourceCard from './resourceCard'; const useStyles = makeStyles(theme => ({ @@ -16,23 +18,7 @@ const useStyles = makeStyles(theme => ({ } })); -function CreateResourceCard(resource, classes) { - function ListItemLink(props) { - return ; - } - return ( - - - - - - - - - - ) -} export default function SelectResource() { const classes = useStyles(); @@ -43,7 +29,7 @@ export default function SelectResource() { resourceJSON = await resourceJSON.json(); let rArr = []; for (let i = 0; i < resourceJSON.length; i++) { - rArr.push(CreateResourceCard(resourceJSON[i], classes)); + rArr.push(); } setResources(rArr); } diff --git a/frontend/src/components/selectResource/resourceCard.js b/frontend/src/components/selectResource/resourceCard.js new file mode 100644 index 0000000..683f04c --- /dev/null +++ b/frontend/src/components/selectResource/resourceCard.js @@ -0,0 +1,57 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import Card from '@material-ui/core/Card'; +import CardContent from '@material-ui/core/CardContent'; +import Typography from '@material-ui/core/Typography'; +import Grid from '@material-ui/core/Grid'; +import { Link } from 'react-router-dom'; +import Link1 from '@material-ui/core/Link'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemText from '@material-ui/core/ListItemText'; +import CardMedia from '@material-ui/core/CardMedia'; + + +const useStyles = makeStyles(theme => ({ + picture: { + + } +})); +function ListItemLink(props) { + return ; +} + +export default function ResourceCard(props) { + const classes = useStyles(); + const [picture, setPicture] = React.useState(null); + + var picUrl = "https://d1fxy698ilbz6u.cloudfront.net/static/" + props.resource["image"] + + + const loadResourcePicture = async () => { + await fetch(picUrl).then(res => { return res.blob() }).then(blob => { + var img = URL.createObjectURL(blob); + setPicture(img); + + }) + + + } + + if (picture === null) + loadResourcePicture(); + + return ( + + + + + + {props.resource["name"]} + + + + + + + ); +} From 76c047c26d61254b2badb9a3d9332585cffba3bf Mon Sep 17 00:00:00 2001 From: Hawk Date: Sat, 18 Apr 2020 22:04:43 +0200 Subject: [PATCH 3/3] added loading component for prices close #22 --- .../components/resourcechart/resourcechart.js | 76 +++++++++++++++---- .../src/components/selectResource/index.js | 8 -- 2 files changed, 60 insertions(+), 24 deletions(-) diff --git a/frontend/src/components/resourcechart/resourcechart.js b/frontend/src/components/resourcechart/resourcechart.js index 66e9d22..010e659 100644 --- a/frontend/src/components/resourcechart/resourcechart.js +++ b/frontend/src/components/resourcechart/resourcechart.js @@ -5,9 +5,47 @@ import { import { useParams } from "react-router-dom"; +import CircularProgress from '@material-ui/core/CircularProgress'; +import Card from '@material-ui/core/Card'; +import CardContent from '@material-ui/core/CardContent'; +import Typography from '@material-ui/core/Typography'; +import { makeStyles } from '@material-ui/core/styles'; +import Grid from '@material-ui/core/Grid'; + +const useStyles = makeStyles((theme) => ({ + root: { + display: 'flex', + }, +})); + +const output = (data) => { + if (data === null) { + return ( + + ) + } else { + return ( + + + + + + + + + ) + } +} export default function ResourceChart(props) { - + const classes = useStyles(); const [data, setData] = React.useState(null); let { id } = useParams(); const loadData = async () => { @@ -24,21 +62,27 @@ export default function ResourceChart(props) { loadData(); } + + return ( - - - - - - - - +
+ + + + Resource Chart + + + + + + {output(data)} + + + + + +
+ + ); } diff --git a/frontend/src/components/selectResource/index.js b/frontend/src/components/selectResource/index.js index ab39ab9..9027869 100644 --- a/frontend/src/components/selectResource/index.js +++ b/frontend/src/components/selectResource/index.js @@ -1,14 +1,6 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; -import Card from '@material-ui/core/Card'; -import CardContent from '@material-ui/core/CardContent'; -import Typography from '@material-ui/core/Typography'; import Grid from '@material-ui/core/Grid'; -import { Link } from 'react-router-dom'; -import Link1 from '@material-ui/core/Link'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemText from '@material-ui/core/ListItemText'; -import CardMedia from '@material-ui/core/CardMedia'; import ResourceCard from './resourceCard';