mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-07-31 04:57:46 +00:00
bootstrap style in form fields, bootstrap integration for select2
This commit is contained in:
parent
50727fc4b0
commit
bc240a6754
3
package.json.txt
Normal file
3
package.json.txt
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
add npm/yarn dependency in package.json :
|
||||||
|
|
||||||
|
"select2-bootstrap-theme": "0.1.0-beta.10",
|
||||||
@ -23,6 +23,7 @@ require('./js/collection/collections.js');
|
|||||||
|
|
||||||
// from node-modules
|
// from node-modules
|
||||||
require('select2/dist/css/select2.css');
|
require('select2/dist/css/select2.css');
|
||||||
|
require('select2-bootstrap-theme/dist/select2-bootstrap.css');
|
||||||
|
|
||||||
require('./modules/breadcrumb/index.js');
|
require('./modules/breadcrumb/index.js');
|
||||||
require('./modules/download-report/index.js');
|
require('./modules/download-report/index.js');
|
||||||
|
|||||||
@ -15,7 +15,7 @@ h1, h2, .h1, .h2 {
|
|||||||
margin: 1.5em 10px;
|
margin: 1.5em 10px;
|
||||||
padding: .5em 15px;
|
padding: .5em 15px;
|
||||||
quotes: "\201C" "\201D" "\2018" "\2019";
|
quotes: "\201C" "\201D" "\2018" "\2019";
|
||||||
background-color: $gray-100;
|
background-color: $gray-200;
|
||||||
blockquote {
|
blockquote {
|
||||||
border-left: 0.4em solid $gray-400;
|
border-left: 0.4em solid $gray-400;
|
||||||
padding-left: 0.9em;
|
padding-left: 0.9em;
|
||||||
@ -23,17 +23,47 @@ h1, h2, .h1, .h2 {
|
|||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
form fieldset {
|
|
||||||
margin-top: 1em;
|
@mixin title_in_form {
|
||||||
& > legend {
|
font-size: 1.438em;
|
||||||
font-size: 1.438em;
|
font-weight: 700;
|
||||||
font-weight: 700;
|
width: 100%;
|
||||||
width: 100%;
|
border-bottom: 3px solid $gray-200;
|
||||||
border-bottom: 3px solid $gray-200;
|
margin-bottom: 1em;
|
||||||
margin-bottom: 1em;
|
display: block;
|
||||||
h2 {
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
fieldset {
|
||||||
|
margin-top: 1em;
|
||||||
|
& > legend {
|
||||||
|
@include title_in_form;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
/* avoid useless html in first level of the custom fields row loop in forms
|
||||||
|
* (better should to improve the loop)
|
||||||
|
*/
|
||||||
|
& > div.container-fluid {
|
||||||
|
& > div.row > .parent {
|
||||||
|
padding: 0;
|
||||||
|
& div.cf-fields span.cf-title {
|
||||||
|
margin: 1em -15px 0;
|
||||||
|
width: calc(100% + 30px);
|
||||||
|
@include title_in_form;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sticky-form-buttons {
|
||||||
|
margin-top: 4em;
|
||||||
|
background-color: $beige;
|
||||||
|
position: sticky;
|
||||||
|
bottom: 0.3em;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
padding: 0.8em 1.6em;
|
||||||
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.chill_address {
|
div.chill_address {
|
||||||
@ -75,7 +105,7 @@ nav.navbar {
|
|||||||
}
|
}
|
||||||
.dropdown-menu {
|
.dropdown-menu {
|
||||||
.dropdown-item {
|
.dropdown-item {
|
||||||
width: 120%;
|
width: 120%;
|
||||||
i {
|
i {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -172,7 +172,10 @@
|
|||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
window.addEventListener('DOMContentLoaded', function(e) {
|
window.addEventListener('DOMContentLoaded', function(e) {
|
||||||
chill.checkOtherValueOnChange();
|
chill.checkOtherValueOnChange();
|
||||||
$('.select2').select2({allowClear: true});
|
$('.select2').select2({
|
||||||
|
allowClear: true,
|
||||||
|
theme: "bootstrap"
|
||||||
|
});
|
||||||
chill.categoryLinkParentChildSelect();
|
chill.categoryLinkParentChildSelect();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -23,122 +23,90 @@
|
|||||||
{% block personcontent %}
|
{% block personcontent %}
|
||||||
|
|
||||||
<h1>{{ 'Update details for %name%'|trans({ '%name%': person.firstName|capitalize ~ ' ' ~ person.lastName|capitalize } ) }}</h1>
|
<h1>{{ 'Update details for %name%'|trans({ '%name%': person.firstName|capitalize ~ ' ' ~ person.lastName|capitalize } ) }}</h1>
|
||||||
|
{% form_theme form '@ChillMain/Form/fields.html.twig' %}
|
||||||
|
|
||||||
{% form_theme form '@ChillMain/Form/fields.html.twig' %}
|
{{ form_start(form) }}
|
||||||
|
|
||||||
{{ form_start(form) }}
|
{% if form.memo is defined %}
|
||||||
|
<fieldset>
|
||||||
{% if form.memo is defined %}
|
<legend><h2>{{ 'Memo'|trans }}</h2></legend>
|
||||||
<fieldset>
|
{{ form_row(form.memo, {'label' : 'Memo'} ) }}
|
||||||
<legend><h2>{{ 'Memo'|trans }}</h2></legend>
|
</fieldset>
|
||||||
{{ form_row(form.memo, {'label' : 'Memo'} ) }}
|
|
||||||
</fieldset>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<fieldset>
|
|
||||||
<legend><h2>{{ 'General information'|trans }}</h2></legend>
|
|
||||||
{{ form_row(form.firstName, {'label' : 'First name'}) }}
|
|
||||||
{{ form_row(form.lastName, {'label' : 'Last name'}) }}
|
|
||||||
{% if form.altNames is defined %}
|
|
||||||
{{ form_widget(form.altNames, { 'label': 'Alternative names'}) }}
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{{ form_row(form.gender, {'label' : 'Gender'}) }}
|
|
||||||
{{ form_row(form.genderComment, { 'label' : 'Comment on the gender'} ) }}
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<legend><h2>{{ 'Birth information'|trans }}</h2></legend>
|
<legend><h2>{{ 'General information'|trans }}</h2></legend>
|
||||||
{{ form_row(form.birthdate, {'label': 'Date of birth'} ) }}
|
{{ form_row(form.firstName, {'label' : 'First name'}) }}
|
||||||
{%- if form.placeOfBirth is defined -%}
|
{{ form_row(form.lastName, {'label' : 'Last name'}) }}
|
||||||
{{ form_row(form.placeOfBirth, { 'label' : 'Place of birth'} ) }}
|
{% if form.altNames is defined %}
|
||||||
{%- endif -%}
|
{{ form_widget(form.altNames, { 'label': 'Alternative names'}) }}
|
||||||
{%- if form.countryOfBirth is defined -%}
|
{% endif %}
|
||||||
{{ form_row(form.countryOfBirth, { 'label' : 'Country of birth' } ) }}
|
{{ form_row(form.gender, {'label' : 'Gender'}) }}
|
||||||
{%- endif -%}
|
</fieldset>
|
||||||
{%- if form.deathdate is defined -%}
|
|
||||||
{{ form_row(form.deathdate, { 'label' : 'Date of death' } ) }}
|
|
||||||
{%- endif -%}
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
{%- if form.nationality is defined or form.spokenLanguages is defined -%}
|
<fieldset>
|
||||||
<fieldset>
|
<legend><h2>{{ 'Birth information'|trans }}</h2></legend>
|
||||||
<legend><h2>{{ 'Administrative information'|trans }}</h2></legend>
|
{{ form_row(form.birthdate, {'label': 'Date of birth'} ) }}
|
||||||
{%- if form.nationality is defined -%}
|
{%- if form.placeOfBirth is defined -%}
|
||||||
{{ form_row(form.nationality, { 'label' : 'Nationality'|trans} ) }}
|
{{ form_row(form.placeOfBirth, { 'label' : 'Place of birth'} ) }}
|
||||||
{%- endif -%}
|
{%- endif -%}
|
||||||
{%- if form.spokenLanguages is defined -%}
|
{%- if form.countryOfBirth is defined -%}
|
||||||
{{ form_row(form.spokenLanguages, {'label' : 'Spoken languages'}) }}
|
{{ form_row(form.countryOfBirth, { 'label' : 'Country of birth' } ) }}
|
||||||
{%- endif -%}
|
{%- endif -%}
|
||||||
</fieldset>
|
</fieldset>
|
||||||
{%- endif -%}
|
|
||||||
|
|
||||||
{%- if form.numberOfChildren is defined or form.maritalStatus is defined -%}
|
{%- if form.nationality is defined or form.spokenLanguages is defined or form.maritalStatus is defined -%}
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<legend><h2>{{ 'Marital status'|trans }}</h2></legend>
|
<legend><h2>{{ 'Administrative information'|trans }}</h2></legend>
|
||||||
{{ form_row(form.numberOfChildren, {'label' : 'Number of children'}) }}
|
{%- if form.nationality is defined -%}
|
||||||
{%- if form.maritalStatus is defined -%}
|
{{ form_row(form.nationality, { 'label' : 'Nationality'|trans} ) }}
|
||||||
<div id="maritalStatus">
|
{%- endif -%}
|
||||||
|
{%- if form.spokenLanguages is defined -%}
|
||||||
|
{{ form_row(form.spokenLanguages, {'label' : 'Spoken languages'}) }}
|
||||||
|
{%- endif -%}
|
||||||
|
{%- if form.maritalStatus is defined -%}
|
||||||
{{ form_row(form.maritalStatus, { 'label' : 'Marital status'} ) }}
|
{{ form_row(form.maritalStatus, { 'label' : 'Marital status'} ) }}
|
||||||
</div>
|
{%- endif -%}
|
||||||
<div id="maritalStatusDate">
|
</fieldset>
|
||||||
{{ form_row(form.maritalStatusDate, { 'label' : 'Date of last marital status change'} ) }}
|
|
||||||
{{ form_row(form.maritalStatusComment, { 'label' : 'Comment on the marital status'} ) }}
|
|
||||||
</div>
|
|
||||||
{%- endif -%}
|
{%- endif -%}
|
||||||
</fieldset>
|
|
||||||
{%- endif -%}
|
|
||||||
|
|
||||||
{%- if form.email is defined or form.phonenumber is defined or form.mobilenumber is defined or form.contactInfo is defined-%}
|
{%- if form.email is defined or form.phonenumber is defined or form.mobilenumber is defined or form.contactInfo is defined-%}
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<legend><h2>{{ 'Contact information'|trans }}</h2></legend>
|
<legend><h2>{{ 'Contact information'|trans }}</h2></legend>
|
||||||
{%- if form.email is defined -%}
|
{%- if form.email is defined -%}
|
||||||
<div id="personEmail">
|
|
||||||
{{ form_row(form.email, {'label': 'Email'}) }}
|
{{ form_row(form.email, {'label': 'Email'}) }}
|
||||||
</div>
|
{%- endif -%}
|
||||||
<div id="personAcceptEmail">
|
{%- if form.phonenumber is defined -%}
|
||||||
{{ form_row(form.acceptEmail, {'label' : 'Accept emails ?'}) }}
|
{{ form_row(form.phonenumber, {'label': 'Phonenumber'}) }}
|
||||||
</div>
|
{%- endif -%}
|
||||||
{%- endif -%}
|
{%- if form.mobilenumber is defined -%}
|
||||||
|
|
||||||
{%- if form.phonenumber is defined -%}
|
|
||||||
{{ form_row(form.phonenumber, {'label': 'Phonenumber'}) }}
|
|
||||||
{%- endif -%}
|
|
||||||
{%- if form.mobilenumber is defined -%}
|
|
||||||
<div id="personPhoneNumber">
|
|
||||||
{{ form_row(form.mobilenumber, {'label': 'Mobilenumber'}) }}
|
{{ form_row(form.mobilenumber, {'label': 'Mobilenumber'}) }}
|
||||||
</div>
|
{%- endif -%}
|
||||||
<div id="personAcceptSMS">
|
{%- if form.contactInfo is defined -%}
|
||||||
{{ form_row(form.acceptSMS, {'label' : 'Accept short text message ?'}) }}
|
{{ form_row(form.contactInfo, {'label': 'Notes on contact information'}) }}
|
||||||
</div>
|
{%- endif -%}
|
||||||
|
</fieldset>
|
||||||
{%- endif -%}
|
{%- endif -%}
|
||||||
{%- if form.otherPhoneNumbers is defined -%}
|
|
||||||
{{ form_widget(form.otherPhoneNumbers) }}
|
{{ form_rest(form) }}
|
||||||
{{ form_errors(form.otherPhoneNumbers) }}
|
|
||||||
{%- endif -%}
|
<ul class="col-12 list-inline sticky-form-buttons">
|
||||||
{%- if form.contactInfo is defined -%}
|
<li class="list-inline-item mr-auto">
|
||||||
{{ form_row(form.contactInfo, {'label': 'Notes on contact information'}) }}
|
<a href="{{ path('chill_person_view', {'person_id' : person.id}) }}" class="btn btn-secondary">
|
||||||
{%- endif -%}
|
<i class="fa fa-arrow-left"></i>
|
||||||
</fieldset>
|
{{ 'Return'|trans }}
|
||||||
{%- endif -%}
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="list-inline-item">
|
||||||
|
<button class="btn btn-success" type="submit">
|
||||||
|
<i class="fa fa-fw fa-save"></i>
|
||||||
|
{{ 'Save'|trans }}
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
{{ form_rest(form) }}
|
{{ form_end(form) }}
|
||||||
|
|
||||||
|
|
||||||
<ul class="col-12 list-inline sticky-form-buttons record_actions ">
|
|
||||||
<li class="list-inline-item justify-content-start">
|
|
||||||
<a href="{{ path('chill_person_view', {'person_id' : person.id}) }}" class="btn btn-secondary">
|
|
||||||
<i class="fa fa-arrow-left"></i>
|
|
||||||
{{ 'Return'|trans }}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="list-inline-item justify-content-end">
|
|
||||||
<button class="btn btn-success" type="submit">{{ 'Save'|trans }}</button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
|
|
||||||
{{ form_end(form) }}
|
|
||||||
|
|
||||||
|
|
||||||
{% endblock personcontent %}
|
{% endblock personcontent %}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user