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 {
float: right;
}
@media (max-width: 768px) {
@media (max-width: 767px) {
& {
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 {
background: $dark;
padding-top: 10px;

View File

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

View File

@ -1,8 +1,9 @@
<div class="banner banner-accompanying-course">
<div class="grid-12 parent" id="header-accompanying_course-name" >
<div class="grid-10 push-1 grid-mobile-12 grid-tablet-12 push-mobile-0 push-tablet-0 parent">
<div id="header-accompanying_course-name" class="header-name">
<div class="container-xxl">
<div class="row">
<div class="grid-6">
<div class="col-sm-5">
<h1>
<i class="fa fa-random fa-fw"></i>
{{ 'Accompanying Course'|trans }}
@ -11,20 +12,24 @@
</div>
{# vue teleport fragment here #}
<div class="grid-3" id="banner-flags"></div>
<div class="col-sm-3" id="banner-flags"></div>
{# vue teleport fragment here #}
<div class="grid-3" id="banner-status"></div>
<div class="col-sm-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">
</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 #}
<div id="banner-social-issues"></div>
<div class="col-sm-10" id="banner-social-issues"></div>
</div>
</div>
</div>
<a name="banner-accompanying-course"></a>
</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 %}
<li class="">
<a href="{{ menu.uri }}" >{{ menu.label|upper }}</a>
</li>
<a class="list-group-item list-group-item-action"
href="{{ menu.uri }}">
{{ menu.label|upper }}
</a>
{% endfor %}
</ul>
</div>

View File

@ -1,8 +1,9 @@
<div class="banner banner-household">
<div class="grid-12 parent" id="header-household-name" >
<div class="grid-10 push-1 grid-mobile-12 grid-tablet-12 push-mobile-0 push-tablet-0 parent">
<div id="header-household-name" class="header-name">
<div class="container-xxl">
<div class="row">
<div class="grid-7">
<div class="col-sm-5">
<h1>
<i class="fa fa-home"></i>
{{ 'household.Household'|trans }}
@ -10,7 +11,7 @@
</h1>
</div>
<div class="grid-5">
<div class="col-sm">
<ul class="list-content fa-ul">
<li>
{% set address = household.currentAddress %}
@ -26,10 +27,12 @@
</div>
</div>
<div class="grid-12 parent" id="header-household-details" >
<div class="grid-10 push-1 grid-mobile-12 grid-tablet-12 push-mobile-0 push-tablet-0 parent">
</div>
<div id="header-household-details" class="header-details">
<div class="container-xxl">
<div class="row justify-content-md-right">
<div id="banner-misc" class="members">
<div class="col-sm-10 members" id="banner-misc">
{%- set members = household.getCurrentMembersOrdered() -%}
{%- if members|length > 0 -%}
<span class="current-members-explain" style="display: none;">
@ -60,5 +63,6 @@
</div>
</div>
</div>
<a name="banner-household"></a>
</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 %}
<li class="">
<a href="{{ menu.uri }}" >{{ menu.label|upper }}</a>
</li>
<a class="list-group-item list-group-item-action"
href="{{ menu.uri }}">
{{ menu.label|upper }}
</a>
{% endfor %}
</ul>
</div>

View File

@ -15,24 +15,11 @@
* 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 %}
<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 %}
</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>
#}