Footer + Help Page

This commit is contained in:
Roman Hergenreder 2020-06-22 23:47:07 +02:00
parent 5a4256cf47
commit 9e9e481576
5 changed files with 197 additions and 5 deletions

28
js/admin.min.js vendored

File diff suppressed because one or more lines are too long

11
src/src/footer.js Normal file

@ -0,0 +1,11 @@
import React from "react";
export default function Footer(props) {
return (
<footer className={"main-footer"}>
Theme: <strong>Copyright © 2014-2019 <a href={"http://adminlte.io"}>AdminLTE.io</a>. <b>Version</b> 3.0.3</strong>&nbsp;
CMS: <strong><a href={"http://git.romanh.de/Projekte/webbase.io"}>WebBase</a></strong>. <b>Version</b> 0.1.0-alpha
</footer>
)
}

@ -35,13 +35,25 @@ export default function Header(props) {
</Link>); </Link>);
} }
function onToggleSidebar() {
console.log(document.body.classList);
let classes = document.body.classList;
if (classes.contains("sidebar-collapse")) {
classes.remove("sidebar-collapse");
classes.add("sidebar-open");
} else {
classes.add("sidebar-collapse");
classes.remove("sidebar-add");
}
}
return ( return (
<nav className={"main-header navbar navbar-expand navbar-white navbar-light"}> <nav className={"main-header navbar navbar-expand navbar-white navbar-light"}>
{/*Left navbar links */} {/*Left navbar links */}
<ul className={"navbar-nav"}> <ul className={"navbar-nav"}>
<li className={"nav-item"}> <li className={"nav-item"}>
<a href={"#"} className={"nav-link"} data-widget={"pushmenu"} role={"button"}> <a href={"#"} className={"nav-link"} role={"button"} onClick={onToggleSidebar}>
<Icon icon={"bars"}/> <Icon icon={"bars"}/>
</a> </a>
</li> </li>

@ -14,6 +14,8 @@ import {BrowserRouter as Router, Route, Switch} from 'react-router-dom'
import View404 from "./404"; import View404 from "./404";
import Logs from "./views/logs"; import Logs from "./views/logs";
import PageOverview from "./views/pages"; import PageOverview from "./views/pages";
import HelpPage from "./views/help";
import Footer from "./footer";
class AdminDashboard extends React.Component { class AdminDashboard extends React.Component {
@ -84,12 +86,14 @@ class AdminDashboard extends React.Component {
<Route exact={true} path={"/admin/users/adduser"}><CreateUser {...this.controlObj} /></Route> <Route exact={true} path={"/admin/users/adduser"}><CreateUser {...this.controlObj} /></Route>
<Route path={"/admin/logs"}><Logs {...this.controlObj} /></Route> <Route path={"/admin/logs"}><Logs {...this.controlObj} /></Route>
<Route path={"/admin/pages"}><PageOverview {...this.controlObj} /></Route> <Route path={"/admin/pages"}><PageOverview {...this.controlObj} /></Route>
<Route path={"/admin/help"}><HelpPage {...this.controlObj} /></Route>
<Route path={"*"}><View404 /></Route> <Route path={"*"}><View404 /></Route>
</Switch> </Switch>
<Dialog {...this.state.dialog}/> <Dialog {...this.state.dialog}/>
</section> </section>
</div> </div>
</Router> <Footer />
</Router>
} }
} }

141
src/src/views/help.js Normal file

@ -0,0 +1,141 @@
import React, {useState} from "react";
import {Link} from "react-router-dom";
import Icon from "../elements/icon";
import {Collapse} from "react-collapse";
export default function HelpPage(props) {
const [firstStepsCollapsed, collapseFirstSteps] = useState(false);
const [faqCollapsed, collapseFaq] = useState(false);
const [aboutCollapsed, collapseAbout] = useState(false);
return (
<>
<section className={"content-header"}>
<div className={"container-fluid"}>
<div className={"row mb-2"}>
<div className={"col-sm-6"}>
<h1>WebBase Help & Information</h1>
</div>
<div className={"col-sm-6"}>
<ol className={"breadcrumb float-sm-right"}>
<li className={"breadcrumb-item"}><Link to={"/admin/dashboard"}>Home</Link></li>
<li className={"breadcrumb-item active"}>Help</li>
</ol>
</div>
</div>
</div>
</section>
<section className="content">
<div className={"container-fluid"}>
<div className={"row"}>
<div className="col-12 col-md-8 col-lg-4">
<p>
WebBase is a php framework to simplify user management, pages and routing.
It can easily be modified and extended by writing document classes or
access the database with the available abstracted scheme. It also includes
a REST API with access control, parameter type checking and more.
</p>
</div>
</div>
<div className={"row"}>
<div className={"col-12 col-lg-6"}>
<div className={"card"}>
<div className="card-header">
<h3 className="card-title">
<Icon icon={"walking"} className={"mr-1"}/>
First Steps
</h3>
<div className={"card-tools"}>
<button type={"button"} className={"btn btn-tool"} onClick={(e) => {
e.preventDefault();
collapseFirstSteps(!firstStepsCollapsed);
}}>
<Icon icon={"minus"} />
</button>
</div>
</div>
<Collapse isOpened={!firstStepsCollapsed}>
<div className="card-body">
<ol>
<li>Customize <Link to={"/admin/settings"}>website settings</Link></li>
<li>Manage users and groups on <Link to={"/admin/users"}>this page</Link></li>
<li><Link to={"/admin/pages"}>Create routes</Link> for your website</li>
<li>For dynamic pages:
<ol>
<li>Create a document class in <b>/Core/Documents</b> according to the other classes</li>
<li>Create a view class in <b>/Core/Views</b> for every view you have</li>
</ol>
</li>
<li>For static pages:
<ul>
<li>Create html files in <b>/static</b></li>
</ul>
</li>
</ol>
</div>
</Collapse>
</div>
</div>
<div className={"col-12 col-lg-6"}>
<div className={"card"}>
<div className="card-header">
<h3 className="card-title">
<Icon icon={"question-circle"} className={"mr-1"}/>
FAQ
</h3>
<div className={"card-tools"}>
<button type={"button"} className={"btn btn-tool"} onClick={(e) => {
e.preventDefault();
collapseFaq(!faqCollapsed);
}}>
<Icon icon={"minus"} />
</button>
</div>
</div>
<Collapse isOpened={!faqCollapsed}>
<div className="card-body">
Nobody asked questions so far
</div>
</Collapse>
</div>
</div>
<div className={"col-12 col-lg-6"}>
<div className={"card"}>
<div className="card-header">
<h3 className="card-title">
<Icon icon={"address-card"} className={"mr-1"}/>
About
</h3>
<div className={"card-tools"}>
<button type={"button"} className={"btn btn-tool"} onClick={(e) => {
e.preventDefault();
collapseAbout(!aboutCollapsed);
}}>
<Icon icon={"minus"} />
</button>
</div>
</div>
<Collapse isOpened={!aboutCollapsed}>
<div className="card-body">
<b>Project Lead & Main Developer</b>
<ul className={"list-unstyled"}>
<li><small><Icon icon={"address-card"} className={"mr-1"}/>Roman Hergenreder</small></li>
<li><small><Icon icon={"globe"} className={"mr-1"}/><a href={"https://romanh.de/"} target={"_blank"}>https://romanh.de/</a></small></li>
<li><small><Icon icon={"envelope"} className={"mr-1"}/><a href={"mailto:webmaster@romanh.de"}>webmaster@romanh.de</a></small></li>
</ul>
<b className={"mt-2"}>Backend Developer</b>
<ul className={"list-unstyled"}>
<li><small><Icon icon={"address-card"} className={"mr-1"}/>Leon Krause</small></li>
</ul>
</div>
</Collapse>
</div>
</div>
</div>
</div>
</section>
</>
)
}