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 charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <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> <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$" /> <link rel="shortcut icon" href="{{ app['combodo.absolute_url'] }}images/favicon.ico?itopversion=$ITOP_VERSION$" />
{% block pPageStylesheets %} {% block pPageStylesheets %}
@@ -143,26 +146,19 @@
{% endfor %} {% endfor %}
{% endblock %} {% endblock %}
{% if bUserConnected %} {% if bUserConnected %}
<li class="dropdown"> <li role="separator" class="divider"></li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="usermenu"> <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>
{{ sUserFullname }} {% for aPortal in app['combodo.portal.instance.conf'].portals %}
<span class="caret"></span> {% if aPortal.id != app['combodo.portal.instance.conf'].properties.id %}
</a> {% set sIconClass = (aPortal.id == 'backoffice') ? 'fa-list-alt' : 'fa-external-link' %}
<ul class="dropdown-menu" aria-labelledby="usermenu"> <li><a href="{{ aPortal.url }}" target="_blank"><span class="brick_icon fa {{ sIconClass }} fa-2x fa-fw"></span>{{ aPortal.label|dict_s }}</a></li>
<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> {% endif %}
{% for aPortal in app['combodo.portal.instance.conf'].portals %} {% endfor %}
{% if aPortal.id != app['combodo.portal.instance.conf'].properties.id %} {# We display the separator only if the user has more then 1 portal. Meaning default portal + console or several portal at least #}
{% set sGlyphiconClass = (aPortal.id == 'backoffice') ? 'glyphicon-list-alt' : 'glyphicon-new-window' %} {% if app['combodo.portal.instance.conf'].portals|length > 1 %}
<li><a href="{{ aPortal.url }}" target="_blank"><span class="glyphicon {{ sGlyphiconClass }}"></span>{{ aPortal.label|dict_s }}</a></li> <li role="separator" class="divider"></li>
{% endif %} {% endif %}
{% endfor %} <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>
{# 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>
{% endif %} {% endif %}
</ul> </ul>
</div> </div>
@@ -182,18 +178,18 @@
<span class="caret"></span> <span class="caret"></span>
</a> </a>
<ul class="dropdown-menu user_options" aria-labelledby="user_options"> <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 %} {% for aPortal in app['combodo.portal.instance.conf'].portals %}
{% if aPortal.id != app['combodo.portal.instance.conf'].properties.id %} {% if aPortal.id != app['combodo.portal.instance.conf'].properties.id %}
{% set sGlyphiconClass = (aPortal.id == 'backoffice') ? 'glyphicon-list-alt' : 'glyphicon-new-window' %} {% set sGlyphiconClass = (aPortal.id == 'backoffice') ? 'fa-list-alt' : 'fa-external-link' %}
<li><a href="{{ aPortal.url }}" target="_blank"><span class="glyphicon {{ sGlyphiconClass }}"></span>{{ aPortal.label|dict_s }}</a></li> <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 %} {% endif %}
{% endfor %} {% endfor %}
{# We display the separator only if the user has more then 1 portal. Meaning default portal + console or several portal at least #} {# 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 %} {% if app['combodo.portal.instance.conf'].portals|length > 1 %}
<li role="separator" class="divider"></li> <li role="separator" class="divider"></li>
{% endif %} {% 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> </ul>
</div> </div>
</div> </div>

View File

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