Skip to content

Commit

Permalink
SAK-40322 More improvements over the top bar (quick links and usernam…
Browse files Browse the repository at this point in the history 
…e) (sakaiproject#5807)
  • Loading branch information
@josecebe
josecebe authored and Miguel Pellicer committed Oct 10, 2018
1 parent fbd90fe commit 8600352
Show file tree
Hide file tree
Showing 4 changed files with 68 additions and 57 deletions.
10 changes: 3 additions & 7 deletions library/src/morpheus-master/sass/modules/navigation/_base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ body.is-logged-out{

.#{$namespace}headerLogo{
width: 100%;
overflow: hidden;
padding: 0 $standard-spacing;
height: $banner-height;
background: $top-header-background;
Expand Down Expand Up @@ -226,7 +225,6 @@ body.is-logged-out{
}
}
.#{$namespace}loginNav{
float: right;
height: $banner-height;
@include flex-shrink( 0 );
@include display-flex;
Expand Down Expand Up @@ -384,7 +382,7 @@ body.is-logged-out{
}

@media #{$phone}{
width: calc(100% - #{$logo-width} - 20px);
width: calc(100% - #{$logo-width});
}

ul{
Expand Down Expand Up @@ -487,10 +485,6 @@ body.is-logged-out{
{
text-decoration: none;

@media #{$phone} {
margin-top: 7px;
}

&::after
{
content: "\f0d7"; /* fa-carrot-down */
Expand Down Expand Up @@ -598,6 +592,8 @@ body.is-logged-out{
margin: 0;
list-style: none;
padding: 0 0 0 $standard-spacing;
@include display-flex;
@include align-items(center);

@media #{$phone}
{
Expand Down
67 changes: 40 additions & 27 deletions library/src/morpheus-master/sass/modules/quicklinks/_base.scss
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
.#{$namespace}quickLinksNav__popup {
@extend .view-all-sites-btn;
@include display-flex;
@include align-items(center);
height: 100%;
border-right: 1px solid $topNav-alt-color;
@media #{$phone}{
display: inline-block;
margin-top: 3px;
}

.fa-external-link-square{
@extend .all-sites-icon;
Expand Down Expand Up @@ -37,13 +36,15 @@
background-color: $tool-menu-background-color;
box-shadow: 5px 0 50px 0px rgba(0,0,0,0.5);
position: absolute;
top: 45px;
right: 170px;
top: 40px;
right: 0;
z-index: 99;
padding: 0 1em 1em 1em;
padding: $standard-spacing;
min-width: $quicklinks-menu-width;
max-width: calc(#{$quicklinks-menu-width} * 2);
&:after {
bottom: 100%;
right: 85px;
left: 90%;
border: solid transparent;
content: " ";
height: 0;
Expand All @@ -55,51 +56,60 @@
border-width: 7px;
margin-left: -7px;
outline: 0;

@media #{$phone} {
left: initial;
right: 71px;
}
}

.tab-box{
overflow-y:auto;
}

#quickLinks-header{
display: inline-block;
height: 43px;
width: $quicklinks-menu-width;
@include display-flex;
@include align-items(center);
border: none;
border-bottom: 1px solid $tool-border-color;
padding: 0 0.3em 0 0;
padding: 0 0 $standard-spacing 0;
margin: 0 0 $standard-spacing 0;
background-color: $tool-menu-background-color;
line-height: normal;

.#{$namespace}quickLinks-header--info {
vertical-align: middle;
padding-right: 1em;
}
#quickLinks-close {
font-size: 2em;
font-size: 1.5em;
font-family: $header-font-family;
color: black;
padding: 0 0 0 0;
color: $all-sites-close-action-color;
padding: 0;
margin-left: auto;
&:hover {
color: $all-sites-close-action-hover-color;
}
}
}
.tab-box {
list-style: none;
padding: 0 0 0 0;
padding: 0;
background-color: transparent;
margin: 0;
}

.#{$namespace}quickLinksNav__submenuitem {
display: block;
width: $quicklinks-menu-width;
border: 1px solid $tool-border-color;
@include border-radius( 4px );
white-space: nowrap;
overflow: hidden;
margin: 0.3em;
padding: 0.3em 0.5em 0.3em 0.5em;
padding: 0.3em 0.7em;
list-style: none;
background: darken( $background-color, 5% );
@include border-radius( 4px );
margin: 0.3em 0;
a{
display: inline-block;
@include display-flex;
@include align-items(center);
color: $text-color;
font-family: $header-font-family;
font-size: 0.9em;
Expand All @@ -115,20 +125,21 @@
}

#quicklink-icon{
width: 20px;
height: 20px;
top: 1px;
position: relative;
display: inline-block;
background-repeat: initial;
background-position: center;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
}

.#{$namespace}quickLinks__submenuitem--title {
&:hover {
text-decoration: underline;
}
padding-left: 8px;
padding-left: 0.7em;
}
}
@media #{$phone}{
Expand All @@ -137,6 +148,8 @@
top: 0.3em;
right: 0;
z-index: 61;
min-width: initial;
max-width: 100%;
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion library/src/morpheus-master/sass/modules/quicklinks/_quicklinks_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@
// VARIABLES: For Modules specific styles
//////////////////////////////

$quicklinks-menu-width: 18em !default;
$quicklinks-menu-width: 20em !default;
46 changes: 24 additions & 22 deletions portal/portal-render-engine-impl/impl/src/webapp/vm/morpheus/includeLoginNav.vm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,30 +27,32 @@
<a href="javascript:void(0);" class="js-toggle-quick-links-nav" title="${rloader.sit_quick_links_title}" aria-haspopup="true">
<i class="fa fa-th fa-external-link-square" aria-hidden="true"></i><span class="quicklinks-label">${rloader.sit_quick_links}</span>
</a>
</li>

<ul class="Mrphs-quickLinksNav__subnav is-hidden" role="menu">
<li id="quickLinks-header" class="Mrphs-quickLinksNav__submenuitem">
<span class="Mrphs-quickLinks-header--info">${quickLinksInfo}</span>
<a id="quickLinks-close" href="javascript:void(0);"><i class="fa fa-times" aria-hidden="true"></i></a>
</li>
<div id="selectQuickLink">
<div class="tab-box">
#foreach($quickLink in $quickLinks)
<li class="Mrphs-quickLinksNav__submenuitem">
<a role="menuitem" href="${quickLink.url}" title="$quickLink.title" target="_blank">
#if(${quickLink.iconType} == "image")
<span id="quicklink-icon" style="background-image:url(${quickLink.imageURI})"></span>
#elseif (${quickLink.iconType} == "icon")
<span id="quicklink-icon" class="${quickLink.iconClass}"></span>
#end
<span class="Mrphs-quickLinks__submenuitem--title">${quickLink.name}</span>
</a>
</li>
#end
<ul class="Mrphs-quickLinksNav__subnav is-hidden" role="menu">
<li id="quickLinks-header" class="Mrphs-quickLinksNav__submenuitem">
<span class="Mrphs-quickLinks-header--info">${quickLinksInfo}</span>
<a id="quickLinks-close" href="javascript:void(0);">
<span class="fa fa-times" aria-hidden="true"></span>
</a>
</li>
<div id="selectQuickLink">
<div class="tab-box">
#foreach($quickLink in $quickLinks)
<li class="Mrphs-quickLinksNav__submenuitem">
<a role="menuitem" href="${quickLink.url}" title="$quickLink.title" target="_blank">
#if(${quickLink.iconType} == "image")
<span id="quicklink-icon" style="background-image:url(${quickLink.imageURI})"></span>
#elseif (${quickLink.iconType} == "icon")
<span id="quicklink-icon" class="${quickLink.iconClass}"></span>
#end
<span class="Mrphs-quickLinks__submenuitem--title">${quickLink.name}</span>
</a>
</li>
#end
</div>
</div>
</div>
</ul>
</ul>
</li>
</ul>
#end

Expand Down

0 comments on commit 8600352

Please sign in to comment.