From 573cfced4ef8ce4f484464244a09f43168546dfd Mon Sep 17 00:00:00 2001 From: Toshaan Bharvani Date: Tue, 25 Jan 2022 23:29:48 +0100 Subject: [PATCH] update header/navbar/footer * update mobile hamburger menu to be aligned correctly * change hamburger color to #2566f4 * change the navbar layout to be inline with what we expect * big logo * mobile and screen now layout normally * we do not want upper menu on mobile * tooltip added to all upper menu as an overlay * header navbar uppermenu * footer stay-in-touch list Signed-off-by: Toshaan Bharvani --- .../assets/css/header.scss | 34 +++- .../openpowerfoundation/assets/css/main.css | 1 - .../assets/css/tooltip.scss | 52 ++++++ .../layouts/partials/footer.html | 24 +-- .../layouts/partials/header.html | 3 +- .../layouts/partials/navbar.html | 166 +++++++++--------- 6 files changed, 170 insertions(+), 110 deletions(-) create mode 100644 themes/openpowerfoundation/assets/css/tooltip.scss diff --git a/themes/openpowerfoundation/assets/css/header.scss b/themes/openpowerfoundation/assets/css/header.scss index d72c883..c240734 100644 --- a/themes/openpowerfoundation/assets/css/header.scss +++ b/themes/openpowerfoundation/assets/css/header.scss @@ -16,18 +16,30 @@ body { .header { padding: 10px 0; @media screen and (max-width: $lg) { - padding-top:17px; + padding-top: 17px; } border-bottom: 1px solid #1b1c1f; position: fixed; width: 100vw; background: white; - z-index: 100; + z-index: 100; &__logo { text-decoration: none; &-col { flex-grow: 0; } + @media screen and (max-width: $lg) { + img { + width: 143px; + height: 39px; + } + } + @media screen and (min-width: $lg) { + img { + width: 297px; + height: 49px; + } + } } &__menu { margin-bottom: 0; @@ -89,20 +101,24 @@ body { 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; + margin-left: 0.25em; + margin-right: 0.25em; + } + @media screen and (max-width: $lg) { + display: none; } } } #mobile-nav-toggle { + color: #2566f4; border: none; height: 45px; margin-right: 5px; - background-color:transparent; + background-color: transparent; + float: right; @media screen and (min-width: $lg) { display: none; } @@ -207,15 +223,15 @@ body { .header__logo { img { @media screen and (max-width: $lg) { - max-width:200px; + max-width: 200px; height: auto; } @media screen and (min-width:$lg) and (max-width: $xl) { - max-width:120px; + max-width: 120px; height: auto; } @media screen and (min-width:$xl) and (max-width: $xxl) { - max-width:120px; + max-width: 120px; height: auto; } } diff --git a/themes/openpowerfoundation/assets/css/main.css b/themes/openpowerfoundation/assets/css/main.css index 53f755b..4975969 100644 --- a/themes/openpowerfoundation/assets/css/main.css +++ b/themes/openpowerfoundation/assets/css/main.css @@ -4974,7 +4974,6 @@ textarea.form-control-lg { background-color: #fff; } .social__item i { - padding-left: 25%; color: #2566f4; } diff --git a/themes/openpowerfoundation/assets/css/tooltip.scss b/themes/openpowerfoundation/assets/css/tooltip.scss new file mode 100644 index 0000000..e620e88 --- /dev/null +++ b/themes/openpowerfoundation/assets/css/tooltip.scss @@ -0,0 +1,52 @@ +.tooltip-wrapper { + cursor: help; + margin: 0 auto; + position: relative; + text-align: center; + -webkit-transform: translateZ(999); + -webkit-font-smoothing: antialiased; +} +.tooltip-wrapper .tooltip-text { + background: #2566f4; + top: 100%; + color: #fff; + display: block; + left: 0; + margin-bottom: 15px; + opacity: 0; + padding: 20px; + pointer-events: none; + position: absolute; + z-index: 9999; + -webkit-transform: translateY(10px); + -moz-transform: translateY(10px); + -ms-transform: translateY(10px); + -o-transform: translateY(10px); + transform: translateY(10px); + -webkit-transition: all .25s ease-out; + -moz-transition: all .25s ease-out; + -ms-transition: all .25s ease-out; + -o-transition: all .25s ease-out; + transition: all .25s ease-out; + -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); + -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); + -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); + -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); + box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); +} +.tooltip-wrapper:hover .tooltip-text { + opacity: 1; + pointer-events: auto; + -webkit-transform: translateY(0px); + -moz-transform: translateY(0px); + -ms-transform: translateY(0px); + -o-transform: translateY(0px); + transform: translateY(0px); + z-index: 999; +} +.lte8 .tooltip-wrapper .tooltip-text { + display: none; +} +.lte8 .tooltip-wrapper:hover .tooltip-text { + display: block; +} diff --git a/themes/openpowerfoundation/layouts/partials/footer.html b/themes/openpowerfoundation/layouts/partials/footer.html index 40b0ed0..5e32f4b 100644 --- a/themes/openpowerfoundation/layouts/partials/footer.html +++ b/themes/openpowerfoundation/layouts/partials/footer.html @@ -52,30 +52,30 @@
  • Social Links
  • Discussion Links
  • Code Links
    • diff --git a/themes/openpowerfoundation/layouts/partials/header.html b/themes/openpowerfoundation/layouts/partials/header.html index f4c6458..ac26755 100644 --- a/themes/openpowerfoundation/layouts/partials/header.html +++ b/themes/openpowerfoundation/layouts/partials/header.html @@ -43,7 +43,8 @@ {{ $footer := resources.Get "css/footer.scss" }} {{ $changelog := resources.Get "css/changelog.scss" }} {{ $forms := resources.Get "css/forms.scss" }} - {{ $scss := slice $variables $header $promo $home $groups $ready $bod $timeline $pages $footer $changelog $forms | resources.Concat "css/custom.scss" }} + {{ $tooltip := resources.Get "css/tooltip.scss" }} + {{ $scss := slice $variables $header $promo $home $groups $ready $bod $timeline $pages $footer $changelog $forms $tooltip | resources.Concat "css/custom.scss" }} {{ $css := $scss | toCSS (dict "targetPath" "css/custom.min.css" "outputStyle" "compressed" "enableSourceMap" true) }} {{ $minicss := $css | resources.Minify }} diff --git a/themes/openpowerfoundation/layouts/partials/navbar.html b/themes/openpowerfoundation/layouts/partials/navbar.html index 8b1a10c..652909f 100644 --- a/themes/openpowerfoundation/layouts/partials/navbar.html +++ b/themes/openpowerfoundation/layouts/partials/navbar.html @@ -3,106 +3,98 @@
    {{ $imageresource := resources.Get "img/logo.png" }} {{ $imagefile := $imageresource.Resize "350x60 webp" }} -
    +
    -
    -
    -
     
    -
    - +
    +
    +
    +
    +
      +  |  + {{ range .Site.Menus.discuss }} +
    • {{ .Name }}
      • + {{ end }} +  |  + {{ range .Site.Menus.code }} +
    • {{ .Name }}
      • + {{ end }} +  |  + {{ range .Site.Menus.social }} +
    • {{ .Name }}
      • {{ end }} -
    -
    -
    - Join +  |  + +
    +
    +
    + Join
    - - -
    -
    -
    -
    -
      -  |  - {{ range .Site.Menus.discuss }} -
      • - {{ end }} -  |  - {{ range .Site.Menus.code }} -
      • - {{ end }} -  |  - {{ range .Site.Menus.social }} -
      • - {{ end }} -  |  -
    -
    -
    -
    - Join -
    -