Commit 7d550883 authored by jrc632's avatar jrc632
Browse files

First draft of flexible layout that fills the window

parent 8aaf40ec

app/src/components/container/App.jsx

+6 −25
Original line number Diff line number Diff line
@@ -9,25 +9,6 @@ import SearchAndFilterInput from "../presentational/SearchAndFilterInput.jsx"; 
/**

 * Controls css styling for this component using js to css

 */

const useStyles = makeStyles(theme => ({

  appPaper: {

    display: "flex",

    flexDirection: "row"

  },

  rightSidebar: {

    border: `1px solid ${theme.palette.divider}`

  },

  container: {

    display: "flex",

    alignContent: "center",

    justifyContent: "space-between"

  },

  formControl: {

    margin: theme.spacing(1),

    minWidth: 125

  },

  autoComplete: {}

}));



/**

 * App is the parent component for all of the other components in the project. It
@@ -37,7 +18,6 @@ const useStyles = makeStyles(theme => ({ 
 * @component

 */

export default function App() {

  const classes = useStyles();

  const [targetPlanet, setTargetPlanet] = React.useState("Mars");



  /**
@@ -52,15 +32,16 @@ export default function App() { 




  return (

    <div className={classes.appPaper}>

      <div>

    <div id="appContainer">

      <div id="topBar">

        <ConsoleContainer target={targetPlanet} bodyChange={handleTargetBodyChange}/>

      </div>

      <MapContainer target={targetPlanet} />

      <div id="bottomBar">

        <WellKnownTextInput />

        <CreditsDisplay />

      </div>

      <div className={classes.rightSidebar}>

        

      <div id="rightBar">

        <SearchAndFilterInput />

      </div>

    </div>

app/src/components/container/MapContainer.jsx

+1 −3
Original line number Diff line number Diff line
@@ -59,9 +59,7 @@ export default class MapContainer extends Component { 


  render() {

    return (

      <div>

      <div id="map-container" />

      </div>

    );

  }

}

app/src/components/presentational/ConsoleTargetInfo.jsx

+18 −21
Original line number Diff line number Diff line
@@ -18,9 +18,9 @@ import { blue } from '@mui/material/colors'; 
import Link from "@material-ui/core/Link";



// Icons

import PublicIcon from '@mui/icons-material/Public';

import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';

import DarkModeIcon from '@mui/icons-material/DarkMode';

//import PublicIcon from '@mui/icons-material/Public';     // Generic Planet/moon, in case

//import DarkModeIcon from '@mui/icons-material/DarkMode'; // we don't want the colored icons



import MercuryIcon from "../../assets/img/planet-icons/001-mercury.png";

import VenusIcon from "../../assets/img/planet-icons/002-venus.png";
@@ -65,11 +65,7 @@ const useStyles = makeStyles({ 
  }

});



/**

 * Dialog for selecting planets

 * @param {*} props 

 * @returns 

 */



 const planets = [ 

   ['Mercury', MercuryIcon ],

   ['Venus', VenusIcon],
@@ -83,7 +79,12 @@ const useStyles = makeStyles({ 
  ];

const moons = ['Moon', 'Ceres', 'Mimas', 'Titan', 'Deimos', 'Tethys', 'Phoebe', 'Iapetus', 'Dione', 'Enceladus', 	'Hyperion', 'Io', 'Callisto', 'Europa', 'Ganymede', 'Rhea', 'Phobos', 'Vesta', 'Charon' ];



function SimpleDialog(props) {

/**

 * Dialog for selecting planets

 * @param {open, onClose, selectedValue} props 

 * @returns Planet Selection Dialog

 */

function PlanetDialog(props) {



  const classes = useStyles();
@@ -141,16 +142,12 @@ function SimpleDialog(props) { 
  );

}

 

 SimpleDialog.propTypes = {

PlanetDialog.propTypes = {

  onClose: PropTypes.func.isRequired,

  open: PropTypes.bool.isRequired,

  selectedValue: PropTypes.string.isRequired

};











/**

 * Component that displays target body name in console.

 * Retrieves target name from target selector
@@ -189,10 +186,10 @@ export default function ConsoleTargetInfo(props) { 
    >

      <Grid item>

        <Typography id="targetName" className={classes.title} variant="h4" onClick={handleClickOpen}>

          {props.target.toUpperCase()} <ArrowDropDownIcon/>

          {props.target.toUpperCase()} <ArrowDropDownIcon fontSize="large" />

        </Typography>

      </Grid>

      <SimpleDialog

      <PlanetDialog

        selectedValue={selectedValue}

        open={open}

        onClose={handleClose}

app/src/styles.css

+37 −6
Original line number Diff line number Diff line
@@ -4,16 +4,47 @@ 
@import "../node_modules/leaflet-html-legend/dist/L.Control.HtmlLegend.css";





#map-container {

  width: 800px;

  height: 600px;

body {

  margin: 0;

}



#map {

  width: 1027px;

  max-height: 950px;

/*

App Layout Grid

*/



#appContainer {

  height: calc(100vh - 1px);

  width: calc(100vw - 1px);

  display: grid;

  grid-template:

    "t r" max-content

    "c r" minmax(250px, auto)

    "b r" max-content

    / minmax(250px, auto) max-content;

  grid-gap: 1px;

}



#rightBar {

  grid-area: r;

  background: lightblue;

}



#topBar {

  grid-area: t;

  background: lightgreen;

}



#bottomBar {

  grid-area: b;

  background: pink;

}





#map-container {

  grid-area: c;

}





/*

Controls the CSS for projection buttons when there is no available projection

*/