mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
bootstrap content with vertical right person menu
This commit is contained in:
parent
3da8f89d3c
commit
fe2f107ddc
@ -6,6 +6,10 @@ h1, h2, .h1, .h2 {
|
||||
font-weight: $headings-font-weight + 200;
|
||||
}
|
||||
|
||||
.open_sansbold {
|
||||
|
||||
}
|
||||
|
||||
html, body {
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
@ -26,8 +30,11 @@ nav.navbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.nav-item a {
|
||||
}
|
||||
.dropdown-menu {
|
||||
.dropdown-item {
|
||||
width: 120%;
|
||||
i {
|
||||
float: right;
|
||||
}
|
||||
@ -38,29 +45,6 @@ nav.navbar {
|
||||
#content_conainter {
|
||||
position: relative;
|
||||
min-height: calc(100% - 195px);
|
||||
|
||||
&::before {
|
||||
bottom: 0;
|
||||
content: "";
|
||||
left: 0;
|
||||
opacity: .1;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
background-image: url(/build/images/desert.2a25b6fc.jpg);
|
||||
background-attachment: fixed;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.container-fluid::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.footer {
|
||||
|
||||
@ -449,9 +449,9 @@ $btn-link-disabled-color: $gray-600 !default;
|
||||
$btn-block-spacing-y: .5rem !default;
|
||||
|
||||
// Allows for customizing button radius independently from global border radius
|
||||
$btn-border-radius: $border-radius !default;
|
||||
$btn-border-radius-lg: $border-radius-lg !default;
|
||||
$btn-border-radius-sm: $border-radius-sm !default;
|
||||
$btn-border-radius: 0 !default;
|
||||
$btn-border-radius-lg: 0 !default;
|
||||
$btn-border-radius-sm: 0 !default;
|
||||
|
||||
$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
|
||||
|
||||
|
||||
@ -15,20 +15,29 @@
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
#}
|
||||
|
||||
{#
|
||||
<style>
|
||||
li.nav-link2 {}
|
||||
div.li-content {}
|
||||
a.more {}
|
||||
ul.ww {submenu width-15-em" style="padding-left: 0; padding-right: 0; background-color:transparent;}
|
||||
li.xx { display:block; background-color: #333333; padding-left:1.5em; border-bottom:1px; border-bottom: 1px solid #FFF;padding-top:0; padding-bottom:0;}
|
||||
div.vv {margin-bottom:2px;}
|
||||
div.yy {font-family: 'Open Sans'; font-weight:300; font-size: 0.75em; text-align:left; height: 46px; display:inline-block; width: calc(100% - 5em - 1px); vertical-align:top;}
|
||||
div.zz { background-color: #333333; text-align:center;width: 2em; margin-left:-0.15em; font-size:1.5em; color:#FFF; height: 46px; display:inline-block; vertical-align:top;float:right}
|
||||
</style>
|
||||
<li class="nav-link2">
|
||||
<div class="li-content">
|
||||
<a href="javascript:void(0)" class="more">Sections</a>
|
||||
</div>
|
||||
<ul class="submenu width-15-em" style="padding-left: 0; padding-right: 0; background-color:transparent;">
|
||||
<ul class="ww">
|
||||
{% for menu in menus %}
|
||||
<li style="display:block; background-color: #333333; padding-left:1.5em; border-bottom:1px; border-bottom: 1px solid #FFF;padding-top:0; padding-bottom:0;">
|
||||
<div style="margin-bottom:2px;">
|
||||
<div style="font-family: 'Open Sans'; font-weight:300; font-size: 0.75em; text-align:left; height: 46px; display:inline-block; width: calc(100% - 5em - 1px); vertical-align:top;">
|
||||
<li style="xx">
|
||||
<div style="vv">
|
||||
<div style="yy">
|
||||
<a href="{{ menu.uri }}">{{ menu.label }}</a>
|
||||
</div>
|
||||
<div style="background-color: #333333; text-align:center;width: 2em; margin-left:-0.15em; font-size:1.5em; color:#FFF; height: 46px; display:inline-block; vertical-align:top;float:right">{% apply spaceless %}
|
||||
<div style="zz">{% apply spaceless %}
|
||||
{% if menu.extras.icons is defined %}
|
||||
{% for icon in menu.extras.icons %}
|
||||
<i class="fa fa-{{ icon }}"></i>
|
||||
@ -46,9 +55,9 @@
|
||||
<a class="nav-link dropdown-toggle" type="button" id="dropdownMenu1Button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Sections
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenu1Button">
|
||||
<div class="dropdown-menu py-0 rounded-0" aria-labelledby="dropdownMenu1Button">
|
||||
{% for menu in menus %}
|
||||
<a class="dropdown-item" href="{{ menu.uri }}">{{ menu.label }}
|
||||
<a class="dropdown-item list-group-item bg-dark text-white border-left-0 border-right-0 border-top-0 border-white" href="{{ menu.uri }}">{{ menu.label }}
|
||||
{% apply spaceless %}
|
||||
{% if menu.extras.icons is defined %}
|
||||
{% for icon in menu.extras.icons %}
|
||||
|
||||
@ -16,6 +16,9 @@
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
#}
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
{#
|
||||
<li class="nav-link2 user-menu">
|
||||
<div class="li-content">
|
||||
@ -72,14 +75,14 @@
|
||||
{% endif %}
|
||||
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenu2Button">
|
||||
<div class="dropdown-menu dropdown-menu-right py-0 rounded-0" aria-labelledby="dropdownMenu2Button">
|
||||
|
||||
{% for menu in menus %}
|
||||
{% if is_granted('ROLE_PREVIOUS_ADMIN') and menu.name == 'Logout' %}
|
||||
<a class="dropdown-item" href="{{ path('admin_user', {'_switch_user': '_exit'}) }}">
|
||||
<a class="dropdown-item list-group-item bg-dark text-white border-left-0 border-right-0 border-top-0 border-white" href="{{ path('admin_user', {'_switch_user': '_exit'}) }}">
|
||||
{{ 'Exit impersonation'|trans }}
|
||||
{% else %}
|
||||
<a class="dropdown-item" href="{{ menu.uri }}">{{ menu.label|trans }}
|
||||
<a class="dropdown-item list-group-item bg-dark text-white border-left-0 border-right-0 border-top-0 border-white" href="{{ menu.uri }}">{{ menu.label|trans }}
|
||||
{% endif %}
|
||||
{% if menu.extras.icon is defined %}
|
||||
<i class="fa fa-{{ menu.extras.icon }}"></i>
|
||||
|
||||
@ -24,42 +24,43 @@
|
||||
{% extends "@ChillMain/layout.html.twig" %}
|
||||
|
||||
{% block sublayout_containter %}
|
||||
<div class="container-fluid content">
|
||||
<div class="grid-8 push-1 grid-mobile-9 grid-tablet-9 push-mobile-0 push-tablet-0">
|
||||
{# Flash messages ! #}
|
||||
<div class="container-fluid">
|
||||
{% for flashMessage in app.session.flashbag.get('success') %}
|
||||
<div class="grid-8 centered success flash_message">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-8 ml-auto">
|
||||
{# Flash messages ! #}
|
||||
<div class="container-fluid">
|
||||
{% for flashMessage in app.session.flashbag.get('success') %}
|
||||
<div class="grid-8 centered success flash_message">
|
||||
<span>
|
||||
{{ flashMessage|raw }}
|
||||
</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
{% for flashMessage in app.session.flashbag.get('error') %}
|
||||
<div class="grid-8 centered error flash_message">
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
{% for flashMessage in app.session.flashbag.get('error') %}
|
||||
<div class="grid-8 centered error flash_message">
|
||||
<span>
|
||||
{{ flashMessage|raw }}
|
||||
</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
{% for flashMessage in app.session.flashbag.get('notice') %}
|
||||
<div class="grid-8 centered notice flash_message">
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
{% for flashMessage in app.session.flashbag.get('notice') %}
|
||||
<div class="grid-8 centered notice flash_message">
|
||||
<span>
|
||||
{{ flashMessage|raw }}
|
||||
</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% block layout_wvm_content %}<!-- content of the layoutWithVerticalMenu is empty -->
|
||||
{% endblock %}
|
||||
</div>
|
||||
<div class="col-3">
|
||||
{% block vertical_menu_content %}<!-- vertical menu of the layoutWithVerticalMenu is empty -->
|
||||
{% endblock %}
|
||||
</div>
|
||||
|
||||
{% block layout_wvm_content %}<!-- content of the layoutWithVerticalMenu is empty -->
|
||||
{% endblock %}
|
||||
</div>
|
||||
|
||||
<div class="grid-3 float-right">
|
||||
{% block vertical_menu_content %}<!-- vertical menu of the layoutWithVerticalMenu is empty -->
|
||||
{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@ -20,96 +20,104 @@
|
||||
|
||||
{% block top_banner %}
|
||||
<div class="subheader banner banner-person">
|
||||
<div class="grid-12 parent" id="header-person-name" >
|
||||
<div class="grid-10 push-1 grid-mobile-12 grid-tablet-12 push-mobile-0 push-tablet-0 parent">
|
||||
|
||||
<div class="grid-7">
|
||||
<h1>
|
||||
{% set gender =
|
||||
(person.gender == "woman") ? 'female' :
|
||||
(person.gender == "both") ? 'neuter' : 'male'
|
||||
%}
|
||||
<i class="fa fa-fw fa-{{ gender }}" title="{{ gender|capitalize|trans }}"></i>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row" id="header-person-name">
|
||||
<div class="col-sm-11 ml-auto">
|
||||
<div class="row">
|
||||
|
||||
{{ person|chill_entity_render_string }}
|
||||
|
||||
<span class="id-number" title="{{ 'Person'|trans ~ ' ' ~ person.id }}">
|
||||
{{ person.id|upper }}
|
||||
</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="grid-5">
|
||||
<ul class="list-content fa-ul">
|
||||
<li>
|
||||
<i class="fa fa-li fa-map-marker"></i>
|
||||
{%- if person.currentHouseholdAddress is not empty -%}
|
||||
{{ person.currentHouseholdAddress|chill_entity_render_box({'multiline': false, 'with_valid_from': false}) }}
|
||||
{%- elseif person.lastAddress is not empty -%}
|
||||
{{ person.lastAddress|chill_entity_render_box({'multiline': false, 'with_valid_from': false}) }}
|
||||
{%- else -%}
|
||||
<span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
|
||||
{%- endif -%}
|
||||
</li>
|
||||
<li>
|
||||
{% if person.mobilenumber %}
|
||||
<i class="fa fa-li fa-mobile"></i>
|
||||
<a href="{{ 'tel:' ~ person.mobilenumber }}" class="phone" title="{{ 'Mobilenumber'|trans }}">
|
||||
{{ person.mobilenumber|chill_format_phonenumber }}</a>
|
||||
{% else %}
|
||||
<i class="fa fa-li fa-phone"></i>
|
||||
{% if person.phonenumber %}
|
||||
<a href="{{ 'tel:' ~ person.phonenumber }}" class="phone" title="{{ 'Phonenumber'|trans }}">
|
||||
{{ person.phonenumber|chill_format_phonenumber }}</a>
|
||||
{% else %}
|
||||
<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
<span class="ml-3">
|
||||
<i class="fa fa-fw fa-envelope-o"></i>
|
||||
<a href="{{ 'mailto:' ~ person.email }}" class="email" title="{{ 'Email'|trans }}">
|
||||
{{ person.email|chill_print_or_message("thirdparty.No_email") }}
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<h1>
|
||||
{% set gender =
|
||||
(person.gender == "woman") ? 'female' :
|
||||
(person.gender == "both") ? 'neuter' : 'male'
|
||||
%}
|
||||
<i class="fa fa-fw fa-{{ gender }}" title="{{ gender|capitalize|trans }}"></i>
|
||||
|
||||
{{ person|chill_entity_render_string }}
|
||||
|
||||
<span class="id-number" title="{{ 'Person'|trans ~ ' ' ~ person.id }}">
|
||||
{{ person.id|upper }}
|
||||
</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="grid-12 parent" id="header-person-details" >
|
||||
<div class="grid-10 push-1 grid-mobile-12 grid-tablet-12 push-mobile-0 push-tablet-0 parent">
|
||||
|
||||
<div class="grid-5">
|
||||
<span class="open_sansbold">{{ 'Birthdate'|trans|upper }} :</span>
|
||||
{% if person.birthdate == null %}
|
||||
{{ 'Unknown date of birth'|trans }}
|
||||
{% else %}
|
||||
{{ person.birthdate|format_date('short') }}
|
||||
{% endif %}
|
||||
<span class="age">{{ person.age ~ ((person.age > 1) ? ' ans' : ' an') }}</span>
|
||||
<div class="col-sm">
|
||||
<ul class="list-content fa-ul">
|
||||
<li>
|
||||
<i class="fa fa-li fa-map-marker"></i>
|
||||
{%- if person.currentHouseholdAddress is not empty -%}
|
||||
{{ person.currentHouseholdAddress|chill_entity_render_box({'multiline': false, 'with_valid_from': false}) }}
|
||||
{%- elseif person.lastAddress is not empty -%}
|
||||
{{ person.lastAddress|chill_entity_render_box({'multiline': false, 'with_valid_from': false}) }}
|
||||
{%- else -%}
|
||||
<span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
|
||||
{%- endif -%}
|
||||
</li>
|
||||
<li>
|
||||
{% if person.mobilenumber %}
|
||||
<i class="fa fa-li fa-mobile"></i>
|
||||
<a href="{{ 'tel:' ~ person.mobilenumber }}" class="phone" title="{{ 'Mobilenumber'|trans }}">
|
||||
{{ person.mobilenumber|chill_format_phonenumber }}</a>
|
||||
{% else %}
|
||||
<i class="fa fa-li fa-phone"></i>
|
||||
{% if person.phonenumber %}
|
||||
<a href="{{ 'tel:' ~ person.phonenumber }}" class="phone" title="{{ 'Phonenumber'|trans }}">
|
||||
{{ person.phonenumber|chill_format_phonenumber }}</a>
|
||||
{% else %}
|
||||
<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
<span class="ml-3">
|
||||
<i class="fa fa-fw fa-envelope-o"></i>
|
||||
<a href="{{ 'mailto:' ~ person.email }}" class="email" title="{{ 'Email'|trans }}">
|
||||
{{ person.email|chill_print_or_message("thirdparty.No_email") }}
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{%- if chill_person.fields.nationality == 'visible' -%}
|
||||
<div class="grid-4">
|
||||
<span class="open_sansbold">{{ 'Nationality'|trans|upper}} :</span>
|
||||
{% if person.nationality is not null %}
|
||||
{{ person.nationality.name|localize_translatable_string }}
|
||||
{% else %}
|
||||
{% trans %}Without nationality{% endtrans %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
|
||||
{%- if chill_person.fields.spoken_languages == 'visible' -%}
|
||||
<div class="grid-3">
|
||||
<span class="open_sansbold">{{ 'Center'|trans|upper}} :</span> {{ person.center.name|upper }}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
|
||||
</div>
|
||||
<div class="row" id="header-person-details">
|
||||
<div class="col-sm-11 ml-auto">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-sm">
|
||||
<span class="open_sansbold">{{ 'Birthdate'|trans|upper }} :</span>
|
||||
{% if person.birthdate == null %}
|
||||
{{ 'Unknown date of birth'|trans }}
|
||||
{% else %}
|
||||
{{ person.birthdate|format_date('short') }}
|
||||
{% endif %}
|
||||
<span class="age">{{ person.age ~ ((person.age > 1) ? ' ans' : ' an') }}</span>
|
||||
</div>
|
||||
|
||||
{%- if chill_person.fields.nationality == 'visible' -%}
|
||||
<div class="col-sm">
|
||||
<span class="open_sansbold">{{ 'Nationality'|trans|upper}} :</span>
|
||||
{% if person.nationality is not null %}
|
||||
{{ person.nationality.name|localize_translatable_string }}
|
||||
{% else %}
|
||||
{% trans %}Without nationality{% endtrans %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
|
||||
{%- if chill_person.fields.spoken_languages == 'visible' -%}
|
||||
<div class="col-sm">
|
||||
<span class="open_sansbold">{{ 'Center'|trans|upper}} :</span> {{ person.center.name|upper }}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<span id="banner-person"></span>
|
||||
|
||||
@ -14,10 +14,25 @@
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
#}
|
||||
<ul class="tab-nav">
|
||||
|
||||
<div class="list-group rounded-0 mt-2">
|
||||
{% for menu in menus %}
|
||||
<li class="{{ menu.extra('class') }}">
|
||||
<a href="{{ menu.uri }}" >{{ menu.label|upper }}</a>
|
||||
<a class="list-group-item list-group-item-action bg-info border-0 mb-1 py-2" href="{{ menu.uri }}" >{{ menu.label|upper }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{#
|
||||
<div class="mt-2">
|
||||
{% for menu in menus %}
|
||||
<a class="btn btn-info btn-block text-left" href="{{ menu.uri }}" >{{ menu.label|upper }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<ul class="list-group mt-3">
|
||||
{% for menu in menus %}
|
||||
<li class="list-group-item">
|
||||
<a class="" href="{{ menu.uri }}" >{{ menu.label|upper }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
#}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user