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>

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

@ -24,8 +24,9 @@
{% 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">
<div class="col-8 ml-auto">
{# Flash messages ! #} {# Flash messages ! #}
<div class="container-fluid"> <div class="container-fluid">
{% for flashMessage in app.session.flashbag.get('success') %} {% for flashMessage in app.session.flashbag.get('success') %}
@ -56,10 +57,10 @@
{% 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="grid-3 float-right">
{% 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>
</div> </div>
</div>
{% endblock %} {% endblock %}

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

@ -20,10 +20,13 @@
{% 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="grid-7"> <div class="container-fluid">
<div class="row" id="header-person-name">
<div class="col-sm-11 ml-auto">
<div class="row">
<div class="col-sm">
<h1> <h1>
{% set gender = {% set gender =
(person.gender == "woman") ? 'female' : (person.gender == "woman") ? 'female' :
@ -39,7 +42,7 @@
</h1> </h1>
</div> </div>
<div class="grid-5"> <div class="col-sm">
<ul class="list-content fa-ul"> <ul class="list-content fa-ul">
<li> <li>
<i class="fa fa-li fa-map-marker"></i> <i class="fa fa-li fa-map-marker"></i>
@ -74,15 +77,17 @@
</span> </span>
</li> </li>
</ul> </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="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">
<div class="grid-5">
<span class="open_sansbold">{{ 'Birthdate'|trans|upper }}&nbsp;:</span> <span class="open_sansbold">{{ 'Birthdate'|trans|upper }}&nbsp;:</span>
{% if person.birthdate == null %} {% if person.birthdate == null %}
{{ 'Unknown date of birth'|trans }} {{ 'Unknown date of birth'|trans }}
@ -93,7 +98,7 @@
</div> </div>
{%- if chill_person.fields.nationality == 'visible' -%} {%- if chill_person.fields.nationality == 'visible' -%}
<div class="grid-4"> <div class="col-sm">
<span class="open_sansbold">{{ 'Nationality'|trans|upper}}&nbsp;:</span> <span class="open_sansbold">{{ 'Nationality'|trans|upper}}&nbsp;:</span>
{% if person.nationality is not null %} {% if person.nationality is not null %}
{{ person.nationality.name|localize_translatable_string }} {{ person.nationality.name|localize_translatable_string }}
@ -104,13 +109,16 @@
{%- endif -%} {%- endif -%}
{%- if chill_person.fields.spoken_languages == 'visible' -%} {%- if chill_person.fields.spoken_languages == 'visible' -%}
<div class="grid-3"> <div class="col-sm">
<span class="open_sansbold">{{ 'Center'|trans|upper}}&nbsp;:</span> {{ person.center.name|upper }} <span class="open_sansbold">{{ 'Center'|trans|upper}}&nbsp;:</span> {{ person.center.name|upper }}
</div> </div>
{%- endif -%} {%- endif -%}
</div> </div>
</div> </div>
</div>
</div>
</div> </div>
<span id="banner-person"></span> <span id="banner-person"></span>
{% endblock %} {% endblock %}

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>
#}