From dbede1395eecf6af7aa4f054eeb25147d463cb44 Mon Sep 17 00:00:00 2001
From: knoxfighter <philipp@asdff45.de>
Date: Wed, 7 Aug 2019 02:35:01 +0200
Subject: [PATCH] use cards instead of box

---
 ui/App/components/Mods/ModLoadSave.jsx        |   2 +-
 ui/App/components/Mods/ModManager.jsx         |   2 +-
 ui/App/components/Mods/ModOverview.jsx        |  96 +++++---------
 ui/App/components/Mods/ModUpload.jsx          |   2 +-
 .../components/Mods/packs/ModPackOverview.jsx |  37 +++---
 ui/App/components/ServerCtl/ServerCtl.jsx     | 124 ++++++++----------
 ui/index.scss                                 |   1 -
 ui/scss/customizations/adminLTE3-box.scss     |  57 --------
 ui/scss/customizations/card.scss              |   4 +
 9 files changed, 112 insertions(+), 213 deletions(-)
 delete mode 100644 ui/scss/customizations/adminLTE3-box.scss

diff --git a/ui/App/components/Mods/ModLoadSave.jsx b/ui/App/components/Mods/ModLoadSave.jsx
index 7c62c60..5f566e4 100644
--- a/ui/App/components/Mods/ModLoadSave.jsx
+++ b/ui/App/components/Mods/ModLoadSave.jsx
@@ -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 (
diff --git a/ui/App/components/Mods/ModManager.jsx b/ui/App/components/Mods/ModManager.jsx
index 569c7ab..ae26421 100644
--- a/ui/App/components/Mods/ModManager.jsx
+++ b/ui/App/components/Mods/ModManager.jsx
@@ -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 (
diff --git a/ui/App/components/Mods/ModOverview.jsx b/ui/App/components/Mods/ModOverview.jsx
index 9df8e90..788250a 100644
--- a/ui/App/components/Mods/ModOverview.jsx
+++ b/ui/App/components/Mods/ModOverview.jsx
@@ -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>
diff --git a/ui/App/components/Mods/ModUpload.jsx b/ui/App/components/Mods/ModUpload.jsx
index a1d1ba9..19df743 100644
--- a/ui/App/components/Mods/ModUpload.jsx
+++ b/ui/App/components/Mods/ModUpload.jsx
@@ -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(
diff --git a/ui/App/components/Mods/packs/ModPackOverview.jsx b/ui/App/components/Mods/packs/ModPackOverview.jsx
index 9e16d98..a4e06ca 100644
--- a/ui/App/components/Mods/packs/ModPackOverview.jsx
+++ b/ui/App/components/Mods/packs/ModPackOverview.jsx
@@ -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>
diff --git a/ui/App/components/ServerCtl/ServerCtl.jsx b/ui/App/components/ServerCtl/ServerCtl.jsx
index 46d1644..baf0991 100644
--- a/ui/App/components/ServerCtl/ServerCtl.jsx
+++ b/ui/App/components/ServerCtl/ServerCtl.jsx
@@ -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>
diff --git a/ui/index.scss b/ui/index.scss
index c65b4b2..a84912f 100644
--- a/ui/index.scss
+++ b/ui/index.scss
@@ -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";
diff --git a/ui/scss/customizations/adminLTE3-box.scss b/ui/scss/customizations/adminLTE3-box.scss
deleted file mode 100644
index 5825450..0000000
--- a/ui/scss/customizations/adminLTE3-box.scss
+++ /dev/null
@@ -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;
-            }
-        }
-    }
-}
diff --git a/ui/scss/customizations/card.scss b/ui/scss/customizations/card.scss
index 08c8bd0..d10c881 100644
--- a/ui/scss/customizations/card.scss
+++ b/ui/scss/customizations/card.scss
@@ -20,5 +20,9 @@
         .card-tools {
             top: unset;
         }
+
+        .btn-tool.active {
+            @extend .btn-tool:hover
+        }
     }
 }
\ No newline at end of file