InspectionWindow

by dj19910501

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<div id="app">
  
</div>

CSS

#app{
    width: 1050px;
    height: 520px;
    border: solid 1px #d4d4d4;
    margin: 10px;
}

i{cursor: pointer;}
i:hover{color: #f8710e;}
.padding-left-10{padding-left: 20px;}
.padding-left-20{padding-left: 40px;}
.padding-left-30{padding-left: 60px;}
.padding-left-40{padding-left: 80px;}
#app *{
    box-sizing: border-box;
}

#container{
    height: 100%;
    width: 100%;
}

#background{
    height: 100%;
}

#background .header{
    background-color: black;
    height: 30px;
    color: white;
    font-weight: bold;
    text-align: center;
    line-height: 30px;
}

#background .body2{
    height: 470px;
    font-size: 0;
}

#background .body2 > *{
    height: 470px;
    font-size: 14px;
}

#background .body2 .filter{
    height: 100%;
    width: 200px;
    display: inline-block;
    padding: 5px 10px;
    border-right: solid 1px #d4d4d4;
}

#background .body2 .filter-section{
    padding: 5px;
    margin-bottom: 10px;
    border: solid 1px #d4d4d4;
}

#background .body2 .filter-subsection{
    padding: 5px;
    padding-left: 0;
    margin-bottom: 10px;
}

#background .body2 .filter-subsection span{
    border-bottom: solid 1px #d4d4d4;
    padding-bottom: 2px;
    display: block;
}

#background .body2 .filter-subsection p{
    padding: 2px 0 0 20px;
}

#background .body2 .filter-section.attributes{
    height: 345px;
}

#background .body2 .filter-section.save{
    background-color: #89cede;
    color: white;
    text-align: center;
    cursor: pointer;
    border-radius: 4px;
}

#background .body2 .content{
    width: 850px;
    display: inline-block;
    vertical-align: top;
}

#background .body2 .content .hud{
    height: 60px;
    padding: 10px;
}

#background .body2 .content .hud-card{
    height: 40px;
    display: inline-block;
    width: 100px;
    line-height: 40px;
    text-align: center;
    border: solid 1px #d4d4d4;
    border-radius: 4px;
    margin-right: 10px;
}

#background .body2 .content .grid{
    margin: 10px;
    height: 390px;
    border:...

React

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
			showInspectionWindow: false
        }
    }
  
    render() {
    const{showInspectionWindow}
        return (
            <div id="container">
                <div id="background">
                    <div className="header">Hive9</div>
                    <div className="body2">
                        <Filter></Filter>
                        <div className="content">
                            <Hud></Hud>
                            <Grid></Grid>
                        </div>
                    </div>
                    <div className="footer">Copyright</div>
                </div>
                <InspectionWindow show={}></InspectionWindow>
                <div id="inspectionWindow"></div>
            </div>
        )
    }
}

function Filter(){
    return (
		<div className="filter">
            <div className="year filter-section">Year</div>
            <div className="plan filter-section">Plan</div>
            <div className="attributes filter-section">
                Attributes
                <div className="filter-subsection">
                    <span>Campaign</span>
                    <p>-----</p>
                    <p>-----</p>
                    <p>-----</p>
                </div>
                <div className="filter-subsection">
                    <span>Program</span>
                    <p>-----</p>
                    <p>-----</p>
                    <p>-----</p>
                    <p>-----</p>
                </div>
                <div className="filter-subsection">
                    <span>Tactic</span>
                    <p>-----</p>
                    <p>-----</p>
                    <p>-----</p>
                </div>
            </div>
            <div className="save filter-section">
                Save
            </div>
        </div>
    )
}

function Hud(){
	return (
    	<div className="hud">
            <div...