matthew1kalasky3
/
openpower.foundation
forked from website/openpower.foundation
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update header/navbar/footer

Browse Source 
* update mobile hamburger menu to be aligned correctly
* change hamburger color to #2566f4
* change the navbar layout to be inline with what we expect
    * big logo
    * mobile and screen now layout normally
    * we do not want upper menu on mobile
* tooltip added to all upper menu as an overlay
    * header navbar uppermenu
    * footer stay-in-touch list

Signed-off-by: Toshaan Bharvani <toshaan@vantosh.com>
jamesk-patch-20
Toshaan Bharvani 3 years ago
parent 2407070f0c
commit 573cfced4e
6 changed files with 170 additions and 110 deletions
Show Stats Download Patch File Download Diff File

32
themes/openpowerfoundation/assets/css/header.scss
Unescape Escape View File

@ -16,7 +16,7 @@ body {
.header { .header {
padding: 10px 0; padding: 10px 0;
@media screen and (max-width: $lg) { @media screen and (max-width: $lg) {
padding-top:17px; padding-top: 17px;
} }
border-bottom: 1px solid #1b1c1f; border-bottom: 1px solid #1b1c1f;
position: fixed; position: fixed;
@ -28,6 +28,18 @@ body {
&-col { &-col {
flex-grow: 0; flex-grow: 0;
} }
@media screen and (max-width: $lg) {
img {
width: 143px;
height: 39px;
}
}
@media screen and (min-width: $lg) {
img {
width: 297px;
height: 49px;
}
}
} }
&__menu { &__menu {
margin-bottom: 0; margin-bottom: 0;
@ -89,20 +101,24 @@ body {
margin-left: 1.5em; margin-left: 1.5em;
} }
&__uppermenu { &__uppermenu {
margin-bottom: 0.75rem;
align-items: center; align-items: center;
line-height: 1.0; line-height: 1.0;
li { li {
margin-left: 0.35em; margin-left: 0.25em;
margin-right: 0.35em; margin-right: 0.25em;
}
@media screen and (max-width: $lg) {
display: none;
} }
} }
} }
#mobile-nav-toggle { #mobile-nav-toggle {
color: #2566f4;
border: none; border: none;
height: 45px; height: 45px;
margin-right: 5px; margin-right: 5px;
background-color:transparent; background-color: transparent;
float: right;
@media screen and (min-width: $lg) { @media screen and (min-width: $lg) {
display: none; display: none;
} }
@ -207,15 +223,15 @@ body {
.header__logo { .header__logo {
img { img {
@media screen and (max-width: $lg) { @media screen and (max-width: $lg) {
max-width:200px; max-width: 200px;
height: auto; height: auto;
} }
@media screen and (min-width:$lg) and (max-width: $xl) { @media screen and (min-width:$lg) and (max-width: $xl) {
max-width:120px; max-width: 120px;
height: auto; height: auto;
} }
@media screen and (min-width:$xl) and (max-width: $xxl) { @media screen and (min-width:$xl) and (max-width: $xxl) {
max-width:120px; max-width: 120px;
height: auto; height: auto;
} }
} }

1
themes/openpowerfoundation/assets/css/main.css
Unescape Escape View File

@ -4974,7 +4974,6 @@ textarea.form-control-lg {
background-color: #fff; background-color: #fff;
} }
.social__item i { .social__item i {
padding-left: 25%;
color: #2566f4; color: #2566f4;
} }



52
themes/openpowerfoundation/assets/css/tooltip.scss
Unescape Escape View File

@ -0,0 +1,52 @@
.tooltip-wrapper {
cursor: help;
margin: 0 auto;
position: relative;
text-align: center;
-webkit-transform: translateZ(999);
-webkit-font-smoothing: antialiased;
}
.tooltip-wrapper .tooltip-text {
background: #2566f4;
top: 100%;
color: #fff;
display: block;
left: 0;
margin-bottom: 15px;
opacity: 0;
padding: 20px;
pointer-events: none;
position: absolute;
z-index: 9999;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}
.tooltip-wrapper:hover .tooltip-text {
opacity: 1;
pointer-events: auto;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
z-index: 999;
}
.lte8 .tooltip-wrapper .tooltip-text {
display: none;
}
.lte8 .tooltip-wrapper:hover .tooltip-text {
display: block;
}

24
themes/openpowerfoundation/layouts/partials/footer.html
Unescape Escape View File

@ -52,30 +52,30 @@
<li>Social Links<ul> <li>Social Links<ul>
{{ range .Site.Menus.social }} {{ range .Site.Menus.social }}
<li> <li>
<a target="_blank" class="social__item" href="{{ .URL }}"> <div class="tooltip-wrapper">
<i class="{{ .Pre }}"></i> <a target="_blank" class="social__item" href="{{ .URL }}"><i class="{{ .Pre }}"></i></a>
<span class="visually-hidden">{{ .Name }}</span> <div class="tooltip-text">{{ .Name }}</div>
</a> </div>
</li> </li>
{{ end }} {{ end }}
</ul></li> </ul></li>
<li>Discussion Links<ul> <li>Discussion Links<ul>
{{ range .Site.Menus.discuss }} {{ range .Site.Menus.discuss }}
<li> <li>
<a target="_blank" class="social__item" href="{{ .URL }}"> <div class="tooltip-wrapper">
<i class="{{ .Pre }}"></i> <a target="_blank" class="social__item" href="{{ .URL }}"><i class="{{ .Pre }}"></i></a>
<span class="visually-hidden">{{ .Name }}</span> <div class="tooltip-text">{{ .Name }}</div>
</a> </div>
</li> </li>
{{ end }} {{ end }}
</ul></li> </ul></li>
<li>Code Links<ul> <li>Code Links<ul>
{{ range .Site.Menus.code }} {{ range .Site.Menus.code }}
<li> <li>
<a target="_blank" class="social__item" href="{{ .URL }}"> <div class="tooltip-wrapper">
<i class="{{ .Pre }}"></i> <a target="_blank" class="social__item" href="{{ .URL }}"><i class="{{ .Pre }}"></i></a>
<span class="visually-hidden">{{ .Name }}</span> <div class="tooltip-text">{{ .Name }}</div>
</a> </div>
</li> </li>
{{ end }} {{ end }}
</ul></li> </ul></li>

3
themes/openpowerfoundation/layouts/partials/header.html
Unescape Escape View File

@ -43,7 +43,8 @@
{{ $footer := resources.Get "css/footer.scss" }} {{ $footer := resources.Get "css/footer.scss" }}
{{ $changelog := resources.Get "css/changelog.scss" }} {{ $changelog := resources.Get "css/changelog.scss" }}
{{ $forms := resources.Get "css/forms.scss" }} {{ $forms := resources.Get "css/forms.scss" }}
{{ $scss := slice $variables $header $promo $home $groups $ready $bod $timeline $pages $footer $changelog $forms | resources.Concat "css/custom.scss" }} {{ $tooltip := resources.Get "css/tooltip.scss" }}
{{ $scss := slice $variables $header $promo $home $groups $ready $bod $timeline $pages $footer $changelog $forms $tooltip | resources.Concat "css/custom.scss" }}
{{ $css := $scss | toCSS (dict "targetPath" "css/custom.min.css" "outputStyle" "compressed" "enableSourceMap" true) }} {{ $css := $scss | toCSS (dict "targetPath" "css/custom.min.css" "outputStyle" "compressed" "enableSourceMap" true) }}
{{ $minicss := $css | resources.Minify }} {{ $minicss := $css | resources.Minify }}
<link rel="stylesheet" href="{{ $minicss.RelPermalink }}"> <link rel="stylesheet" href="{{ $minicss.RelPermalink }}">

166
themes/openpowerfoundation/layouts/partials/navbar.html
Unescape Escape View File

@ -3,106 +3,98 @@
<div class="row-fluid d-lg-flex flex-lg-nowrap"> <div class="row-fluid d-lg-flex flex-lg-nowrap">
{{ $imageresource := resources.Get "img/logo.png" }} {{ $imageresource := resources.Get "img/logo.png" }}
{{ $imagefile := $imageresource.Resize "350x60 webp" }} {{ $imagefile := $imageresource.Resize "350x60 webp" }}
<div class="header__logo-col col d-flex justify-content-center align-items-center"> <div class="header__logo-col col d-flex">
<a class="header__logo" href="{{ "/" | relURL }}"> <a class="header__logo" href="{{ "/" | relURL }}">
<img src="{{ $imagefile.RelPermalink }}" width="297" height="49" alt="OpenPOWER"> <img src="{{ $imagefile.RelPermalink }}" width="297" height="49" alt="OpenPOWER">
</a> </a>
</div> <div class="header__menu-col col">
<div class="header__menu-col col"> <div class="header__uppermenu">&nbsp;</div>
<div class="header__menu-col-row">&nbsp;</div> <div class="header__menu-col-row">
<div class="header__menu-col-row"> <nav class="navbar navbar-expand-lg header__menu-nav" id="nav-menu-container">
<nav class="navbar navbar-expand-lg header__menu-nav" id="nav-menu-container"> <ul class="nav-menu header__menu d-lg-flex justify-content-center list-unstyled">
<ul class="nav-menu header__menu d-lg-flex justify-content-center list-unstyled"> {{ range .Site.Menus.navbar }}
{{ range .Site.Menus.navbar }} {{ if eq .Identifier "groups" }}
{{ if eq .Identifier "groups" }} <li class="header__menu-item menu-has-children"><a href="{{ .URL }}">{{ .Name }}</a>
<li class="header__menu-item menu-has-children"><a href="{{ .URL }}">{{ .Name }}</a> <ul class="list-unstyled">
<ul class="list-unstyled"> {{ range $.Site.Pages }}
{{ range $.Site.Pages }} {{ $group := .Param "wgtype" }}
{{ $group := .Param "wgtype" }} {{ if eq $group "twg" }}
{{ if eq $group "twg" }} <li class="header__menu-item"><a href="{{ .Permalink }}">{{ .Title }}</a></li>
<li class="header__menu-item"><a href="{{ .Permalink }}">{{ .Title }}</a></li>
{{ end }}
{{ if eq $group "sig" }}
<li class="header__menu-item"><a href="{{ .Permalink }}">{{ .Title }}</a></li>
{{ end }}
{{ end }}
</ul>
</li>
{{ else }}
{{ if .HasChildren }}
<li class="header__menu-item menu-has-children">
<a href="{{ .URL }}">{{ .Name }}</a>
<ul class="">
{{ range .Children }}
{{ if .HasChildren }}
<li class="header__menu-item menu-has-children">
<a href="{{ .URL }}">{{ .Name }}</a>
<ul class="">
{{ range .Children }}
<li class="header__menu-item"><a href="{{ .URL }}">{{ .Name }}</a></li>
{{ end }}
</ul>
</a>
</li>
{{ else }}
<li class="header__menu-item">
<a href="{{ .URL }}">
{{ if .Pre }}
<i class={{ .Pre }}></i>&nbsp;&nbsp;
{{ end }}
{{ .Name }}
{{ if .Post }}
&nbsp;&nbsp;<i class="{{ .Post }}"></i>
{{ end }}
</a>
</li>
{{ end }}
{{ end }} {{ end }}
</ul> {{ if eq $group "sig" }}
</a> <li class="header__menu-item"><a href="{{ .Permalink }}">{{ .Title }}</a></li>
{{ end }}
{{ end }}
</ul>
</li> </li>
{{ else }} {{ else }}
<li class="header__menu-item {{lower .Name }}" ><a href="{{ .URL }}">{{ .Name }}</a></li> {{ if .HasChildren }}
<li class="header__menu-item menu-has-children">
<a href="{{ .URL }}">{{ .Name }}</a>
<ul class="">
{{ range .Children }}
{{ if .HasChildren }}
<li class="header__menu-item menu-has-children">
<a href="{{ .URL }}">{{ .Name }}</a>
<ul class="">
{{ range .Children }}
<li class="header__menu-item"><a href="{{ .URL }}">{{ .Name }}</a></li>
{{ end }}
</ul>
</a>
</li>
{{ else }}
<li class="header__menu-item">
<a href="{{ .URL }}">
{{ if .Pre }}
<i class={{ .Pre }}></i>&nbsp;&nbsp;
{{ end }}
{{ .Name }}
{{ if .Post }}
&nbsp;&nbsp;<i class="{{ .Post }}"></i>
{{ end }}
</a>
</li>
{{ end }}
{{ end }}
</ul>
</a>
</li>
{{ else }}
<li class="header__menu-item {{lower .Name }}" ><a href="{{ .URL }}">{{ .Name }}</a></li>
{{ end }}
{{ end }} {{ end }}
{{ end }} {{ end }}
</ul>
</nav>
</div>
</div>
<div class="header__contact-col">
<div class="header__contact-col-row col d-flex flex-nowrap justify-content-center align-items-center">
<ul class="header__uppermenu d-lg-flex justify-content-end list-unstyled">
&nbsp;|&nbsp;
{{ range .Site.Menus.discuss }}
<li><a href="{{ .URL }}"><div class="tooltip-wrapper"><i class="{{ .Pre }}"></i><div class="tooltip-text">{{ .Name }}</div></div></a></li>
{{ end }}
&nbsp;|&nbsp;
{{ range .Site.Menus.code }}
<li><a href="{{ .URL }}"><div class="tooltip-wrapper"><i class="{{ .Pre }}"></i><div class="tooltip-text">{{ .Name }}</div></div></a></li>
{{ end }}
&nbsp;|&nbsp;
{{ range .Site.Menus.social }}
<li><a href="{{ .URL }}"><div class="tooltip-wrapper"><i class="{{ .Pre }}"></i><div class="tooltip-text">{{ .Name }}</div></div></a></li>
{{ end }} {{ end }}
</ul> &nbsp;|&nbsp;
<div class="mobile-view-social-join pt-3"> </ul>
<div class="header__contact-btn join-us-button mobile-view py-4"> </div>
<a class="d-inline-block btn-outline-primary btn-sm btn" href="{{ "/join/" | relURL }}">Join</a> <div class="header__contact-col-row col d-flex flex-nowrap justify-content-center align-items-center">
<div class="header__contact-btn join-us-button desktop-view">
<a class="d-block btn-outline-primary btn-sm btn" href="{{ "/join/" | relURL }}">Join</a>
</div> </div>
<div class="header__login-btn login-button mobile-view py-4"> <div class="header__login-btn login-button desktop-view">
<a class="d-block" href="https://portal.openpower.foundation/"> Login&nbsp;<i class="fas fa-sign-in-alt"></i></a> <a class="d-block" href="https://portal.openpower.foundation/"> Login&nbsp;<i class="fas fa-sign-in-alt"></i></a>
</div> </div>
</div> </div>
</nav>
</div>
</div>
<div class="header__contact-col">
<div class="header__contact-col-row">
<ul class="header__uppermenu d-lg-flex justify-content-end list-unstyled">
&nbsp;|&nbsp;
{{ range .Site.Menus.discuss }}
<li><a href="{{ .URL }}"><i class="{{ .Pre }}"></i></a></li>
{{ end }}
&nbsp;|&nbsp;
{{ range .Site.Menus.code }}
<li><a href="{{ .URL }}"><i class="{{ .Pre }}"></i></a></li>
{{ end }}
&nbsp;|&nbsp;
{{ range .Site.Menus.social }}
<li><a href="{{ .URL }}"><i class="{{ .Pre }}"></i></a></li>
{{ end }}
&nbsp;|&nbsp;
</ul>
</div>
<div class="header__contact-col-row col d-flex flex-nowrap justify-content-center align-items-center">
<div class="header__contact-btn join-us-button desktop-view">
<a class="d-block btn-outline-primary btn-sm btn" href="{{ "/join/" | relURL }}">Join</a>
</div>
<div class="header__login-btn login-button desktop-view">
<a class="d-block" href="https://portal.openpower.foundation/"> Login&nbsp;<i class="fas fa-sign-in-alt"></i></a>
</div>
</div> </div>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save