mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-10-31 01:08:26 +00:00
bootstrap style in form fields, bootstrap integration for select2
This commit is contained in:
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
|
||||
require('select2/dist/css/select2.css');
|
||||
require('select2-bootstrap-theme/dist/select2-bootstrap.css');
|
||||
|
||||
require('./modules/breadcrumb/index.js');
|
||||
require('./modules/download-report/index.js');
|
||||
|
||||
@@ -15,7 +15,7 @@ h1, h2, .h1, .h2 {
|
||||
margin: 1.5em 10px;
|
||||
padding: .5em 15px;
|
||||
quotes: "\201C" "\201D" "\2018" "\2019";
|
||||
background-color: $gray-100;
|
||||
background-color: $gray-200;
|
||||
blockquote {
|
||||
border-left: 0.4em solid $gray-400;
|
||||
padding-left: 0.9em;
|
||||
@@ -23,17 +23,47 @@ h1, h2, .h1, .h2 {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
form fieldset {
|
||||
margin-top: 1em;
|
||||
& > legend {
|
||||
font-size: 1.438em;
|
||||
font-weight: 700;
|
||||
width: 100%;
|
||||
border-bottom: 3px solid $gray-200;
|
||||
margin-bottom: 1em;
|
||||
h2 {
|
||||
|
||||
@mixin title_in_form {
|
||||
font-size: 1.438em;
|
||||
font-weight: 700;
|
||||
width: 100%;
|
||||
border-bottom: 3px solid $gray-200;
|
||||
margin-bottom: 1em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
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 {
|
||||
@@ -75,7 +105,7 @@ nav.navbar {
|
||||
}
|
||||
.dropdown-menu {
|
||||
.dropdown-item {
|
||||
width: 120%;
|
||||
width: 120%;
|
||||
i {
|
||||
float: right;
|
||||
}
|
||||
|
||||
@@ -172,7 +172,10 @@
|
||||
<script type="text/javascript">
|
||||
window.addEventListener('DOMContentLoaded', function(e) {
|
||||
chill.checkOtherValueOnChange();
|
||||
$('.select2').select2({allowClear: true});
|
||||
$('.select2').select2({
|
||||
allowClear: true,
|
||||
theme: "bootstrap"
|
||||
});
|
||||
chill.categoryLinkParentChildSelect();
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -23,122 +23,90 @@
|
||||
{% block personcontent %}
|
||||
|
||||
<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>
|
||||
<legend><h2>{{ 'Memo'|trans }}</h2></legend>
|
||||
{{ 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'}) }}
|
||||
{% if form.memo is defined %}
|
||||
<fieldset>
|
||||
<legend><h2>{{ 'Memo'|trans }}</h2></legend>
|
||||
{{ form_row(form.memo, {'label' : 'Memo'} ) }}
|
||||
</fieldset>
|
||||
{% endif %}
|
||||
{{ form_row(form.gender, {'label' : 'Gender'}) }}
|
||||
{{ form_row(form.genderComment, { 'label' : 'Comment on the gender'} ) }}
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend><h2>{{ 'Birth information'|trans }}</h2></legend>
|
||||
{{ form_row(form.birthdate, {'label': 'Date of birth'} ) }}
|
||||
{%- if form.placeOfBirth is defined -%}
|
||||
{{ form_row(form.placeOfBirth, { 'label' : 'Place of birth'} ) }}
|
||||
{%- endif -%}
|
||||
{%- if form.countryOfBirth is defined -%}
|
||||
{{ form_row(form.countryOfBirth, { 'label' : 'Country of birth' } ) }}
|
||||
{%- endif -%}
|
||||
{%- if form.deathdate is defined -%}
|
||||
{{ form_row(form.deathdate, { 'label' : 'Date of death' } ) }}
|
||||
{%- endif -%}
|
||||
</fieldset>
|
||||
<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 %}
|
||||
{{ form_row(form.gender, {'label' : 'Gender'}) }}
|
||||
</fieldset>
|
||||
|
||||
{%- if form.nationality is defined or form.spokenLanguages is defined -%}
|
||||
<fieldset>
|
||||
<legend><h2>{{ 'Administrative information'|trans }}</h2></legend>
|
||||
{%- if form.nationality is defined -%}
|
||||
{{ form_row(form.nationality, { 'label' : 'Nationality'|trans} ) }}
|
||||
{%- endif -%}
|
||||
{%- if form.spokenLanguages is defined -%}
|
||||
{{ form_row(form.spokenLanguages, {'label' : 'Spoken languages'}) }}
|
||||
{%- endif -%}
|
||||
</fieldset>
|
||||
{%- endif -%}
|
||||
<fieldset>
|
||||
<legend><h2>{{ 'Birth information'|trans }}</h2></legend>
|
||||
{{ form_row(form.birthdate, {'label': 'Date of birth'} ) }}
|
||||
{%- if form.placeOfBirth is defined -%}
|
||||
{{ form_row(form.placeOfBirth, { 'label' : 'Place of birth'} ) }}
|
||||
{%- endif -%}
|
||||
{%- if form.countryOfBirth is defined -%}
|
||||
{{ form_row(form.countryOfBirth, { 'label' : 'Country of birth' } ) }}
|
||||
{%- endif -%}
|
||||
</fieldset>
|
||||
|
||||
{%- if form.numberOfChildren is defined or form.maritalStatus is defined -%}
|
||||
<fieldset>
|
||||
<legend><h2>{{ 'Marital status'|trans }}</h2></legend>
|
||||
{{ form_row(form.numberOfChildren, {'label' : 'Number of children'}) }}
|
||||
{%- if form.maritalStatus is defined -%}
|
||||
<div id="maritalStatus">
|
||||
{%- if form.nationality is defined or form.spokenLanguages is defined or form.maritalStatus is defined -%}
|
||||
<fieldset>
|
||||
<legend><h2>{{ 'Administrative information'|trans }}</h2></legend>
|
||||
{%- if form.nationality is defined -%}
|
||||
{{ form_row(form.nationality, { 'label' : 'Nationality'|trans} ) }}
|
||||
{%- 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'} ) }}
|
||||
</div>
|
||||
<div id="maritalStatusDate">
|
||||
{{ form_row(form.maritalStatusDate, { 'label' : 'Date of last marital status change'} ) }}
|
||||
{{ form_row(form.maritalStatusComment, { 'label' : 'Comment on the marital status'} ) }}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</fieldset>
|
||||
{%- endif -%}
|
||||
</fieldset>
|
||||
{%- endif -%}
|
||||
|
||||
{%- if form.email is defined or form.phonenumber is defined or form.mobilenumber is defined or form.contactInfo is defined-%}
|
||||
<fieldset>
|
||||
<legend><h2>{{ 'Contact information'|trans }}</h2></legend>
|
||||
{%- if form.email is defined -%}
|
||||
<div id="personEmail">
|
||||
{%- if form.email is defined or form.phonenumber is defined or form.mobilenumber is defined or form.contactInfo is defined-%}
|
||||
<fieldset>
|
||||
<legend><h2>{{ 'Contact information'|trans }}</h2></legend>
|
||||
{%- if form.email is defined -%}
|
||||
{{ form_row(form.email, {'label': 'Email'}) }}
|
||||
</div>
|
||||
<div id="personAcceptEmail">
|
||||
{{ form_row(form.acceptEmail, {'label' : 'Accept emails ?'}) }}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
|
||||
{%- if form.phonenumber is defined -%}
|
||||
{{ form_row(form.phonenumber, {'label': 'Phonenumber'}) }}
|
||||
{%- endif -%}
|
||||
{%- if form.mobilenumber is defined -%}
|
||||
<div id="personPhoneNumber">
|
||||
{%- endif -%}
|
||||
{%- if form.phonenumber is defined -%}
|
||||
{{ form_row(form.phonenumber, {'label': 'Phonenumber'}) }}
|
||||
{%- endif -%}
|
||||
{%- if form.mobilenumber is defined -%}
|
||||
{{ form_row(form.mobilenumber, {'label': 'Mobilenumber'}) }}
|
||||
</div>
|
||||
<div id="personAcceptSMS">
|
||||
{{ form_row(form.acceptSMS, {'label' : 'Accept short text message ?'}) }}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
{%- if form.contactInfo is defined -%}
|
||||
{{ form_row(form.contactInfo, {'label': 'Notes on contact information'}) }}
|
||||
{%- endif -%}
|
||||
</fieldset>
|
||||
{%- endif -%}
|
||||
{%- if form.otherPhoneNumbers is defined -%}
|
||||
{{ form_widget(form.otherPhoneNumbers) }}
|
||||
{{ form_errors(form.otherPhoneNumbers) }}
|
||||
{%- endif -%}
|
||||
{%- if form.contactInfo is defined -%}
|
||||
{{ form_row(form.contactInfo, {'label': 'Notes on contact information'}) }}
|
||||
{%- endif -%}
|
||||
</fieldset>
|
||||
{%- endif -%}
|
||||
|
||||
{{ form_rest(form) }}
|
||||
|
||||
<ul class="col-12 list-inline sticky-form-buttons">
|
||||
<li class="list-inline-item mr-auto">
|
||||
<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">
|
||||
<button class="btn btn-success" type="submit">
|
||||
<i class="fa fa-fw fa-save"></i>
|
||||
{{ 'Save'|trans }}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
{{ form_rest(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) }}
|
||||
{{ form_end(form) }}
|
||||
|
||||
|
||||
{% endblock personcontent %}
|
||||
|
||||
Reference in New Issue
Block a user