Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-07 18:44:08 +00:00
Code Issues Actions Projects Releases Wiki Activity

bootstrap content with vertical right person menu

Browse Source
This commit is contained in:
Mathieu Jaumotte 2021-03-20 23:36:27 +01:00
parent 3da8f89d3c
commit fe2f107ddc
7 changed files with 172 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/_custom.scss
View File

@ -6,6 +6,10 @@ h1, h2, .h1, .h2 {
font-weight: $headings-font-weight + 200; font-weight: $headings-font-weight + 200;
} }
.open_sansbold {
}
html, body { html, body {
min-height: 100%; min-height: 100%;
height: 100%; height: 100%;
@ -26,8 +30,11 @@ nav.navbar {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.nav-item a {
}
.dropdown-menu { .dropdown-menu {
.dropdown-item { .dropdown-item {
width: 120%;
i { i {
float: right; float: right;
} }
@ -38,29 +45,6 @@ nav.navbar {
#content_conainter { #content_conainter {
position: relative; position: relative;
min-height: calc(100% - 195px); 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 { .footer {

6
src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/custom/_variables.scss
View File

@ -449,9 +449,9 @@ $btn-link-disabled-color: $gray-600 !default;
$btn-block-spacing-y: .5rem !default; $btn-block-spacing-y: .5rem !default;
// Allows for customizing button radius independently from global border radius // Allows for customizing button radius independently from global border radius
$btn-border-radius: $border-radius !default; $btn-border-radius: 0 !default;
$btn-border-radius-lg: $border-radius-lg !default; $btn-border-radius-lg: 0 !default;
$btn-border-radius-sm: $border-radius-sm !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; $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;

25
src/Bundle/ChillMainBundle/Resources/views/Menu/section.html.twig
View File

@ -15,20 +15,29 @@
* You should have received a copy of the GNU Affero General Public License * 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/>. * 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"> <li class="nav-link2">
<div class="li-content"> <div class="li-content">
<a href="javascript:void(0)" class="more">Sections</a> <a href="javascript:void(0)" class="more">Sections</a>
</div> </div>
<ul class="submenu width-15-em" style="padding-left: 0; padding-right: 0; background-color:transparent;"> <ul class="ww">
{% for menu in menus %} {% 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;"> <li style="xx">
<div style="margin-bottom:2px;"> <div style="vv">
<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;"> <div style="yy">
<a href="{{ menu.uri }}">{{ menu.label }}</a> <a href="{{ menu.uri }}">{{ menu.label }}</a>
</div> </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 %} {% if menu.extras.icons is defined %}
{% for icon in menu.extras.icons %} {% for icon in menu.extras.icons %}
<i class="fa fa-{{ icon }}"></i> <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"> <a class="nav-link dropdown-toggle" type="button" id="dropdownMenu1Button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Sections Sections
</a> </a>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1Button"> <div class="dropdown-menu py-0 rounded-0" aria-labelledby="dropdownMenu1Button">
{% for menu in menus %} {% 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 %} {% apply spaceless %}
{% if menu.extras.icons is defined %} {% if menu.extras.icons is defined %}
{% for icon in menu.extras.icons %} {% for icon in menu.extras.icons %}

9
src/Bundle/ChillMainBundle/Resources/views/Menu/user.html.twig
View File

@ -16,6 +16,9 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>. * along with this program. If not, see <http://www.gnu.org/licenses/>.
#} #}
<style>
</style>
{# {#
<li class="nav-link2 user-menu"> <li class="nav-link2 user-menu">
<div class="li-content"> <div class="li-content">
@ -72,14 +75,14 @@
{% endif %} {% endif %}
</a> </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 %} {% for menu in menus %}
{% if is_granted('ROLE_PREVIOUS_ADMIN') and menu.name == 'Logout' %} {% 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 }} {{ 'Exit impersonation'|trans }}
{% else %} {% 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 %} {% endif %}
{% if menu.extras.icon is defined %} {% if menu.extras.icon is defined %}
<i class="fa fa-{{ menu.extras.icon }}"></i> <i class="fa fa-{{ menu.extras.icon }}"></i>

53
src/Bundle/ChillMainBundle/Resources/views/layoutWithVerticalMenu.html.twig
View File

@ -24,42 +24,43 @@
{% extends "@ChillMain/layout.html.twig" %} {% extends "@ChillMain/layout.html.twig" %}
{% block sublayout_containter %} {% block sublayout_containter %}
<div class="container-fluid content"> <div class="container-fluid">
<div class="grid-8 push-1 grid-mobile-9 grid-tablet-9 push-mobile-0 push-tablet-0"> <div class="row">
{# Flash messages ! #} <div class="col-8 ml-auto">
<div class="container-fluid"> {# Flash messages ! #}
{% for flashMessage in app.session.flashbag.get('success') %} <div class="container-fluid">
<div class="grid-8 centered success flash_message"> {% for flashMessage in app.session.flashbag.get('success') %}
<div class="grid-8 centered success flash_message">
<span> <span>
{{ flashMessage|raw }} {{ flashMessage|raw }}
</span> </span>
</div> </div>
{% endfor %} {% endfor %}
{% for flashMessage in app.session.flashbag.get('error') %} {% for flashMessage in app.session.flashbag.get('error') %}
<div class="grid-8 centered error flash_message"> <div class="grid-8 centered error flash_message">
<span> <span>
{{ flashMessage|raw }} {{ flashMessage|raw }}
</span> </span>
</div> </div>
{% endfor %} {% endfor %}
{% for flashMessage in app.session.flashbag.get('notice') %} {% for flashMessage in app.session.flashbag.get('notice') %}
<div class="grid-8 centered notice flash_message"> <div class="grid-8 centered notice flash_message">
<span> <span>
{{ flashMessage|raw }} {{ flashMessage|raw }}
</span> </span>
</div> </div>
{% endfor %} {% 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> </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>
</div> </div>
{% endblock %} {% endblock %}

180
src/Bundle/ChillPersonBundle/Resources/views/layout.html.twig
View File

@ -20,96 +20,104 @@
{% block top_banner %} {% block top_banner %}
<div class="subheader banner banner-person"> <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="container-fluid">
<div class="row" id="header-person-name">
<div class="grid-7"> <div class="col-sm-11 ml-auto">
<h1> <div class="row">
{% 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 }} <div class="col-sm">
<h1>
<span class="id-number" title="{{ 'Person'|trans ~ ' ' ~ person.id }}"> {% set gender =
{{ person.id|upper }} (person.gender == "woman") ? 'female' :
</span> (person.gender == "both") ? 'neuter' : 'male'
</h1> %}
</div> <i class="fa fa-fw fa-{{ gender }}" title="{{ gender|capitalize|trans }}"></i>
<div class="grid-5"> {{ person|chill_entity_render_string }}
<ul class="list-content fa-ul">
<li> <span class="id-number" title="{{ 'Person'|trans ~ ' ' ~ person.id }}">
<i class="fa fa-li fa-map-marker"></i> {{ person.id|upper }}
{%- if person.currentHouseholdAddress is not empty -%} </span>
{{ person.currentHouseholdAddress|chill_entity_render_box({'multiline': false, 'with_valid_from': false}) }} </h1>
{%- elseif person.lastAddress is not empty -%} </div>
{{ 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="grid-12 parent" id="header-person-details" > <div class="col-sm">
<div class="grid-10 push-1 grid-mobile-12 grid-tablet-12 push-mobile-0 push-tablet-0 parent"> <ul class="list-content fa-ul">
<li>
<div class="grid-5"> <i class="fa fa-li fa-map-marker"></i>
<span class="open_sansbold">{{ 'Birthdate'|trans|upper }}&nbsp;:</span> {%- if person.currentHouseholdAddress is not empty -%}
{% if person.birthdate == null %} {{ person.currentHouseholdAddress|chill_entity_render_box({'multiline': false, 'with_valid_from': false}) }}
{{ 'Unknown date of birth'|trans }} {%- elseif person.lastAddress is not empty -%}
{% else %} {{ person.lastAddress|chill_entity_render_box({'multiline': false, 'with_valid_from': false}) }}
{{ person.birthdate|format_date('short') }} {%- else -%}
{% endif %} <span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
<span class="age">{{ person.age ~ ((person.age > 1) ? ' ans' : ' an') }}</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>
{%- if chill_person.fields.nationality == 'visible' -%}
<div class="grid-4">
<span class="open_sansbold">{{ 'Nationality'|trans|upper}}&nbsp;:</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}}&nbsp;:</span> {{ person.center.name|upper }}
</div>
{%- endif -%}
</div> </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 }}&nbsp;:</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}}&nbsp;:</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}}&nbsp;:</span> {{ person.center.name|upper }}
</div>
{%- endif -%}
</div>
</div>
</div>
</div> </div>
</div> </div>
<span id="banner-person"></span> <span id="banner-person"></span>

21
src/Bundle/ChillPersonBundle/Resources/views/menu.html.twig
View File

@ -14,10 +14,25 @@
* You should have received a copy of the GNU Affero General Public License * 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/>. * 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 %} {% for menu in menus %}
<li class="{{ menu.extra('class') }}"> <a class="list-group-item list-group-item-action bg-info border-0 mb-1 py-2" href="{{ menu.uri }}" >{{ menu.label|upper }}</a>
<a 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> </li>
{% endfor %} {% endfor %}
</ul> </ul>
#}