Footer + Help Page
This commit is contained in:
parent
5a4256cf47
commit
9e9e481576
28
js/admin.min.js
vendored
28
js/admin.min.js
vendored
File diff suppressed because one or more lines are too long
11
src/src/footer.js
Normal file
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>
|
||||||
|
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
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>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user