449 lines
20 KiB
Twig
449 lines
20 KiB
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="#" onclick="return false">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>
|
|
<span id="elements" class="ref-id"></span>
|
|
<h2>Elements <small class="text-muted">small</small> <a href="#elements" class="ref-link">{{ m.icon('link') }}</a></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">
|
|
<span id="tables" class="ref-id"></span>
|
|
<h3>Tables <a href="#tables" class="ref-link">{{ m.icon('link') }}</a></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>Lorem ipsum</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="#" onclick="return false">Lorem</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#" onclick="return false">Ipsum</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#" onclick="return false">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="#" onclick="return false">Some</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#" onclick="return false">Test</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#" onclick="return false">Menu</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-6 col-md-12 mb-4">
|
|
<span id="texts" class="ref-id"></span>
|
|
<h3>Texts <a href="#texts" class="ref-link">{{ m.icon('link') }}</a></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">
|
|
<span id="badges" class="ref-id"></span>
|
|
<h3>Badges <a href="#badges" class="ref-link">{{ m.icon('link') }}</a></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">
|
|
<span id="buttons" class="ref-id"></span>
|
|
<h3>Buttons <a href="#buttons" class="ref-link">{{ m.icon('link') }}</a></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">
|
|
<span id="alerts" class="ref-id"></span>
|
|
<h3>Alerts <a href="#alerts" class="ref-link">{{ m.icon('link') }}</a></h3>
|
|
|
|
<div class="row">
|
|
{% for color in colors %}
|
|
<div class="col">
|
|
<h4>{{ color|capitalize }}</h4>
|
|
{{ m.alert(linksum, color, true) }}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-4">
|
|
<div class="col-md-12 mb-3">
|
|
<span id="cards" class="ref-id"></span>
|
|
<h3>Cards <a href="#cards" class="ref-link">{{ m.icon('link') }}</a></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="#" onclick="return false" 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">
|
|
<span id="forms" class="ref-id"></span>
|
|
<h3>Forms <a href="#forms" class="ref-link">{{ m.icon('link') }}</a></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-1', {'opt1': 'Option 1', 'opt2': 'Option 2', 'opt3': 'Another option', 'opt4': 'A looooooooong item item item item'}, 'Select 1', 'opt1') }}
|
|
{{ f.select('form-input-select-2', {'sh': 'Bash', 'js': 'JavaScript', 'p': 'PHP', 'py': 'Python'}, 'Select 2', 'js') }}
|
|
{{ f.select('form-input-select-2', selectOptions, 'Select 3', 'Option 7') }}
|
|
{{ f.select('date-select', dateSelectOptions, 'Date select') }}
|
|
</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">
|
|
Form submit
|
|
<form id="form">
|
|
{{ f.submit() }}
|
|
</form>
|
|
</div>
|
|
<div id="checkboxes" class="col-md-3 col-lg-2">
|
|
Checkbox<br>
|
|
{{ f.checkbox('form-input-checkbox', 'Checkbox 1', true, '1') }}
|
|
{{ f.checkbox('form-input-checkbox-2', 'Checkbox 2', false, '2') }}
|
|
{{ f.checkbox('form-input-checkbox-3', 'Checkbox 3', false, '3') }}
|
|
<div class="d-grid gap-2">
|
|
<div id="select-all-checkboxes" class="btn btn-sm btn-block btn-primary">
|
|
Select all
|
|
</div>
|
|
<div id="select-23-checkboxes" class="btn btn-sm btn-block btn-primary">
|
|
Select 2, 3
|
|
</div>
|
|
<div id="unselect-all-checkboxes" class="btn btn-sm btn-block btn-danger">
|
|
Unselect all
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 col-lg-2 checkbox-inline">
|
|
Radio<br>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" id="yey" checked="checked" name="form-input-radio" value="1">
|
|
<label class="form-check-label" for="yey">Yey</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" id="nay" name="form-input-radio">
|
|
<label class="form-check-label" for="nay">Nay</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-3 col-lg-2">
|
|
<label class="form-label" for="input_date">Date</label>
|
|
<input id="input_date" type="date" placeholder="YYYY-MM-DD" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" name="design-date" class="form-control" value="2021-09-15">
|
|
</div>
|
|
<div class="col-md-3 col-lg-2">
|
|
<label class="form-label" for="input_datetime_local">Datetime</label>
|
|
<input id="input_datetime_local" type="datetime-local" placeholder="YYYY-MM-DD HH:MM" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2} ([01][0-9]|2[0-3]):[0-5][0-9]" name="design-datetime" class="form-control" value="2021-09-15T13:37">
|
|
</div>
|
|
<div class="col-md-3 col-lg-2">
|
|
<label class="form-label" for="input_time">Time</label>
|
|
<input type="time" class="form-control" id="input_time" name="input_time" size="5" pattern="^\d{1,2}:\d{2}$" placeholder="HH:MM" maxlength="5" value="13:37">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<span id="other" class="ref-id"></span>
|
|
<h3>Other <a href="#other" class="ref-link">{{ m.icon('link') }}</a></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="#" onclick="return false">1</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#" onclick="return false">2</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#" onclick="return false">3</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col">
|
|
<h4>Countdowns</h4>
|
|
<ul>
|
|
<li title="{{ timestamp30s.format(__('Y-m-d H:i')) }}" data-countdown-ts="{{ timestamp30s.getTimestamp() }}">30s: %c</li>
|
|
<li title="{{ timestamp30m.format(__('Y-m-d H:i')) }}" data-countdown-ts="{{ timestamp30m.getTimestamp() }}">30m: %c</li>
|
|
<li title="{{ timestamp59m.format(__('Y-m-d H:i')) }}" data-countdown-ts="{{ timestamp59m.getTimestamp() }}">59m: %c</li>
|
|
<li title="{{ timestamp1h.format(__('Y-m-d H:i')) }}" data-countdown-ts="{{ timestamp1h.getTimestamp() }}">1h: %c</li>
|
|
<li title="{{ timestamp1h30m.format(__('Y-m-d H:i')) }}" data-countdown-ts="{{ timestamp1h30m.getTimestamp() }}">1h 30m: %c</li>
|
|
<li title="{{ timestamp1h31m.format(__('Y-m-d H:i')) }}" data-countdown-ts="{{ timestamp1h31m.getTimestamp() }}">1h 31m: %c</li>
|
|
<li title="{{ timestamp2h.format(__('Y-m-d H:i')) }}" data-countdown-ts="{{ timestamp2h.getTimestamp() }}">2h: %c</li>
|
|
<li title="{{ timestamp2d.format(__('Y-m-d H:i')) }}" data-countdown-ts="{{ timestamp2d.getTimestamp() }}">2d: %c</li>
|
|
<li title="{{ timestamp3m.format(__('Y-m-d H:i')) }}" data-countdown-ts="{{ timestamp3m.getTimestamp() }}">3m: %c</li>
|
|
<li title="{{ timestamp22y.format(__('Y-m-d H:i')) }}" data-countdown-ts="{{ timestamp22y.getTimestamp() }}">22y: %c</li>
|
|
</ul>
|
|
<ul>
|
|
<li title="{{ timestamp30mago.format(__('Y-m-d H:i')) }}" data-countdown-ts="{{ timestamp30mago.getTimestamp() }}">30m ago: %c</li>
|
|
<li title="{{ timestamp45mago.format(__('Y-m-d H:i')) }}" data-countdown-ts="{{ timestamp45mago.getTimestamp() }}">45m ago: %c</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<span id="macros" class="ref-id"></span>
|
|
<h2>Macros <a href="#macros" class="ref-link">{{ m.icon('link') }}</a></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, opt)</code></h4>
|
|
<p>
|
|
{{ m.user(demo_user) }}<br>
|
|
{{ m.user(demo_user_2, {'pronoun': true}) }}
|
|
</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>
|
|
|
|
<span id="bar_chart" class="ref-id"></span>
|
|
<h3>Bar Chart <a href="#bar_chart" class="ref-link">{{ m.icon('link') }}</a></h3>
|
|
{{ bar_chart | raw }}
|
|
</div>
|
|
</div>
|
|
<script>
|
|
document.getElementById('select-all-checkboxes').addEventListener('click', () => {
|
|
checkAll('checkboxes', true);
|
|
});
|
|
|
|
document.getElementById('unselect-all-checkboxes').addEventListener('click', () => {
|
|
checkAll('checkboxes', false);
|
|
});
|
|
|
|
document.getElementById('select-23-checkboxes').addEventListener('click', () => {
|
|
checkOwnTypes('checkboxes', [2, 3]);
|
|
});
|
|
|
|
document.getElementById('form').addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
return false;
|
|
});
|
|
</script>
|
|
{% endblock %}
|