matthew1kalasky3
/
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"
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"

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

@ -1,10 +1,8 @@

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

#mobile-nav {
display: block;
position: fixed;
@ -15,8 +13,7 @@ body {
height: 100%;
}
}

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


// Mobile navigation

#mobile-nav-toggle {
&__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;
@ -107,9 +106,8 @@ body {
@media screen and (min-width: $lg) {
display: none;
}
}

#mobile-nav {
}
#mobile-nav {
border-bottom: 1px solid black;
@media screen and (max-width: $lg) {
display: none;
@ -118,32 +116,26 @@ body {
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 {
@ -159,7 +151,7 @@ body {
margin-right: auto;
border: none;
li {
padding:0 15px;
padding: 0 15px;
}
}
&:hover {
@ -178,14 +170,10 @@ body {
display: none;
}
}

// Desktop navigation responsive

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

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

a {
border: none;
text-align:left;
@ -217,19 +204,16 @@ body {
}
}
}

.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;
@ -237,15 +221,11 @@ body {
}
}
}

// Mobile navigation: mobile and desktop visibility

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

.social__list {
&.desktop-view {
@media screen and (max-width: $lg) {
@ -257,25 +237,22 @@ body {
}
}
}

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

.join-us-button,
.login-button {
}
.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;
max-width: 80px;
height: auto;
padding:0.375rem 0;
padding: 0.375rem 0;
}
}
}
@ -285,4 +262,3 @@ body {
min-width: 97px;
}
}


31
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,6 +9,8 @@
</a>
</div>
<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">
<ul class="nav-menu header__menu d-lg-flex justify-content-center list-unstyled">
{{ range .Site.Menus.navbar }}
@ -75,13 +77,32 @@
</div>
</nav>
</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">
<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>
<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