diff --git a/docs/30_Page_layout.md b/docs/30_Page_layout.md
index 2677ff708dbde98e16cb31cb5a3876e4c7e68db6..51dce56db7c74e7a094c2e944ae52ad47619058b 100644
--- a/docs/30_Page_layout.md
+++ b/docs/30_Page_layout.md
@@ -27,6 +27,7 @@ Variable | Description
{{NAVI_TOP}} | top navigation bar |
{{BRAND}} | sidebar: logo area on top; default color: `bg-primary`
{{NAVI_LEFT}} | left sidebar with navigation |
+{{PAGE_TITLE}} | page: title in html head |
{{PAGE_HEADER_LEFT}} | page: head area left: h1 headline |
{{PAGE_HEADER_RIGHT}} | page: head area right: breadcrumb |
{{PAGE_BODY}} | page: main content |
diff --git a/docs/50_Components/Smallbox.md b/docs/50_Components/Smallbox.md
new file mode 100644
index 0000000000000000000000000000000000000000..a57f687c2630165c2026b824af1797b28c1d1eaa
--- /dev/null
+++ b/docs/50_Components/Smallbox.md
@@ -0,0 +1,47 @@
+## Smallbox
+
+Solid colored box to highlight a single value; optional with a link
+
+### Syntax
+
+```php
+$renderAdminLTE->getSmallbox($aOptions);
+```
+
+### Return
+
+{string} html code
+
+### Parameters
+
+* $aOptions - {array} options to describe the element
+
+Styling:
+
+Key | Description
+--- | ---
+type | one of [none]\|danger\|dark\|info\|primary\|secondary\|success\|warning
+shadow | size of shadow; one of [none] (=default: between small and regular)|none|small|regular|large
+
+Content:
+
+Key | Description
+--- | ---
+icon | icon css class; eg. fontawesome "far fa-thumbs-up"
+text | visible text
+number | Value as string, eg. to format large integers
+url | optional: url to set a link on the bottom
+linktext | used if a url was given: linked text
+
+### Example
+
+```php
+$renderAdminLTE->getSmallbox(array (
+ 'type' => 'info',
+ 'icon' => 'fas fa-shopping-cart',
+ 'text' => 'New orders',
+ 'number' => '150',
+ 'url' => '#',
+ 'linktext' => 'More info',
+))
+```
diff --git a/public_html/classes/render-adminlte.class.php b/public_html/classes/render-adminlte.class.php
index 0f25163c89698484a71b800007d0633e8fbf0991..9c1c095ee13d60e106bbdeb43e7d73d22022c747 100755
--- a/public_html/classes/render-adminlte.class.php
+++ b/public_html/classes/render-adminlte.class.php
@@ -379,7 +379,7 @@ class renderadminlte {
'text'=>['group'=>'content', 'description'=>'short information text', 'example_value'=>'New orders'],
'number'=>['group'=>'content', 'description'=>'a number to highlight', 'example_value'=>"150"],
'url'=>['group'=>'content', 'description'=>'optional: url to set a link on the bottom', 'example_value'=>'#'],
- 'linktext'=>['group'=>'content', 'optional: description'=>'linktext', 'example_value'=>'More info']
+ 'linktext'=>['group'=>'content', 'description'=>'used if a url was given: linked text', 'example_value'=>'More info']
]
],
];
diff --git a/public_html/config/icons_fontawesome.php b/public_html/config/icons_fontawesome.php
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/public_html/config/page.tpl.php b/public_html/config/page.tpl.php
new file mode 100644
index 0000000000000000000000000000000000000000..ee0bb4d8aeb3c7ad9cdc1aef18f9fdadc7b90d66
--- /dev/null
+++ b/public_html/config/page.tpl.php
@@ -0,0 +1,443 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>{{PAGE_TITLE}}</title>
+
+ <!--
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+ -->
+
+ <link rel="stylesheet" href="{{DIR_ADMINLTEPLUGINS}}/fontawesome-free/css/all.min.css">
+
+ <link rel="stylesheet" href="{{DIR_ADMINLTE}}/css/adminlte.min.css?v=3.2.0">
+ <link rel="stylesheet" href="/ui/main.css">
+
+ <!--
+ <script nonce="b14481d0-1a31-4cec-b6e8-b5ad6020a5a9">
+ (function(w, d) {
+ ! function(cM, cN, cO, cP) {
+ cM.zarazData = cM.zarazData || {};
+ cM.zarazData.executed = [];
+ cM.zaraz = {
+ deferred: [],
+ listeners: []
+ };
+ cM.zaraz.q = [];
+ cM.zaraz._f = function(cQ) {
+ return function() {
+ var cR = Array.prototype.slice.call(arguments);
+ cM.zaraz.q.push({
+ m: cQ,
+ a: cR
+ })
+ }
+ };
+ for (const cS of ["track", "set", "debug"]) cM.zaraz[cS] = cM.zaraz._f(cS);
+ cM.zaraz.init = () => {
+ var cT = cN.getElementsByTagName(cP)[0],
+ cU = cN.createElement(cP),
+ cV = cN.getElementsByTagName("title")[0];
+ cV && (cM.zarazData.t = cN.getElementsByTagName("title")[0].text);
+ cM.zarazData.x = Math.random();
+ cM.zarazData.w = cM.screen.width;
+ cM.zarazData.h = cM.screen.height;
+ cM.zarazData.j = cM.innerHeight;
+ cM.zarazData.e = cM.innerWidth;
+ cM.zarazData.l = cM.location.href;
+ cM.zarazData.r = cN.referrer;
+ cM.zarazData.k = cM.screen.colorDepth;
+ cM.zarazData.n = cN.characterSet;
+ cM.zarazData.o = (new Date).getTimezoneOffset();
+ if (cM.dataLayer)
+ for (const cZ of Object.entries(Object.entries(dataLayer).reduce(((c_, da) => ({
+ ...c_[1],
+ ...da[1]
+ }))))) zaraz.set(cZ[0], cZ[1], {
+ scope: "page"
+ });
+ cM.zarazData.q = [];
+ for (; cM.zaraz.q.length;) {
+ const db = cM.zaraz.q.shift();
+ cM.zarazData.q.push(db)
+ }
+ cU.defer = !0;
+ for (const dc of [localStorage, sessionStorage]) Object.keys(dc || {}).filter((de => de.startsWith("_zaraz_"))).forEach((dd => {
+ try {
+ cM.zarazData["z_" + dd.slice(7)] = JSON.parse(dc.getItem(dd))
+ } catch {
+ cM.zarazData["z_" + dd.slice(7)] = dc.getItem(dd)
+ }
+ }));
+ cU.referrerPolicy = "origin";
+ cU.src = "/cdn-cgi/zaraz/s.js?z=" + btoa(encodeURIComponent(JSON.stringify(cM.zarazData)));
+ cT.parentNode.insertBefore(cU, cT)
+ };
+ ["complete", "interactive"].includes(cN.readyState) ? zaraz.init() : cM.addEventListener("DOMContentLoaded", zaraz.init)
+ }(w, d, 0, "script");
+ })(window, document);
+ </script>
+ -->
+</head>
+
+<body class="hold-transition {{PAGE_SKIN}} {{PAGE_LAYOUT}}">
+ <div class="wrapper">
+
+ {{NAVI_TOP}}
+ <!--
+ <nav class="main-header navbar navbar-expand navbar-white navbar-light">
+
+ <ul class="navbar-nav">
+ <li class="nav-item">
+ <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
+ </li>
+ <li class="nav-item d-none d-sm-inline-block">
+ <a href="index3.html" class="nav-link">Home</a>
+ </li>
+ <li class="nav-item d-none d-sm-inline-block">
+ <a href="#" class="nav-link">Contact</a>
+ </li>
+ </ul>
+
+ <ul class="navbar-nav ml-auto">
+
+ <li class="nav-item">
+ <a class="nav-link" data-widget="navbar-search" href="#" role="button">
+ <i class="fas fa-search"></i>
+ </a>
+ <div class="navbar-search-block">
+ <form class="form-inline">
+ <div class="input-group input-group-sm">
+ <input class="form-control form-control-navbar" type="search" placeholder="Search"
+ aria-label="Search">
+ <div class="input-group-append">
+ <button class="btn btn-navbar" type="submit">
+ <i class="fas fa-search"></i>
+ </button>
+ <button class="btn btn-navbar" type="button" data-widget="navbar-search">
+ <i class="fas fa-times"></i>
+ </button>
+ </div>
+ </div>
+ </form>
+ </div>
+ </li>
+
+ <li class="nav-item dropdown">
+ <a class="nav-link" data-toggle="dropdown" href="#">
+ <i class="far fa-comments"></i>
+ <span class="badge badge-danger navbar-badge">3</span>
+ </a>
+ <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
+ <a href="#" class="dropdown-item">
+
+ <div class="media">
+ <img src="dist/img/user1-128x128.jpg" alt="User Avatar"
+ class="img-size-50 mr-3 img-circle">
+ <div class="media-body">
+ <h3 class="dropdown-item-title">
+ Brad Diesel
+ <span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
+ </h3>
+ <p class="text-sm">Call me whenever you can...</p>
+ <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
+ </div>
+ </div>
+
+ </a>
+ <div class="dropdown-divider"></div>
+ <a href="#" class="dropdown-item">
+
+ <div class="media">
+ <img src="dist/img/user8-128x128.jpg" alt="User Avatar"
+ class="img-size-50 img-circle mr-3">
+ <div class="media-body">
+ <h3 class="dropdown-item-title">
+ John Pierce
+ <span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
+ </h3>
+ <p class="text-sm">I got your message bro</p>
+ <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
+ </div>
+ </div>
+
+ </a>
+ <div class="dropdown-divider"></div>
+ <a href="#" class="dropdown-item">
+
+ <div class="media">
+ <img src="dist/img/user3-128x128.jpg" alt="User Avatar"
+ class="img-size-50 img-circle mr-3">
+ <div class="media-body">
+ <h3 class="dropdown-item-title">
+ Nora Silvester
+ <span class="float-right text-sm text-warning"><i
+ class="fas fa-star"></i></span>
+ </h3>
+ <p class="text-sm">The subject goes here</p>
+ <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
+ </div>
+ </div>
+
+ </a>
+ <div class="dropdown-divider"></div>
+ <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
+ </div>
+ </li>
+
+ <li class="nav-item dropdown">
+ <a class="nav-link" data-toggle="dropdown" href="#">
+ <i class="far fa-bell"></i>
+ <span class="badge badge-warning navbar-badge">15</span>
+ </a>
+ <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
+ <span class="dropdown-header">15 Notifications</span>
+ <div class="dropdown-divider"></div>
+ <a href="#" class="dropdown-item">
+ <i class="fas fa-envelope mr-2"></i> 4 new messages
+ <span class="float-right text-muted text-sm">3 mins</span>
+ </a>
+ <div class="dropdown-divider"></div>
+ <a href="#" class="dropdown-item">
+ <i class="fas fa-users mr-2"></i> 8 friend requests
+ <span class="float-right text-muted text-sm">12 hours</span>
+ </a>
+ <div class="dropdown-divider"></div>
+ <a href="#" class="dropdown-item">
+ <i class="fas fa-file mr-2"></i> 3 new reports
+ <span class="float-right text-muted text-sm">2 days</span>
+ </a>
+ <div class="dropdown-divider"></div>
+ <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
+ </div>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" data-widget="fullscreen" href="#" role="button">
+ <i class="fas fa-expand-arrows-alt"></i>
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
+ <i class="fas fa-th-large"></i>
+ </a>
+ </li>
+ </ul>
+ </nav>
+ -->
+
+ <aside class="main-sidebar sidebar-dark-primary elevation-4">
+
+ {{BRAND}}
+ <!--
+ <a href="index3.html" class="brand-link">
+ <img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
+ style="opacity: .8">
+ <span class="brand-text font-weight-light">AdminLTE 3</span>
+ </a>
+ -->
+
+ <div class="sidebar">
+
+ <!--
+ <div class="user-panel mt-3 pb-3 mb-3 d-flex">
+ <div class="image">
+ <img src="dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
+ </div>
+ <div class="info">
+ <a href="#" class="d-block">Alexander Pierce</a>
+ </div>
+ </div>
+
+ <div class="form-inline">
+ <div class="input-group" data-widget="sidebar-search">
+ <input class="form-control form-control-sidebar" type="search" placeholder="Search"
+ aria-label="Search">
+ <div class="input-group-append">
+ <button class="btn btn-sidebar">
+ <i class="fas fa-search fa-fw"></i>
+ </button>
+ </div>
+ </div>
+ </div>
+ -->
+
+ {{NAVI_LEFT}}
+ <br><br>
+
+ <!--
+ <nav class="mt-2">
+ <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
+
+ <li class="nav-item menu-open">
+ <a href="#" class="nav-link active">
+ <i class="nav-icon fas fa-tachometer-alt"></i>
+ <p>
+ Starter Pages
+ <i class="right fas fa-angle-left"></i>
+ </p>
+ </a>
+ <ul class="nav nav-treeview">
+ <li class="nav-item">
+ <a href="#" class="nav-link active">
+ <i class="far fa-circle nav-icon"></i>
+ <p>Active Page</p>
+ </a>
+ </li>
+ <li class="nav-item">
+ <a href="#" class="nav-link">
+ <i class="far fa-circle nav-icon"></i>
+ <p>Inactive Page</p>
+ </a>
+ </li>
+ </ul>
+ </li>
+ <li class="nav-item">
+ <a href="#" class="nav-link">
+ <i class="nav-icon fas fa-th"></i>
+ <p>
+ Simple Link
+ <span class="right badge badge-danger">New</span>
+ </p>
+ </a>
+ </li>
+ </ul>
+ </nav>
+ -->
+
+ </div>
+
+ </aside>
+
+ <div class="content-wrapper px-4 py-2">
+
+
+ <div class="content-header">
+ <div class="container-fluid">
+ <div class="row mb-2">
+ <div class="col-sm-6">
+ {{PAGE_HEADER_LEFT}}
+ <!-- <h1 class="m-0">Starter Page</h1> -->
+ </div>
+ <div class="col-sm-6">
+ <ol class="breadcrumb float-sm-right">
+ {{PAGE_HEADER_RIGHT}}
+ <!--
+ <li class="breadcrumb-item"><a href="#">Home</a></li>
+ <li class="breadcrumb-item active">Starter Page</li>
+ -->
+ </ol>
+ </div>
+ </div>
+ </div>
+ </div>
+
+
+
+ <div class="content">
+
+
+ <div class="container-fluid">
+
+ {{PAGE_BODY}}
+
+ <!--
+ <div class="row">
+ <div class="col-lg-6">
+ <div class="card">
+ <div class="card-body">
+ <h5 class="card-title">Card title</h5>
+ <p class="card-text">
+ Some quick example text to build on the card title and make up the bulk of the
+ card's
+ content.
+ </p>
+ <a href="#" class="card-link">Card link</a>
+ <a href="#" class="card-link">Another link</a>
+ </div>
+ </div>
+ <div class="card card-primary card-outline">
+ <div class="card-body">
+ <h5 class="card-title">Card title</h5>
+ <p class="card-text">
+ Some quick example text to build on the card title and make up the bulk of the
+ card's
+ content.
+ </p>
+ <a href="#" class="card-link">Card link</a>
+ <a href="#" class="card-link">Another link</a>
+ </div>
+ </div>
+ </div>
+
+ <div class="col-lg-6">
+ <div class="card">
+ <div class="card-header">
+ <h5 class="m-0">Featured</h5>
+ </div>
+ <div class="card-body">
+ <h6 class="card-title">Special title treatment</h6>
+ <p class="card-text">With supporting text below as a natural lead-in to additional
+ content.</p>
+ <a href="#" class="btn btn-primary">Go somewhere</a>
+ </div>
+ </div>
+ <div class="card card-primary card-outline">
+ <div class="card-header">
+ <h5 class="m-0">Featured</h5>
+ </div>
+ <div class="card-body">
+ <h6 class="card-title">Special title treatment</h6>
+ <p class="card-text">With supporting text below as a natural lead-in to additional
+ content.</p>
+ <a href="#" class="btn btn-primary">Go somewhere</a>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ -->
+ </div>
+ </div>
+
+ </div>
+
+
+ <aside class="control-sidebar control-sidebar-dark">
+
+ <div class="p-3">
+ <h5>Title</h5>
+ <p>Sidebar content</p>
+ </div>
+ </aside>
+
+
+ <footer class="main-footer">
+
+ <div class="float-right d-none d-sm-inline">
+ {{PAGE_FOOTER_RIGHT}}
+ <!--
+ Anything you want
+ -->
+ </div>
+
+ {{PAGE_FOOTER_LEFT}}
+ <!--
+ <strong>Copyright © 2014-2021 <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights
+ reserved.
+ -->
+ </footer>
+ </div>
+
+
+
+ <script src="{{DIR_ADMINLTEPLUGINS}}/jquery/jquery.min.js"></script>
+
+ <script src="{{DIR_ADMINLTEPLUGINS}}/bootstrap/js/bootstrap.bundle.min.js"></script>
+
+ <script src="{{DIR_ADMINLTE}}/js/adminlte.min.js?v=3.2.0"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/public_html/config/00_page.tpl.php.dist b/public_html/config/page.tpl.php.dist
similarity index 100%
rename from public_html/config/00_page.tpl.php.dist
rename to public_html/config/page.tpl.php.dist
diff --git a/public_html/config/page_replacements.php b/public_html/config/page_replacements.php
new file mode 100644
index 0000000000000000000000000000000000000000..e19db10fb8755ede0b9cf8f5befb2d3d5316f4f0
--- /dev/null
+++ b/public_html/config/page_replacements.php
@@ -0,0 +1,26 @@
+<?php
+
+return [
+ // '{{DIR_ADMINLTE}}' =>'https://cdnjs.cloudflare.com/ajax/libs/admin-lte/3.2.0/',
+ '{{DIR_ADMINLTE}}' =>'/vendor/admin-lte/3.2.0',
+ '{{DIR_ADMINLTEPLUGINS}}' =>'/vendor/admin-lte-plugins',
+
+ '{{PAGE_TITLE}}' =>'My Admin page using AdminLTE',
+ '{{PAGE_SKIN}}' =>'',
+ '{{PAGE_LAYOUT}}' =>'layout-navbar-fixed layout-fixed sidebar-mini',
+ '{{NAVI_TOP}}' =>'{{NAVI_TOP}}',
+ '{{BRAND}}' =>'<a href="/" class="brand-link bg-teal">
+ <!--
+ <img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
+ style="opacity: .8">
+ -->
+ Render
+ <span class="brand-text font-weight-light">AdminLTE 3</span>
+ </a>',
+ '{{NAVI_LEFT}}' =>'{{NAVI_LEFT}}',
+ '{{PAGE_HEADER_LEFT}}'=>'<h1>{{PAGE_HEADER_LEFT}}</h1>',
+ '{{PAGE_HEADER_RIGHT}}'=>'{{PAGE_HEADER_RIGHT}}',
+ '{{PAGE_BODY}}'=>'{{PAGE_BODY}}',
+ '{{PAGE_FOOTER_LEFT}}'=>'© Institute for Medical education * University of Bern',
+ '{{PAGE_FOOTER_RIGHT}}'=>'{{TODO: PAGE_FOOTER_RIGHT}}',
+];
\ No newline at end of file
diff --git a/public_html/config/replace_defaults.php.dist b/public_html/config/page_replacements.php.dist
similarity index 94%
rename from public_html/config/replace_defaults.php.dist
rename to public_html/config/page_replacements.php.dist
index 6ea1b21e2962dfeed9f3ee43bb33107d18bfd487..9b854559760b56cda4f8f834b7a41d58f64b8270 100644
--- a/public_html/config/replace_defaults.php.dist
+++ b/public_html/config/page_replacements.php.dist
@@ -3,6 +3,8 @@
return [
'{{DIR_ADMINLTE}}' =>'/vendor/admin-lte/3.2.0',
'{{DIR_ADMINLTEPLUGINS}}' =>'/vendor/admin-lte-plugins',
+
+ '{{PAGE_TITLE}}' =>'My Admin page using AdminLTE',
'{{PAGE_SKIN}}' =>'',
'{{PAGE_LAYOUT}}' =>'layout-navbar-fixed layout-fixed sidebar-mini',
'{{NAVI_TOP}}' =>'{{NAVI_TOP}}',
diff --git a/public_html/example.php b/public_html/example.php
index 8774d50efa90a7f3d2ab61c5cdfd93e2f8cf5ac4..9dbd0b6c8d8959e3d492f091d32278753cfbc4c0 100755
--- a/public_html/example.php
+++ b/public_html/example.php
@@ -3,7 +3,7 @@
require_once('classes/render-adminlte.class.php');
$renderAdminLTE=new renderadminlte();
-$aReplace=include("./config/replace_defaults.php.dist");
+$aReplace=include("./config/page_replacements.php.dist");
// ---------- TOP BAR
$aReplace['{{NAVI_TOP}}']=''
@@ -31,5 +31,5 @@ $aReplace['{{NAVI_LEFT}}']=''
;
// ---------- send content
-$sTemplate=file_get_contents('config/00_page.tpl.php');
+$sTemplate=file_get_contents('config/page.tpl.php');
echo $renderAdminLTE->render($sTemplate,$aReplace);
diff --git a/public_html/index.php b/public_html/index.php
index 082fa8e6a92f13dd2fb722722aaecfee4039e912..b41b0d00db28f812852b6d7954148e2be23e2735 100755
--- a/public_html/index.php
+++ b/public_html/index.php
@@ -9,7 +9,7 @@ require_once('inc_functions.php');
// CONFIG
// ----------------------------------------------------------------------
-$aReplace=include("./config/replace_defaults.php");
+$aReplace=include("./config/page_replacements.php");
// $aReplace['{{DIR_ADMINLTE}}']='/vendor/admin-lte/AdminLTE-3.2.0/';
@@ -143,5 +143,5 @@ $aReplace['{{PAGE_BODY}}']=$sBody
// ---------- send content
-$sTemplate=file_get_contents('config/00_page.tpl.php');
+$sTemplate=file_get_contents('config/page.tpl.php');
echo $renderAdminLTE->render($sTemplate,$aReplace);