engelsystem/resources/views/pages/design.twig

{% extends "layouts/app.twig" %}
{% import 'macros/base.twig' as m %}
{% import 'macros/form.twig' as f %}

{% block title %}{{ __('Design') }}{% endblock %}

{% set colors=['success', 'info', 'warning', 'danger'] %}
{% set types=[
    'primary',
    'secondary',
    'success',
    'danger',
    'warning',
    'info',
    'light',
    'dark'
]
%}
{% set types_color=[
    ['primary', 'light'],
    ['secondary', 'light'],
    ['success', 'light'],
    ['danger', 'light'],
    ['warning', 'dark'],
    ['info', 'dark'],
    ['light', 'dark'],
    ['dark', 'light'],
] %}
{% set types_buttons=['link']|merge(types) %}
{% set shortsum='Lorem ipsum dolor…' %}
{% set lipsum='Lorem ipsum dolor sit amet, consectetur adipisici elit…' %}
{% set linksum='Lorem ipsum! Dolor <a href="#">link</a> amet, consectetur adipisici elit!' %}

{% block content %}
    <div class="col-12">
        <div class="container">
        <h1 class="mb-4">
            {{ block('title') }} <small class="text-muted">{{ themes[themeId]['name'] }}</small>
        </h1>

        <h2>Elements <small class="text-muted">small</small></h2>
        <div class="row">
            <div class="col-md-6 col-lg-2 mb-4">
                <h3>Headings <small class="text-muted">small</small></h3>
                <h4>H4 <small class="text-muted">small</small></h4>
                <h5>H5 <small class="text-muted">small</small></h5>
                <h6>H6 <small class="text-muted">small</small></h6>
            </div>
            <div class="col-md-6 mb-4">
                <h3>Lists</h3>
                <p>
                    This page should be used when creating and testing new designs to find usability and/or design issues.
                    {{ lipsum|replace({'…': '.'}) }}
                </p>
                <ul>
                    <li>Unordered</li>
                    <li>List</li>
                    <li>Items</li>
                </ul>
                <ol>
                    <li>Ordered</li>
                    <li>List</li>
                    <li>Items</li>
                </ol>
                <p>{{ linksum|raw }} {{ lipsum }}</p>
            </div>
            <div class="col-lg-4 mb-4">
                <h3>Themes</h3>
                <ul>
                    {% for id,theme in themes %}
                        <li>
                            <a href="{{ url('design', {'theme': id}) }}"
                                {%- if id == themeId %} class="text-info"{% endif %}>
                                {{ theme['name'] }}
                            </a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 col-lg-4 mb-4">
                <h3>Tables</h3>
                <table class="table table-striped">
                    <tr>
                        <th>Header 1</th>
                        <th>Header 2</th>
                        <th>Header 3</th>
                    </tr>
                    <tr>
                        <td>Table content</td>
                        <td>{{ lipsum }}</td>
                        <td><span class="text-success">{{ m.icon('check-lg') }}</span></td>
                    </tr>
                    <tr>
                        <td>Another content</td>
                        <td></td>
                        <td><span class="text-danger">{{ m.icon('x-lg') }}</span></td>
                    </tr>
                </table>
            </div>
            <div class="col-md-6 col-lg-4 mb-4">
                <h3>Navigation Tabs</h3>
                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Lorem</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Ipsum</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Dolor</a>
                    </li>
                </ul>
            </div>
            <div class="col-md-6 col-lg-4 mb-4">
                <h3>Navigation Pills</h3>
                <ul class="nav nav-pills flex-column">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Some</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Test</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Menu</a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="row">
            <div class="col-6 col-md-12 mb-4">
                <h3>Texts</h3>
                <p>
                    {{ linksum|raw }}<br>
                    {{ lipsum }} {{ lipsum|replace({'…': '.'}) }} {{ lipsum|replace({'…': '.'}) }} {{ lipsum }}
                </p>

                <div class="row mb-4">
                    {% for color in types %}
                        <div class="col-12 col-md-3">
                            <p class="text-{{ color }}">{{ color|capitalize }}: {{ linksum|raw }}</p>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-6 col-md-12 mb-4">
                <h3>Badges</h3>
                <p>
                    {% for type in types_color %}
                        <span class="badge bg-{{ type[0] }} text-{{ type[1] }}">{{ type[0]|capitalize }}</span>
                    {% endfor %}
                </p>
            </div>
            <div class="col-6 col-md-12 mb-4">
                <h3>Buttons</h3>
                <p>
                    {% for type in types_buttons %}
                        {{ f.button(type|capitalize, {'btn_type': type, 'name': 'button-' ~ type}) }}
                    {% endfor %}
                </p>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col">
                <h3>Alerts</h3>

                <div class="row">
                    {% for color in colors %}
                        <div class="col">
                            <h4>{{ color|capitalize }}</h4>
                            {{ m.alert(lipsum, color) }}
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-md-12 mb-3">
                <h3>Cards</h3>

                <div class="row">
                    {% for type in types %}
                        <div class="col mb-3">
                            <div class="card border-{{ type }} {{ m.type_bg_class() }}">
                                <h4 class="card-header bg-{{ type }}">{{ type|capitalize }}</h4>
                                <div class="card-body">
                                    <p class="card-text">{{ shortsum }}</p>
                                    <p class="card-text"><a href="#" class="card-link">Some link</a></p>
                                </div>
                                <div class="card-footer text-muted">
                                    Footer
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-md-12">
                <h3>Forms</h3>

                <div class="row">
                    <div class="col-md-3 col-lg-2">
                        {{ f.input('form-input-text', 'Text', 'text', {'value': 'Value'}) }}
                    </div>
                    <div class="col-md-3 col-lg-2">
                        {{ f.input('form-input-text-hidden-label', 'Hidden label', 'text', {'value': 'Hidden label', 'hide_label': true}) }}
                    </div>
                    <div class="col-md-3 col-lg-2">
                        {{ f.input('form-input-text-disabled', 'Disabled', 'text', {'disabled': true, 'value': 'Value'}) }}
                    </div>
                    <div class="col-md-3 col-lg-2">
                        {{ f.input('form-input-text-readonly', 'Readonly', 'text', {'readonly': true, 'value': 'Value'}) }}
                    </div>
                    <div class="col-md-3 col-lg-2">
                        {{ f.input('form-input-password', 'Password', 'password', {'value': 'Value'}) }}
                    </div>
                    <div class="col-md-3 col-lg-2">
                        {{ f.input('form-input-number', 'Number', 'number', {'value': 42}) }}
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3 col-lg-2">
                        {{ f.textarea('form-input-textarea', 'Textarea', {'rows': 2, 'value': lipsum}) }}
                    </div>
                    <div class="col-md-3 col-lg-2">
                        {{ f.select('form-input-select', {'lorem': 'Ipsum', 'dolor': 'Sit'}, 'Select', 'dolor') }}
                    </div>
                    <div class="col-md-3 col-lg-2">
                        <label class="form-label">Button</label>
                        <div>
                            {{ f.button('Button') }}
                        </div>
                    </div>
                    <div class="col-md-3 col-lg-2">
                        Submit button<br>
                        {{ f.submit() }}
                    </div>
                    <div class="col-md-3 col-lg-2">
                        Checkbox<br>
                        {{ f.checkbox('form-input-checkbox', 'Checkbox', true) }}
                        {{ f.checkbox('form-input-checkbox-2', 'Checkbox 2') }}
                    </div>
                    <div class="col-md-3 col-lg-2 checkbox-inline">
                        Radio<br>
                        <label>
                            <input type="radio" checked="checked" name="form-input-radio" value="1"> Yey
                        </label>
                        <label>
                            <input type="radio" name="form-input-radio"> Nay
                        </label>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3 col-lg-2">
                        <label class="form-label">Date</label>
                        <div class="input-group date" data-target-input="nearest">
                            <input type="date" placeholder="YYYY-MM-DD" name="design-date" class="form-control" value="2021-09-15">
                            <span class="input-group-text">
                                <span class="bi bi-grid-3x3-gap-fill"></span>
                            </span>
                        </div>
                    </div>
                    <div class="col-md-3 col-lg-2">
                        <label class="form-label">Datetime</label>
                        <div class="input-group datetime" data-target-input="nearest">
                            <input type="datetime-local" placeholder="YYYY-MM-DD HH:MM" name="design-datetime" class="form-control" value="2021-09-15T13:37">
                            <span class="input-group-text">
                                <span class="bi bi-grid-3x3-gap-fill"></span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <h3>Other</h3>
        <div class="row mb-4">
            <div class="col">
                <h4>Code</h4>
                <p>
                    <code>3.1415926535897932384626433832795</code>
                </p>
            </div>
            <div class="col">
                <h4>Pagination</h4>
                <ul class="pagination">
                    <li class="page-item active">
                        <a class="page-link" href="#">1</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">2</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">3</a>
                    </li>
                </ul>
            </div>
        </div>

        <h2>Macros</h2>
        <h3>base.twig</h3>
        <div class="row mb-4">
            <div class="col-md-3">
                <h4><code>angel()</code></h4>
                <p>{{ m.angel() }}</p>
            </div>
            <div class="col-md-3">
                <h4><code>icon(icon_name)</code></h4>
                <p>{{ m.icon('star') }}</p>
            </div>
            <div class="col-md-3">
                <h4><code>alert(message, type)</code></h4>
                <p>{{ m.alert('Test content', 'info') }}</p>
            </div>
            <div class="col-md-3">
                <h4><code>user(user)</code></h4>
                <p>{{ m.user(demo_user) }}<br>{{ m.user(demo_user_2) }}</p>
            </div>
            <div class="col-md-3">
                <h4><code>button(label, url, type, size)</code></h4>
                <p>{{ m.button('Label', '#', 'info', 'sm') }}</p>
            </div>
        </div>

        <h3>form.twig</h3>
        <div class="row mb-4">
            <div class="col-md-3">
                <h4><code>input(name, label, type, opt)</code></h4>
                <p>{{ f.input('input-name', 'Label', 'text', {'required': true, 'value': 'Value'}) }}</p>
            </div>

            <div class="col-md-3">
                <h4><code>textarea(name, label, opt)</code></h4>
                <p>{{ f.textarea('textarea-name', 'Label', {'required': true, 'rows': 2, 'value': lipsum}) }}</p>
            </div>

            <div class="col-md-3">
                <h4><code>select(name, data, label, selected)</code></h4>
                <p>{{ f.select('select-name', {'foo': 'Foo', 'bar': 'Bar'}, 'Label', 'bar') }}</p>
            </div>

            <div class="col-md-3">
                <h4><code>checkbox(name, label, checked, value)</code></h4>
                <p>
                    {{ f.checkbox('checkbox-name', 'Label', false) }}<br>
                    {{ f.checkbox('checkbox-name', 'Label', true, 'on') }}
                </p>
            </div>
            <div class="col-md-3">
                <h4><code>hidden(name, value)</code></h4>
                <p>
                    {{ f.hidden('hidden-name', 'hidden value') | escape }}
                </p>
            </div>

            <div class="col-md-3">
                <h4><code>button(label, opt)</code></h4>
                <p>
                    {{ f.button('Label', {'name': 'button-name', 'value': 'buton-value'}) }}
                </p>
            </div>

            <div class="col-md-3">
                <h4><code>submit(label, opt)</code></h4>
                <p>
                    {{ f.submit() }}
                </p>
            </div>
        </div>
    </div>
    </div>
{% endblock %}