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

add uppermenu with direct links above the join/login buttons

Browse Source 
Signed-off-by: Toshaan Bharvani <toshaan@vantosh.com>
master
Toshaan Bharvani 3 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"
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]]
name = "Twitter"

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

@ -1,288 +1,264 @@

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

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

.header {
padding: 10px 0;
@media screen and (max-width: $lg) {
padding-top:17px;
}
border-bottom: 1px solid #1b1c1f;
position: fixed;
width: 100vw;
height: 80px;
background: white;
z-index: 100;
&__logo {
text-decoration: none;
&-col {
flex-grow: 0;
}
}
&__menu {
margin-bottom: 0;
align-items: center;
line-height: 1.2;
&-item {
text-align: center;
&.join {
display: none;
}
&.menu-has-children {
position: relative;
ul {
display: none;
position: absolute;
background-color: white;
padding-left: 0;
li {
margin-right: 0;
}
}
&:hover {
ul {
display: block;
}
}
}
&:not(:last-child) {
margin-right: 1em;
}
&:hover a::after,
&._active a::after {
width: 100%;
}
a {
display: block;
padding: .3em .2em;
color: #02123e;
&::after {
display: block;
content: '';
width: 0;
border-bottom: 1px solid currentColor;
transition: width .2s ease-out;
}
&:hover {
color: #2566f4;
}
}
}
}
&__contact-col {
flex-grow: 0;
}
&__contact-btn,
&__login-btn {
min-width: 80px;
white-space: nowrap;
}
&__login-btn {
margin-left: 1.5em;
}
#mobile-nav {
display: none;
}
&.mobile-nav-active {
#mobile-nav {
display: block;
position: fixed;
top: 80px;
background: white;
z-index: 100;
width:100%;
height: 100%;
}
}
.header {
padding: 10px 0;
@media screen and (max-width: $lg) {
padding-top:17px;
}
border-bottom: 1px solid #1b1c1f;
position: fixed;
width: 100vw;
background: white;
z-index: 100;
&__logo {
text-decoration: none;
&-col {
flex-grow: 0;
}
}
&__menu {
margin-bottom: 0;
align-items: center;
line-height: 1.2;
&-item {
text-align: center;
&.join {
display: none;
}
&.menu-has-children {
position: relative;
ul {
display: none;
position: absolute;
background-color: white;
padding-left: 0;
li {
margin-right: 0;
}
}
&:hover {
ul {
display: block;
}
}
}
&:not(:last-child) {
margin-right: 1em;
}
&:hover a::after, &._active a::after {
width: 100%;
}
a {
display: block;
padding: .3em .2em;
color: #02123e;
&::after {
display: block;
content: '';
width: 0;
border-bottom: 1px solid currentColor;
transition: width .2s ease-out;
}
&:hover {
color: #2566f4;
}
}
}
}
&__contact-col {
flex-grow: 0;
}
&__contact-btn, &__login-btn {
min-width: 80px;
white-space: nowrap;
}
&__login-btn {
margin-left: 1.5em;
}
&__uppermenu {
margin-bottom: 0.75rem;
align-items: center;
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 {
@media screen and (min-width: $lg) {
display: none;
}
@media screen and (min-width: $lg) {
display: none;
}
}

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

&.mobile-view {
display: flex;
align-items: center;
justify-content: center;
}
}

.join-us-button,
.login-button {
&.desktop-view {
@media screen and (max-width: $lg) {
display: none;
}
a {
@media screen and (min-width:$lg) and (max-width: $xxl) {
max-width:80px;
height: auto;
padding:0.375rem 0;
}
}
}
&.mobile-view {
margin:auto;
width: 97px;
min-width: 97px;
}
&.desktop-view {
@media screen and (max-width: $lg) {
display: none;
}
.social__item {
@media screen and (min-width:$lg) and (max-width: $xxl) {
margin-right: 0;
}
}
}
&.mobile-view {
display: flex;
align-items: center;
justify-content: center;
}
}
.join-us-button, .login-button {
&.desktop-view {
@media screen and (max-width: $lg) {
display: none;
}
a {
@media screen and (min-width:$lg) and (max-width: $xxl) {
max-width: 80px;
height: auto;
padding: 0.375rem 0;
}
}
}
&.mobile-view {
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">
<div class="container navigation">
<div class="row d-lg-flex flex-lg-nowrap">
<div class="container-fluid navigation">
<div class="row-fluid d-lg-flex flex-lg-nowrap">
{{ $imageresource := resources.Get "img/logo.png" }}
{{ $imagefile := $imageresource.Resize "350x60 webp" }}
<div class="header__logo-col col d-flex justify-content-center align-items-center">
@ -9,79 +9,100 @@
</a>
</div>
<div class="header__menu-col col">
<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">
{{ range .Site.Menus.navbar }}
{{ if eq .Identifier "groups" }}
<li class="header__menu-item menu-has-children"><a href="{{ .URL }}">{{ .Name }}</a>
<ul class="list-unstyled">
{{ range $.Site.Pages }}
{{ $group := .Param "wgtype" }}
{{ if eq $group "twg" }}
<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 }}
<div class="header__menu-col-row">&nbsp;</div>
<div class="header__menu-col-row">
<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">
{{ range .Site.Menus.navbar }}
{{ if eq .Identifier "groups" }}
<li class="header__menu-item menu-has-children"><a href="{{ .URL }}">{{ .Name }}</a>
<ul class="list-unstyled">
{{ range $.Site.Pages }}
{{ $group := .Param "wgtype" }}
{{ if eq $group "twg" }}
<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 }}
</ul>
</a>
{{ end }}
</ul>
</li>
{{ 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 }}
</ul>
<div class="mobile-view-social-join pt-3">
<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>
</div>
<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>
</ul>
<div class="mobile-view-social-join pt-3">
<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>
</div>
<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>
</div>
</div>
</nav>
</div>
</nav>
</div>
<div class="header__contact-col 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 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__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 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>

Write Preview
Loading…
Cancel
Save