set same layout to user menu and section menu

This commit is contained in:
Julien Fastré 2018-05-09 00:05:29 +02:00
parent 6f73c9ee09
commit 42f17f11e0
2 changed files with 90 additions and 45 deletions

View File

@ -1,52 +1,88 @@
.navigation {
background-color: $chill-blue;
background-color: $chill-blue;
a.more:after {
color: $chill-dark-gray;
}
a.more:after {
color: $chill-dark-gray;
}
li.nav-link2 {
a {
margin-bottom: 2px;
}
li.nav-link2 {
a {
margin-bottom: 2px;
}
&.lang-selection {
color: $chill-light-gray;
font-size: 0.7em;
a.more:after {
&.lang-selection {
color: $chill-light-gray;
}
}
font-size: 0.7em;
ul {
top: 58px;
a.more:after {
color: $chill-light-gray;
}
}
a {
padding-left: 0;
}
}
}
ul {
top: 58px;
div.nav, div.navigation-search {
float: right;
a {
padding-left: 0;
}
}
}
input[type=search] {
padding: 0.2em;
float: left;
div.nav, div.navigation-search {
float: right;
border: none;
}
button {
color: $chill-light-gray;
background-color: $chill-blue;
padding: 0 0 0 7px;
top: inherit;
font-size: 1.2em;
position: unset;
float: left;
}
}
input[type=search] {
padding: 0.2em;
float: left;
border: none;
}
button {
color: $chill-light-gray;
background-color: $chill-blue;
padding: 0 0 0 7px;
top: inherit;
font-size: 1.2em;
position: unset;
float: left;
}
}
li.user-menu {
min-width: 14rem;
}
ul.user-menu-list {
li.user-menu__entry {
display: block;
background-color: $chill-dark-gray;
border-bottom: 1px solid #FFF;
padding-top: 0;
padding-bottom: 0;
line-height: 2;
}
li.user-menu__entry--warning-entry {
background-color: $chill-red;
font-weight: 700;
}
}
span.notification-counter {
display: inline-block;
padding: .25em .6em .25rem .6em;
font-size: 100%;
line-height: 1;
text-align: center;
white-space: nowrap;
border-radius: 10rem;
background-color: $chill-red;
color: $white;
font-weight: 700;
margin-left: .5rem;
}
}

View File

@ -16,18 +16,27 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
#}
<li class="nav-link2">
<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;">
{{ 'Welcome' | trans }}<br/>
<b>{{ app.user.username }}{{ render(controller('ChillMainBundle:UI:showNotificationUserCounter')) }}</b>
</a>
</div>
<ul class="submenu width-11-em" style="padding-left: 0; padding-right: 0; background-color:transparent;">
<ul class="submenu width-11-em user-menu-list" style="padding-left: 0; padding-right: 0; background-color:transparent;">
{% for menu in menus %}
<li style="display:block; background-color: #333333; border-bottom: 1px solid #FFF;padding-top:0; padding-bottom:0; padding-left:1.5em;">
<a href="{{ menu.uri }}" style="font-family: 'Open Sans'; font-weight:300; font-size: 0.9em;">{% if menu.extras.icon is defined %}<i class="fa fa-{{ menu.extras.icon }}"></i> {% endif %}{{ menu.label|trans }}</a>
</li>
<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;">
<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;">
<a href="{{ menu.uri }}">{{ menu.label|trans }}</a>
</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">{% spaceless %}
{% if menu.extras.icon is defined %}
<i class="fa fa-{{ menu.extras.icon }}"></i>
{% endif %}
{% endspaceless %}</div>
</div>
</li>
{% endfor %}
</ul>
</li>