updated to admin-lte3.beta2 & test of card

This commit is contained in:
knoxfighter 2019-07-31 22:53:27 +02:00
parent 66faca83da
commit 81da54a1f7
6 changed files with 55 additions and 27 deletions

View File

@ -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",

View File

@ -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}
/>

View File

@ -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) {

View File

@ -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");
// }
// });
/**

View File

@ -24,6 +24,7 @@
@import "scss/customizations/navigation";
@import "scss/customizations/breadcrumbs";
@import "scss/customizations/table";
@import "scss/customizations/card";
@import "scss/customizations/sweetalert";

View File

@ -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;
}
}
}