Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-12 13:24:25 +00:00
Code Issues Actions Projects Releases Wiki Activity

arrange collapsed header menu

Browse Source
This commit is contained in:
Mathieu Jaumotte 2021-07-03 20:37:03 +02:00
parent e77c886e3f
commit c36aa22ab2
5 changed files with 67 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -109,9 +109,6 @@ body {
}
header {
a {
text-decoration: none;
}
nav.navbar {
padding: 0;
a.navbar-brand img {
@ -121,22 +118,6 @@ header {
div.navbar-collapse {
float: right;
}
@media (max-width: 767px) {
& {
position: relative;
}
button.navbar-toggler {
float: right;
}
div.navbar-collapse {
float: none;
position: absolute;
top: 4em;
right: 0;
z-index: 2;
padding: 1em;
}
}
ul.navbar-nav {
display: flex;
align-items: stretch;
@ -165,6 +146,7 @@ header {
border-radius: 0;
a.dropdown-item {
width: 120%;
border: 0;
border-bottom: 1px solid $gray-200;
font-size: smaller;
i {
@ -173,6 +155,66 @@ header {
color: $gray-500 !important; }
}
}
// fullwidth menu when navbar is collapsed
@media (max-width: 767px) {
& {
position: relative;
}
button.navbar-toggler {
float: right;
}
div.navbar-collapse {
float: none;
position: absolute;
top: 4em;
left: 0;
right: 0;
z-index: 2;
padding: 1em;
border-top: 1px solid shade-color($primary, 25%);
ul.navbar-nav {
display: grid;
grid-template-areas:
"sear sear sear"
"sect user lang";
li.nav-item {
flex-direction: column;
border: 0;
a.nav-link {}
&.navigation-search {
grid-area: sear;
margin-bottom: 1em;
form {
width: 100%;
input.form-control {}
button.btn {}
}
}
&.nav-section { grid-area: sect; }
&.nav-user { grid-area: user; }
&.nav-language { grid-area: lang; }
}
li.dropdown {
&, & > * {
background-color: transparent !important;
}
a.dropdown-toggle {}
div.dropdown-menu {
display: block;
border: 0;
a.dropdown-item {
width: 100%;
border: 0;
border-top: 1px dotted $gray-200;
background-color: transparent !important;
}
}
}
}
}
}
}
}

6
src/Bundle/ChillMainBundle/Resources/views/Layout/_header.html.twig
View File

@ -64,13 +64,13 @@
}) }}
{% if available_languages|length == 1 %}
<li class="nav-item btn btn-primary">
<a id="menu-languages" class="text-white-50" href="#">
<li class="nav-item btn btn-primary nav-language">
<a id="menu-languages" class="nav-link" href="#">
{{ available_languages[0] | capitalize }}
</a>
</li>
{% else %}
<li class="nav-item dropdown btn btn-primary">
<li class="nav-item dropdown btn btn-primary nav-language">
<a id="menu-languages"
class="nav-link dropdown-toggle"
type="button"

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

@ -16,7 +16,7 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
#}
<li class="nav-item dropdown btn btn-primary">
<li class="nav-item dropdown btn btn-primary nav-section">
<a id="menu-section"
class="nav-link dropdown-toggle"
type="button"

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

@ -16,7 +16,7 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
#}
<li class="nav-item dropdown btn btn-primary">
<li class="nav-item dropdown btn btn-primary nav-user">
<a id="menu-user"
class="nav-link dropdown-toggle"
type="button"

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

@ -26,7 +26,7 @@
{% block sublayout_content %}
<div class="container-xxl">
<div class="row">
<div class="col-9">
<div class="col-md-9">
{# Flash messages ! #}
<div class="mt-5">