ganesan
/
openpower.foundation
forked from website/openpower.foundation
1
0
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>
jamesk-patch-20
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" 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"

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

@ -1,10 +1,8 @@

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;
@ -15,7 +13,6 @@ body {
height: 100%; height: 100%;
} }
} }

.header { .header {
padding: 10px 0; padding: 10px 0;
@media screen and (max-width: $lg) { @media screen and (max-width: $lg) {
@ -24,7 +21,6 @@ body {
border-bottom: 1px solid #1b1c1f; border-bottom: 1px solid #1b1c1f;
position: fixed; position: fixed;
width: 100vw; width: 100vw;
height: 80px;
background: white; background: white;
z-index: 100; z-index: 100;
&__logo { &__logo {
@ -62,8 +58,7 @@ body {
&:not(:last-child) { &:not(:last-child) {
margin-right: 1em; margin-right: 1em;
} }
&:hover a::after, &:hover a::after, &._active a::after {
&._active a::after {
width: 100%; width: 100%;
} }
a { a {
@ -86,19 +81,23 @@ body {
&__contact-col { &__contact-col {
flex-grow: 0; flex-grow: 0;
} }
&__contact-btn, &__contact-btn, &__login-btn {
&__login-btn {
min-width: 80px; min-width: 80px;
white-space: nowrap; white-space: nowrap;
} }
&__login-btn { &__login-btn {
margin-left: 1.5em; 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 navigation

#mobile-nav-toggle { #mobile-nav-toggle {
border: none; border: none;
height: 45px; height: 45px;
@ -108,7 +107,6 @@ body {
display: none; display: none;
} }
} }

#mobile-nav { #mobile-nav {
border-bottom: 1px solid black; border-bottom: 1px solid black;
@media screen and (max-width: $lg) { @media screen and (max-width: $lg) {
@ -118,32 +116,26 @@ body {
ul { ul {
list-style: none; list-style: none;
padding-left: 0; padding-left: 0;

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

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

&.join { &.join {
display: none; display: none;
} }

a { a {
display: inline-block; display: inline-block;
&.expandable-active { &.expandable-active {
font-weight: 500; font-weight: 500;
font-size: 100%; font-size: 100%;
} }
} }
i { i {
@ -178,14 +170,10 @@ body {
display: none; display: none;
} }
} }

// Desktop navigation responsive

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

&.menu-has-children { &.menu-has-children {
ul { ul {
width:300px; width:300px;
@ -204,7 +192,6 @@ body {
@media screen and (min-width: $lg) { @media screen and (min-width: $lg) {
font-size: 100%; font-size: 100%;
} }

a { a {
border: none; border: none;
text-align:left; text-align:left;
@ -217,19 +204,16 @@ 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;
@ -237,15 +221,11 @@ body {
} }
} }
} }

// 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) {
@ -257,16 +237,13 @@ body {
} }
} }
} }

&.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 {
.join-us-button,
.login-button {
&.desktop-view { &.desktop-view {
@media screen and (max-width: $lg) { @media screen and (max-width: $lg) {
display: none; display: none;
@ -285,4 +262,3 @@ body {
min-width: 97px; min-width: 97px;
} }
} }


31
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,6 +9,8 @@
</a> </a>
</div> </div>
<div class="header__menu-col col"> <div class="header__menu-col col">
<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"> <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 }}
@ -75,13 +77,32 @@
</div> </div>
</nav> </nav>
</div> </div>
<div class="header__contact-col col d-flex flex-nowrap justify-content-center align-items-center"> </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"> <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> <a class="d-block btn-outline-primary btn-sm btn" href="{{ "/join/" | relURL }}">Join</a>
</div> </div>
<div class="header__login-btn login-button desktop-view"> <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 class="d-block" href="https://portal.openpower.foundation/"> Login&nbsp;<i class="fas fa-sign-in-alt"></i></a>
</a> </div>
</div> </div>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save