add shadows on card + callout

public_html/classes/render-adminlte.class.php

@@ -7,6 +7,8 @@ require_once 'htmlelements.class.php';
  * DOCS: https://adminlte.io/docs/3.2/
  *       https://adminlte.io/themes/v3/index3.html
  * 
+ * ----------------------------------------------------------------------
+ * 2023-09-11  <axel.hahn@unibe.ch>  add shadows on card + callout
  * ======================================================================
  *
  * @author Axel
@@ -262,6 +264,7 @@ class renderadminlte {
         
                 'params'=>[
                     'type'        => ['select'=>$this->aPresets['type'],     'example_value'=>'danger'],
+                    'shadow'      => ['select'=>$this->aPresets['shadow'],   'example_value'=>''],
                     'class'       => [
                         'group'=>'styling', 
                         'description'=>'optional: css classes', 
@@ -288,6 +291,7 @@ class renderadminlte {
                 'params'=>[
                     'type'        => ['select'=>$this->aPresets['type'],     'example_value'=>'primary'],
                     'variant'     => ['select'=>$this->aPresets['variant'],  'example_value'=>'outline'],
+                    'shadow'      => ['select'=>$this->aPresets['shadow'],   'example_value'=>''],
                     'class'       => [
                         'group'=>'styling', 
                         'description'=>'optional: css classes', 
@@ -868,7 +872,7 @@ class renderadminlte {
      *                        >> styling
      *                          - type    - one of [none]|danger|dark|info|primary|secondary|success|warning
      *                          - class   - optional css class
-     * 
+     *                          - shadow  - size of shadow; one of [none] (=default: between small and regular)|none|small|regular|large     * 
      *                        >> texts/ html content
      *                          - title   - text: title of the card
      *                          - text    - text: content of the card
@@ -879,6 +883,8 @@ class renderadminlte {
         $sClass='callout'
             . $this->_addClassValue($aOptions['type'],    'callout-')
             . $this->_addClassValue($aOptions['class'],   '')
+            .($aOptions['shadow'] && isset($this->_aValueMappings['shadow'][$aOptions['shadow']]) 
+                ? ' '.$this->_aValueMappings['shadow'][$aOptions['shadow']] : '')
             ;
 
         return $this->addWrapper(
@@ -900,6 +906,7 @@ class renderadminlte {
      *                                     "solid"    - whole card is colored
      *                                     "gradient" - whole card is colored with a gradient
      *                          - 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 
      *                          - class   - any css class for customizing, eg. "disabled"
      *                          - state   - one of [none]|collapsed|maximized
      * 
@@ -947,6 +954,8 @@ class renderadminlte {
         $sVariantPrefix=$aVariants[$aOptions['variant']] ? $aVariants[$aOptions['variant']] : $aVariants['default'];
         $sClass='card'
                 . $this->_addClassValue($aOptions['type'],    $sVariantPrefix)
+                .($aOptions['shadow'] && isset($this->_aValueMappings['shadow'][$aOptions['shadow']]) 
+                    ? ' '.$this->_aValueMappings['shadow'][$aOptions['shadow']] : '')
                 . $this->_addClassValue($aOptions['class'],   '')
                 ;
 
@@ -1032,7 +1041,7 @@ class renderadminlte {
 
 
     /**
-     * return an info-box:
+     * return a small box:
      * A colored box with large icon, text and a value.
      * https://adminlte.io/docs/3.2/components/boxes.html
      * https://adminlte.io/themes/v3/pages/widgets.html
@@ -1040,7 +1049,7 @@ class renderadminlte {
      * @param type $aOptions  hash with keys for all options
      *                        styling:
      *                          - type    - color of the box; 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
      *                          - icon    - icon class for icon on the right
      *                          - text    - information text
@@ -1051,13 +1060,6 @@ class renderadminlte {
      */
     public function getSmallbox($aOptions){
         $aOptions=$this->_ensureOptions('smallbox', $aOptions);
-        $aShadows=[
-            'default'  => '',
-            'none'     => 'shadow-none',
-            'small'    => 'shadow-small',
-            'regular'  => 'shadow',
-            'large'    => 'shadow-lg',
-        ];
         // print_r($aOptions);
         $sClass='small-box'
                 . $this->_addClassValue($aOptions['type'],    'bg-')