From 81da54a1f778d02b430340ae530431dc31f83a22 Mon Sep 17 00:00:00 2001
From: knoxfighter <philipp@asdff45.de>
Date: Wed, 31 Jul 2019 22:53:27 +0200
Subject: [PATCH] updated to admin-lte3.beta2 & test of card

---
 package.json                                |  4 +--
 ui/App/components/Mods/ModOverview.jsx      | 29 ++++++++++++---------
 ui/App/components/Mods/search/ModSearch.jsx |  2 +-
 ui/index.js                                 | 22 ++++++++--------
 ui/index.scss                               |  1 +
 ui/scss/customizations/card.scss            | 24 +++++++++++++++++
 6 files changed, 55 insertions(+), 27 deletions(-)
 create mode 100644 ui/scss/customizations/card.scss

diff --git a/package.json b/package.json
index fa17c37..0103721 100644
--- a/package.json
+++ b/package.json
@@ -27,8 +27,8 @@
     "@babel/core": "^7.5.5",
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-react": "^7.0.0",
-    "@fortawesome/fontawesome-free": "^5.9.0",
-    "admin-lte": "^3.0.0-beta.1",
+    "@fortawesome/fontawesome-free": "^5.10.0",
+    "admin-lte": "^3.0.0-beta.2",
     "babel-loader": "^8.0.6",
     "bootstrap": "^4.3.1",
     "bootstrap-fileinput": "^5.0.4",
diff --git a/ui/App/components/Mods/ModOverview.jsx b/ui/App/components/Mods/ModOverview.jsx
index e4c5f2f..9df8e90 100644
--- a/ui/App/components/Mods/ModOverview.jsx
+++ b/ui/App/components/Mods/ModOverview.jsx
@@ -54,21 +54,24 @@ class ModOverview extends React.Component {
     render() {
         return(
             <div>
-                <div className="box collapsed-box" id="add-mod-box">
-                    <div className="box-header"
-                         data-toggle="collapse"
-                         data-target="#modSearch"
-                         aria-expanded="false"
-                         aria-controls="modSearch"
+                <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"}}
+                         // style={{cursor: "pointer"}}
                     >
-                        <FontAwesomeIcon icon="plus"/>
-                        <h3 className="box-title">Add Mod</h3>
+                        <button type="button" className="btn btn-tool btn-collapse" data-widget="collapse">
+                            <FontAwesomeIcon icon="minus"/>
+                        </button>
+                        {/*<FontAwesomeIcon icon="plus"/>*/}
+                        <h3 className="card-title">Add Mod</h3>
                         {this.props.loggedIn ?
-                            <div className="box-tools pull-right">
+                            <div className="card-tools">
                                 <NativeListener onClick={this.props.factorioLogoutHandler}>
-                                    <button className="btn btn-box-tool btn-danger" style={{color: "#fff"}}>
+                                    <button className="btn btn-tool btn-danger" style={{color: "#fff"}}>
                                         Logout
                                     </button>
                                 </NativeListener>
@@ -79,8 +82,8 @@ class ModOverview extends React.Component {
                     <ModSearch
                         {...this.state}
                         {...this.props}
-                        className="collapse"
-                        id="modSearch"
+                        // className="collapse"
+                        // id="modSearch"
                         submitSearchMod={this.handlerSearchMod}
                         submitFactorioLogin={this.props.submitFactorioLogin}
                     />
diff --git a/ui/App/components/Mods/search/ModSearch.jsx b/ui/App/components/Mods/search/ModSearch.jsx
index 63f29c0..e7cf9f6 100644
--- a/ui/App/components/Mods/search/ModSearch.jsx
+++ b/ui/App/components/Mods/search/ModSearch.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 class ModSearch extends React.Component {
     render() {
-        let classes = "box-body" + " " + this.props.className;
+        let classes = "card-body" + " " + this.props.className;
         let ids = this.props.id;
 
         if(this.props.loggedIn) {
diff --git a/ui/index.js b/ui/index.js
index b8e9e3e..2da5255 100644
--- a/ui/index.js
+++ b/ui/index.js
@@ -8,17 +8,17 @@ require('bootstrap-fileinput/themes/fas/theme');
 /**
  * Change the plus and minus when opening or closing bootstraps collapse object
  */
-$('body').on("show.bs.collapse hide.bs.collapse", (e) => {
-    let $target = $(e.target);
-    let $box = $target.parent(".box");
-    let $fontAwesome = $box.children(".box-header").children("i");
-
-    if(e.type == "show") {
-        $fontAwesome.removeClass("fa-plus").addClass("fa-minus");
-    } else if(e.type == "hide") {
-        $fontAwesome.removeClass("fa-minus").addClass("fa-plus");
-    }
-});
+// $('body').on("show.bs.collapse hide.bs.collapse", (e) => {
+//     let $target = $(e.target);
+//     let $box = $target.parent(".box");
+//     let $fontAwesome = $box.children(".box-header").children("i");
+//
+//     if(e.type == "show") {
+//         $fontAwesome.removeClass("fa-plus").addClass("fa-minus");
+//     } else if(e.type == "hide") {
+//         $fontAwesome.removeClass("fa-minus").addClass("fa-plus");
+//     }
+// });
 
 
 /**
diff --git a/ui/index.scss b/ui/index.scss
index 4817d24..c65b4b2 100644
--- a/ui/index.scss
+++ b/ui/index.scss
@@ -24,6 +24,7 @@
 @import "scss/customizations/navigation";
 @import "scss/customizations/breadcrumbs";
 @import "scss/customizations/table";
+@import "scss/customizations/card";
 
 @import "scss/customizations/sweetalert";
 
diff --git a/ui/scss/customizations/card.scss b/ui/scss/customizations/card.scss
new file mode 100644
index 0000000..08c8bd0
--- /dev/null
+++ b/ui/scss/customizations/card.scss
@@ -0,0 +1,24 @@
+.card {
+    .btn-tool {
+        &.btn-danger {
+            @extend .btn-danger
+        }
+
+        &.btn-collapse {
+            display: inline-block;
+        }
+    }
+
+    .card-header {
+        display: flex;
+        align-items: center;
+
+        .card-title {
+            display: inline-block;
+        }
+
+        .card-tools {
+            top: unset;
+        }
+    }
+}
\ No newline at end of file