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

add uppermenu with direct links above the join/login buttons

Browse Source 
Signed-off-by: Toshaan Bharvani <toshaan@vantosh.com>
pull/1/head
Toshaan Bharvani 2 years ago
parent 574f0201d2
commit 10d86e0ea7
3 changed files with 373 additions and 348 deletions
Show Stats Download Patch File Download Diff File

28
config/_default/menus.toml
Unescape Escape View File

@ -134,6 +134,34 @@
pre = "far fa-file-pdf" pre = "far fa-file-pdf"
weight = -1600 weight = -1600


###
[[code]]
name = "Git"
pre = "fas fa-code-branch"
url = "https://git.openpower.foundation/"
[[code]]
name = "GitHub"
pre = "fab fa-github"
url = "https://github.com/OpenPOWERFoundation"
[[code]]
name = "GitLab"
pre = "fab fa-gitlab"
url = "https://gitlab.com/OpenPOWERFoundation"

###
[[discuss]]
name = "Discuss"
pre = "fas fa-comments"
url = "https://discuss.openpower.foundation/auth/oidc"
[[discuss]]
name = "Chat"
pre = "fas fa-comment-dots"
url = "https://chat.openpower.foundation"
[[discuss]]
name = "Slack"
pre = "fab fa-slack"
url = "https://openpowerfoundation.slack.com"

### social ### social
[[social]] [[social]]
name = "Twitter" name = "Twitter"

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

@ -1,288 +1,264 @@

body { body {
#mobile-nav { #mobile-nav {
display: none; display: none;
} }
&.mobile-nav-active { &.mobile-nav-active {

#mobile-nav {
#mobile-nav { display: block;
display: block; position: fixed;
position: fixed; top: 80px;
top: 80px; background: white;
background: white; z-index: 100;
z-index: 100; width:100%;
width:100%; height: 100%;
height: 100%; }
} }
} .header {

padding: 10px 0;
.header { @media screen and (max-width: $lg) {
padding: 10px 0; padding-top:17px;
@media screen and (max-width: $lg) { }
padding-top:17px; border-bottom: 1px solid #1b1c1f;
} position: fixed;
border-bottom: 1px solid #1b1c1f; width: 100vw;
position: fixed; background: white;
width: 100vw; z-index: 100;
height: 80px; &__logo {
background: white; text-decoration: none;
z-index: 100; &-col {
&__logo { flex-grow: 0;
text-decoration: none; }
&-col { }
flex-grow: 0; &__menu {
} margin-bottom: 0;
} align-items: center;
&__menu { line-height: 1.2;
margin-bottom: 0; &-item {
align-items: center; text-align: center;
line-height: 1.2; &.join {
&-item { display: none;
text-align: center; }
&.join { &.menu-has-children {
display: none; position: relative;
} ul {
&.menu-has-children { display: none;
position: relative; position: absolute;
ul { background-color: white;
display: none; padding-left: 0;
position: absolute; li {
background-color: white; margin-right: 0;
padding-left: 0; }
li { }
margin-right: 0; &:hover {
} ul {
} display: block;
&:hover { }
ul { }
display: block; }
} &:not(:last-child) {
} margin-right: 1em;
} }
&:not(:last-child) { &:hover a::after, &._active a::after {
margin-right: 1em; width: 100%;
} }
&:hover a::after, a {
&._active a::after { display: block;
width: 100%; padding: .3em .2em;
} color: #02123e;
a { &::after {
display: block; display: block;
padding: .3em .2em; content: '';
color: #02123e; width: 0;
&::after { border-bottom: 1px solid currentColor;
display: block; transition: width .2s ease-out;
content: ''; }
width: 0; &:hover {
border-bottom: 1px solid currentColor; color: #2566f4;
transition: width .2s ease-out; }
} }
&:hover { }
color: #2566f4; }
} &__contact-col {
} flex-grow: 0;
} }
} &__contact-btn, &__login-btn {
&__contact-col { min-width: 80px;
flex-grow: 0; white-space: nowrap;
} }
&__contact-btn, &__login-btn {
&__login-btn { margin-left: 1.5em;
min-width: 80px; }
white-space: nowrap; &__uppermenu {
} margin-bottom: 0.75rem;
&__login-btn { align-items: center;
margin-left: 1.5em; line-height: 1.0;
} li {
margin-left: 0.35em;
margin-right: 0.35em;
}
}
}
#mobile-nav-toggle {
border: none;
height: 45px;
margin-right: 5px;
background-color:transparent;
@media screen and (min-width: $lg) {
display: none;
}
}
#mobile-nav {
border-bottom: 1px solid black;
@media screen and (max-width: $lg) {
display: none;
padding-top:35px;
}
ul {
list-style: none;
padding-left: 0;
&:first-child {
height: 100%;
top: -5px;
overflow-y: auto;
}
&.menu-item-active {
margin-top:0;
}
li {
&.menu-has-children {
padding-left:4%;
}
&.join {
display: none;
}
a {
display: inline-block;
&.expandable-active {
font-weight: 500;
font-size: 100%;
}
}
i {
padding-left: 12px;
}
ul {
width:100%;
background-color:white;
position: relative;
z-index: 200;
display: block;
margin-left:auto;
margin-right: auto;
border: none;
li {
padding: 0 15px;
}
}
&:hover {
a {
text-decoration: none;
&::after {
display: none;
}
}
}
}
}
}
.navbar {
@media screen and (max-width: $lg) {
display: none;
}
}
.header__menu-item {
@media screen and (min-width: $lg) {
// font-size: 83%;
}
&.menu-has-children {
ul {
width:300px;
margin-top:1.6vw;
list-style: none;
border-top: none;
border-bottom: 1px solid #e8e8e8;
border-right: 1px solid #e8e8e8;
border-left: 1px solid #e8e8e8;;
@media screen and (min-width: $lg) {
margin-top: 0.5em;
}
li {
padding:10px 0;
border: none;
@media screen and (min-width: $lg) {
font-size: 100%;
}
a {
border: none;
text-align:left;
&:before, &:after {
display: none;
}
padding-left:15px;
}
}
}
}
}
.header__logo {
img {
@media screen and (max-width: $lg) {
max-width:200px;
height: auto;
}
@media screen and (min-width:$lg) and (max-width: $xl) {
max-width:120px;
height: auto;
}
@media screen and (min-width:$xl) and (max-width: $xxl) {
max-width:120px;
height: auto;
}
}
}
} }


// Mobile navigation

#mobile-nav-toggle {
border: none;
height: 45px;
margin-right: 5px;
background-color:transparent;
@media screen and (min-width: $lg) {
display: none;
}
}

#mobile-nav {
border-bottom: 1px solid black;
@media screen and (max-width: $lg) {
display: none;
padding-top:35px;
}
ul {
list-style: none;
padding-left: 0;

&:first-child {
height: 100%;
top: -5px;
overflow-y: auto;
}

&.menu-item-active {
margin-top:0;
}
li {
&.menu-has-children {
padding-left:4%;
}

&.join {
display: none;
}

a {
display: inline-block;
&.expandable-active {
font-weight: 500;
font-size: 100%;
}
}
i {
padding-left: 12px;
}
ul {
width:100%;
background-color:white;
position: relative;
z-index: 200;
display: block;
margin-left:auto;
margin-right: auto;
border: none;
li {
padding:0 15px;
}
}
&:hover {
a {
text-decoration: none;
&::after {
display: none;
}
}
}
}
}
}
.navbar {
@media screen and (max-width: $lg) {
display: none;
}
}

// Desktop navigation responsive

.header__menu-item {
@media screen and (min-width: $lg) {
// font-size: 83%;
}

&.menu-has-children {
ul {
width:300px;
margin-top:1.6vw;
list-style: none;
border-top: none;
border-bottom: 1px solid #e8e8e8;
border-right: 1px solid #e8e8e8;
border-left: 1px solid #e8e8e8;;
@media screen and (min-width: $lg) {
margin-top: 0.5em;
}
li {
padding:10px 0;
border: none;
@media screen and (min-width: $lg) {
font-size: 100%;
}

a {
border: none;
text-align:left;
&:before, &:after {
display: none;
}
padding-left:15px;
}
}
}
}
}

.header__logo {
img {
@media screen and (max-width: $lg) {
max-width:200px;
height: auto;
}

@media screen and (min-width:$lg) and (max-width: $xl) {
max-width:120px;
height: auto;
}

@media screen and (min-width:$xl) and (max-width: $xxl) {
max-width:120px;
height: auto;
}
}
}
}

// Mobile navigation: mobile and desktop visibility

.mobile-view-social-join { .mobile-view-social-join {
@media screen and (min-width: $lg) { @media screen and (min-width: $lg) {
display: none; display: none;
} }
} }

.social__list { .social__list {
&.desktop-view { &.desktop-view {
@media screen and (max-width: $lg) { @media screen and (max-width: $lg) {
display: none; display: none;
} }
.social__item { .social__item {
@media screen and (min-width:$lg) and (max-width: $xxl) { @media screen and (min-width:$lg) and (max-width: $xxl) {
margin-right: 0; margin-right: 0;
} }
} }
} }

&.mobile-view {
&.mobile-view { display: flex;
display: flex; align-items: center;
align-items: center; justify-content: center;
justify-content: center; }
} }
} .join-us-button, .login-button {

&.desktop-view {
.join-us-button, @media screen and (max-width: $lg) {
.login-button { display: none;
&.desktop-view { }
@media screen and (max-width: $lg) { a {
display: none; @media screen and (min-width:$lg) and (max-width: $xxl) {
} max-width: 80px;
a { height: auto;
@media screen and (min-width:$lg) and (max-width: $xxl) { padding: 0.375rem 0;
max-width:80px; }
height: auto; }
padding:0.375rem 0; }
} &.mobile-view {
} margin:auto;
} width: 97px;
&.mobile-view { min-width: 97px;
margin:auto; }
width: 97px;
min-width: 97px;
}
} }


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

@ -1,6 +1,6 @@
<header class="header"> <header class="header">
<div class="container navigation"> <div class="container-fluid navigation">
<div class="row 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 justify-content-center align-items-center">
@ -9,79 +9,100 @@
</a> </a>
</div> </div>
<div class="header__menu-col col"> <div class="header__menu-col col">
<nav class="navbar navbar-expand-lg header__menu-nav" id="nav-menu-container"> <div class="header__menu-col-row">&nbsp;</div>
<ul class="nav-menu header__menu d-lg-flex justify-content-center list-unstyled"> <div class="header__menu-col-row">
{{ range .Site.Menus.navbar }} <nav class="navbar navbar-expand-lg header__menu-nav" id="nav-menu-container">
{{ if eq .Identifier "groups" }} <ul class="nav-menu header__menu d-lg-flex justify-content-center list-unstyled">
<li class="header__menu-item menu-has-children"><a href="{{ .URL }}">{{ .Name }}</a> {{ range .Site.Menus.navbar }}
<ul class="list-unstyled"> {{ if eq .Identifier "groups" }}
{{ range $.Site.Pages }} <li class="header__menu-item menu-has-children"><a href="{{ .URL }}">{{ .Name }}</a>
{{ $group := .Param "wgtype" }} <ul class="list-unstyled">
{{ if eq $group "twg" }} {{ range $.Site.Pages }}
<li class="header__menu-item"><a href="{{ .Permalink }}">{{ .Title }}</a></li> {{ $group := .Param "wgtype" }}
{{ end }} {{ if eq $group "twg" }}
{{ if eq $group "sig" }} <li class="header__menu-item"><a href="{{ .Permalink }}">{{ .Title }}</a></li>
<li class="header__menu-item"><a href="{{ .Permalink }}">{{ .Title }}</a></li> {{ end }}
{{ end }} {{ if eq $group "sig" }}
{{ end }} <li class="header__menu-item"><a href="{{ .Permalink }}">{{ .Title }}</a></li>
</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> {{ end }}
</a> </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 }}
{{ end }} </ul>
</ul> <div class="mobile-view-social-join pt-3">
<div class="mobile-view-social-join pt-3"> <div class="header__contact-btn join-us-button mobile-view py-4">
<div class="header__contact-btn join-us-button mobile-view py-4"> <a class="d-inline-block btn-outline-primary btn-sm btn" href="{{ "/join/" | relURL }}">Join</a>
<a class="d-inline-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 mobile-view py-4"> <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>
</nav>
</div> </div>
</nav>
</div> </div>
<div class="header__contact-col col d-flex flex-nowrap justify-content-center align-items-center"> <div class="header__contact-col">
<div class="header__contact-btn join-us-button desktop-view"> <div class="header__contact-col-row">
<a class="d-block btn-outline-primary btn-sm btn" href="{{ "/join/" | relURL }}">Join</a> <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>
<div class="header__login-btn login-button desktop-view"> <div class="header__contact-col-row col d-flex flex-nowrap justify-content-center align-items-center">
<a class="d-block" href="https://portal.openpower.foundation/"> Login&nbsp;<i class="fas fa-sign-in-alt"></i> <div class="header__contact-btn join-us-button desktop-view">
</a> <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