banner and vertical-menu integration

This commit is contained in:
Mathieu Jaumotte 2021-07-03 17:54:16 +02:00
parent 4ca1618480
commit e77c886e3f
7 changed files with 118 additions and 106 deletions

View File

@ -121,7 +121,7 @@ header {
div.navbar-collapse { div.navbar-collapse {
float: right; float: right;
} }
@media (max-width: 768px) { @media (max-width: 767px) {
& { & {
position: relative; position: relative;
} }
@ -190,6 +190,19 @@ div.banner {
} }
} }
div.vertical-menu {
border-radius: 0;
margin-top: 0.5rem;
a.list-group-item {
background-color: $info;
border: 0;
margin-bottom: 0.25rem;
&:hover {
background-color: shade-color($info, 5%)
}
}
}
footer.footer { footer.footer {
background: $dark; background: $dark;
padding-top: 10px; padding-top: 10px;

View File

@ -54,7 +54,7 @@
{% block layout_wvm_content %}<!-- content of the layoutWithVerticalMenu is empty --> {% block layout_wvm_content %}<!-- content of the layoutWithVerticalMenu is empty -->
{% endblock %} {% endblock %}
</div> </div>
<div class="col-3"> <div class="col-md-3">
{% block vertical_menu_content %}<!-- vertical menu of the layoutWithVerticalMenu is empty --> {% block vertical_menu_content %}<!-- vertical menu of the layoutWithVerticalMenu is empty -->
{% endblock %} {% endblock %}
</div> </div>

View File

@ -1,30 +1,35 @@
<div class="banner banner-accompanying-course"> <div class="banner banner-accompanying-course">
<div class="grid-12 parent" id="header-accompanying_course-name" > <div id="header-accompanying_course-name" class="header-name">
<div class="grid-10 push-1 grid-mobile-12 grid-tablet-12 push-mobile-0 push-tablet-0 parent"> <div class="container-xxl">
<div class="row">
<div class="col-sm-5">
<h1>
<i class="fa fa-random fa-fw"></i>
{{ 'Accompanying Course'|trans }}
<span class="id-number">{{ accompanyingCourse.id }}</span>
</h1>
</div>
{# vue teleport fragment here #}
<div class="col-sm-3" id="banner-flags"></div>
{# vue teleport fragment here #}
<div class="col-sm-3" id="banner-status"></div>
<div class="grid-6">
<h1>
<i class="fa fa-random fa-fw"></i>
{{ 'Accompanying Course'|trans }}
<span class="id-number">{{ accompanyingCourse.id }}</span>
</h1>
</div> </div>
</div>
</div>
<div id="header-accompanying_course-details" class="header-details">
<div class="container-xxl">
<div class="row justify-content-md-right">
{# vue teleport fragment here #} {# vue teleport fragment here #}
<div class="grid-3" id="banner-flags"></div> <div class="col-sm-10" id="banner-social-issues"></div>
{# vue teleport fragment here #}
<div class="grid-3" id="banner-status"></div>
</div>
</div>
<div class="grid-12 parent" id="header-accompanying_course-details" >
<div class="grid-10 push-1 grid-mobile-12 grid-tablet-12 push-mobile-0 push-tablet-0 parent">
{# vue teleport fragment here #}
<div id="banner-social-issues"></div>
</div>
</div> </div>
</div> </div>
<a name="banner-accompanying-course"></a>
</div> </div>
<span id="banner-accompanying-course"></span>

View File

@ -1,7 +1,9 @@
<ul class="tab-nav"> <div class="list-group vertical-menu menu-accompanying-course">
{% for menu in menus %} {% for menu in menus %}
<li class=""> <a class="list-group-item list-group-item-action"
<a href="{{ menu.uri }}" >{{ menu.label|upper }}</a> href="{{ menu.uri }}">
</li> {{ menu.label|upper }}
</a>
{% endfor %} {% endfor %}
</ul> </div>

View File

@ -1,64 +1,68 @@
<div class="banner banner-household"> <div class="banner banner-household">
<div class="grid-12 parent" id="header-household-name" > <div id="header-household-name" class="header-name">
<div class="grid-10 push-1 grid-mobile-12 grid-tablet-12 push-mobile-0 push-tablet-0 parent"> <div class="container-xxl">
<div class="row">
<div class="col-sm-5">
<h1>
<i class="fa fa-home"></i>
{{ 'household.Household'|trans }}
<span class="id-number">{{ household.id }}</span>
</h1>
</div>
<div class="grid-7"> <div class="col-sm">
<h1> <ul class="list-content fa-ul">
<i class="fa fa-home"></i> <li>
{{ 'household.Household'|trans }} {% set address = household.currentAddress %}
<span class="id-number">{{ household.id }}</span> <i class="fa fa-li fa-map-marker"></i>
</h1> {% if address is empty %}
<p class="chill-no-data-statement">{{ 'household.Household does not have any address currently'|trans }}</p>
{% else %}
{{ address|chill_entity_render_box({'multiline': false, 'with_valid_from': false}) }}
{% endif %}
</li>
</ul>
</div>
</div> </div>
<div class="grid-5">
<ul class="list-content fa-ul">
<li>
{% set address = household.currentAddress %}
<i class="fa fa-li fa-map-marker"></i>
{% if address is empty %}
<p class="chill-no-data-statement">{{ 'household.Household does not have any address currently'|trans }}</p>
{% else %}
{{ address|chill_entity_render_box({'multiline': false, 'with_valid_from': false}) }}
{% endif %}
</li>
</ul>
</div>
</div> </div>
</div> </div>
<div class="grid-12 parent" id="header-household-details" > <div id="header-household-details" class="header-details">
<div class="grid-10 push-1 grid-mobile-12 grid-tablet-12 push-mobile-0 push-tablet-0 parent"> <div class="container-xxl">
<div class="row justify-content-md-right">
<div id="banner-misc" class="members">
{%- set members = household.getCurrentMembersOrdered() -%} <div class="col-sm-10 members" id="banner-misc">
{%- if members|length > 0 -%} {%- set members = household.getCurrentMembersOrdered() -%}
<span class="current-members-explain" style="display: none;"> {%- if members|length > 0 -%}
{{- 'household.Current household members'|trans }} <span class="current-members-explain" style="display: none;">
<i class="fa fa-fw fa-users" title="{{- 'household.Current household members'|trans }}"></i> {{- 'household.Current household members'|trans }}
</span> <i class="fa fa-fw fa-users" title="{{- 'household.Current household members'|trans }}"></i>
</span>
{%- for m in members|slice(0, 5) -%}
<span {%- for m in members|slice(0, 5) -%}
class="badge-member{%- if m.holder %} holder{% endif -%}{%- if m.position.ordering >= 2 %} child{% endif -%}" <span
title="{{ m.position.label.fr }}"> class="badge-member{%- if m.holder %} holder{% endif -%}{%- if m.position.ordering >= 2 %} child{% endif -%}"
{%- if m.holder %} title="{{ m.position.label.fr }}">
<span class="badge badge-secondary"> {%- if m.holder %}
{{ 'household.holder'|trans }} <span class="badge badge-secondary">
{{ 'household.holder'|trans }}
</span>
{% endif -%}
{{- m.person|chill_entity_render_box({'addLink': false}) -}}
</span> </span>
{% endif -%} {%- endfor -%}
{{- m.person|chill_entity_render_box({'addLink': false}) -}}
</span> {% if members|length > 5 %}
{%- endfor -%} <span class="current-members-more">
{{ 'household.and x other persons'|trans({'x': members|length-5}) }}
{% if members|length > 5 %} </span>
<span class="current-members-more"> {% endif %}
{{ 'household.and x other persons'|trans({'x': members|length-5}) }} {%- endif -%}
</span> </div>
{% endif %}
{%- endif -%}
</div> </div>
</div> </div>
</div> </div>
<a name="banner-household"></a>
</div> </div>
<span id="banner-household"></span>

View File

@ -1,7 +1,8 @@
<ul class="tab-nav"> <div class="list-group vertical-menu menu-household">
{% for menu in menus %} {% for menu in menus %}
<li class=""> <a class="list-group-item list-group-item-action"
<a href="{{ menu.uri }}" >{{ menu.label|upper }}</a> href="{{ menu.uri }}">
</li> {{ menu.label|upper }}
</a>
{% endfor %} {% endfor %}
</ul> </div>

View File

@ -15,24 +15,11 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>. * along with this program. If not, see <http://www.gnu.org/licenses/>.
#} #}
<div class="list-group rounded-0 mt-2"> <div class="list-group vertical-menu menu-person">
{% for menu in menus %} {% for menu in menus %}
<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 class="list-group-item list-group-item-action"
href="{{ menu.uri }}">
{{ menu.label|upper }}
</a>
{% endfor %} {% endfor %}
</div> </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>
#}