From 7d63ec4c582078a769c01597805c4e98bb5d034f Mon Sep 17 00:00:00 2001 From: mohin7 Date: Mon, 18 Dec 2023 15:22:19 +0600 Subject: [PATCH] Update appscode navbar Signed-off-by: mohin7 --- config.yaml | 2 + data/config.json | 12 +- data/products/configsyncer.json | 10 +- data/products/guard.json | 2 +- layouts/_default/baseof.html | 354 +++++++++++---------- static/assets/sass/components/_navbar.scss | 78 +++-- 6 files changed, 250 insertions(+), 208 deletions(-) diff --git a/config.yaml b/config.yaml index 3b13d761f3..94b0f7baaa 100644 --- a/config.yaml +++ b/config.yaml @@ -25,6 +25,8 @@ params: domain_stash: https://stash.run domain_voyagermesh: https://voyagermesh.com search_api_key: 8fd610038d901dd16a111e6f1568343bb969b084a1952dafdcb1545fd8c35e96 + learn_url: https://learn.appscode.com/learn + docs_url: https://docs.appscode.com blog_url: https://blog.appscode.com slack_url: https://slack.appscode.com github_url: https://github.com/appscode diff --git a/data/config.json b/data/config.json index d6ae50629e..d1e42983b1 100644 --- a/data/config.json +++ b/data/config.json @@ -43,14 +43,6 @@ "kubeform" ] }, - "ossMenu": { - "c0": [ - "guard" - ], - "c1": [ - "configsyncer" - ] - }, "productMenu": { "c0": [ "kubedb", @@ -59,6 +51,10 @@ "c1": [ "kubevault", "voyager" + ], + "c2": [ + "guard", + "configsyncer" ] }, "products": [ diff --git a/data/products/configsyncer.json b/data/products/configsyncer.json index f0c5f0bc76..16e79f2dae 100644 --- a/data/products/configsyncer.json +++ b/data/products/configsyncer.json @@ -13,19 +13,19 @@ }, "heroImage": { "src": "/assets/images/products/configsyncer/configsyncer-hero.png", - "alt": "Kubed" + "alt": "configsyncer" }, "logo": { "src": "/assets/images/products/configsyncer/configsyncer.png", - "alt": "Kubed" + "alt": "configsyncer" }, "logoWhite": { "src": "/assets/images/products/configsyncer/configsyncer-white.png", - "alt": "Kubed" + "alt": "configsyncer" }, "icon": { - "src": "/assets/images/products/configsyncer/configsyncer-icon.png", - "alt": "Kubed", + "src": "/assets/images/products/configsyncer/configsyncer-512x512.svg", + "alt": "configsyncer", "sizes": { "192x192": "/assets/images/products/configsyncer/icons/android-icon-192x192.png" } diff --git a/data/products/guard.json b/data/products/guard.json index b6aec03ecd..f233c86846 100644 --- a/data/products/guard.json +++ b/data/products/guard.json @@ -24,7 +24,7 @@ "alt": "Guard" }, "icon": { - "src": "/assets/images/products/guard/guard-icon.png", + "src": "/assets/images/products/guard/guard-512x512.svg", "alt": "Guard", "sizes": { "192x192": "/assets/images/products/guard/icons/android-icon-192x192.png" diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 8efee0ffb5..988c21e7aa 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -194,7 +194,8 @@
- +
+
@@ -301,110 +323,19 @@
{{ $p.name }}
{{ end }} -
-
- - - -
  • - - -
    - - -
    - - -
    - -
    - - - {{ range $item := $.Site.Data.config.ossMenu.c0 }} + {{ range $item := $.Site.Data.config.productMenu.c2 }} {{ $p := (index $.Site.Data.products $item) }} -
    + +
    {{ $p.logo.alt }}
    -

    {{ $p.tagline | safeHTML }} -

    -
      - {{ range $index, $item := $p.features }} - {{ if lt $index 8 }} -
    • task_alt{{ $item.title }}
      • - {{ end }} - {{ end }} -
    - -
    - {{ end }} - - - {{ range $item := $.Site.Data.config.ossMenu.c1 }} - {{ $p := (index $.Site.Data.products $item) }} -
    -
    - {{ $p.logo.alt }} -
    -

    {{ $p.tagline | safeHTML }} -

    + +

    {{ $p.summary | safeHTML }}

    +
      {{ range $index, $item := $p.features }} {{ if lt $index 8 }} @@ -416,64 +347,34 @@
      {{ $p.name }}
      class="button ac-button inline-button">Learn More arrow_forward -->
    + {{ end }}
    - +
    • -
  • - Webinar New -
    • - - - - - - + + + + +
    + + + + {{ $currentPageType := index (split .Page.Permalink "/") 3 }} +
    + SIGN IN + CONTACT + SALES +
    + +
    + - {{ $currentPageType := index (split .Page.Permalink "/") 3 }} - CONTACT - SALES @@ -1183,6 +1125,82 @@

    Legal

    {{ end }} + + + + + \ No newline at end of file diff --git a/static/assets/sass/components/_navbar.scss b/static/assets/sass/components/_navbar.scss index 4e64cd52a5..eca287acb2 100644 --- a/static/assets/sass/components/_navbar.scss +++ b/static/assets/sass/components/_navbar.scss @@ -64,11 +64,6 @@ .ac-searchbar { width: 49%; - display: flex; - align-items: center; - label { - display: flex; - } } } @@ -121,8 +116,43 @@ width: calc(100% - 200px); justify-content: flex-end; - .button { - margin-left: 2.5rem; + .navbar-left-group { + display: flex; + align-items: center; + @media (min-width: 0px) and (max-width: 1023px) { + align-items: flex-start; + } + } + + .navbar-right-group { + display: flex; + align-items: center; + gap: 32px; + .buttons{ + .button { + &:has(.tag){ + gap: 4px; + } + .tag { + background-color: $ac-primary; + color: $ac-white; + } + } + } + + @media (min-width: 0px) and (max-width: 1023px) { + flex-direction: column; + align-items: flex-start; + gap: 16px; + width: 100%; + .buttons{ + width: 100%; + .button { + width: 100%; + margin-right: 0; + } + } + } } } @@ -786,7 +816,7 @@ background-color: transparent; color: $ac-color-text; font-size: 0.875rem; - width: calc(100% - 30px); + width: 270px; padding: 0.2rem 0.875rem; &:focus { @@ -879,19 +909,6 @@ /**************************************** Responsive Classes *****************************************/ -@media (max-width: 767.98px) { - .product-version { - .dropdown { - .dropdown-trigger { - .button { - width: 160px; - padding: 4px 8px; - } - } - } - } -} - @media (max-width: 1023.98px) { .headroom--unpinned { .navbar-appscode-wrapper { @@ -1095,7 +1112,7 @@ Responsive Classes .dropdown { .dropdown-trigger { .button { - width: 200px; + width: 190px; } } } @@ -1135,18 +1152,27 @@ Responsive Classes margin-left: 0; border-left: none; } - + .navbar-left { + .navbar-brand { + margin-right: 1rem; + } + } .navbar-right { width: calc(100% - 180px); .community-items.ml-70 { margin-left: 10px !important; } + .button.ac-button { + padding: .5rem 1rem; + } + } + .navbar-right-group { + gap: 8px !important; } - ul { .nav-item { - margin-right: 1.5rem; + margin-right: 0.5rem; } } } @@ -1176,7 +1202,7 @@ Responsive Classes .dropdown { .dropdown-trigger { .button { - width: 200px; + width: 180px; padding: 2px 5px; } }