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

add uppermenu with direct links above the join/login buttons 

Signed-off-by: Toshaan Bharvani <toshaan@vantosh.com>
pull/1/head
Toshaan Bharvani 1 year ago
parent
574f0201d2
commit
10d86e0ea7
3 changed files with 373 additions and 348 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 28
      config/_default/menus.toml
  2. 540
      themes/openpowerfoundation/assets/css/header.scss
  3. 153
      themes/openpowerfoundation/layouts/partials/navbar.html

28
config/_default/menus.toml
Unescape View File

@ -134,6 +134,34 @@ @@ -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 View File

@ -1,288 +1,264 @@ @@ -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 View File

@ -1,6 +1,6 @@ @@ -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 @@ @@ -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