games/factorio-server-manager
games/factorio-server-manager
1
0
Fork 0
mirror of https://github.com/OpenFactorioServerManager/factorio-server-manager.git synced 2025-01-06 03:54:06 +02:00
Code Issues Releases Activity

use cards instead of box

Browse Source
This commit is contained in:
knoxfighter 2019-08-07 02:35:01 +02:00
parent 81da54a1f7
commit dbede1395e
9 changed files with 112 additions and 213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/App/components/Mods/ModLoadSave.jsx
View File

@ -134,7 +134,7 @@ class ModLoadSave extends React.Component {
}
});
let classes = "box-body" + " " + this.props.className;
let classes = "card-body" + " " + this.props.className;
let ids = this.props.id;
return (

2
ui/App/components/Mods/ModManager.jsx
View File

@ -8,7 +8,7 @@ class ModManager extends React.Component {
}
render() {
let classes = "box-body" + " " + this.props.className;
let classes = "card-body" + " " + this.props.className;
let ids = this.props.id;
return (

96
ui/App/components/Mods/ModOverview.jsx
View File

@ -55,18 +55,10 @@ class ModOverview extends React.Component {
return(
<div>
<div className="card collapsed-card" id="add-mod-box">
<div className="card-header"
// data-toggle="collapse"
// data-target="#modSearch"
// aria-expanded="false"
// aria-controls="modSearch"
role="button"
// style={{cursor: "pointer"}}
>
<div className="card-header">
<button type="button" className="btn btn-tool btn-collapse" data-widget="collapse">
<FontAwesomeIcon icon="minus"/>
<FontAwesomeIcon icon="plus"/>
</button>
{/*<FontAwesomeIcon icon="plus"/>*/}
<h3 className="card-title">Add Mod</h3>
{this.props.loggedIn ?
<div className="card-tools">
@ -82,69 +74,48 @@ class ModOverview extends React.Component {
<ModSearch
{...this.state}
{...this.props}
// className="collapse"
// id="modSearch"
submitSearchMod={this.handlerSearchMod}
submitFactorioLogin={this.props.submitFactorioLogin}
/>
</div>
<div className="box collapsed-box">
<div className="box-header"
data-toggle="collapse"
data-target="#modUpload"
aria-expanded="false"
aria-controls="modUpload"
role="button"
style={{cursor: "pointer"}}
>
<FontAwesomeIcon icon="plus"/>
<h3 className="box-title">Upload Mod</h3>
<div className="card collapsed-card">
<div className="card-header">
<button type="button" className="btn btn-tool btn-collapse" data-widget="collapse">
<FontAwesomeIcon icon="plus"/>
</button>
<h3 className="card-title">Upload Mod</h3>
</div>
<ModUpload
{...this.props}
className="collapse"
id="modUpload"
/>
</div>
<div className="box collapsed-box">
<div className="box-header"
data-toggle="collapse"
data-target="#modLoadSave"
aria-expanded="false"
aria-controls="modLoadSave"
role="button"
style={{cursor: "pointer"}}
>
<FontAwesomeIcon icon="plus"/>
<h3 className="box-title">Load Mods From Save</h3>
<div className="card collapsed-card">
<div className="card-header">
<button type="button" className="btn btn-tool btn-collapse" data-widget="collapse">
<FontAwesomeIcon icon="plus"/>
</button>
<h3 className="card-title">Load Mods From Save</h3>
</div>
<ModLoadSave
{...this.props}
className="collapse"
id="modLoadSave"
/>
</div>
<div className="box" id="manage-mods">
<div className="box-header"
data-toggle="collapse"
data-target="#modManager"
aria-expanded="true"
aria-controls="modManager"
role="button"
style={{cursor: "pointer"}}
>
<FontAwesomeIcon icon="minus"/>
<h3 className="box-title">Manage Mods</h3>
<div className="box-tools float-sm-right">
<div className="card" id="manage-mods">
<div className="card-header">
<button type="button" className="btn btn-tool btn-collapse" data-widget="collapse">
<FontAwesomeIcon icon="minus"/>
</button>
<h3 className="card-title">Manage Mods</h3>
<div className="card-tools">
{
this.props.installedMods != null ?
<NativeListener onClick={this.downloadAllHandler}>
<a className="btn btn-box-tool btn-default" style={{marginRight: 20}} href={"/api/mods/download"} download>
<a className="btn btn-tool btn-default" style={{marginRight: 20}} href={"/api/mods/download"} download>
Download all Mods
</a>
</NativeListener>
@ -153,7 +124,7 @@ class ModOverview extends React.Component {
{
this.props.updatesAvailable > 0 ?
<NativeListener onClick={this.props.updateAllMods}>
<button className="btn btn-box-tool btn-default" style={{marginRight: 20}}>
<button className="btn btn-tool btn-default" style={{marginRight: 20}}>
Update all Mods
</button>
</NativeListener>
@ -162,7 +133,7 @@ class ModOverview extends React.Component {
{
this.props.installedMods != null ?
<NativeListener onClick={this.props.deleteAll}>
<button className="btn btn-box-tool btn-danger" style={{color: "#fff"}}>
<button className="btn btn-tool btn-danger" style={{color: "#fff"}}>
Delete ALL Mods
</button>
</NativeListener>
@ -174,26 +145,19 @@ class ModOverview extends React.Component {
<ModManager
{...this.props}
id="modManager"
className="show"
/>
</div>
<div className="box collapsed-box">
<div className="box-header"
data-toggle="collapse"
data-target="#modPacks"
aria-expanded="false"
aria-controls="modPacks"
role="button"
style={{cursor: "pointer"}}
>
<FontAwesomeIcon icon="plus"/>
<h3 className="box-title">Manage Modpacks</h3>
<div className="card collapsed-card">
<div className="card-header">
<button type="button" className="btn btn-tool btn-collapse" data-widget="collapse">
<FontAwesomeIcon icon="plus"/>
</button>
<h3 className="card-title">Manage Modpacks</h3>
</div>
<ModPacks
{...this.props}
className="collapse"
id="modPacks"
/>
</div>

2
ui/App/components/Mods/ModUpload.jsx
View File

@ -20,7 +20,7 @@ class ModUpload extends React.Component {
}
render() {
let classes = "box-body" + " " + this.props.className;
let classes = "card-body" + " " + this.props.className;
let ids = this.props.id;
return(

37
ui/App/components/Mods/packs/ModPackOverview.jsx
View File

@ -431,7 +431,7 @@ class ModPackOverview extends React.Component {
}
render() {
let classes = "box-body" + " " + this.props.className;
let classes = "card-body" + " " + this.props.className;
let ids = this.props.id;
return(
@ -441,34 +441,29 @@ class ModPackOverview extends React.Component {
this.state.listPacks.map(
(modpack, index) => {
return(
<div key={modpack.name} className="box single-modpack collapsed-box">
<div className="box-header"
data-toggle="collapse"
data-target={"#" + modpack.name}
aria-expanded="false"
aria-controls={modpack.name}
style={{cursor: "pointer"}}
>
<FontAwesomeIcon icon="plus"/>
<h3 className="box-title">{modpack.name}</h3>
<div className="box-tools pull-right">
<div key={modpack.name} className="card single-modpack collapsed-card">
<div className="card-header">
<button type="button" className="btn btn-tool btn-collapse" data-widget="collapse">
<FontAwesomeIcon icon="plus"/>
</button>
<h3 className="card-title">{modpack.name}</h3>
<div className="card-tools pull-right">
<NativeListener onClick={this.downloadModPack}>
<a className="btn btn-box-tool btn-default" style={{marginRight: 10}} href={"/api/mods/packs/download/" + modpack.name} download>Download</a>
<a className="btn btn-tool btn-default" style={{marginRight: 10}} href={"/api/mods/packs/download/" + modpack.name} download>Download</a>
</NativeListener>
<NativeListener onClick={this.loadModPack}>
<button className="btn btn-box-tool btn-default" style={{marginRight: 10}}>Load ModPack</button>
<button className="btn btn-tool btn-default" style={{marginRight: 10}}>Load ModPack</button>
</NativeListener>
<NativeListener onClick={this.deleteModPack}>
<button className="btn btn-box-tool btn-danger" style={{color: "#fff"}}>Delete</button>
<button className="btn btn-tool btn-danger" style={{color: "#fff"}}>Delete</button>
</NativeListener>
</div>
</div>
<ModManager
{...this.props}
className="collapse"
id={modpack.name}
installedMods={modpack.mods.mods}
deleteMod={this.modPackDeleteModHandler}
@ -482,10 +477,12 @@ class ModPackOverview extends React.Component {
: null
}
<div className="box">
<div className="box-header" style={{cursor: "pointer"}} onClick={this.createModPack}>
<FontAwesomeIcon icon="plus"/>
<h3 className="box-title">Add ModPack with current installed mods</h3>
<div className="card">
<div className="card-header" style={{cursor: "pointer"}} onClick={this.createModPack}>
<button type="button" className="btn btn-tool active">
<FontAwesomeIcon icon="plus"/>
</button>
<h3 className="card-title">Add ModPack with current installed mods</h3>
</div>
</div>
</div>

124
ui/App/components/ServerCtl/ServerCtl.jsx
View File

@ -103,35 +103,38 @@ class ServerCtl extends React.Component {
render() {
return (
<div id="serverCtl" className="box">
<div className="box-header">
<h3 className="box-title">Server Control</h3>
<div id="serverCtl" className="card">
<div className="card-header">
<h3 className="card-title">Server Control</h3>
</div>
<div className="box-body">
<div className="card-body">
<form action="" onSubmit={this.startServer}>
<div className="form-group">
<div className="row">
<div className="col-md-4">
<button className="btn btn-block btn-success" type="submit">
<FontAwesomeIcon icon="play" className="fa-fw"/>Start Factorio Server
</button>
</div>
<div className="col-md-4">
<button className="btn btn-block btn-warning" type="button" onClick={this.stopServer}>
<FontAwesomeIcon icon="stop" className="fa-fw"/>Stop &amp; Save Factorio Server
</button>
</div>
<div className="col-md-4">
<button className="btn btn-block btn-danger" type="button" onClick={this.killServer}>
<FontAwesomeIcon icon="close" className="fa-fw"/>Stop Factorio Server without Saving
</button>
</div>
<div className="row">
<div className="col-md-4">
<button className="btn btn-block btn-success" type="submit">
<FontAwesomeIcon icon="play" className="fa-fw"/>Start Factorio Server
</button>
</div>
<hr/>
<div className="col-md-4">
<button className="btn btn-block btn-warning" type="button"
onClick={this.stopServer}>
<FontAwesomeIcon icon="stop" className="fa-fw"/>Stop &amp; Save Factorio Server
</button>
</div>
<div className="col-md-4">
<button className="btn btn-block btn-danger" type="button"
onClick={this.killServer}>
<FontAwesomeIcon icon="close" className="fa-fw"/>Stop Factorio Server without
Saving
</button>
</div>
</div>
<hr/>
<div className="form-group">
<label>Select Save File</label>
<select ref="savefile" className="form-control">
{this.props.saves.map((save, i) => {
@ -143,48 +146,37 @@ class ServerCtl extends React.Component {
</select>
</div>
<div className="box box-success advanced">
<button type="button"
className="btn btn-box-tool"
data-toggle="collapse"
data-target="#serverCtlAdvanced"
aria-expanded="false"
aria-controls="serverCtlAdvanced"
>
<div className="box-header with-border">
<FontAwesomeIcon icon="plus" className="fa-fw"/>
<div className="box-title">Advanced</div>
</div>
</button>
<div id="serverCtlAdvanced" className="box-body collapse">
<label htmlFor="port">Factorio Server IP</label>
<div id="port" className="input-group">
<input ref="gameBindIP"
name="gameBindIP"
id="gameBindIP"
type="text"
className="form-control"
defaultValue={this.state.gameBindIP}
placeholder={this.state.gameBindIP}/>
</div>
<label htmlFor="port">Factorio Server Port</label>
<div id="port" className="input-group">
<input ref="port"
name="port"
id="port"
type="text"
className="form-control"
defaultValue={this.state.port}
placeholder={this.state.port}
/>
<div className="input-group-btn">
<button type="button" className="btn btn-primary" onClick={this.incrementPort}>
<FontAwesomeIcon icon="arrow-up"/>
</button>
<button type="button" className="btn btn-primary" onClick={this.decrementPort}>
<FontAwesomeIcon icon="arrow-down"/>
</button>
</div>
<div className="form-group">
<label htmlFor="gameBindIP">Factorio Server IP</label>
<div className="input-group">
<input ref="gameBindIP"
name="gameBindIP"
id="gameBindIP"
type="text"
className="form-control"
defaultValue={this.state.gameBindIP}
placeholder={this.state.gameBindIP}/>
</div>
</div>
<div className="form-group">
<label htmlFor="port">Factorio Server Port</label>
<div className="input-group">
<input ref="port"
name="port"
id="port"
type="text"
className="form-control"
defaultValue={this.state.port}
placeholder={this.state.port}
/>
<div className="input-group-btn">
<button type="button" className="btn btn-primary" onClick={this.incrementPort}>
<FontAwesomeIcon icon="arrow-up"/>
</button>
<button type="button" className="btn btn-primary" onClick={this.decrementPort}>
<FontAwesomeIcon icon="arrow-down"/>
</button>
</div>
</div>
</div>

1
ui/index.scss
View File

@ -18,7 +18,6 @@
@import "scss/customizations/buttons";
@import "scss/customizations/form";
@import "scss/customizations/badges";
@import "scss/customizations/adminLTE3-box";
@import "scss/customizations/sidebar";
@import "scss/content";
@import "scss/customizations/navigation";

57
ui/scss/customizations/adminLTE3-box.scss
View File

@ -1,57 +0,0 @@
.box {
position: relative;
border-radius: 3px;
background: #ffffff;
border-top: 3px solid #d2d6de;
margin-bottom: 20px;
width: 100%;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
.box-header {
color: #444;
display: block;
padding: 10px;
position: relative;
.box-title {
display: inline-block;
font-size: 20px;
margin: 0 0 0 10px;
line-height: 1;
}
.box-tools {
position: absolute;
right: 10px;
top: 10px;
.btn-box-tool {
padding: 5px;
font-size: 12px;
}
}
}
.box-body {
border-radius: 0 0 3px 3px;
padding: 10px;
font-size: 14px;
h4 {
font-size: 18px;
}
h5 {
font-size: 16px;
}
samp {
font-size: 12px;
p {
margin-bottom: 5px;
color: #333;
}
}
}
}

4
ui/scss/customizations/card.scss
View File

@ -20,5 +20,9 @@
.card-tools {
top: unset;
}
.btn-tool.active {
@extend .btn-tool:hover
}
}
}