Fluid layout, resizes to fit window (d9eee935) · Commits · aflab / astrogeology / Asc Geostac

app/src/components/container/App.jsx

+4 −4

Original line number	Diff line number	Diff line
		@@ -32,16 +32,16 @@ export default function App() {


		return (
		<div id="appContainer">
		<div id="topBar">
		<div id="app-container">
		<div id="top-bar">
		<ConsoleContainer target={targetPlanet} bodyChange={handleTargetBodyChange}/>
		</div>
		<MapContainer target={targetPlanet} />
		<div id="bottomBar">
		<div id="bottom-bar">
		<WellKnownTextInput />
		<CreditsDisplay />
		</div>
		<div id="rightBar">
		<div id="right-bar">
		<SearchAndFilterInput />
		</div>
		</div>

app/src/components/container/ConsoleContainer.jsx

+1 −21

Original line number	Diff line number	Diff line
		import React from "react";
		import ConsoleAppBar from "../presentational/ConsoleAppBar.jsx";
		import { makeStyles } from "@material-ui/core/styles";

		/**
		* Controls css styling for this component using js to css
		*/
		const useStyles = makeStyles({
		root: {
		maxWidth: 800,
		height: 100,
		width: "100%"
		},
		consAppbar: {
		maxWidth: 800,
		height: 100,
		width: "auto"
		}
		});

		/**
		* Container component that holds the ConsoleAppBar and all of its subcomponents
		@@ -25,10 +8,7 @@ const useStyles = makeStyles({
		*
		*/
		export default function ConsoleContainer(props) {
		const classes = useStyles();
		return (
		<div className={classes.root}>
		<ConsoleAppBar className={classes.consAppbar} target={props.target} bodyChange={props.bodyChange} />
		</div>
		<ConsoleAppBar target={props.target} bodyChange={props.bodyChange} />
		);
		}

app/src/components/presentational/ConsoleAppBar.jsx

+26 −47

Original line number	Diff line number	Diff line
		@@ -4,8 +4,7 @@ import ConsoleProjectionButtons from "../presentational/ConsoleProjectionButtons
		import ConsoleLonLatSelects from "../presentational/ConsoleLonLatSelects.jsx";
		import ConsoleCoordinates from "./ConsoleCoordinates.jsx";
		import AppBar from "@material-ui/core/AppBar";
		import Toolbar from "@material-ui/core/Toolbar";
		import Grid from "@material-ui/core/Grid";
		import Toolbar from "@material-ui/core/Toolbar"; // Not sure what this did?
		import { makeStyles } from "@material-ui/core/styles";
		import Divider from "@material-ui/core/Divider";

		@@ -13,22 +12,11 @@ import Divider from "@material-ui/core/Divider";
		* Controls css styling for this component using js to css
		*/
		const useStyles = makeStyles(theme => ({
		root: {
		height: 100,
		width: "100%"
		},
		appbar: {
		background: "#f8f9fa"
		},
		toolbar: {
		height: 100,
		maxWidth: 800,
		width: "auto",
		padding: 0
		},
		grid: {
		maxWidth: 800,
		height: 100
		}
		}));

		@@ -42,7 +30,6 @@ export default function ConsoleAppBar(props) {
		const classes = useStyles();

		return (
		<div className={classes.root} id="consoleToolbarParent">
		<AppBar
		className={classes.appbar}
		variant="outlined"
		@@ -50,32 +37,24 @@ export default function ConsoleAppBar(props) {
		color="inherit"
		id="consoleToolbar"
		>
		<Toolbar className={classes.toolbar}>
		<Grid
		className={classes.grid}
		container
		justifyContent="space-between"
		alignItems="stretch"
		>
		<div className="flexbar">
		<div className="flexbar-item">
		<ConsoleTargetInfo target={props.target} bodyChange={props.bodyChange} />
		</div>
		<Divider orientation="vertical" />
		<div className="flexbar-item">
		<ConsoleCoordinates />
		</div>
		<Divider orientation="vertical" />
		<div className="flexbar-item">
		<ConsoleProjectionButtons />
		</div>
		<Divider orientation="vertical" />
		<Grid container item direction="column" xs>
		<ConsoleTargetInfo target={props.target} bodyChange={props.bodyChange} />
		<Grid
		container
		item
		xs
		justifyContent="space-around"
		alignItems="center"
		wrap="nowrap"
		>
		<div className="flexbar-item">
		<ConsoleLonLatSelects />
		<ConsoleCoordinates />
		</Grid>
		</Grid>
		</Grid>
		</Toolbar>
		</AppBar>
		</div>

		</div>
		</AppBar>
		);
		}

app/src/components/presentational/ConsoleCoordinates.jsx

+52 −62

Original line number	Diff line number	Diff line
		@@ -13,7 +13,8 @@ import StyledTooltip from "./StyledTooltip.jsx";
		const useStyles = makeStyles({
		grid: {
		height: "100%",
		maxHeight: 60
		maxHeight: 60,
		width: 200
		},
		title: {
		color: "#343a40",
		@@ -29,9 +30,10 @@ const useStyles = makeStyles({
		container: {
		display: "flex",
		flexWrap: "noWrap",
		width: "100%",
		width: 170,
		height: 40,
		margin: "auto",
		marginTop: 5,
		verticalAlign: "middle",
		"& > *": {
		margin: 0,
		padding: 0,
		@@ -55,16 +57,6 @@ export default function ConsoleCoordinates() {
		const classes = useStyles();

		return (
		<Grid
		container
		className={classes.grid}
		justifyContent="center"
		alignItems="center"
		item
		xs={3}
		id="coordContainerParent"
		>
		<Grid item xs>
		<StyledTooltip
		title={
		<Typography variant="subtitle1">
		@@ -114,7 +106,5 @@ export default function ConsoleCoordinates() {
		</Paper>
		</div>
		</StyledTooltip>
		</Grid>
		</Grid>
		);
		}

app/src/components/presentational/ConsoleLonLatSelects.jsx

+8 −18

Original line number	Diff line number	Diff line
		import React from "react";
		import { alpha, makeStyles, withStyles } from "@material-ui/core/styles";
		import Zoom from "@material-ui/core/Zoom";
		import Grid from "@material-ui/core/Grid";
		import AutorenewIcon from "@material-ui/icons/Autorenew";
		import AddBoxIcon from "@material-ui/icons/AddBoxOutlined";
		import ExposureIcon from "@material-ui/icons/Exposure";
		@@ -16,7 +15,7 @@ import StyledTooltip from "./StyledTooltip.jsx";
		*/
		const useStyles = makeStyles(theme => ({
		grid: {
		width: "100%",
		width: 600,
		height: "100%",
		maxHeight: 55
		},
		@@ -58,8 +57,6 @@ const useStyles = makeStyles(theme => ({
		const StyledToggleButton = withStyles(theme => ({
		root: {
		height: 30,
		minHeight: 30,
		maxHeight: 30,
		color: alpha("#f8f9fa", 0.8),
		backgroundColor: "transparent", //alpha("#1971c2", 0.7),
		border: "none",
		@@ -145,17 +142,8 @@ export default function ConsoleLonLatSelects() {
		const classes = useStyles();

		return (
		<Grid
		container
		item
		wrap="nowrap"
		justifyContent="center"
		alignItems="center"
		className={classes.grid}
		xs={7}
		id="lonLatContainer"
		>
		<div>
		<div className="flexbar">
		<div className="flexbar-item">
		<StyledTooltip
		title={
		<Typography variant="subtitle1">
		@@ -188,7 +176,8 @@ export default function ConsoleLonLatSelects() {
		</StyledTooltip>
		</div>
		<StyledDivider orientation="vertical" />
		<div>

		<div className="flexbar-item">
		<StyledTooltip
		title={
		<Typography variant="subtitle1">
		@@ -227,7 +216,8 @@ export default function ConsoleLonLatSelects() {
		</StyledTooltip>
		</div>
		<StyledDivider orientation="vertical" />
		<div>

		<div className="flexbar-item">
		<StyledTooltip
		title={
		<Typography variant="subtitle1">
		@@ -259,6 +249,6 @@ export default function ConsoleLonLatSelects() {
		</div>
		</StyledTooltip>
		</div>
		</Grid>
		</div>
		);
		}