mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
bt5, main layout, responsive header
This commit is contained in:
parent
8e8cdfce0a
commit
4ca1618480
@ -97,7 +97,7 @@ div.chill_address {
|
||||
}
|
||||
}
|
||||
|
||||
/// base layout
|
||||
/// base layout positions
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
@ -108,55 +108,88 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
nav.navbar {
|
||||
padding: 0;
|
||||
.navbar-brand img {
|
||||
height: 50px;
|
||||
margin: 8px 0;
|
||||
header {
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.navbar-collapse,
|
||||
.navbar-toggler {
|
||||
float: right;
|
||||
}
|
||||
ul.navbar-nav {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
li.nav-item {
|
||||
nav.navbar {
|
||||
padding: 0;
|
||||
a.navbar-brand img {
|
||||
height: 50px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
div.navbar-collapse {
|
||||
float: right;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
& {
|
||||
position: relative;
|
||||
}
|
||||
button.navbar-toggler {
|
||||
float: right;
|
||||
}
|
||||
div.navbar-collapse {
|
||||
float: none;
|
||||
position: absolute;
|
||||
top: 4em;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
ul.navbar-nav {
|
||||
display: flex;
|
||||
&.btn {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
& > a {
|
||||
align-self: center;
|
||||
}
|
||||
form.form-inline {
|
||||
align-self: center;
|
||||
align-items: stretch;
|
||||
li.nav-item {
|
||||
display: flex;
|
||||
input.form-control {
|
||||
&.btn {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
& > a {
|
||||
align-self: center;
|
||||
height: 32px;
|
||||
}
|
||||
form.form-inline {
|
||||
align-self: center;
|
||||
display: flex;
|
||||
input.form-control {
|
||||
align-self: center;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown-menu {
|
||||
.dropdown-item {
|
||||
width: 120%;
|
||||
i {
|
||||
float: right;
|
||||
div.dropdown-menu {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
a.dropdown-item {
|
||||
width: 120%;
|
||||
border-bottom: 1px solid $gray-200;
|
||||
font-size: smaller;
|
||||
i {
|
||||
float: right; }
|
||||
&:hover {
|
||||
color: $gray-500 !important; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
div.header-name,
|
||||
div.header-details {
|
||||
div.row > div:first-child {
|
||||
margin-left: 1.5em;
|
||||
|
||||
div.banner {
|
||||
div.header-name,
|
||||
div.header-details {
|
||||
div.row > div:first-child {
|
||||
@media (min-width: 576px) {
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
footer.footer {
|
||||
background: $dark;
|
||||
padding-top: 10px;
|
||||
|
||||
@ -27,28 +27,24 @@
|
||||
|
||||
<div class="col-8">
|
||||
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
<button class="navbar-toggler"
|
||||
type="button"
|
||||
data-toggle="collapse"
|
||||
data-target="#navbarSupportedContent"
|
||||
aria-controls="navbarSupportedContent"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarContent"
|
||||
aria-controls="navbarContent"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<div id="navbarContent" class="collapse navbar-collapse bg-primary">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
|
||||
{% block navigation_search_bar %}
|
||||
<li class="nav-item navigation-search">
|
||||
<form class="form-inline" action="{{ path('chill_main_search') }}" method="get">
|
||||
<input
|
||||
class="form-control"
|
||||
name="q"
|
||||
type="search"
|
||||
placeholder="{{ 'Search'|trans }}"
|
||||
<input class="form-control"
|
||||
name="q" type="search" placeholder="{{ 'Search'|trans }}"
|
||||
{% if _search_pattern is defined %}value="{{ _search_pattern }}"{% endif %}/>
|
||||
<button class="btn text-white-50" type="submit">
|
||||
<i class="fa fa-lg fa-search fa-flip-horizontal"></i>
|
||||
@ -69,25 +65,24 @@
|
||||
|
||||
{% if available_languages|length == 1 %}
|
||||
<li class="nav-item btn btn-primary">
|
||||
<a class="text-white-50" href="">
|
||||
<a id="menu-languages" class="text-white-50" href="#">
|
||||
{{ available_languages[0] | capitalize }}
|
||||
</a>
|
||||
</li>
|
||||
{% else %}
|
||||
<li class="nav-item dropdown btn btn-primary">
|
||||
<a id="dropdownMenu3Button"
|
||||
<a id="menu-languages"
|
||||
class="nav-link dropdown-toggle"
|
||||
type="button"
|
||||
data-toggle="dropdown"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<a href="#" class="more">{{ app.request.locale | capitalize }}</a>
|
||||
</a>
|
||||
<div
|
||||
class="dropdown-menu"
|
||||
aria-labelledby="dropdownMenu3Button">
|
||||
<div class="dropdown-menu dropdown-menu-end"
|
||||
aria-labelledby="menu-languages">
|
||||
{% for lang in available_languages %}
|
||||
<a class="dropdown-item{% if lang == app.request.locale %} active{% endif %}"
|
||||
<a class="dropdown-item list-group-item bg-dark text-white{% if lang == app.request.locale %} active{% endif %}"
|
||||
href="{{ path(app.request.get('_route'), app.request.get('_route_params')|merge({'_locale' : lang})) }}">
|
||||
{{ lang | capitalize }}
|
||||
</a>
|
||||
|
||||
@ -17,17 +17,16 @@
|
||||
#}
|
||||
|
||||
<li class="nav-item dropdown btn btn-primary">
|
||||
<a id="dropdownMenu1Button"
|
||||
<a id="menu-section"
|
||||
class="nav-link dropdown-toggle"
|
||||
type="button"
|
||||
data-toggle="dropdown"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
|
||||
{{ 'Sections'|trans }}
|
||||
</a>
|
||||
<div
|
||||
class="dropdown-menu"
|
||||
aria-labelledby="dropdownMenu1Button">
|
||||
<div class="dropdown-menu dropdown-menu-end dropdown-menu-dark" aria-labelledby="menu-section">
|
||||
{% for menu in menus %}
|
||||
<a class="dropdown-item list-group-item bg-dark text-white"
|
||||
href="{{ menu.uri }}">
|
||||
@ -35,7 +34,7 @@
|
||||
{% apply spaceless %}
|
||||
{% if menu.extras.icons is defined %}
|
||||
{% for icon in menu.extras.icons %}
|
||||
<i class="fa fa-{{ icon }}"></i>
|
||||
<i class="fa fa-{{ icon }} fa-lg"></i>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endapply %}</a>
|
||||
|
||||
@ -16,79 +16,42 @@
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
#}
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
{#
|
||||
<li class="nav-link2 user-menu">
|
||||
<div class="li-content">
|
||||
<a href="javascript:void(0)" style="font-size: 0.8em; font-family: 'Open Sans'; font-weight:300;">
|
||||
|
||||
{{ 'Welcome' | trans }}<br/>
|
||||
|
||||
<b>{{ app.user.username }}{{ render(controller('ChillMainBundle:UI:showNotificationUserCounter')) }}</b>
|
||||
|
||||
{% if is_granted('ROLE_PREVIOUS_ADMIN') %}
|
||||
<i class="fa fa-wrench fa-lg" title="Impersonate mode"></i>
|
||||
{% endif %}
|
||||
|
||||
</a>
|
||||
</div>
|
||||
<ul class="submenu width-11-em user-menu-list" style="padding-left: 0; padding-right: 0; background-color:transparent;">
|
||||
{% 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;">
|
||||
|
||||
|
||||
{% if is_granted('ROLE_PREVIOUS_ADMIN') and menu.name == 'Logout' %}
|
||||
|
||||
<a href="{{ path('admin_user', {'_switch_user': '_exit'}) }}">
|
||||
{{ 'Exit impersonation'|trans }}
|
||||
</a>
|
||||
|
||||
{% else %}
|
||||
<a href="{{ menu.uri }}">{{ menu.label|trans }}</a>
|
||||
{% endif %}
|
||||
|
||||
</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 %}
|
||||
{% if menu.extras.icon is defined %}
|
||||
<i class="fa fa-{{ menu.extras.icon }}"></i>
|
||||
{% endif %}
|
||||
{% endapply %}</div>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
#}
|
||||
|
||||
<li class="nav-item dropdown btn btn-primary">
|
||||
<a class="nav-link dropdown-toggle" type="button" id="dropdownMenu2Button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<a id="menu-user"
|
||||
class="nav-link dropdown-toggle"
|
||||
type="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
|
||||
{{ 'Welcome' | trans }}<br/>
|
||||
<b>{{ app.user.username }}{{ render(controller('ChillMainBundle:UI:showNotificationUserCounter')) }}</b>
|
||||
|
||||
<b>
|
||||
{{ app.user.username }}
|
||||
{{ render(controller('ChillMainBundle:UI:showNotificationUserCounter')) }}
|
||||
</b>
|
||||
|
||||
{% if is_granted('ROLE_PREVIOUS_ADMIN') %}
|
||||
<i class="fa fa-wrench fa-lg" title="Impersonate mode"></i>
|
||||
{% endif %}
|
||||
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right py-0 rounded-0" aria-labelledby="dropdownMenu2Button">
|
||||
<div class="dropdown-menu dropdown-menu-end dropdown-menu-dark" aria-labelledby="menu-user">
|
||||
|
||||
{% for menu in menus %}
|
||||
{% if is_granted('ROLE_PREVIOUS_ADMIN') and menu.name == 'Logout' %}
|
||||
<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 }}
|
||||
<a class="dropdown-item list-group-item bg-dark text-white"
|
||||
href="{{ path('admin_user', {'_switch_user': '_exit'}) }}">
|
||||
{{ 'Exit impersonation'|trans }}
|
||||
{% else %}
|
||||
<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 }}
|
||||
<a class="dropdown-item list-group-item bg-dark text-white"
|
||||
href="{{ menu.uri }}">{{ menu.label|trans }}
|
||||
{% endif %}
|
||||
{% if menu.extras.icon is defined %}
|
||||
<i class="fa fa-{{ menu.extras.icon }}"></i>
|
||||
{% endif %}
|
||||
</a>
|
||||
{% if menu.extras.icon is defined %}
|
||||
<i class="fa fa-{{ menu.extras.icon }} fa-lg"></i>
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
@ -43,36 +43,32 @@
|
||||
<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 -%}
|
||||
<i class="fa fa-li fa-map-marker"></i>
|
||||
{{ person.currentHouseholdAddress|chill_entity_render_box({'multiline': false, 'with_valid_from': false}) }}
|
||||
{%- elseif person.lastAddress is not empty -%}
|
||||
<i class="fa fa-li fa-map-marker"></i>
|
||||
{{ 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 }}">
|
||||
<a href="{{ 'tel:' ~ person.mobilenumber }}" class="phone mr-3" title="{{ 'Mobilenumber'|trans }}">
|
||||
{{ person.mobilenumber|chill_format_phonenumber }}</a>
|
||||
{% else %}
|
||||
{% elseif person.phonenumber %}
|
||||
<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 %}
|
||||
<a href="{{ 'tel:' ~ person.phonenumber }}" class="phone mr-3" title="{{ 'Phonenumber'|trans }}">
|
||||
{{ person.phonenumber|chill_format_phonenumber }}</a>
|
||||
{% endif %}
|
||||
|
||||
<span class="ml-3">
|
||||
<i class="fa fa-fw fa-envelope-o"></i>
|
||||
</li>
|
||||
<li>
|
||||
{% if person.email %}
|
||||
<i class="fa fa-li fa-envelope-o"></i>
|
||||
<a href="{{ 'mailto:' ~ person.email }}" class="email" title="{{ 'Email'|trans }}">
|
||||
{{ person.email|chill_print_or_message("thirdparty.No_email") }}
|
||||
{{ person.email }}
|
||||
</a>
|
||||
</span>
|
||||
{% endif %}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -84,7 +80,7 @@
|
||||
<div class="container-xxl">
|
||||
<div class="row justify-content-md-right">
|
||||
|
||||
<div class="col-sm-5" style="padding-left: 2em;">
|
||||
<div class="col-sm-5" style="@media (min-width: 576px) { padding-left: 2em; }">
|
||||
<span class="open_sansbold">
|
||||
{{ 'Birthdate'|trans|upper }} :
|
||||
</span>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user