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

wip.. navbar bootstrap

Browse Source
This commit is contained in:
Mathieu Jaumotte 2021-03-20 23:28:04 +01:00
parent e0ae5d56f0
commit 19326ee750
7 changed files with 1252 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/_custom.scss
View File

@ -13,4 +13,26 @@
h1, h2, .h1, .h2 { h1, h2, .h1, .h2 {
font-weight: $headings-font-weight + 200; font-weight: $headings-font-weight + 200;
}
nav.navbar {
.navbar-brand {
img {
height: 50px;
margin: -0.3125rem 0;
}
}
.navbar-toggler,
.navbar-collapse { float: right; }
.navbar-nav {
display: flex;
align-items: center;
}
.dropdown-menu {
.dropdown-item {
i {
float: right;
}
}
}
} }

50
src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/bootstrap.scss vendored
View File

@ -4,43 +4,43 @@
@import "bootstrap/scss/functions"; @import "bootstrap/scss/functions";
/* replace variables */ /* replace variables */
// @import "bootstrap/scss/variables"; //@import "bootstrap/scss/variables";
@import "custom/_variables"; @import "custom/_variables";
@import "bootstrap/scss/mixins"; @import "bootstrap/scss/mixins";
// @import "bootstrap/scss/root"; @import "bootstrap/scss/root";
@import "bootstrap/scss/reboot"; @import "bootstrap/scss/reboot";
@import "bootstrap/scss/type"; @import "bootstrap/scss/type";
// @import "bootstrap/scss/images"; @import "bootstrap/scss/images";
// @import "bootstrap/scss/code"; @import "bootstrap/scss/code";
@import "bootstrap/scss/grid"; @import "bootstrap/scss/grid";
// @import "bootstrap/scss/tables"; @import "bootstrap/scss/tables";
// @import "bootstrap/scss/forms"; @import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons"; @import "bootstrap/scss/buttons";
@import "bootstrap/scss/transitions"; @import "bootstrap/scss/transitions";
// @import "bootstrap/scss/dropdown"; @import "bootstrap/scss/dropdown";
// @import "bootstrap/scss/button-group"; @import "bootstrap/scss/button-group";
// @import "bootstrap/scss/input-group"; @import "bootstrap/scss/input-group";
// @import "bootstrap/scss/custom-forms"; @import "bootstrap/scss/custom-forms";
@import "bootstrap/scss/nav"; @import "bootstrap/scss/nav";
// @import "bootstrap/scss/navbar"; @import "bootstrap/scss/navbar";
// @import "bootstrap/scss/card"; @import "bootstrap/scss/card";
// @import "bootstrap/scss/breadcrumb"; @import "bootstrap/scss/breadcrumb";
// @import "bootstrap/scss/pagination"; @import "bootstrap/scss/pagination";
@import "bootstrap/scss/badge"; @import "bootstrap/scss/badge";
// @import "bootstrap/scss/jumbotron"; @import "bootstrap/scss/jumbotron";
@import "bootstrap/scss/alert"; @import "bootstrap/scss/alert";
// @import "bootstrap/scss/progress"; @import "bootstrap/scss/progress";
// @import "bootstrap/scss/media"; @import "bootstrap/scss/media";
// @import "bootstrap/scss/list-group"; @import "bootstrap/scss/list-group";
// @import "bootstrap/scss/close"; @import "bootstrap/scss/close";
// @import "bootstrap/scss/toasts"; @import "bootstrap/scss/toasts";
@import "bootstrap/scss/modal"; @import "bootstrap/scss/modal";
// @import "bootstrap/scss/tooltip"; @import "bootstrap/scss/tooltip";
// @import "bootstrap/scss/popover"; @import "bootstrap/scss/popover";
// @import "bootstrap/scss/carousel"; @import "bootstrap/scss/carousel";
// @import "bootstrap/scss/spinners"; @import "bootstrap/scss/spinners";
@import "bootstrap/scss/utilities"; @import "bootstrap/scss/utilities";
// @import "bootstrap/scss/print"; @import "bootstrap/scss/print";
@import "custom"; @import "custom";

1126
src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/custom/_variables.scss
View File

File diff suppressed because it is too large Load Diff

3
src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/index.js
View File

@ -6,6 +6,9 @@ require('./bootstrap.scss');
// You can specify which plugins you need // You can specify which plugins you need
import Collapse from 'bootstrap/js/src/collapse';
import Dropdown from 'bootstrap/js/src/dropdown';
//import { Tooltip, Toast, Popover } from 'bootstrap'; //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';

20
src/Bundle/ChillMainBundle/Resources/views/Menu/section.html.twig
View File

@ -16,6 +16,7 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>. * along with this program. If not, see <http://www.gnu.org/licenses/>.
#} #}
{#
<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>
@ -39,3 +40,22 @@
{% endfor %} {% endfor %}
</ul> </ul>
</li> </li>
#}
<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">
Sections
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1Button">
{% for menu in menus %}
<a class="dropdown-item" href="{{ menu.uri }}">{{ menu.label }}
{% apply spaceless %}
{% if menu.extras.icons is defined %}
{% for icon in menu.extras.icons %}
<i class="fa fa-{{ icon }}"></i>
{% endfor %}
{% endif %}
{% endapply %}</a>
{% endfor %}
</div>
</li>

33
src/Bundle/ChillMainBundle/Resources/views/Menu/user.html.twig
View File

@ -16,6 +16,7 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>. * along with this program. If not, see <http://www.gnu.org/licenses/>.
#} #}
{#
<li class="nav-link2 user-menu"> <li class="nav-link2 user-menu">
<div class="li-content"> <div class="li-content">
<a href="javascript:void(0)" style="font-size: 0.8em; font-family: 'Open Sans'; font-weight:300;"> <a href="javascript:void(0)" style="font-size: 0.8em; font-family: 'Open Sans'; font-weight:300;">
@ -36,7 +37,7 @@
<div style="margin-bottom:2px;"> <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;"> <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;">
{# Impersonate case logout #}
{% if is_granted('ROLE_PREVIOUS_ADMIN') and menu.name == 'Logout' %} {% if is_granted('ROLE_PREVIOUS_ADMIN') and menu.name == 'Logout' %}
<a href="{{ path('admin_user', {'_switch_user': '_exit'}) }}"> <a href="{{ path('admin_user', {'_switch_user': '_exit'}) }}">
@ -58,3 +59,33 @@
{% endfor %} {% endfor %}
</ul> </ul>
</li> </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">
{{ '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 class="dropdown-menu" aria-labelledby="dropdownMenu2Button">
{% for menu in menus %}
{% if is_granted('ROLE_PREVIOUS_ADMIN') and menu.name == 'Logout' %}
<a class="dropdown-item" href="{{ path('admin_user', {'_switch_user': '_exit'}) }}">
{{ 'Exit impersonation'|trans }}
{% else %}
<a class="dropdown-item" href="{{ menu.uri }}">{{ menu.label|trans }}
{% endif %}
{% if menu.extras.icon is defined %}
<i class="fa fa-{{ menu.extras.icon }}"></i>
{% endif %}
</a>
{% endfor %}
</div>
</li>

104
src/Bundle/ChillMainBundle/Resources/views/layout.html.twig
View File

@ -28,8 +28,10 @@
<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">
{{ encore_entry_link_tags('scratch') }} {#
{{ encore_entry_link_tags('chill') }} <link rel="stylesheet" href="{{ asset('build/scratch.css') }}"/>
#}
<link rel="stylesheet" href="{{ asset('build/chill.css') }}"/>
{% if active_bootstrap == 1 %} {% if active_bootstrap == 1 %}
{{ encore_entry_link_tags('bootstrap') }} {{ encore_entry_link_tags('bootstrap') }}
{% endif %} {% endif %}
@ -43,59 +45,65 @@
</head> </head>
<body> <body>
<header class="navigation container-fluid"> <header>
<div class="grid-4 hide-tablet hide-mobile parent"> <nav class="navbar navbar-expand-md navbar-dark bg-primary">
<div class="grid-10 push-2 grid-tablet-12 grid-mobile-12 push-tablet-0 grid-mobile-0 logo-container">
<a href="{{ path('chill_main_homepage') }}"> <div class="col-4">
<a class="navbar-brand" href="{{ path('chill_main_homepage') }}">
{{ include('@ChillMain/Layout/_header-logo.html.twig') }} {{ include('@ChillMain/Layout/_header-logo.html.twig') }}
</a> </a>
</div> </div>
</div> <div class="col-8">
<div class="grid-8 grid-tablet-12 grid-mobile-12 text-right parent">
<div class="nav"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
<ul class="navigation-menu"> aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
{% block navigation_section_menu %} <span class="navbar-toggler-icon"></span>
{{ chill_menu('section', { </button>
'layout': '@ChillMain/Menu/section.html.twig',
<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 my-2 my-sm-0" type="submit"><i class="fa 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',
}) }} }) }}
{% endblock %}
{{ chill_menu('user', { {% if available_languages|length == 1 %}
'layout': '@ChillMain/Menu/user.html.twig', <li class="nav-item">
}) }} <a class="btn btn-primary" 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 %}
{% if available_languages|length == 1 %} </ul>
<li class="nav-link2 lang-selection">
<div class="li-content">
<a href="">{{ available_languages[0] | capitalize }}</a>
</div>
</li>
{% else %}
<li class="nav-link2 lang-selection">
<div class="li-content">
<a href="#" class="more">{{ app.request.locale | capitalize }}</a>
</div>
<ul class="submenu">
{% for lang in available_languages %}
<li {% if lang == app.request.locale %}class="active"{% endif %}>
<a href="{{ path(app.request.get('_route'), app.request.get('_route_params')|merge({'_locale' : lang})) }}">{{ lang | capitalize }}</a>
</li>
{% endfor %}
</ul>
</li>
{% endif %}
</ul>
</div>
{% block navigation_search_bar %}
<div class="navigation-search">
<form action="{{ path('chill_main_search') }}" method="get">
<input name="q" type="search" placeholder="{{ 'Search'|trans }}" {% if _search_pattern is defined %}value="{{ _search_pattern }}"{% endif %}/>
<button type="submit" class="sc-button"><i class="fa fa-search fa-flip-horizontal"></i></button>
</form>
</div> </div>
{% endblock %} </div>
</div> </nav>
</header> </header>
{% block top_banner %}{# To use if you want to add a banner below the header (ie the menu) #}{% endblock %} {% block top_banner %}{# To use if you want to add a banner below the header (ie the menu) #}{% endblock %}