bootstrap content with vertical right person menu

This commit is contained in:
Mathieu Jaumotte 2021-03-20 23:41:58 +01:00
parent fe2f107ddc
commit 2916babe1c
7 changed files with 258 additions and 292 deletions

View File

@ -7,9 +7,32 @@ h1, h2, .h1, .h2 {
}
.open_sansbold {
font-weight: bold;
}
.chill-user-quote {
border-left: 10px solid #eec84a;
margin: 1.5em 10px;
padding: .5em 10px;
quotes: "\201C" "\201D" "\2018" "\2019";
background-color: #e6e6e6;
}
div.chill_address {
div.chill_address_address {
margin: .7em 0;
font-size: 98%;
font-variant: small-caps;
p {
display: inline-block;
margin: 0 0 0 1.5em;
text-indent: -1.5em;
}
}
}
html, body {
min-height: 100%;
height: 100%;

View File

@ -70,7 +70,7 @@ $colors: map-merge(
);
$primary: $blue;
$secondary: $gray-600;
$secondary: $gray-200;
$success: $green;
$info: $yellow;
$warning: $orange;
@ -128,7 +128,7 @@ $enable-hover-media-query: false !default; // Deprecated, no
$enable-grid-classes: true !default;
$enable-pointer-cursor-for-buttons: true !default;
$enable-print-styles: true !default;
$enable-responsive-font-sizes: false !default;
$enable-responsive-font-sizes: true !default;
$enable-validation-icons: true !default;
$enable-deprecation-messages: true !default;
@ -996,9 +996,9 @@ $modal-scale-transform: scale(1.02) !default;
$alert-padding-y: .75rem !default;
$alert-padding-x: 1.25rem !default;
$alert-margin-bottom: 1rem !default;
$alert-border-radius: $border-radius !default;
$alert-border-radius: 0 !default;
$alert-link-font-weight: $font-weight-bold !default;
$alert-border-width: $border-width !default;
$alert-border-width: 0 !default;
$alert-bg-level: -10 !default;
$alert-border-level: -9 !default;

View File

@ -111,9 +111,10 @@
<div id="content_conainter">
{% block sublayout_containter %}
<div class="container-fluid content">
<div class="row justify-content-center">
{# Flash messages ! #}
{% for flashMessage in app.session.flashbag.get('success') %}
<div class="grid-8 centered success flash_message">
<div class="col-8 alert alert-success flash_message">
<span>
{{ flashMessage|raw }}
</span>
@ -121,7 +122,7 @@
{% endfor %}
{% for flashMessage in app.session.flashbag.get('error') %}
<div class="grid-8 centered error flash_message">
<div class="col-8 alert alert-danger flash_message">
<span>
{{ flashMessage|raw }}
</span>
@ -129,7 +130,7 @@
{% endfor %}
{% for flashMessage in app.session.flashbag.get('notice') %}
<div class="grid-8 centered notice flash_message">
<div class="col-8 alert alert-warning flash_message">
<span>
{{ flashMessage|raw }}
</span>
@ -154,6 +155,7 @@
{{ chill_widget('homepage', {} ) }}
</div>
{% endblock %}
</div>
</div>
{% endblock %}
</div>

View File

@ -28,9 +28,10 @@
<div class="row">
<div class="col-8 ml-auto">
{# Flash messages ! #}
<div class="container-fluid">
<div class="container-fluid mt-5">
<div class="row justify-content-center">
{% for flashMessage in app.session.flashbag.get('success') %}
<div class="grid-8 centered success flash_message">
<div class="col-8 alert alert-success flash_message">
<span>
{{ flashMessage|raw }}
</span>
@ -38,7 +39,7 @@
{% endfor %}
{% for flashMessage in app.session.flashbag.get('error') %}
<div class="grid-8 centered error flash_message">
<div class="col-8 alert alert-danger flash_message">
<span>
{{ flashMessage|raw }}
</span>
@ -46,12 +47,13 @@
{% endfor %}
{% for flashMessage in app.session.flashbag.get('notice') %}
<div class="grid-8 centered notice flash_message">
<div class="col-8 alert alert-warning flash_message">
<span>
{{ flashMessage|raw }}
</span>
</div>
{% endfor %}
</div>
</div>
{% block layout_wvm_content %}<!-- content of the layoutWithVerticalMenu is empty -->

View File

@ -1 +1 @@
<a class="sc-button black" href="{{ path(form_path_key, form_path_args) }}">{{ 'Edit'|trans|upper }}</a>
<a class="btn btn-dark" href="{{ path(form_path_key, form_path_args) }}">{{ 'Edit'|trans|upper }}</a>

View File

@ -39,298 +39,237 @@ This view should receive those arguments:
{% block personcontent %}
<div class="person-view">
<div class="row justify-content-center">
<div class="grid-10 push-1 grid-mobile-12 grid-tablet-12 push-mobile-0 push-tablet-0 parent">
{% if person.memo is not empty and chill_person.fields.memo == 'visible' %}
<div class="grid-12">
<figure class="person-details">
<h2 class="chill-red">{{ 'Memo'|trans }}</h2>
</figure>
<div class="col-10">
<div class="row">
{% if person.memo is not empty and chill_person.fields.memo == 'visible' %}
<div class="col-12">
<figure class="person-details">
<h2 class="chill-red">{{ 'Memo'|trans }}</h2>
{#<p><blockquote>{{ person.memo|nl2br }}</blockquote></p>#}
<div class="chill-user-quote">
{{ person.memo|chill_markdown_to_html }}
<div class="chill-user-quote">
{{ person.memo|chill_markdown_to_html }}
</div>
</figure>
</div>
{% endif %}
<div class="col-6 my-3">
<figure class="person-details">
<h2 class="chill-red">{{ 'General information'|trans }}</h2>
<dl>
<dt>{{ 'First name'|trans }}&nbsp;:</dt>
<dd>{{ person.firstName }}</dd>
<dt>{{ 'Last name'|trans }}&nbsp;:</dt>
<dd>{{ person.lastName }}</dd>
{% for el in person.altNames %}
{% if el.key in alt_names|keys %}
<dt>{{ alt_names[el.key]|localize_translatable_string }}&nbsp;:</dt>
<dd>{{ el.label }}</dd>
{% endif %}
{% endfor %}
<dt>{{ 'Gender'|trans }}&nbsp;:</dt>
<dd>{{ ( person.gender|default('Not given'))|trans }}</dd>
</dl>
{% if is_granted('CHILL_PERSON_UPDATE', person) %}
{{ include(edit_tmp_name, edit_tmp_args) }}
{% endif %}
</figure>
</div>
<div class="col-6 my-3">
<figure class="person-details">
<h2 class="chill-green"><i class="fa fa-birthday-cake"></i>&nbsp;{{ 'Birth information'|trans }}</h2>
<dl>
<dt>{{ 'Date of birth'|trans }}&nbsp;:</dt>
<dd>
{%- if person.birthdate is not null -%}
{{ person.birthdate|format_date('long') }}
{%- else -%}
<span class="chill-no-data-statement">{{ 'Unknown date of birth'|trans }}</span>
{%- endif -%}
</dd>
{%- if chill_person.fields.place_of_birth == 'visible' -%}
<dt>{{ 'Place of birth'|trans }}&nbsp;:</dt>
{% if person.placeOfBirth is not empty %}
<dd>{{ person.placeOfBirth }}</dd>
{% else %}
<dd><span class="chill-no-data-statement">{{ 'Not given'|trans }}</span></dd>
{% endif %}
{%- endif -%}
{%- if chill_person.fields.country_of_birth == 'visible' -%}
<dt>{{ 'Country of birth'|trans }}&nbsp;:</dt>
<dd>{% apply spaceless %}
{% if person.countryOfBirth is not null %}
{{ person.countryOfBirth.name|localize_translatable_string }}
{% else %}
<span class="chill-no-data-statement">{{ 'Unknown country of birth'|trans }}</span>
{% endif %}
{% endapply %}</dd>
{%- endif -%}
</dl>
{% if is_granted('CHILL_PERSON_UPDATE', person) %}
{{ include(edit_tmp_name, edit_tmp_args) }}
{% endif %}
</figure>
</div>
</div>
</div>
</div>
{% endif %}
<div class="grid-6">
<figure class="person-details">
<h2 class="chill-red">{{ 'General information'|trans }}</h2>
<div class="col-10">
<div class="row">
{%- if chill_person.fields.nationality == 'visible' or chill_person.fields.spoken_languages == 'visible'-%}
<div class="col-6 my-3">
<figure class="person-details">
<h2 class="chill-orange">{{ 'Administrative information'|trans }}</h2>
<dl>
<dt>{{ 'First name'|trans }}&nbsp;:</dt>
<dd>{{ person.firstName }}</dd>
{%- if chill_person.fields.nationality == 'visible' -%}
<dl>
<dt>{{ 'Nationality'|trans }}&nbsp;:</dt>
<dd>
{% if person.nationality is not null %}
{{ person.nationality.name|localize_translatable_string }}
{% else %}
<span class="chill-no-data-statement">{{ 'Without nationality'|trans }}</span>
{% endif %}
</dd>
</dl>
{%- endif -%}
{%- if chill_person.fields.spoken_languages == 'visible' -%}
<dl>
<dt>{{'Spoken languages'|trans}}&nbsp;:</dt>
<dd>
{% if person.spokenLanguages|length == 0 %}
<span class="chill-no-data-statement">{{ 'Unknown spoken languages'|trans }}</span>
{% else %}
{% for lang in person.spokenLanguages %}
{{ lang.name|localize_translatable_string }}{% if not loop.last %},{% endif %}
{% endfor %}
{% endif %}
</dd>
</dl>
{%- endif -%}
{%- if chill_person.fields.marital_status == 'visible' -%}
<dl>
<dt>{{'Marital status'|trans}}&nbsp;:</dt>
<dd>
{% if person.maritalStatus is not null %}
{{ person.maritalStatus.name|localize_translatable_string }}
{% else %}
<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
{% endif %}
</dd>
</dl>
{%- endif -%}
<dt>{{ 'Last name'|trans }}&nbsp;:</dt>
<dd>{{ person.lastName }}</dd>
{% for el in person.altNames %}
{% if el.key in alt_names|keys %}
<dt>{{ alt_names[el.key]|localize_translatable_string }}&nbsp;:</dt>
<dd>{{ el.label }}</dd>
{% endif %}
{% endfor %}
<dt>{{ 'Gender'|trans }}&nbsp;:</dt>
<dd>{{ ( person.gender|default('Not given'))|trans }}</dd>
{% if not person.genderComment.isEmpty %}
<dt>{{ 'Gender comment'|trans }}&nbsp;:</dt>
<dd>{{ person.genderComment|chill_entity_render_box }}</dd>
{% endif %}
</dl>
</figure>
</div>
<div class="grid-6">
<figure class="person-details">
<h2 class="chill-green"><i class="fa fa-birthday-cake"></i>&nbsp;{{ 'Birth information'|trans }}</h2>
<dl>
<dt>{{ 'Date of birth'|trans }}&nbsp;:</dt>
<dd>
{%- if person.birthdate is not null -%}
{{ person.birthdate|format_date('long') }}
{%- else -%}
<span class="chill-no-data-statement">{{ 'Unknown date of birth'|trans }}</span>
{%- endif -%}
</dd>
{%- if chill_person.fields.place_of_birth == 'visible' -%}
<dt>{{ 'Place of birth'|trans }}&nbsp;:</dt>
{% if person.placeOfBirth is not empty %}
<dd>{{ person.placeOfBirth }}</dd>
{% else %}
<dd><span class="chill-no-data-statement">{{ 'Not given'|trans }}</span></dd>
{% endif %}
{% if is_granted('CHILL_PERSON_UPDATE', person) %}
{{ include(edit_tmp_name, edit_tmp_args) }}
{% endif %}
</figure>
</div>
{%- endif -%}
{%- if chill_person.fields.country_of_birth == 'visible' -%}
<dt>{{ 'Country of birth'|trans }}&nbsp;:</dt>
<dd>{% apply spaceless %}
{% if person.countryOfBirth is not null %}
{{ person.countryOfBirth.name|localize_translatable_string }}
{% else %}
<span class="chill-no-data-statement">{{ 'Unknown country of birth'|trans }}</span>
{% endif %}
{% endapply %}</dd>
{%- if chill_person.fields.email == 'visible' or chill_person.fields.phonenumber == 'visible' or chill_person.fields.mobilenumber == 'visible' or chill_person.fields.contact_info == 'visible' -%}
<div class="col-6 my-3">
<figure class="person-details">
<h2 class="chill-blue"><i class="fa fa-envelope-o"></i>&nbsp;{{ 'Contact information'|trans }}</h2>
{%- if chill_person.fields.address == 'visible' -%}
<dl>
<dt>{{ 'Address'|trans }}</dt>
<dd>
{%- if person.lastAddress is not empty -%}
{{ address._render(person.lastAddress, {'has_no_address': true}) }}
<ul class="list-inline text-right mt-2">
<li class="list-inline-item">
<a class="btn btn-warning btn-sm" title="{{ 'Edit'|trans }}"
href="{{ path('chill_person_address_edit', { 'person_id': person.id, 'address_id' : person.lastAddress.id } ) }}">
<i class="fa fa-pencil fa-fw"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-secondary btn-sm" title="{{ "Addresses'history"|trans }}"
href="{{ path('chill_person_address_list', { 'person_id': person.id } ) }}">
<i class="fa fa-list fa-fw"></i>
</a>
</li>
</ul>
{%- else -%}
<span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
<a href="{{ path('chill_person_address_new', { 'person_id' : person.id } ) }}" class="">
{{ 'Add an address'|trans }}
</a>
{%- endif -%}
</dd>
</dl>
{%- endif -%}
{%- if chill_person.fields.email == 'visible' -%}
<dl>
<dt>{{ 'Email'|trans }}&nbsp;:</dt>
<dd>{% if person.email is not empty %}<blockquote class="chill-user-quote">{{ person.email|nl2br }}</blockquote>{% else %}<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>{% endif %}</dd>
</dl>
{%- endif -%}
{%- if chill_person.fields.phonenumber == 'visible' -%}
<dl>
<dt>{{ 'Phonenumber'|trans }}&nbsp;:</dt>
<dd>{% if person.phonenumber is not empty %}<a href="tel:{{ person.phonenumber }}"><pre>{{ person.phonenumber|chill_format_phonenumber }}</pre></a>{% else %}<span class="chill-no-data-statement">{{ 'No data given'|trans }}{% endif %}</dd>
</dl>
{% endif %}
{%- if chill_person.fields.mobilenumber == 'visible' -%}
<dl>
<dt>{{ 'Mobilenumber'|trans }}&nbsp;:</dt>
<dd>{% if person.mobilenumber is not empty %}<a href="tel:{{ person.mobilenumber }}"><pre>{{ person.mobilenumber|chill_format_phonenumber }}</pre></a>{% else %}<span class="chill-no-data-statement">{{ 'No data given'|trans }}{% endif %}</dd>
</dl>
{% endif %}
{%- if chill_person.fields.contact_info == 'visible' -%}
<dl>
<dt>{{ 'Notes on contact information'|trans }}&nbsp;:</dt>
<dd>{% if person.contactInfo is not empty %}{{ person.contactInfo|nl2br }}{% else %}<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>{% endif %}</dd>
</dl>
{%- endif -%}
{% if is_granted('CHILL_PERSON_UPDATE', person) %}
{{ include(edit_tmp_name, edit_tmp_args) }}
{% endif %}
</figure>
</div>
{%- endif -%}
</div>
</div>
{% if person.deathdate is not null %}
<dt>{{ 'Date of death'|trans }}&nbsp;:</dt>
<dd>{{ person.deathdate|format_date('long') }}</dd>
{% endif %}
{% if cFGroup and (cFGroup.getActiveCustomFields|length > 0) %}
<div class="col-10">
<div class="row">
<div class="col-12 custom-fields">
<figure class="person-details">
{{ chill_custom_fields_group_widget(person.cFData, cFGroup) }}
</figure>
</div>
</div>
</div>
</dl>
</figure>
</div>
</div>
<div class="grid-10 push-1 grid-mobile-12 grid-tablet-12 push-mobile-0 push-tablet-0 parent">
{%- if chill_person.fields.nationality == 'visible' or chill_person.fields.spoken_languages == 'visible'-%}
<div class="grid-6">
<figure class="person-details">
<h2 class="chill-orange">{{ 'Administrative information'|trans }}</h2>
{%- if chill_person.fields.nationality == 'visible' -%}
<dl>
<dt>{{ 'Nationality'|trans }}&nbsp;:</dt>
<dd>
{% if person.nationality is not null %}
{{ person.nationality.name|localize_translatable_string }}
{% else %}
<span class="chill-no-data-statement">{{ 'Without nationality'|trans }}</span>
{% endif %}
</dd>
</dl>
{%- endif -%}
{%- if chill_person.fields.spoken_languages == 'visible' -%}
<dl>
<dt>{{'Spoken languages'|trans}}&nbsp;:</dt>
<dd>
{% if person.spokenLanguages|length == 0 %}
<span class="chill-no-data-statement">{{ 'Unknown spoken languages'|trans }}</span>
{% else %}
{% for lang in person.spokenLanguages %}
{{ lang.name|localize_translatable_string }}{% if not loop.last %},{% endif %}
{% endfor %}
{% endif %}
</dd>
</dl>
{%- endif -%}
{%-if chill_person.fields.number_of_children == 'visible' -%}
<dl>
<dt>{{'Number of children'|trans}}&nbsp;:</dt>
<dd>
{% if person.numberOfChildren is not null %}
{{ person.numberOfChildren }}
{% else %}
<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
{% endif %}
</dd>
</dl>
{%- endif -%}
{%- if chill_person.fields.marital_status == 'visible' -%}
<dl>
<dt>{{'Marital status'|trans}}&nbsp;:</dt>
<dd>
{% if person.maritalStatus is not null %}
{{ person.maritalStatus.name|localize_translatable_string }}
{% else %}
<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
{% endif %}
</dd>
</dl>
<dl>
<dt>{{'Date of last marital status change'|trans}}&nbsp;:</dt>
{% if person.maritalStatusDate is not null %}
<dd>
{{ person.maritalStatusDate|format_date('long') }}
</dd>
{% endif %}
</dl>
<dl>
{% if not person.maritalStatusComment.isEmpty %}
<dt>{{'Comment on the marital status'|trans}}&nbsp;:</dt>
<dd>
{{ person.maritalStatusComment|chill_entity_render_box }}
</dd>
{% endif %}
</dl>
{%- endif -%}
</figure>
</div>
{%- endif -%}
{%- if chill_person.fields.email == 'visible' or chill_person.fields.phonenumber == 'visible' or chill_person.fields.mobilenumber == 'visible' or chill_person.fields.contact_info == 'visible' -%}
<div class="grid-6">
<figure class="person-details">
<h2 class="chill-blue"><i class="fa fa-envelope-o"></i>&nbsp;{{ 'Contact information'|trans }}</h2>
{%- if chill_person.fields.address == 'visible' -%}
<dl>
<dt>{{ 'Address'|trans }}</dt>
<dd>
{%- if person.lastAddress is not empty -%}
{{ address._render(person.lastAddress, {'has_no_address': true}) }}
<ul class="record_actions record_actions_small">
<li>
<a href="{{ path('chill_person_address_edit', { 'person_id': person.id, 'address_id' : person.lastAddress.id } ) }}" class="sc-button has-hidden button-small bt-edit">
<span class="show-on-hover">{{ 'Edit'|trans }}</span>
</a>
</li>
<li>
<a href="{{ path('chill_person_address_list', { 'person_id': person.id } ) }}" class="sc-button has-hidden button-small">
<i class="fa fa-list" aria-hidden="true"></i><span class="show-on-hover">{{ "Addresses'history"|trans }}</span>
</a>
</li>
</ul>
{%- else -%}
<span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
<a href="{{ path('chill_person_address_new', { 'person_id' : person.id } ) }}" class="">
{{ 'Add an address'|trans }}
</a>
{%- endif -%}
</dd>
</dl>
{%- endif -%}
{%- if chill_person.fields.email == 'visible' -%}
<dl>
<dt>{{ 'Email'|trans }}&nbsp;:</dt>
<dd>{% if person.email is not empty %}<a href="mailto:{{ person.email|escape('html_attr') }}">{{ person.email }}</a>{% else %}<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>{% endif %}</dd>
{%- if person.email is not empty and person.acceptEmail -%}
<dd>
<span class="badge badge-secondary">
{{- 'Accept emails'|trans -}}
</span>
</dd>
{%- endif -%}
</dl>
{%- endif -%}
{%- if chill_person.fields.phonenumber == 'visible' -%}
<dl>
<dt>{{ 'Phonenumber'|trans }}&nbsp;:</dt>
<dd>{% if person.phonenumber is not empty %}<a href="tel:{{ person.phonenumber }}"><pre>{{ person.phonenumber|chill_format_phonenumber }}</pre></a>{% else %}<span class="chill-no-data-statement">{{ 'No data given'|trans }}{% endif %}</dd>
</dl>
{% endif %}
{%- if chill_person.fields.mobilenumber == 'visible' -%}
<dl>
<dt>{{ 'Mobilenumber'|trans }}&nbsp;:</dt>
<dd>{% if person.mobilenumber is not empty %}<a href="tel:{{ person.mobilenumber }}"><pre>{{ person.mobilenumber|chill_format_phonenumber }}</pre></a>{% else %}<span class="chill-no-data-statement">{{ 'No data given'|trans }}{% endif %}</dd>
{%- if person.mobilenumber is not empty and person.acceptSMS -%}
<dd>
<span class="badge badge-secondary">
{{- 'Accept short text message'|trans -}}
</span>
</dd>
{%- endif -%}
</dl>
{% endif %}
{% for pp in person.otherPhoneNumbers %}
<dt>{{ 'Other phonenumber'|trans }}&nbsp;:</dt>
<dd>
<a href="tel:{{ pp.phoneNumber }}"><pre>{{ pp.phoneNumber|chill_format_phonenumber }}</pre></a>
{% if pp.description is not empty %}
<blockquote class="chill-user-quote">
{{ pp.description|nl2br }}
{% endif %}
</blockquote>
</dd>
{% endfor %}
{%- if chill_person.fields.contact_info == 'visible' -%}
<dl>
<dt>{{ 'Notes on contact information'|trans }}&nbsp;:</dt>
<dd>
{% if person.contactInfo is not empty %}
<div class="chill-user-quote">
{{ person.contactInfo|chill_markdown_to_html }}
</div>
{% else %}
<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
{% endif %}
</dd>
</dl>
{%- endif -%}
</figure>
</div>
{%- endif -%}
</div>
{% if cFGroup and (cFGroup.getActiveCustomFields|length > 0) %}
<div class="grid-10 push-1 grid-mobile-12 grid-tablet-12 push-mobile-0 push-tablet-0 parent">
<div class="grid-12 custom-fields">
<div class="col-10">
<figure class="person-details">
{{ chill_custom_fields_group_widget(person.cFData, cFGroup) }}
{% if is_granted('CHILL_PERSON_UPDATE', person) %}
{{ include(edit_tmp_name, edit_tmp_args) }}
{% endif %}
</figure>
</div>
{% endif %}
</div>
<div class="grid-10 push-1 grid-mobile-12 grid-tablet-12 push-mobile-0 push-tablet-0 parent">
<figure class="person-details">
</figure>
</div>
{% endif %}
{% if is_granted('CHILL_PERSON_UPDATE', person) %}
<ul class="grid-12 sticky-form-buttons record_actions ">
<li>
<a class="sc-button bt-update" href="{{ path('chill_person_general_edit', { 'person_id': person.id }) }}">
{{ 'Edit'|trans }}
</a>
</li>
</ul>
{% endif %}
</div> <!-- end of div.person-view -->
{% endblock %}

View File

@ -124,7 +124,7 @@
{% endblock %}
{% block layout_wvm_content %}
<div class="container-fluid content">
<div class="container-fluid mt-3 content">
{% block personcontent %}<!-- block personcontent empty -->{%endblock%}
</div>
{% endblock %}