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 {
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";
/* replace variables */
// @import "bootstrap/scss/variables";
//@import "bootstrap/scss/variables";
@import "custom/_variables";
@import "bootstrap/scss/mixins";
// @import "bootstrap/scss/root";
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
// @import "bootstrap/scss/images";
// @import "bootstrap/scss/code";
@import "bootstrap/scss/images";
@import "bootstrap/scss/code";
@import "bootstrap/scss/grid";
// @import "bootstrap/scss/tables";
// @import "bootstrap/scss/forms";
@import "bootstrap/scss/tables";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/transitions";
// @import "bootstrap/scss/dropdown";
// @import "bootstrap/scss/button-group";
// @import "bootstrap/scss/input-group";
// @import "bootstrap/scss/custom-forms";
@import "bootstrap/scss/dropdown";
@import "bootstrap/scss/button-group";
@import "bootstrap/scss/input-group";
@import "bootstrap/scss/custom-forms";
@import "bootstrap/scss/nav";
// @import "bootstrap/scss/navbar";
// @import "bootstrap/scss/card";
// @import "bootstrap/scss/breadcrumb";
// @import "bootstrap/scss/pagination";
@import "bootstrap/scss/navbar";
@import "bootstrap/scss/card";
@import "bootstrap/scss/breadcrumb";
@import "bootstrap/scss/pagination";
@import "bootstrap/scss/badge";
// @import "bootstrap/scss/jumbotron";
@import "bootstrap/scss/jumbotron";
@import "bootstrap/scss/alert";
// @import "bootstrap/scss/progress";
// @import "bootstrap/scss/media";
// @import "bootstrap/scss/list-group";
// @import "bootstrap/scss/close";
// @import "bootstrap/scss/toasts";
@import "bootstrap/scss/progress";
@import "bootstrap/scss/media";
@import "bootstrap/scss/list-group";
@import "bootstrap/scss/close";
@import "bootstrap/scss/toasts";
@import "bootstrap/scss/modal";
// @import "bootstrap/scss/tooltip";
// @import "bootstrap/scss/popover";
// @import "bootstrap/scss/carousel";
// @import "bootstrap/scss/spinners";
@import "bootstrap/scss/tooltip";
@import "bootstrap/scss/popover";
@import "bootstrap/scss/carousel";
@import "bootstrap/scss/spinners";
@import "bootstrap/scss/utilities";
// @import "bootstrap/scss/print";
@import "bootstrap/scss/print";
@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
import Collapse from 'bootstrap/js/src/collapse';
import Dropdown from 'bootstrap/js/src/dropdown';
//import { Tooltip, Toast, Popover } from 'bootstrap';
import Modal from 'bootstrap/js/dist/modal';
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/>.
#}
{#
<li class="nav-link2">
<div class="li-content">
<a href="javascript:void(0)" class="more">Sections</a>
@ -39,3 +40,22 @@
{% endfor %}
</ul>
</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/>.
#}
{#
<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;">
@ -36,7 +37,7 @@
<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;">
{# Impersonate case logout #}
{% if is_granted('ROLE_PREVIOUS_ADMIN') and menu.name == 'Logout' %}
<a href="{{ path('admin_user', {'_switch_user': '_exit'}) }}">
@ -58,3 +59,33 @@
{% 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">
{{ '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" />
<title>{{ installation.name }} - {% block title %}{% endblock %}</title>
<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 %}
{{ encore_entry_link_tags('bootstrap') }}
{% endif %}
@ -43,59 +45,65 @@
</head>
<body>
<header class="navigation container-fluid">
<div class="grid-4 hide-tablet hide-mobile parent">
<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') }}">
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<div class="col-4">
<a class="navbar-brand" href="{{ path('chill_main_homepage') }}">
{{ include('@ChillMain/Layout/_header-logo.html.twig') }}
</a>
</div>
</div>
<div class="grid-8 grid-tablet-12 grid-mobile-12 text-right parent">
<div class="nav">
<ul class="navigation-menu">
{% block navigation_section_menu %}
{{ chill_menu('section', {
'layout': '@ChillMain/Menu/section.html.twig',
<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 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', {
'layout': '@ChillMain/Menu/user.html.twig',
}) }}
{% if available_languages|length == 1 %}
<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 %}
<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>
</ul>
</div>
{% endblock %}
</div>
</div>
</nav>
</header>
{% block top_banner %}{# To use if you want to add a banner below the header (ie the menu) #}{% endblock %}