# Pina Styles for Bootstrap 4 form elements and custom imperia components in editmode
© pirobase imperia gmbh 2021
======================

The Pina skin provides predefined styles and flex modules and depends on Bootstrap.
You will find the pina skin files in /htdocs/pina.
Following the given examples you could easily style form elements like buttons, inputs, selects, checkboxes, custom imperia elements (link input), etc.

## Pina Styles, Javascript files and Dependencies

Includes in  Editmode:
1. bootstrap.css 
2. pina_editmode.css 
3. bootstrap.js
4. pina_editmode.js 

Includes in Savemode:
1. pina.css
2. widgets.js
3. pina.js

To overwrite the default typography in Editmode and in Savemode do as follows:
Copy, rename and adjust to your needs '/htdocs/pina/styles/typography_default.css' and include it in your templates after pina_editmode.css and after pina.css

## Usage
Wrap the content of the template (or flex, slot etc.) in a DIV with class="pina"

Use the bootstrap 4 syntax to create form controls (https://getbootstrap.com/docs/4.6/components/forms/) or the imperia custom elements syntax.

Following css classes and html structures can be used

## Pina containers in Editmode

Pina classes for containers:

- 'pina': applies the pina style to the child form components (mandatory);
- 'pina-flex-toolbar': Toolbar at the top of the flex (optional);
- 'pina-wrapper': centers the content and applies max-width of 800px (optional);
- 'pina-section': applies additional indent of the content (optional);

### Structure example

```
<div class='pina'>
    <div class='pina-flex-toolbar'>
        Global flex settings here ...
    </div>
    <div class='pina-wrapper'>

        <h2>Section 1</h2>
        <div class='pina-section'>
            ...
        </div>
        <hr />

        <h2>Section 2</h2>
        <div class='pina-section'>
            ...
        </div>

    </div>

</div>

```
## Toolbars

You could use two predefined classes for toolbars and wrap your form controls for flex settings: 
1. Main Toolbar for the flex
    ```
    <div class='pina-flex-toolbar'>
        Global flex settings here ...
    </div>
    ```

2.Toolbar for a particular form control (input, textarea)
Use '.pina-form-toolbar' after the label and just before the form control.

    ```
    <div class="form-group">
        <label for="exampleFormControlTextarea1">Example textarea</label>
        <div class="pina-form-toolbar">
            /* settings here*/
            <label class="pina-icon-radio" title="">
                <input name="IMPERIA:radioName" type="radio" value="centerOne">
            </label>

            <select name="IMPERIA:my_name" class="pina-toolbar-select">
                <option value="h2">Option 1</option>
                <option value="h3">Option 2</option>
            </select>
        </div>
        <textarea class="form-control form-control-sm" id="exampleFormControlTextarea1" rows="5"><textarea>
    </div>
    ```


### Custom imperia checkboxes, radios & switches; 

```
<label class="i-material-checkbox">
    <input type="checkbox" >
    <span>Check me out</span>
</label>

<label class="i-material-checkbox">
    <input type="checkbox" >
    <span>checkbox</span>
</label>

<label class="i-material-checkbox">
    <input type="checkbox" disabled>
    <span>Check me out disabled</span>
</label>

<label class="i-material-checkbox">
    <input type="checkbox" disabled>
    <span>radio disabled</span>
</label>

<label class="i-material-switch">
    <input name="IMPERIA:filed_name" type="checkbox">
    <span>Switch label</span>
</label>
<div class="form-hint">Help text</div>

```
### Custom imperia icon radio button
    ```
    <label class="pina-icon-radio" for="" title="">
        <input name="IMPERIA:radioName" id="" type="radio" value="centerOne">
    </label>
    ```

### Custom imperia button group in the toolbar

```
<span class="pina-btn-group">
    <label class="pina-btn-radio" for="" title="">
        <input name="IMPERIA:radioName" id="" type="radio" value="1">
        <span><i class="fa5 fas fa-info-circle"></i>&nbsp;label 1 with icon</span>
    </label>
    <label class="pina-btn-radio" for="" title="">
        <input name="IMPERIA:radioName" id="" type="radio" checked value="2">
        <span>label 2</span>
    </label>
    <label class="pina-btn-radio" for="" title="">
        <input name="IMPERIA:radioName" id="" type="radio" disabled value="3">
        <span>label 3 disabled</span>
    </label>
    <label class="pina-btn-radio" for="" title="">
        <input name="IMPERIA:radioName" id="" type="radio" value="4">
        <span>label 4</span>
    </label>
</span>
```

### Custom imperia link field

```
<!-- pina link input -->
<div class="pina-input-group pina-internal-link-wrapper" >
    <input name="IMPERIA:link" type="text" class="form-control pina-internal-link">
    <i class="fa5 far fa-times pina-clear-icon"></i>
    <a href="IMPERIA:DOC:link" class="pina-link-btn">
        <i class="fa5 far fa-link"></i>
        <?imperia mam copy title:link_text?>
    </a>
</div>
<!-- /pina link input -->
```

### imperia calendar input group

```
    <!-- imperia calendar -->
    <div class="form-group">
        <label for="admin_article_date_normalized">Datum</label>
        <input name="IMPERIA:admin_article_date_epoch" id="admin_article_date_epoch" type="hidden" value="<!--Xstrftime:C:%s-->" />
        <div class="pina-calendar-input-group">
            <input name="IMPERIA:admin_article_date_normalized" id="admin_article_date_normalized"
            type="text" class="form-control" value="<!--Xstrftime:C:%Y-%m-%d %H:%M-->"
            readonly="readonly">
            <span class="calendar-icon">
                <?imperia calendar
                    popup: default click
                    connectInputId: admin_article_date_epoch %s
                    connectInputId: admin_article_date_normalized "%Y-%m-%d %H:%M"
                    showWeekNumbers: true
                    showTime: true
                    startYear: <!--Xstrftimeoff:-10Y:C:%Y-->
                    endYear: <!--Xstrftimeoff:+10Y:C:%Y-->
                    #IF(<!--XX-admin_article_date_epoch--> AND (<!--XX-admin_article_date_epoch--> GT 1388440800))
                    startDate: <!--XX-admin_article_date_epoch-->
                    #ENDIF
                    showAdjacentMonths: false
                    seqNumber: 0
                ?>
            </span>
        </div>
        <small class="form-text text-muted">Format YYYY-MM-DD HH:MM</small>
    </div>
    <!-- /imperia calendar -->
```

### Iconpicker  (FA icons)

```
<div class="pina-section">

    <div class="form-group">
        <label for="button_icon">Icon (simple input field)</label>
        <input name="IMPERIA:button_icon" id="button_icon" value="fa-arrow-right" class="form-control XXbycs-btn-icon" type="text"/>
    </div>

    <label for="button_icon2">Icon (with preview)</label>
    <div class="input-group pina-icon-input-group">
        <div class="input-group-prepend">
            <div class="input-group-text" id="btnGroupAddon">
                <i class="fas fa-arrow-right"></i>
            </div>
        </div>
        <input name="IMPERIA:button_icon2" id="button_icon2" type="text" class="form-control pina-icon-input" value="fa-arrow-right" aria-label="Input group example" aria-describedby="btnGroupAddon">
    </div>

</div>
<script>
    I.$(function($) {
        $('#button_icon').iconpicker('#button_icon');
        $('#button_icon2').iconpicker('#button_icon2');
    });
</script>
```

### Toggle Button and collapsible Settings Container

You can create a combination of a button and a div to store more settings. 
The initial state of the settings div is collapsed.

#### Usage

Add a button as in the example below, *immediately followed* by a DIV with a 'pina-flex-settings' class. 
The rest is handled by pina_editmode.js

```
<!-- pina toggle combo -->
<button type="button" class="i-button i-secondary-btn pina-toggle-flex-settings">
    <span class="btn-icon"></span>
    <span class="btn-label">_Your custom button label here_</span>
</button>

<div class="pina-flex-settings"> 
    _settings here_
</div>
<!-- /pina toggle combo -->
```

## Pina Flexmodules

### Pina Article-Image and Pina Article-text

For the Flexmodules 'Article Image' and 'Article text' you have to include pina.css in savemode.

Default width of the floated images is 300px and of the centered image: 800px; 
You can change this in /htdocs/pina/styles/_variables.scss ($pina-fleximage-width, $pina-fleximage-centered-width).

Adjust also the correct sizes of the created image variants (img_small, img_big) in the PI of the img tag in the flexmodule itself. (Image width * 2 for optimal dispaly on retina)

### Pina Table of Contents (ToC)

Every h1 to h5 element, wrapped in a container with the class 'pina-toc-marker'  will be included in the generatated ToC. -> Adjustments can be made in pina.js
Add class 'pina-toc-marker' to containers, where headings should be accounted for the automatic creation of ToC.

### Example Flex for 2-column-layout and toolbar icons for switching between left, right and centered alignment

Use 'site/flex/2-col-structure.htms' to create your own flexmodule with 2 columns and fully functional switching between 3 states in editmode. 

    --- .pina-2-col-wrapper
        |
        --- .pina-flex-toolbar
        |
        --- .pina-2-col-row
            |
            --- .pina-col-a
            |
            --- .pina-col-b