Commit 5954f95a authored by Evonne's avatar Evonne Committed by Robert Lyon
Browse files

Bug 1904607 Profile icon not displayed correctly when no language toggle

Putting a wrapper around the icon and the button and setting position
relative within wrapper, and also moving search box in markup to eliminate
the need for position absolutes. Also fixed a flow on effect within Maroon
from this fix.

behatnotneeded

Change-Id: Ideb12f1fca1fb2aace63ab9e3ce635bc69cacacf
parent b6fae32d
......@@ -803,7 +803,10 @@ EOF;
else {
$smarty->assign('SELECTEDSUBNAV', $SELECTEDSUBNAV);
}
$smarty->assign('LANGCHOICES', get_languages());
$displaylangs = get_languages();
if (count($displaylangs) > 1) {
$smarty->assign('LANGCHOICES', get_languages());
}
$smarty->assign('LANGCURRENT', current_language());
}
else {
......
......@@ -16,7 +16,9 @@
}
.navbar-form.navbar-collapse {
top: 1.0625rem; // 17px;
@include media-breakpoint-up(md) {
margin-top: 1.0625rem; // 17px;
}
}
// Header messagebox form
......
// Navigation toggle styles
.nav-toggle-area {
position: relative;
.user-icon {
position: absolute;
margin: 0.25rem 0 0 0.4375rem; // 4px 0 0 7px
z-index: 3;
left: 8.4375rem; // 135px;
display: block;
@include media-breakpoint-up(md) {
left: 5.625rem; // 90px;
}
&:hover,
&:focus {
color: $navbar-toggle-hover-color;
background-color: $navbar-toggle-hover-bg;
}
}
}
.navbar-toggle {
......@@ -53,20 +38,52 @@
.icon {
color: $navbar-toggle-color;
}
}
&.user-toggle {
padding-left: 2.5rem; // 40px;
color: $navbar-toggle-color;
background-color: $navbar-toggle-bg;
&:hover,
&:focus {
color: $navbar-toggle-hover-color;
background-color: $navbar-toggle-hover-bg;
.icon {
color: $navbar-toggle-hover-color;
}
}
}
&.user-icon-wrap-toggle {
padding: 0;
border-radius: 0;
background-color: transparent;
min-width: 4rem; // 64px;
.user-icon {
display: inline-block;
position: relative;
margin: 0.25rem; // 4px
z-index: 3;
float: left;
&:hover,
&:focus {
color: $navbar-toggle-hover-color;
background-color: $navbar-toggle-hover-bg;
}
}
.user-toggle {
display: block;
margin: 0;
border-radius: $navbar-toggler-border-radius;
min-width: 2.625rem; // 42px;
color: $navbar-toggle-color;
padding: $navbar-toggler-padding-y $navbar-toggler-padding-x $navbar-toggler-padding-y 2.5rem; // 40px;
position: absolute;
border: 0;
cursor: pointer;
background-color: $navbar-toggle-bg;
&:hover,
&:focus {
color: $navbar-toggle-hover-color;
background-color: $navbar-toggle-hover-bg;
}
}
}
}
// navbar menu children toggles
......
......@@ -36,19 +36,24 @@
height: 65px;
overflow: visible;
@include media-breakpoint-up(md) {
position: absolute;
display: block;
position: relative;
display: inline-block;
max-width: none;
visibility: visible;
top: 0.8125rem; // 13px;
right: 15rem; // 240px;
margin: 0 $spacing-xxl 0 0;
top: auto;
right: auto;
margin: 0.8125rem $spacing-xl 0 0; // 13px 20px 0 0;
padding: 0;
box-shadow: none;
height: auto !important;
float: right;
clear: none;
}
.header-search-form {
@include media-breakpoint-down(md) {
width: 100%;
}
input[type=text] {
width: calc(100% - 4.6875rem); // calc(100% - 75px)
float: left;
......@@ -73,21 +78,6 @@
}
}
}
// Allowing the public search to sit in right place
// when lang selector exists or not
.loggedout .navbar-form.navbar-collapse {
@include media-breakpoint-up(md) {
right: 0;
margin-right: $spacing-lg;
&.with-langform {
right: 16.875rem; // 270px;
}
&.with-langform-login {
right: 23.125rem; // 370px;
}
}
}
.navbar {
border: 1px solid transparent;
......
......@@ -90,13 +90,15 @@
</button>
{/if}
{if $LOGGEDIN}
<a href="{profile_url($USER)}" class="user-icon user-icon-25" title='{str tag="profilepage"}'>
<img src="{profile_icon_url user=$USER maxheight=25 maxwidth=25}" alt="{str tag=profileimagefor section=artefact.internal arg1=display_name($USER->get('id'))}">
</a>
<button class="user-toggle navbar-toggle" type="button" data-toggle="collapse" data-target=".nav-main-user" aria-expanded="false" aria-controls="main-nav-user" title='{str tag="usermenu1"}'>
<span class="sr-only">{str tag="showusermenu1"}</span>
<span class="icon icon-chevron-down collapsed"></span>
</button>
<div class="user-icon-wrap-toggle navbar-toggle">
<a href="{profile_url($USER)}" class="user-icon user-icon-25" title='{str tag="profilepage"}'>
<img src="{profile_icon_url user=$USER maxheight=25 maxwidth=25}" alt="{str tag=profileimagefor section=artefact.internal arg1=display_name($USER->get('id'))}">
</a>
<button class="user-toggle" type="button" data-toggle="collapse" data-target=".nav-main-user" aria-expanded="false" aria-controls="main-nav-user" title='{str tag="usermenu1"}'>
<span class="sr-only">{str tag="showusermenu1"}</span>
<span class="icon icon-chevron-down collapsed"></span>
</button>
</div>
{/if}
{if $MESSAGEBOX}
{foreach from=$MESSAGEBOX item=item}
......@@ -117,7 +119,6 @@
<span class="icon icon-language icon-lg" role="presentation" aria-hidden="true"></span>
</button>
{/if}
<!-- HIDE WHEN ON DESKTOP -->
{if !$nosearch && ($LOGGEDIN || $publicsearchallowed)}
<button class="search-toggle navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".navbar-form" aria-expanded="false" aria-controls="usf">
<span class="icon icon-search icon-lg" role="presentation" aria-hidden="true"></span>
......@@ -125,8 +126,15 @@
</button>
{/if}
</div>
{if !$nosearch && ($LOGGEDIN || $publicsearchallowed)}
<div class="navbar-form collapse navbar-collapse{if $languageform} with-langform{if !$LOGGEDIN && !$SHOWLOGINBLOCK && !$LOGINPAGE}-login{/if}{/if}">
{header_search_form}
</div>
{/if}
{include file="header/navigation.tpl"}
{if $LANGCHOICES}
{include file="header/language.tpl"}
{/if}
</div>
</div>
</header>
......
{if $MAINNAV}
<nav>
<div id="main-nav" class="{if $ADMIN || $INSTITUTIONALADMIN || $STAFF || $INSTITUTIONALSTAFF}adminnav{/if} nav collapse navbar-collapse nav-main" role="tabcard">
<ul id="nav" class="nav navbar-nav">
......@@ -190,8 +189,3 @@
</div>
</nav>
{/if}
{if !$nosearch && ($LOGGEDIN || $publicsearchallowed)}
<div class="navbar-form collapse navbar-collapse{if $languageform} with-langform{if !$LOGGEDIN && !$SHOWLOGINBLOCK && !$LOGINPAGE}-login{/if}{/if}">
{header_search_form}
</div>
{/if}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment