Skip to content

Commit

Permalink
scaled lobby and scenario screen for mobile devices
Browse files Browse the repository at this point in the history
  • Loading branch information
@bquader
bquader committed Jul 9, 2018
1 parent 791e243 commit 5358577
Show file tree
Hide file tree
Showing 6 changed files with 59 additions and 60 deletions.
2 changes: 1 addition & 1 deletion support/client/lib/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
<title>Virtual World Framework</title>
<link rel="icon" type="image/x-icon" href="favicon.ico" />

<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

<link rel="stylesheet" type="text/css" href="index.css?mtime=timestamp" />
<link rel="stylesheet" type="text/css" href="vwf/view/editor/editor.css?mtime=timestamp" />
Expand Down
2 changes: 1 addition & 1 deletion support/lobby/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=.5">

<title>Virtual World Framework lobby</title>

Expand Down
16 changes: 11 additions & 5 deletions support/lobby/lib/Layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,12 @@ export default class Layout extends React.Component {
</Navbar.Header>
<Navbar.Collapse id="navbar">
<Nav>
{ this.state.user.instructor && <NavItem eventKey="scenarios">Scenario Templates</NavItem> }
{ this.state.user.instructor && <NavItem eventKey="activeSessions">Active Sessions</NavItem> }
{ this.state.user.instructor && <NavItem eventKey="previousSessions">Previous Sessions</NavItem> }
{ this.state.user.instructor && <NavItem eventKey="scenarios">Scenario Templates</NavItem>
}
{ this.state.user.instructor && <NavItem eventKey="activeSessions">Active Sessions</NavItem>
}
{ this.state.user.instructor && <NavItem eventKey="previousSessions">Previous Sessions</NavItem>
}
</Nav>
<Navbar.Form pullRight componentClass="form" method="post" action="/logout">
<Button type="submit" bsStyle="link"> Logout </Button>
Expand All @@ -55,21 +58,24 @@ export default class Layout extends React.Component {
</Navbar>
<TabContent animation={ false }>
{ this.state.user.instructor &&
<TabPane eventKey="scenarios"><Scenarios records={ this.scenarioRecords() } onServerChange={ this.handleManifest }/></TabPane> }
<TabPane eventKey="scenarios"><Scenarios records={ this.scenarioRecords() } onServerChange={ this.handleManifest }/></TabPane>
}
{ true &&
<TabPane eventKey="activeSessions">
<ActiveSessions records={ this.activeSessionRecords() } />
</TabPane>
}
{ this.state.user.instructor &&
<TabPane eventKey="previousSessions"><PreviousSessions records={ this.previousSessionRecords() }/></TabPane> }
<TabPane eventKey="previousSessions"><PreviousSessions records={ this.previousSessionRecords() }/></TabPane>
}
</TabContent>
</div>
</TabContainer>;
} else {
return null;
}
}


componentDidMount() {
this.handleVersion();
Expand Down
29 changes: 2 additions & 27 deletions support/lobby/lib/Login.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,19 +162,7 @@ setStudent(isStudent){
</Fade>

</Row>

<Row>
<FormGroup className="col-sm-12" bsSize="small">
{
this.props.flash.map(
( message, index ) =>
<Alert key={ index } bsstyle={ bsstyle( message.type ) }>
{ message.message }
</Alert>
)
}
</FormGroup>
</Row>

</Modal.Body>
<Modal.Footer>
<Fade in = {this.state.studentBtn }>
Expand Down Expand Up @@ -220,23 +208,10 @@ setStudent(isStudent){
then( version =>
this.setState( { version: version || {} } ) ).
catch( error =>
console.log( error.message ) ); /* eslint no-console: "off" */
console.log( "Not working" ) ); /* eslint no-console: "off" */
}

}

/// Convert an Express flash `type` to a Bootstrap alert style.

function bsstyle( flashType ) {
switch ( flashType ) {
case "success":
return "success";
// case "warning":
// case "warn":
// return "warning";
case "error":
return "danger";
default:
return "info";
}
}
64 changes: 43 additions & 21 deletions support/lobby/lib/Scenarios.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,10 @@ export default function Scenarios( props ) {
</tbody>
</Table>
<ReactTable
filterable={ !!props.records.length }
data={ props.records }
columns={ columns }
filterable={ !!props.records.length }

className="-striped"
getTrProps={ () => ( {
fields:
Expand All @@ -48,6 +49,7 @@ export default function Scenarios( props ) {
</React.Fragment>;
}


Scenarios.propTypes = {
records:
PropTypes.arrayOf( PropTypes.object ).isRequired,
Expand Down Expand Up @@ -86,13 +88,13 @@ class Application extends React.Component {
render() {
return <React.Fragment>
<tr>

{/*Click on button to make create info pop up*/}
<td><Button bsStyle="primary" onClick={this.createScenario.bind(this)} style={{display: this.state.buttonOn ? 'block' : 'none' }}> Create Scenario + </Button></td>


{/*will not appear until create button is clicked*/}
<td className="col-sm-8" style = {{width: 'auto'}}>
<FormControl disabled = {!this.state.isClicked} style={{display: this.state.isClicked ? 'block' : 'none', width: 'auto'}}

{/*will not appear until create button is clicked*/}
<td className = "col-sm-8">
<FormControl disabled = {!this.state.isClicked} style={{display: this.state.isClicked ? 'block' : 'none'}}
name="title"
type="text"
placeholder={ Application.TITLE_PLACEHOLDER }
Expand All @@ -101,9 +103,8 @@ class Application extends React.Component {
onChange={ this.handleTitle }
onKeyPress={ this.handleKeyPress } />
</td>
<td className="col-sm-1">
&nbsp;
</td>


<td className="col-sm-1">

<Button type="submit" disabled = {!this.filled() }
Expand Down Expand Up @@ -131,15 +132,18 @@ class Application extends React.Component {
this.setState( { title: event.target.value } );
}

//closes create info upon clicking 'create' button
//closes create info upon clicking 'create' button and leads to new page
handleSubmit = event => {
this.setState({isClicked: false});
this.setState({buttonOn: true});
let properties = {
name: this.name(),
title: this.state.title };
let newTab = window.open("", "_blank");
newTab.document.write("Loading...");
post( "scenarios", properties ).
then( result => {
newTab.location.href = result.document.uri + "/";
this.props.onServerChange && this.props.onServerChange() } ).
catch( error => {
console.log( error.message ) } ); /* eslint no-console: "off" */
Expand All @@ -148,6 +152,7 @@ class Application extends React.Component {

}


removeScenario(){
this.notCreating(true);
}
Expand All @@ -156,6 +161,7 @@ class Application extends React.Component {
if(value){
this.setState({isClicked: false});
this.setState({buttonOn: true});
this.setState({title: ""});
}
}

Expand Down Expand Up @@ -189,43 +195,55 @@ class Application extends React.Component {
return this.state.title.length > 0;
}




}

const columns = [ {
const columns = [
{
Header:
"Scenario",
accessor:
"scenario.state.scenarioTitle",
Filter:
function Filter( props ) { return <ScenarioFilter { ...props }/> },
}, {
function Filter( props ) { return <ScenarioFilter { ...props }/>
},
},


{
Header:
"Company",
id:
"company",
Cell:
function Cell( props ) { return <CompanyCell { ...props }/> },
function Cell( props ) { return <CompanyCell { ...props }/>
},
}, {
Header:
"Platoon",
id:
"platoon",
Cell:
function Cell( props ) { return <PlatoonCell { ...props }/> },
function Cell( props ) { return <PlatoonCell { ...props }/>
},
}, {
Header:
"Unit",
id:
"unit",
Cell:
function Cell( props ) { return <UnitCell { ...props }/> },
function Cell( props ) { return <UnitCell { ...props }/>
},
}, {
Header:
"",
accessor:
"scenario.state.scenarioName",
Cell:
function Cell( props ) { return <HiddenCell { ...props }/> },
function Cell( props ) { return <HiddenCell { ...props }/>
},
sortable:
false,
filterable:
Expand All @@ -238,7 +256,8 @@ const columns = [ {
accessor:
"scenario",
Cell:
function Cell( props ) { return <ActionCell { ...props }/> },
function Cell( props ) { return <ActionCell { ...props }/>
},
sortable:
false,
filterable:
Expand All @@ -251,7 +270,8 @@ const columns = [ {
accessor:
"scenario",
Cell:
function Cell( props ) { return <ExportCell { ...props }/> },
function Cell( props ) { return <ExportCell { ...props }/>
},
sortable:
false,
filterable:
Expand All @@ -268,15 +288,17 @@ class ScenarioFilter extends React.Component {
};

render() {
return <input
type="text"
return <input type="text"
placeholder="Search"
value={ this.props.filter ? this.props.filter.value : "" }
onChange={ event => this.props.onChange( event.target.value ) } />;
}

}




class LobbyCell extends React.Component {
static contextTypes = {
values:
Expand Down
6 changes: 1 addition & 5 deletions support/lobby/lib/layout.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,6 @@ table {
}


.fixed_header thread tr{
display: auto;
}

tbody {
display: table-row-group;
height: 100%;
Expand All @@ -26,7 +22,7 @@ tbody {
}

tr { display: table-row; table-layout: auto;}
td { display: table-cell; padding: 6px;}
td { display: table-cell;}

.logo_img {
width: 100%;
Expand Down

0 comments on commit 5358577

Please sign in to comment.