From 8f444c08fb5487def41d9c652fc080f3437f816c Mon Sep 17 00:00:00 2001
From: "Hahn Axel (hahn)" <axel.hahn@iml.unibe.ch>
Date: Fri, 9 Dec 2022 14:12:57 +0100
Subject: [PATCH] update docs

---
 docs/30_Page_layout.md        | 11 +++++----
 docs/50_Components/10_Grid.md | 21 ++++++++++++----
 docs/50_Components/Alert.md   | 43 ++++++++++++++++++++-------------
 docs/50_Components/Badge.md   | 18 +++++++++++---
 docs/50_Components/Button.md  | 40 +++++++++++++++++++++++++++++++
 docs/50_Components/Callout.md | 37 ++++++++++++++++++++++++++++
 docs/50_Components/Card.md    | 45 +++++++++++++++++++++++++++++++++++
 docs/config.json              |  8 +++----
 8 files changed, 190 insertions(+), 33 deletions(-)
 create mode 100644 docs/50_Components/Button.md
 create mode 100644 docs/50_Components/Callout.md
 create mode 100644 docs/50_Components/Card.md

diff --git a/docs/30_Page_layout.md b/docs/30_Page_layout.md
index 15e969d..520c88e 100644
--- a/docs/30_Page_layout.md
+++ b/docs/30_Page_layout.md
@@ -4,9 +4,10 @@ See file public_html/config/**00_page.tpl.php** - this is a basic page created f
 
 ### Helper variables
 
-Variable           | Description | Example
----                |---          |---
-{{DIR_ADMINLTE}}   | base path to find AdminLTE resources | `/vendor/admin-lte/AdminLTE-3.2.0`
+Variable                | Description                                 | Example
+---                     |---                                          |---
+{{DIR_ADMINLTE}}        | base path to find AdminLTE resources        | `/vendor/admin-lte/3.2.0`
+{{DIR_ADMINLTEPLUGINS}} | base path for bootstrp, jquery, fontawesome | `/vendor/admin-lte-plugins`
 
 ### Layout
 
@@ -19,7 +20,7 @@ See also <https://adminlte.io/docs/3.2/layout.html>
 
 ### Visual parts
 
-![page](/docs/images/page_layout.png)
+![image: page](/images/page_layout.png)
 
 Variable           | Description
 ---                |---
@@ -41,7 +42,7 @@ require_once('classes/render-adminlte.class.php');
 $renderAdminLTE=new renderadminlte();
 ```
 
-The we can use `$renderAdminLTE` to render elements with its public functions.
+Then we can use `$renderAdminLTE` to render elements with its public functions.
 
 ### Define replacements
 
diff --git a/docs/50_Components/10_Grid.md b/docs/50_Components/10_Grid.md
index 57ffc40..04e6da5 100644
--- a/docs/50_Components/10_Grid.md
+++ b/docs/50_Components/10_Grid.md
@@ -31,10 +31,21 @@ $renderAdminLTE->addCol([HTML code], [Width]);
 
 You can define a width of 1..12 to define a screen width of your cell.
 
-To divide it in 3 parts:
+Here is an example with 3 rows ... first with fill width; then on row with 3 columns and a third row with 2 columns:
 
 ```php
-echo $renderAdminLTE->addCol("column 1/ 3", 4 );
-echo $renderAdminLTE->addCol("column 2/ 3", 4 );
-echo $renderAdminLTE->addCol("column 3/ 3", 4 );
-```
\ No newline at end of file
+echo ''
+    .$renderAdminLTE->addRow(
+        $renderAdminLTE->addCol("full width column", 12 )
+    )
+    . $renderAdminLTE->addRow(
+        $renderAdminLTE->addCol("column 1/ 3", 4 )
+        . $renderAdminLTE->addCol("column 2/ 3", 4 )
+        . $renderAdminLTE->addCol("column 3/ 3", 4 )
+    )
+    .$renderAdminLTE->addRow(
+        $renderAdminLTE->addCol("column 1/ 2", 6 )
+        . $renderAdminLTE->addCol("column 1/ 2", 6 )
+)
+;
+```
diff --git a/docs/50_Components/Alert.md b/docs/50_Components/Alert.md
index 80c9f4f..d4c1315 100644
--- a/docs/50_Components/Alert.md
+++ b/docs/50_Components/Alert.md
@@ -1,32 +1,43 @@
-## Badge
+## Alert
 
-A badge is a small counter or info next to a text info,
+An alert is a colored box with title and text.
 
 ### Syntax
 
 ```php
-$renderAdminLTE->getBadge($aOptions);
+$renderAdminLTE->getAlert($aOptions);
 ```
 
 ### Parameters
 
 * $aOptions - {array} options to describe the element
 
-Key      | Description
----      | ---
-bgcolor  | optional: background color (without prefix "bg"); hint: you should prefer a "type".
-class    | optional: additional css class
-id       | optional: additional id attribute
-text     | visible text
-title    | title
-type     | one of `[none]|danger|dark|info|primary|secondary|success|warning`
+Styling:
+
+Key         | Description
+---         | ---
+type        | one of [none]\|danger\|dark\|info\|primary\|secondary\|success\|warning
+
+Content:
+
+Key         | Description
+---         | ---
+text        | visible text
+title       | title
+
+Other:
+
+Key         | Description
+---         | ---
+dismissable | optional: background color (without prefix "bg"); hint: you should prefer a "type".
 
 ### Example
 
 ```php
-$renderAdminLTE->getBadge([
-    'type'=>'danger',
-    'title'=>'Errors: 5',
-    'text'=>'5',
-])
+$renderAdminLTE->getAlert(array (
+  'type' => 'warning',
+  'title' => 'I need your attention',
+  'dismissible' => 1,
+  'text' => 'Please check it. Maybe there is something wrong here.',
+))
 ```
diff --git a/docs/50_Components/Badge.md b/docs/50_Components/Badge.md
index 80c9f4f..2c91d00 100644
--- a/docs/50_Components/Badge.md
+++ b/docs/50_Components/Badge.md
@@ -12,14 +12,26 @@ $renderAdminLTE->getBadge($aOptions);
 
 * $aOptions - {array} options to describe the element
 
+Styling:
+
 Key      | Description
 ---      | ---
 bgcolor  | optional: background color (without prefix "bg"); hint: you should prefer a "type".
-class    | optional: additional css class
-id       | optional: additional id attribute
+class    | optional: additional css classes
+type     | one of [none]\|danger\|dark\|info\|primary\|secondary\|success\|warning
+
+Content:
+
+Key      | Description
+---      | ---
 text     | visible text
 title    | title
-type     | one of `[none]|danger|dark|info|primary|secondary|success|warning`
+
+Other:
+
+Key      | Description
+---      | ---
+id       | optional: additional id attribute
 
 ### Example
 
diff --git a/docs/50_Components/Button.md b/docs/50_Components/Button.md
new file mode 100644
index 0000000..ddd0afb
--- /dev/null
+++ b/docs/50_Components/Button.md
@@ -0,0 +1,40 @@
+## Button
+
+An html button tag with formatting.
+
+You can use any other key that are not named here. Those keys will be rendered as additional html attributes without modification.
+
+
+### Syntax
+
+```php
+$renderAdminLTE->getButton($aOptions);
+```
+
+### Parameters
+
+* $aOptions - {array} options to describe the element
+
+Styling:
+
+Key      | Description
+---      | ---
+class    | optional: additional css classes
+size     | set size of the button; one of [none]|lg|sm|xs|flat
+type     | one of [none]\|danger\|dark\|info\|primary\|secondary\|success\|warning
+
+Content:
+
+Key      | Description
+---      | ---
+text     | visible text
+
+### Example
+
+```php
+$renderAdminLTE->getButton([
+        'class'=>'primary',
+        'text'=>'Click me',
+        'onclick'=>'alert(\'Hello!\');'
+    ])
+```
diff --git a/docs/50_Components/Callout.md b/docs/50_Components/Callout.md
new file mode 100644
index 0000000..f12fac6
--- /dev/null
+++ b/docs/50_Components/Callout.md
@@ -0,0 +1,37 @@
+## Callout
+
+A box with colored left border. It has type, title + text.
+
+### Syntax
+
+```php
+$renderAdminLTE->getCallout($aOptions);
+```
+
+### Parameters
+
+* $aOptions - {array} options to describe the element
+
+Styling:
+
+Key      | Description
+---      | ---
+class    | optional: additional css classes
+type     | one of [none]\|danger\|dark\|info\|primary\|secondary\|success\|warning
+
+Content:
+
+Key      | Description
+---      | ---
+text     | visible text
+title    | title of the callout
+
+### Example
+
+```php
+$renderAdminLTE->getCallout(array (
+  'type' => 'success',
+  'title' => 'I am a success callout',
+  'text' => 'This is a gren callout.',
+))
+```
diff --git a/docs/50_Components/Card.md b/docs/50_Components/Card.md
new file mode 100644
index 0000000..4c12fa9
--- /dev/null
+++ b/docs/50_Components/Card.md
@@ -0,0 +1,45 @@
+## Callout
+
+A div to display boxed content.
+
+It has header, main text and a footer.
+
+### Syntax
+
+```php
+$renderAdminLTE->getCard($aOptions);
+```
+
+### Parameters
+
+* $aOptions - {array} options to describe the element
+
+Styling:
+
+Key      | Description
+---      | ---
+class    | optional: additional css classes
+type     | one of [none]\|danger\|dark\|info\|primary\|secondary\|success\|warning
+variant  | kind of coloring: one of<br>- "default"  - titlebar is colored<br>- "outline" - a small stripe on top border is colored<br>- "solid"    - whole card is colored<br>- "gradient" - whole card is colored with a gradient
+
+Content:
+
+Key      | Description
+---      | ---
+footer   | footer of the card
+text     | visible text
+title    | title of the card
+tools    | html code for upper right corner
+
+### Example
+
+```php
+$renderAdminLTE->getCard(array (
+  'type' => 'primary',
+  'variant' => 'solid',
+  'title' => 'I am a card',
+  'tools' => '123',
+  'text' => 'Hello everybody out there!',
+  'footer' => '&copy; Axel',
+))
+```
diff --git a/docs/config.json b/docs/config.json
index d29d53b..d06d672 100644
--- a/docs/config.json
+++ b/docs/config.json
@@ -1,7 +1,7 @@
 {
-    "title": "Docker starter kit",
+    "title": "AdminLTE renderer",
     "author": "Axel Hahn",
-    "tagline": "Bring up a docker container with a PHP 8.x dev environment",
+    "tagline": "PHP class to render elements of AdminLTE template",
     "ignore": {
         "files": ["_skeleton.md"],
         "folders": ["99_Not_Ready"]
@@ -14,10 +14,10 @@
         "edit_on_github_": "iml-it/__PROJECT__/tree/master/docs",
         "edit_on": {
             "name": "Gitlab",
-            "basepath": "https://git-repo.iml.unibe.ch/iml-open-source/docker-php-starterkit/tree/master/docs"
+            "basepath": "https://git-repo.iml.unibe.ch/iml-open-source/adminlte-renderer/tree/master/docs"
         },
         "links": {
-            "Git Repo": "https://git-repo.iml.unibe.ch/iml-open-source/docker-php-starterkit",
+            "Git Repo": "https://git-repo.iml.unibe.ch/iml-open-source/adminlte-renderer",
             "IML Opensource": "https://os-docs.iml.unibe.ch/"
         },
         "theme": "daux-blue",
-- 
GitLab