bootstrap5, main layout settings

This commit is contained in:
Mathieu Jaumotte 2021-07-02 13:00:56 +02:00
parent 3694eb5bf2
commit 8e8cdfce0a
12 changed files with 491 additions and 448 deletions

View File

@ -2,143 +2,178 @@
* These custom styles will override bootstrap enabled stylesheets * These custom styles will override bootstrap enabled stylesheets
*/ */
/// titles
h1, h2, .h1, .h2 { h1, h2, .h1, .h2 {
font-weight: $headings-font-weight + 200; font-weight: $headings-font-weight + 200;
} }
/// buttons
.btn-success,
.btn-success:hover,
.btn-warning,
.btn-warning:hover {
color: $gray-100;
}
/// typography
.open_sansbold { .open_sansbold {
font-weight: bold; font-weight: bold;
} }
.chill-user-quote { /// forms
border-left: 10px solid $yellow;
margin: 1.5em 10px;
padding: .5em 15px;
quotes: "\201C" "\201D" "\2018" "\2019";
background-color: $gray-200;
blockquote {
border-left: 0.4em solid $gray-400;
padding-left: 0.9em;
margin-left: 0.9em;
font-style: italic;
}
}
@mixin title_in_form { @mixin title_in_form {
font-size: 1.438em; font-size: 1.438em;
font-weight: 700; font-weight: 700;
width: 100%; width: 100%;
border-bottom: 3px solid $gray-200; border-bottom: 3px solid $gray-200;
margin-bottom: 1em; margin-bottom: 1em;
display: block; display: block;
} }
form { form {
fieldset { fieldset {
margin-top: 1em; margin-top: 1em;
& > legend { & > legend {
@include title_in_form; @include title_in_form;
} }
} }
/* avoid useless html in first level of the custom fields row loop in forms /* avoid useless html in first level of the custom fields row loop in forms
* (better should to improve the loop) * (better should to improve the loop)
*/ */
& > div.container-fluid { & > div.container-fluid {
& > div.row > .parent { & > div.row > .parent {
padding: 0; padding: 0;
& div.cf-fields span.cf-title { & div.cf-fields span.cf-title {
margin: 1em -15px 0; margin: 1em -15px 0;
width: calc(100% + 30px); width: calc(100% + 30px);
@include title_in_form; @include title_in_form;
}
} }
} }
} label.required:after {
label.required:after { content: " *";
content: " *"; color: $red;
color: $red; }
}
} }
/// chill elements of design
.sticky-form-buttons { .sticky-form-buttons {
margin-top: 4em; margin-top: 4em;
background-color: $beige; background-color: $beige;
position: sticky; position: sticky;
bottom: 0.3em; bottom: 0.3em;
text-align: center; text-align: center;
display: flex; display: flex;
padding: 0.8em 1.6em; padding: 0.8em 1.6em;
border-radius: 0; border-radius: 0;
}
.chill-user-quote {
border-left: 10px solid $yellow;
margin: 1.5em 10px;
padding: 0.5em 15px;
quotes: "\201C" "\201D" "\2018" "\2019";
background-color: $gray-200;
blockquote {
border-left: 0.4em solid $gray-400;
padding-left: 0.9em;
margin-left: 0.9em;
font-style: italic;
}
} }
div.chill_address { div.chill_address {
div.chill_address_address { div.chill_address_address {
margin: .7em 0; margin: 0.7em 0;
font-size: 98%; font-size: 98%;
font-variant: small-caps; font-variant: small-caps;
p { p {
display: inline-block; display: inline-block;
margin: 0 0 0 1.5em; margin: 0 0 0 1.5em;
text-indent: -1.5em; text-indent: -1.5em;
} }
} }
} }
/// base layout
body {
html, body { display: flex;
min-height: 100%; flex-direction: column;
height: 100%; min-height: 100vh;
footer {
margin-top: auto;
}
} }
nav.navbar { nav.navbar {
.navbar-brand { padding: 0;
img { .navbar-brand img {
height: 50px; height: 50px;
margin: -0.3125rem 0; margin: 8px 0;
} }
} .navbar-collapse,
.navbar-toggler, .navbar-toggler {
.navbar-collapse { float: right;
float: right; }
} ul.navbar-nav {
.navbar-nav { display: flex;
display: flex; align-items: stretch;
align-items: center; li.nav-item {
} display: flex;
.nav-item a { &.btn {
} padding-top: 0;
.dropdown-menu { padding-bottom: 0;
.dropdown-item { }
width: 120%; & > a {
i { align-self: center;
float: right; }
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.header-name,
div.header-details {
div.row > div:first-child {
margin-left: 1.5em;
}
} }
#content_conainter {
position: relative;
min-height: calc(100% - 195px);
}
.footer { footer.footer {
background: $dark; background: $dark;
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
width: 100%; width: 100%;
p { p {
font-family: Open Sans; font-family: Open Sans;
font-weight: 300; font-weight: 300;
clear: both; clear: both;
color: $white; color: $white;
font-size: .9em; font-size: 0.9em;
line-height: 1.5em; line-height: 1.5em;
margin: auto; margin: auto;
max-width: 35em; max-width: 35em;
text-align: center; text-align: center;
a, a:hover { a, a:hover {
text-decoration: underline; text-decoration: underline;
} }
} }
} }

View File

@ -23,7 +23,7 @@ $black: #111 !default;
// scss-docs-start gray-colors-map // scss-docs-start gray-colors-map
$grays: ( $grays: (
"100": $gray-100, "100": $gray-100,
"200": $gray-200, /* = $chill-llight-gray, $chill-gray */ "200": $gray-200, /* = $chill-light-gray, $chill-gray */
"300": $gray-300, "300": $gray-300,
"400": $gray-400, "400": $gray-400,
"500": $gray-500, /* = $chill-light-gray */ "500": $gray-500, /* = $chill-light-gray */

View File

@ -4,10 +4,7 @@
// Or compile bootstrap only enabled assets // Or compile bootstrap only enabled assets
require('./bootstrap.scss'); require('./bootstrap.scss');
// You can specify which plugins you need // You can specify which plugins you need
import Dropdown from 'bootstrap/js/src/dropdown'; import Dropdown from 'bootstrap/js/src/dropdown';
//import { Tooltip, Toast, Popover } from 'bootstrap';
import Modal from 'bootstrap/js/dist/modal'; import Modal from 'bootstrap/js/dist/modal';
import Collapse from 'bootstrap/js/src/collapse'; import Collapse from 'bootstrap/js/src/collapse';

View File

@ -11,12 +11,6 @@
@import 'alert-with-actions'; @import 'alert-with-actions';
/* [hack] /!\ Contourne le positionnement problématique du div#content_conainter suivant,
* car sa position: relative le place au-dessus du bandeau et les liens sont incliquables */
div.subheader {
height: 130px;
}
/* /*
* Specific rules * Specific rules
*/ */

View File

@ -1,4 +1,9 @@
<footer class="footer"> <footer class="footer">
<p>{{ 'This program is free software: you can redistribute it and/or modify it under the terms of the <strong>GNU Affero General Public License</strong>'|trans|raw }} <p>
<br/> <a name="bottom" class="btn text-white" href="https://{{ app.request.locale }}.wikibooks.org/wiki/Chill" target="_blank">{{ 'User manual'|trans }}</a></p> {{ 'This program is free software: you can redistribute it and/or modify it under the terms of the <strong>GNU Affero General Public License</strong>'|trans|raw }}
<br/>
<a name="bottom" class="btn text-white" href="https://{{ app.request.locale }}.wikibooks.org/wiki/Chill" target="_blank">
{{ 'User manual'|trans }}
</a>
</p>
</footer> </footer>

View File

@ -0,0 +1,105 @@
{#
* Copyright (C) 2014-2021, Champs Libres Cooperative SCRLFS,
* <info@champs-libres.coop> / <http://www.champs-libres.coop>
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* 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/>.
#}
<header>
<nav class="navbar navbar-dark bg-primary navbar-expand-md">
<div class="container-xxl">
<div class="col-4">
<a class="navbar-brand" href="{{ path('chill_main_homepage') }}">
{{ include('@ChillMain/Layout/_header-logo.html.twig') }}
</a>
</div>
<div class="col-8">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<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 }}"
{% 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>
</button>
</form>
</li>
{% endblock %}
{% block navigation_section_menu %}
{{ chill_menu('section', {
'layout': '@ChillMain/Menu/section.html.twig',
}) }}
{% endblock %}
{{ chill_menu('user', {
'layout': '@ChillMain/Menu/user.html.twig',
}) }}
{% if available_languages|length == 1 %}
<li class="nav-item btn btn-primary">
<a class="text-white-50" href="">
{{ available_languages[0] | capitalize }}
</a>
</li>
{% else %}
<li class="nav-item dropdown btn btn-primary">
<a id="dropdownMenu3Button"
class="nav-link dropdown-toggle"
type="button"
data-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">
{% for lang in available_languages %}
<a class="dropdown-item{% if lang == app.request.locale %} active{% endif %}"
href="{{ path(app.request.get('_route'), app.request.get('_route_params')|merge({'_locale' : lang})) }}">
{{ lang | capitalize }}
</a>
{% endfor %}
</div>
</li>
{% endif %}
</ul>
</div>
</div>
</div>
</nav>
</header>

View File

@ -15,56 +15,30 @@
* 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">
<div class="li-content">
<a href="javascript:void(0)" class="more">Sections</a>
</div>
<ul class="ww">
{% for menu in menus %}
<li style="xx">
<div style="vv">
<div style="yy">
<a href="{{ menu.uri }}">{{ menu.label }}</a>
</div>
<div style="zz">{% apply spaceless %}
{% if menu.extras.icons is defined %}
{% for icon in menu.extras.icons %}
<i class="fa fa-{{ icon }}"></i>
{% endfor %}
{% endif %}
{% endapply %}</div>
</div>
</li>
{% endfor %}
</ul>
</li>
#}
<li class="nav-item dropdown btn btn-primary"> <li class="nav-item dropdown btn btn-primary">
<a class="nav-link dropdown-toggle" type="button" id="dropdownMenu1Button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <a id="dropdownMenu1Button"
Sections class="nav-link dropdown-toggle"
type="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
{{ 'Sections'|trans }}
</a> </a>
<div class="dropdown-menu py-0 rounded-0" aria-labelledby="dropdownMenu1Button"> <div
{% for menu in menus %} class="dropdown-menu"
<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 }} aria-labelledby="dropdownMenu1Button">
{% apply spaceless %} {% for menu in menus %}
{% if menu.extras.icons is defined %} <a class="dropdown-item list-group-item bg-dark text-white"
{% for icon in menu.extras.icons %} href="{{ menu.uri }}">
<i class="fa fa-{{ icon }}"></i> {{ menu.label }}
{% endfor %} {% apply spaceless %}
{% endif %} {% if menu.extras.icons is defined %}
{% endapply %}</a> {% for icon in menu.extras.icons %}
{% endfor %} <i class="fa fa-{{ icon }}"></i>
{% endfor %}
{% endif %}
{% endapply %}</a>
{% endfor %}
</div> </div>
</li> </li>

View File

@ -1,19 +1,19 @@
{# {#
* Copyright (C) 2014-2015, Champs Libres Cooperative SCRLFS, * Copyright (C) 2014-2021, Champs Libres Cooperative SCRLFS,
<info@champs-libres.coop> / <http://www.champs-libres.coop> <info@champs-libres.coop> / <http://www.champs-libres.coop>
* *
* This program is free software: you can redistribute it and/or modify * This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as * it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the * published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version. * License, or (at your option) any later version.
* *
* This program is distributed in the hope that it will be useful, * This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of * but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details. * GNU Affero General Public License for more details.
* *
* 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/>.
#} #}
{# {#
@ -26,159 +26,93 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge"> <meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{ installation.name }} - {% block title %}{% endblock %}</title> <title>{{ installation.name }} - {% block title %}{% endblock %}</title>
<link rel="shortcut icon" href="{{ asset('build/images/favicon.ico') }}" type="image/x-icon"> <link rel="shortcut icon" href="{{ asset('build/images/favicon.ico') }}" type="image/x-icon">
{#
<link rel="stylesheet" href="{{ asset('build/scratch.css') }}"/> {{ encore_entry_link_tags('bootstrap') }}
#} {{ encore_entry_link_tags('forkawesome') }}
<link rel="stylesheet" href="{{ asset('build/chill.css') }}"/> {{ encore_entry_link_tags('ckeditor5') }}
{% if active_bootstrap == 1 %} {{ encore_entry_link_tags('chill') }}
{{ encore_entry_link_tags('bootstrap') }}
{% endif %}
{% if active_forkawesome == 1 %}
{{ encore_entry_link_tags('forkawesome') }}
{% endif %}
{% if active_ckeditor == 1 %}
{{ encore_entry_link_tags('ckeditor5') }}
{% endif %}
{% block css%}<!-- nothing added to css -->{% endblock %} {% block css%}<!-- nothing added to css -->{% endblock %}
</head> </head>
<body> <body>
<header> {{ include('@ChillMain/Layout/_header.html.twig') }}
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
{% block top_banner %}{#
To use if you want to add a banner below the header (ie the menu)
#}{% endblock %}
<div class="col-4"> <div class="content">
<a class="navbar-brand" href="{{ path('chill_main_homepage') }}"> {% block sublayout_content %}
{{ include('@ChillMain/Layout/_header-logo.html.twig') }} <div class="container-xxl">
</a> <div class="row justify-content-center">
</div>
<div class="col-8"> {# Flash messages ! #}
{% for flashMessage in app.session.flashbag.get('success') %}
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" <div class="col-8 alert alert-success flash_message">
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span>
<span class="navbar-toggler-icon"></span> {{ flashMessage|raw }}
</button> </span>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
{% block navigation_search_bar %}
<li class="nav-item navigation-search">
<form class="form-inline my-2 my-sm-0" action="{{ path('chill_main_search') }}" method="get">
<input class="form-control mr-sm-2" name="q" type="search" placeholder="{{ 'Search'|trans }}" {% if _search_pattern is defined %}value="{{ _search_pattern }}"{% endif %}/>
<button class="btn text-white-50 my-2 my-sm-0" type="submit"><i class="fa fa-lg fa-search fa-flip-horizontal"></i></button>
</form>
</li>
{% endblock %}
{% block navigation_section_menu %}
{{ chill_menu('section', {
'layout': '@ChillMain/Menu/section.html.twig',
}) }}
{% endblock %}
{{ chill_menu('user', {
'layout': '@ChillMain/Menu/user.html.twig',
}) }}
{% if available_languages|length == 1 %}
<li class="nav-item btn btn-primary">
<a class="text-white-50" href="">{{ available_languages[0] | capitalize }}</a>
</li>
{% else %}
<li class="nav-item dropdown btn btn-primary">
<a class="nav-link dropdown-toggle" type="button" id="dropdownMenu3Button" data-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">
{% for lang in available_languages %}
<a class="dropdown-item{% if lang == app.request.locale %} active{% endif %}"
href="{{ path(app.request.get('_route'), app.request.get('_route_params')|merge({'_locale' : lang})) }}">{{ lang | capitalize }}</a>
{% endfor %}
</div>
</li>
{% endif %}
</ul>
</div> </div>
</div> {% endfor %}
</nav>
</header>
{% block top_banner %}{# To use if you want to add a banner below the header (ie the menu) #}{% endblock %} {% for flashMessage in app.session.flashbag.get('error') %}
<div class="col-8 alert alert-danger flash_message">
<div id="content_conainter"> <span>
{% block sublayout_containter %} {{ flashMessage|raw }}
<div class="container-fluid content"> </span>
<div class="row justify-content-center">
{# Flash messages ! #}
{% for flashMessage in app.session.flashbag.get('success') %}
<div class="col-8 alert alert-success flash_message">
<span>
{{ flashMessage|raw }}
</span>
</div>
{% endfor %}
{% for flashMessage in app.session.flashbag.get('error') %}
<div class="col-8 alert alert-danger flash_message">
<span>
{{ flashMessage|raw }}
</span>
</div>
{% endfor %}
{% for flashMessage in app.session.flashbag.get('notice') %}
<div class="col-8 alert alert-warning flash_message">
<span>
{{ flashMessage|raw }}
</span>
</div>
{% endfor %}
{% block content %}
<div class="col-8 mt-5 flash_message">
<h2>{{ 'Search'|trans }}</h2>
<form action="{{ path('chill_main_search') }}" method="get">
<input class="form-control form-control-lg" name="q" type="search" placeholder="{{ 'Search persons, ...'|trans }}" />
<center>
<button type="submit" class="btn btn-lg btn-warning mt-2"><i class="fa fa-fw fa-search"></i> {{ 'Search'|trans }}</button>
</center>
</form>
</div>
{{ chill_widget('homepage', {} ) }}
{% endblock %}
</div> </div>
{% endfor %}
{% for flashMessage in app.session.flashbag.get('notice') %}
<div class="col-8 alert alert-warning flash_message">
<span>
{{ flashMessage|raw }}
</span>
</div>
{% endfor %}
{% block content %}
<div class="col-8 mt-5 flash_message">
<h2>{{ 'Search'|trans }}</h2>
<form action="{{ path('chill_main_search') }}" method="get">
<input class="form-control form-control-lg" name="q" type="search" placeholder="{{ 'Search persons, ...'|trans }}" />
<center>
<button type="submit" class="btn btn-lg btn-warning mt-2">
<i class="fa fa-fw fa-search"></i> {{ 'Search'|trans }}
</button>
</center>
</form>
</div>
{{ chill_widget('homepage', {} ) }}
{% endblock %}
</div> </div>
{% endblock %} </div>
{% endblock %}
</div> </div>
{{ include('@ChillMain/Layout/_footer.html.twig') }} {{ include('@ChillMain/Layout/_footer.html.twig') }}
{{ encore_entry_script_tags('scratch') }} {{ encore_entry_script_tags('bootstrap') }}
{{ encore_entry_script_tags('forkawesome') }}
{{ encore_entry_script_tags('ckeditor5') }}
{{ encore_entry_script_tags('chill') }} {{ encore_entry_script_tags('chill') }}
{% if active_bootstrap == 1 %}
{{ encore_entry_script_tags('bootstrap') }}
{% endif %}
{% if active_forkawesome == 1 %}
{{ encore_entry_script_tags('forkawesome') }}
{% endif %}
{% if active_ckeditor == 1 %}
{{ encore_entry_script_tags('ckeditor5') }}
{% endif %}
<script type="text/javascript"> <script type="text/javascript">
window.addEventListener('DOMContentLoaded', function(e) { window.addEventListener('DOMContentLoaded', function(e) {
chill.checkOtherValueOnChange(); chill.checkOtherValueOnChange();
$('.select2').select2({ $('.select2').select2({
allowClear: true, allowClear: true,
theme: "bootstrap" theme: "bootstrap"
});
chill.categoryLinkParentChildSelect();
}); });
chill.categoryLinkParentChildSelect(); </script>
});
</script> {% block js%}<!-- nothing added to js -->{% endblock %}
{% block js%}<!-- nothing added to js -->{% endblock %} </body>
</body> </html>
</html>

View File

@ -1,19 +1,19 @@
{# {#
* Copyright (C) 2014-2015, Champs Libres Cooperative SCRLFS, * Copyright (C) 2014-2021, Champs Libres Cooperative SCRLFS,
<info@champs-libres.coop> / <http://www.champs-libres.coop> <info@champs-libres.coop> / <http://www.champs-libres.coop>
* *
* This program is free software: you can redistribute it and/or modify * This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as * it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the * published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version. * License, or (at your option) any later version.
* *
* This program is distributed in the hope that it will be useful, * This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of * but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details. * GNU Affero General Public License for more details.
* *
* 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/>.
#} #}
{# {#
@ -23,34 +23,29 @@
{% extends "@ChillMain/layout.html.twig" %} {% extends "@ChillMain/layout.html.twig" %}
{% block sublayout_containter %} {% block sublayout_content %}
<div class="container-fluid"> <div class="container-xxl">
<div class="row"> <div class="row">
<div class="col-8 ml-auto"> <div class="col-9">
{# Flash messages ! #} {# Flash messages ! #}
<div class="container-fluid mt-5"> <div class="mt-5">
<div class="row justify-content-center"> <div class="row justify-content-center">
{% for flashMessage in app.session.flashbag.get('success') %} {% for flashMessage in app.session.flashbag.get('success') %}
<div class="col-8 alert alert-success flash_message"> <div class="col-8 alert alert-success flash_message">
<span> <span>{{ flashMessage|raw }}</span>
{{ flashMessage|raw }}
</span>
</div> </div>
{% endfor %} {% endfor %}
{% for flashMessage in app.session.flashbag.get('error') %} {% for flashMessage in app.session.flashbag.get('error') %}
<div class="col-8 alert alert-danger flash_message"> <div class="col-8 alert alert-danger flash_message">
<span> <span>{{ flashMessage|raw }}</span>
{{ flashMessage|raw }}
</span>
</div> </div>
{% endfor %} {% endfor %}
{% for flashMessage in app.session.flashbag.get('notice') %} {% for flashMessage in app.session.flashbag.get('notice') %}
<div class="col-8 alert alert-warning flash_message"> <div class="col-8 alert alert-warning flash_message">
<span> <span>{{ flashMessage|raw }}</span>
{{ flashMessage|raw }}
</span>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
@ -65,4 +60,4 @@
</div> </div>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}

View File

@ -1,4 +1,4 @@
<div class="subheader banner banner-accompanying-course"> <div class="banner banner-accompanying-course">
<div class="grid-12 parent" id="header-accompanying_course-name" > <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 class="grid-10 push-1 grid-mobile-12 grid-tablet-12 push-mobile-0 push-tablet-0 parent">

View File

@ -1,4 +1,4 @@
<div class="subheader banner banner-household"> <div class="banner banner-household">
<div class="grid-12 parent" id="header-household-name" > <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 class="grid-10 push-1 grid-mobile-12 grid-tablet-12 push-mobile-0 push-tablet-0 parent">

View File

@ -19,108 +19,112 @@
{% extends "@ChillMain/layoutWithVerticalMenu.html.twig" %} {% extends "@ChillMain/layoutWithVerticalMenu.html.twig" %}
{% block top_banner %} {% block top_banner %}
<div class="subheader banner banner-person"> <div class="banner banner-person">
<div id="header-person-name" class="header-name">
<div class="container-fluid"> <div class="container-xxl">
<div class="row" id="header-person-name"> <div class="row">
<div class="col-sm-11 ml-auto">
<div class="row"> <div class="col-sm">
<h1>
<div class="col-sm"> {% set gender =
<h1> (person.gender == "woman") ? 'female' :
{% set gender = (person.gender == "both") ? 'neuter' : 'male'
(person.gender == "woman") ? 'female' : %}
(person.gender == "both") ? 'neuter' : 'male' <i class="fa fa-fw fa-{{ gender }}" title="{{ gender|capitalize|trans }}"></i>
%}
<i class="fa fa-fw fa-{{ gender }}" title="{{ gender|capitalize|trans }}"></i> {{ person|chill_entity_render_string }}
{{ person|chill_entity_render_string }} <span class="id-number" title="{{ 'Person'|trans ~ ' ' ~ person.id }}">
{{ person.id|upper }}
<span class="id-number" title="{{ 'Person'|trans ~ ' ' ~ person.id }}"> </span>
{{ person.id|upper }} </h1>
</span> </div>
</h1>
</div> <div class="col-sm">
<ul class="list-content fa-ul">
<div class="col-sm"> <li>
<ul class="list-content fa-ul"> <i class="fa fa-li fa-map-marker"></i>
<li> {%- 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}) }}
{%- if person.currentHouseholdAddress is not empty -%} {%- elseif person.lastAddress is not empty -%}
{{ person.currentHouseholdAddress|chill_entity_render_box({'multiline': false, 'with_valid_from': false}) }} {{ person.lastAddress|chill_entity_render_box({'multiline': false, 'with_valid_from': false}) }}
{%- elseif person.lastAddress is not empty -%} {%- else -%}
{{ person.lastAddress|chill_entity_render_box({'multiline': false, 'with_valid_from': false}) }} <span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
{%- else -%} {%- endif -%}
<span class="chill-no-data-statement">{{ 'No address given'|trans }}</span> </li>
{%- endif -%} <li>
</li> {% if person.mobilenumber %}
<li> <i class="fa fa-li fa-mobile"></i>
{% if person.mobilenumber %} <a href="{{ 'tel:' ~ person.mobilenumber }}" class="phone" title="{{ 'Mobilenumber'|trans }}">
<i class="fa fa-li fa-mobile"></i> {{ person.mobilenumber|chill_format_phonenumber }}</a>
<a href="{{ 'tel:' ~ person.mobilenumber }}" class="phone" title="{{ 'Mobilenumber'|trans }}"> {% else %}
{{ person.mobilenumber|chill_format_phonenumber }}</a> <i class="fa fa-li fa-phone"></i>
{% else %} {% if person.phonenumber %}
<i class="fa fa-li fa-phone"></i> <a href="{{ 'tel:' ~ person.phonenumber }}" class="phone" title="{{ 'Phonenumber'|trans }}">
{% if person.phonenumber %}
<a href="{{ 'tel:' ~ person.phonenumber }}" class="phone" title="{{ 'Phonenumber'|trans }}">
{{ person.phonenumber|chill_format_phonenumber }}</a> {{ person.phonenumber|chill_format_phonenumber }}</a>
{% else %} {% else %}
<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span> <span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
{% endif %}
{% endif %} {% endif %}
{% endif %}
<span class="ml-3">
<i class="fa fa-fw fa-envelope-o"></i> <span class="ml-3">
<a href="{{ 'mailto:' ~ person.email }}" class="email" title="{{ 'Email'|trans }}"> <i class="fa fa-fw fa-envelope-o"></i>
{{ person.email|chill_print_or_message("thirdparty.No_email") }} <a href="{{ 'mailto:' ~ person.email }}" class="email" title="{{ 'Email'|trans }}">
</a> {{ person.email|chill_print_or_message("thirdparty.No_email") }}
</span> </a>
</li> </span>
</ul> </li>
</ul>
</div>
</div> </div>
</div> </div>
</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 id="header-person-details" class="header-details">
<div class="container-xxl">
<div class="row justify-content-md-right">
<div class="col-sm-5" style="padding-left: 2em;">
<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-3">
<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-3">
<span class="open_sansbold">
{{ 'Center'|trans|upper}} &nbsp; :
</span>
{{ person.center.name|upper }}
</div>
{%- endif -%}
</div>
</div>
</div>
<a name="banner-person"></a>
</div> </div>
<span id="banner-person"></span>
{% endblock %} {% endblock %}
{% block layout_wvm_content %} {% block layout_wvm_content %}