Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[AdminBundle] Enable nested menu items in top menu #275

Merged
merged 1 commit into from
Apr 8, 2015
Merged

[AdminBundle] Enable nested menu items in top menu #275

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 32 additions & 31 deletions src/Kunstmaan/AdminBundle/Resources/ui/scss/default-theme/components/_components.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,49 +7,50 @@
/* Vendors
========================================================================== */
@import "vendors/bootstrap-components/grid",
"vendors/bootstrap-components/pagination",
"vendors/bootstrap-components/navbar",
"vendors/bootstrap-components/modal",
"vendors/bootstrap-components/input-group-addon",
"vendors/bootstrap-components/alert",
"vendors/bootstrap-components/list-group",
"vendors/bootstrap-components/table",
"vendors/font-awesome/icon-symlinks",
"vendors/jstree",
"vendors/select2",
"vendors/eonasdan-bootstrap-datetimepicker/bootstrap-datetimepicker",
"vendors/mjolnic-bootstrap-colorpicker/mjolnic-bootstrap-colorpicker";
"vendors/bootstrap-components/pagination",
"vendors/bootstrap-components/navbar",
"vendors/bootstrap-components/modal",
"vendors/bootstrap-components/input-group-addon",
"vendors/bootstrap-components/alert",
"vendors/bootstrap-components/list-group",
"vendors/bootstrap-components/table",
"vendors/bootstrap-components/dropdown-menu",
"vendors/font-awesome/icon-symlinks",
"vendors/jstree",
"vendors/select2",
"vendors/eonasdan-bootstrap-datetimepicker/bootstrap-datetimepicker",
"vendors/mjolnic-bootstrap-colorpicker/mjolnic-bootstrap-colorpicker";


/* Forms
========================================================================== */
@import "forms/form",
"forms/fieldset",
"forms/form-actions",
"forms/form-properties",
"forms/form-group",
"forms/form-control",
"forms/label";
"forms/fieldset",
"forms/form-actions",
"forms/form-properties",
"forms/form-group",
"forms/form-control",
"forms/label";


/* Blocks
========================================================================== */
@import "blocks/buttons",
"blocks/tables",
"blocks/choice-block";
"blocks/tables",
"blocks/choice-block";


/* Structures
========================================================================== */
@import "structures/app__filter",
"structures/page-template",
"structures/page-actions",
"structures/pp",
"structures/pp-container",
"structures/sortable",
"structures/ajax-modal",
"structures/url-chooser",
"structures/media-chooser",
"structures/media-thumbnail",
"structures/nested-form",
"structures/dnd";
"structures/page-template",
"structures/page-actions",
"structures/pp",
"structures/pp-container",
"structures/sortable",
"structures/ajax-modal",
"structures/url-chooser",
"structures/media-chooser",
"structures/media-thumbnail",
"structures/nested-form",
"structures/dnd";
27 changes: 27 additions & 0 deletions ...sources/ui/scss/default-theme/components/vendors/bootstrap-components/_dropdown-menu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
/* ==========================================================================
Bootstrap dropdown menu adjustments
========================================================================== */


.dropdown-menu__item--has-submenu {
position: relative;
}

.dropdown-toggle--submenu {

&:hover {

+ .dropdown-menu--submenu {
display: block;
}
}
}

.dropdown-menu--submenu {
top: 0;
left: calc(100% - 10px);

&:hover {
display: block;
}
}
183 changes: 93 additions & 90 deletions src/Kunstmaan/AdminBundle/Resources/views/Default/app_header.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,103 +2,106 @@

<!-- App Header -->
<nav role="navigation" class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="container-fluid">

<!-- Header -->
<div class="navbar-header">
<!-- Header -->
<div class="navbar-header">

<!--Header - Toggle -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav-bar">
<span class="sr-only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--Header - Toggle -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav-bar">
<span class="sr-only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

<!-- Header - Brand -->
<a class="navbar-brand app__header__brand" href="{{ path('KunstmaanAdminBundle_homepage') }}">
{{ websitetitle | trans }}
</a>
</div>
<!-- Header - Brand -->
<a class="navbar-brand app__header__brand" href="{{ path('KunstmaanAdminBundle_homepage') }}">
{{ websitetitle | trans }}
</a>
</div>

<!-- Navigation -->
<div class="collapse navbar-collapse app__nav__container" id="main-nav-bar">
<!-- Navigation -->
<div class="collapse navbar-collapse app__nav__container" id="main-nav-bar">

<!-- Navigation - Left -->
<ul class="nav navbar-nav">
{% for menuitem in adminmenu.topchildren %}
{% set topchildren = menuitem.topchildren %}
{% if topchildren | length > 0 %}
<!-- Navigation Item - with sub-items -->
<li class="dropdown{% if menuitem.active %} active{% endif %}">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ menuitem.label | trans }}
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
{% for topchild in topchildren %}
{% set nestedtopchildren = topchild.topchildren %}
{% if nestedtopchildren | length > 0 %}
<li class="dropdown-submenu{% if topchild.active %} active{% endif %}{% if loop.first %} first{% endif %}{% if loop.last %} last{% endif %}">
<a tabindex="-1" href="#">
{{ topchild.label | trans }}
</a>
<ul class="dropdown-menu">
{% for nestedtopchild in nestedtopchildren %}
<li class="{% if nestedtopchild.active %}active{% endif %}{% if loop.first %} first{% endif %}{% if loop.last %} last{% endif %}">
<a href="{{ path(nestedtopchild.route, nestedtopchild.routeparams) }}">
{{ nestedtopchild.label | trans }}
</a>
</li>
{% endfor %}
</ul>
</li>
{% else %}
{% if topchild.route %}
<li class="{% if topchild.active %} active {% endif %} {% if loop.first %} first {% endif %} {% if loop.last %} last {% endif %}">
<a href="{{ path(topchild.route, topchild.routeparams) }}">
{{ topchild.label | trans }}
</a>
</li>
{% endif %}
{% endif %}
{% endfor %}
</ul>
</li>
{% else %}
<!-- Navigation Item - without sub-items -->
<li class="{% if menuitem.active %} active{% endif %}">
<a href="{{ path(menuitem.route, menuitem.routeparams) }}">
{{ menuitem.label | trans }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
<!-- Navigation - Left -->
<ul class="nav navbar-nav">
{% for menuitem in adminmenu.topchildren %}

<!-- Navigation - Right -->
<ul class="nav navbar-nav navbar-right">
{% set route = app.request.attributes.get('_route') %}
{% set attribs = app.request.attributes.all %}
{{ localeswitcher_widget(requiredlocales, route) }}
{% set topchildren = menuitem.topchildren %}
{% if topchildren | length > 0 %}
<!-- Navigation Item - with sub-items -->
<li class="dropdown{% if menuitem.active %} active{% endif %}">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ menuitem.label | trans }}
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu" role="menu">
{% for topchild in topchildren %}
{% set nestedtopchildren = topchild.topchildren %}
{% if nestedtopchildren | length > 0 %}
<li class="dropdown-menu__item--has-submenu{% if topchild.active %} active{% endif %}{% if loop.first %} first{% endif %}{% if loop.last %} last{% endif %}">
<a href="#" class="dropdown-toggle dropdown-toggle dropdown-toggle--submenu" data-toggle="dropdown" role="button" aria-expanded="false">
{{ topchild.label | trans }}
<i class="fa fa-caret-right"></i>
</a>
<ul class="dropdown-menu dropdown-menu--submenu">
{% for nestedtopchild in nestedtopchildren %}
<li class="{% if nestedtopchild.active %}active{% endif %}{% if loop.first %} first{% endif %}{% if loop.last %} last{% endif %}">
<a href="{{ path(nestedtopchild.route, nestedtopchild.routeparams) }}">
{{ nestedtopchild.label | trans }}
</a>
</li>
{% endfor %}
</ul>
</li>
{% else %}
{% if topchild.route %}
<li class="{% if topchild.active %}active{% endif %}{% if loop.first %} first{% endif %}{% if loop.last %} last{% endif %}">
<a href="{{ path(topchild.route, topchild.routeparams) }}">
{{ topchild.label | trans }}
</a>
</li>
{% endif %}
{% endif %}
{% endfor %}
</ul>
</li>
{% else %}
<!-- Navigation Item - without sub-items -->
<li class="{% if menuitem.active %} active{% endif %}">
<a href="{{ path(menuitem.route, menuitem.routeparams) }}">
{{ menuitem.label | trans }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>

<!-- Logged in as -->
<li>
<a href="{{ path('KunstmaanAdminBundle_user_change_password', { 'id':app.user.id }) }}">
<i class="fa fa-user"></i>
&nbsp;
{{ app.user.username|capitalize }}
</a>
</li>
<!-- Navigation - Right -->
<ul class="nav navbar-nav navbar-right">
{% set route = app.request.attributes.get('_route') %}
{% set attribs = app.request.attributes.all %}

<!-- Logout -->
<li>
<a href="{{ path('fos_user_security_logout') }}" id="app__logout" title="logout">
<i class="fa fa-sign-out"></i>
</a>
</li>
</ul>
</div>
</div>
{{ localeswitcher_widget(requiredlocales, route) }}

<!-- Logged in as -->
<li>
<a href="{{ path('KunstmaanAdminBundle_user_change_password', { 'id':app.user.id }) }}">
<i class="fa fa-user"></i>
&nbsp;
{{ app.user.username|capitalize }}
</a>
</li>

<!-- Logout -->
<li>
<a href="{{ path('fos_user_security_logout') }}" id="app__logout" title="logout">
<i class="fa fa-sign-out"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>