Customer portal : UI improvements on navigation menu

SVN:trunk[4145]
This commit is contained in:
Guillaume Lajarige
2016-05-25 13:00:05 +00:00
parent 22f73506a2
commit 2e6e6d52ca
2 changed files with 36 additions and 26 deletions

View File

@@ -19,6 +19,9 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
{# This block can be used to add your own meta tags by extending the default template #}
{% block pPageExtraMetas %}
{% endblock %}
<title>{% block pPageTitle %}{% if sPageTitle is defined and sPageTitle is not null %}{{ sPageTitle }} - iTop{% else %}{{ 'Page:DefaultTitle'|dict_s }}{% endif %}{% endblock %}</title>
<link rel="shortcut icon" href="{{ app['combodo.absolute_url'] }}images/favicon.ico?itopversion=$ITOP_VERSION$" />
{% block pPageStylesheets %}
@@ -143,26 +146,19 @@
{% endfor %}
{% endblock %}
{% if bUserConnected %}
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="usermenu">
{{ sUserFullname }}
<span class="caret"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="usermenu">
<li><a href="{{ app.url_generator.generate('p_user_profile_brick') }}"><span class="glyphicon glyphicon-user"></span>{{ 'Brick:Portal:UserProfile:Navigation:Dropdown:MyProfil'|dict_s }}</a></li>
{% for aPortal in app['combodo.portal.instance.conf'].portals %}
{% if aPortal.id != app['combodo.portal.instance.conf'].properties.id %}
{% set sGlyphiconClass = (aPortal.id == 'backoffice') ? 'glyphicon-list-alt' : 'glyphicon-new-window' %}
<li><a href="{{ aPortal.url }}" target="_blank"><span class="glyphicon {{ sGlyphiconClass }}"></span>{{ aPortal.label|dict_s }}</a></li>
{% endif %}
{% endfor %}
{# We display the separator only if the user has more then 1 portal. Meaning default portal + console or several portal at least #}
{% if app['combodo.portal.instance.conf'].portals|length > 1 %}
<li role="separator" class="divider"></li>
{% endif %}
<li><a href="{{ app['combodo.absolute_url'] }}pages/logoff.php"><span class="glyphicon glyphicon-log-out"></span>{{ 'Brick:Portal:UserProfile:Navigation:Dropdown:Logout'|dict_s }}</a></li>
</ul>
</li>
<li role="separator" class="divider"></li>
<li><a href="{{ app.url_generator.generate('p_user_profile_brick') }}"><span class="brick_icon fa fa-user fa-2x fa-fw"></span>{{ 'Brick:Portal:UserProfile:Navigation:Dropdown:MyProfil'|dict_s }}</a></li>
{% for aPortal in app['combodo.portal.instance.conf'].portals %}
{% if aPortal.id != app['combodo.portal.instance.conf'].properties.id %}
{% set sIconClass = (aPortal.id == 'backoffice') ? 'fa-list-alt' : 'fa-external-link' %}
<li><a href="{{ aPortal.url }}" target="_blank"><span class="brick_icon fa {{ sIconClass }} fa-2x fa-fw"></span>{{ aPortal.label|dict_s }}</a></li>
{% endif %}
{% endfor %}
{# We display the separator only if the user has more then 1 portal. Meaning default portal + console or several portal at least #}
{% if app['combodo.portal.instance.conf'].portals|length > 1 %}
<li role="separator" class="divider"></li>
{% endif %}
<li><a href="{{ app['combodo.absolute_url'] }}pages/logoff.php"><span class="brick_icon fa fa-sign-out fa-2x fa-fw"></span>{{ 'Brick:Portal:UserProfile:Navigation:Dropdown:Logout'|dict_s }}</a></li>
{% endif %}
</ul>
</div>
@@ -182,18 +178,18 @@
<span class="caret"></span>
</a>
<ul class="dropdown-menu user_options" aria-labelledby="user_options">
<li><a href="{{ app.url_generator.generate('p_user_profile_brick') }}"><span class="glyphicon glyphicon-user"></span>{{ 'Brick:Portal:UserProfile:Navigation:Dropdown:MyProfil'|dict_s }}</a></li>
<li><a href="{{ app.url_generator.generate('p_user_profile_brick') }}"><span class="brick_icon fa fa-user fa-lg fa-fw"></span>{{ 'Brick:Portal:UserProfile:Navigation:Dropdown:MyProfil'|dict_s }}</a></li>
{% for aPortal in app['combodo.portal.instance.conf'].portals %}
{% if aPortal.id != app['combodo.portal.instance.conf'].properties.id %}
{% set sGlyphiconClass = (aPortal.id == 'backoffice') ? 'glyphicon-list-alt' : 'glyphicon-new-window' %}
<li><a href="{{ aPortal.url }}" target="_blank"><span class="glyphicon {{ sGlyphiconClass }}"></span>{{ aPortal.label|dict_s }}</a></li>
{% set sGlyphiconClass = (aPortal.id == 'backoffice') ? 'fa-list-alt' : 'fa-external-link' %}
<li><a href="{{ aPortal.url }}" target="_blank"><span class="brick_icon fa {{ sGlyphiconClass }} fa-lg fa-fw"></span>{{ aPortal.label|dict_s }}</a></li>
{% endif %}
{% endfor %}
{# We display the separator only if the user has more then 1 portal. Meaning default portal + console or several portal at least #}
{% if app['combodo.portal.instance.conf'].portals|length > 1 %}
<li role="separator" class="divider"></li>
{% endif %}
<li><a href="{{ app['combodo.absolute_url'] }}pages/logoff.php"><span class="glyphicon glyphicon-log-out"></span>{{ 'Brick:Portal:UserProfile:Navigation:Dropdown:Logout'|dict_s }}</a></li>
<li><a href="{{ app['combodo.absolute_url'] }}pages/logoff.php"><span class="brick_icon fa fa-sign-out fa-lg fa-fw"></span>{{ 'Brick:Portal:UserProfile:Navigation:Dropdown:Logout'|dict_s }}</a></li>
</ul>
</div>
</div>

View File

@@ -18,8 +18,10 @@ footer{
.user_infos .dropdown-menu a .glyphicon{
margin-right: 15px;
}
.nav > li > a > span.brick_icon{
.nav > li > a > span.brick_icon,
.dropdown-menu > li > a > span.brick_icon{
margin-right: 20px;
vertical-align: sub;
}
/* Topbar */
#topbar .navbar-header{
@@ -34,6 +36,13 @@ footer{
#topbar .navbar-collapse > .navbar-nav{
padding-top: 30px;
}
#topbar .navbar-collapse > .navbar-nav .divider{
height: 1px;
margin: 8px 15px;
overflow: hidden;
background-color: #292827;
opacity: 0.6;
}
#topbar .navbar-brand{
padding: 5px 15px;
}
@@ -86,6 +95,7 @@ footer{
background-size: 100%;
background-position: center center;
background-color: #585653;
background-repeat: no-repeat;
border: 2px solid #FFFFFF;
border-radius: 100%;
}
@@ -318,6 +328,10 @@ a:hover, a:focus{
.navbar-fixed-top .navbar-header{
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
}
.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse{
max-height: 400px;
}
.navbar-default .navbar-toggle {
border-top: none;
@@ -662,7 +676,7 @@ a:hover, a:focus{
}
#main-header-actions .btn-group .btn{
padding: 0em 1.5em;
line-height: 2.8em;
line-height: 2.4em;
font-size: 14px;
}
@media (min-width: 768px) {