From 61a4351f6a0662f592561b7ae29656bd4526feb6 Mon Sep 17 00:00:00 2001 From: Lam <150060045+lamATnginx@users.noreply.github.com> Date: Wed, 22 Jan 2025 10:42:47 -0800 Subject: [PATCH 01/11] Adding responsive layout for mainframe (#114) --- assets/css/v2/style.css | 163 +++++++++++++++++++++++++++++++++-- assets/js/theme-switcher.js | 9 ++ layouts/_default/baseof.html | 27 +++--- layouts/_default/docs.html | 60 +++++++------ layouts/partials/header.html | 2 +- 5 files changed, 215 insertions(+), 46 deletions(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index c445c123..354daa6b 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -16,6 +16,15 @@ --color-background: #FFFFFF; --color-foreground: #000000; --color-shadow: #D2D2D2; + + --sidebar-width: 24rem; + --side-gutter-width: 20rem; + --text-content-width-iphone-13: 30rem; + --text-content-width-mbp-14: 40rem; + --text-content-width-mbp-16: 50rem; + --text-content-width-4k-display: 60rem; + --component-gap: 3.5rem; + } @supports (font-variation-settings: normal) { @@ -33,19 +42,62 @@ h1, h2, h3, h4, h5, h6, .breadcrumb { font-weight: 500; } -/* layout */ +/* header */ header { margin: 2rem 2rem; .navbar { } + + .header-container { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; + } + + ul { + list-style: none; + } + + .dropdown-content { + position: absolute; + background-color: white; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; + right: 0; + display: none; + width: 400px; + max-width: 80vw; + margin-right: 8px; + } + + .dropdown-content ul { + padding: 20px 10px; + } + + .navbar-button { + padding: 0.5rem 0.5rem; + border: none; + border-radius: 0.25rem; + text-align: center; + text-decoration: none; + cursor: pointer; + } +} + +/* footer */ +footer { + background-color: #32302f; + padding: 0.5rem; } + /* breadcrumbs */ nav { display: flex; align-items: center; - padding: 1rem; .logo { height: 3rem; @@ -58,9 +110,94 @@ nav { } } +#searchbox { + width: 24rem; + display:none; + grid-column: 1; +} + +/* main content */ +.docs-container * { + box-sizing: border-box; +} + +.docs-container { + min-width: 100%; +} + +.breadcrumb-layout { + margin: 0 2rem; +} + +.main-layout { + display: grid; + grid-template-columns: 1fr; +} + +.sidebar-container { + display: flex; + flex-direction: column; +} + +.content-layout { + display: grid; + grid-template-columns: var(--text-content-width-iphone-13) var(--side-gutter-width); + column-gap: var(--component-gap); +} + +.text-content { + grid-column-start: 1; +} + +@media (min-width: 1512px) { /* Macbook Pro 14 */ + .base-layout { + display: grid; + grid-template-rows: repeat(2, auto); + column-gap: var(--component-gap); + } + + .breadcrumb-layout { + display: grid; + grid-template-columns: var(--sidebar-width) 1fr; + column-gap: var(--component-gap); + align-items: center; + } + + .main-layout { + display: grid; + grid-template-columns: var(--sidebar-width) 1fr; + column-gap: var(--component-gap); + } + + .content-layout { + display: grid; + grid-template-columns: var(--text-content-width-mbp-14) var(--side-gutter-width); + column-gap: var(--component-gap); + } + + .content-layout .side-gutter { + grid-column-start: 2; + } +} + +@media (min-width: 1728px) { /* Macbook Pro 16 */ + .content-layout { + display: grid; + grid-template-columns: var(--text-content-width-mbp-16) var(--side-gutter-width); + column-gap: var(--component-gap); + } +} + +@media (min-width: 2560px) { /* 4k Desktop */ + .content-layout { + display: grid; + grid-template-columns: var(--text-content-width-4k-display) var(--side-gutter-width); + column-gap: var(--component-gap); + } +} + .main { display: flex; - margin: 0 1rem; } .sidebar { @@ -87,14 +224,11 @@ p { line-height: 1.5rem; } -.breadcrumb { - font-size: 0.875rem; - margin: 0 0 2rem 0; -} - .breadcrumb { color: var(--color-foreground); text-decoration: none; + font-size: 0.875rem; + grid-column: 2 / -1; } .breadcrumb .active { @@ -169,6 +303,16 @@ pre.chroma { box-sizing: border-box; } +.f5-logo-footer { + height: 32px; + width: 32px; +} + +.nginx-logo-footer { + height: 72x; + width: 156px; +} + /* FILTHY HACKS BEGIN */ /* Override logo with black text version */ @@ -179,6 +323,9 @@ pre.chroma { /* non-tiling background logo */ background-image: url(/images/icons/NGINX-Docs-horiz-black-type.svg); background-repeat: no-repeat; + background-size: contain; + background-position: left center; + width: 200px; /* Adjust the width as needed to fit the logo */ img { display: none; diff --git a/assets/js/theme-switcher.js b/assets/js/theme-switcher.js index 8f320fba..80e0318d 100644 --- a/assets/js/theme-switcher.js +++ b/assets/js/theme-switcher.js @@ -40,4 +40,13 @@ function useNewTheme(useNewTheme) { document.getElementById(elementId).style.display = useNewTheme ? "": "none"; }); + const mfElements = ['[data-mf="true"]']; + mfElements.forEach((elementId) => { + document + .querySelectorAll(elementId) + .forEach( + (element) => (element.style.display = useNewTheme ? "" : "none") + ); + }); + } diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 7bfc17ad..07bca48f 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -45,17 +45,22 @@ {{ block "header" . }}{{end}} - {{ if not .IsHome }} - {{ if not (in .Params.display_breadcrumb "false" ) }} - {{ partial "breadcrumb" .}} - {{ end }} - {{ end }} - -
- - {{ block "main" . }}{{ end }} - -
+
+
+ + {{ if not .IsHome }} + {{ if not (in .Params.display_breadcrumb "false" ) }} + {{ partial "breadcrumb" .}} + {{ end }} + {{ end }} +
+ +
+ {{ block "main" . }}{{ end }} +
+
+ + {{ partial "scripts.html" . }} + diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html index 2ad39279..5e71cc31 100644 --- a/layouts/partials/scripts.html +++ b/layouts/partials/scripts.html @@ -52,14 +52,11 @@ {{ end }} + + {{ $jsSidebar := resources.Get "js/sidebar.js" | minify | fingerprint "sha512" }} - - -{{ $jsThemeSwitcher := resources.Get "js/theme-switcher.js" | minify | fingerprint "sha512" }} - {{ $jsSiteDropdown := resources.Get "js/site-dropdown.js" | minify | fingerprint "sha512" }} From 1f66607af79f15de994ab5cbf4316daa1f9e29ca Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Fri, 24 Jan 2025 10:24:52 -0800 Subject: [PATCH 11/11] feat: changed text on product name to be dynamic --- assets/css/v2/style.css | 1 + layouts/partials/sidebar-v2.html | 36 +++++++++++++++++++------------- 2 files changed, 23 insertions(+), 14 deletions(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 5870edc7..4c3ca29f 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -361,6 +361,7 @@ nav { margin-left: 0; padding-left: 0; list-style-type: none; + padding-right: 1.5rem; } .sidebar ul :not(.sidebar-navigation) ul { diff --git a/layouts/partials/sidebar-v2.html b/layouts/partials/sidebar-v2.html index bc4f3c9b..4211e2fb 100644 --- a/layouts/partials/sidebar-v2.html +++ b/layouts/partials/sidebar-v2.html @@ -1,7 +1,28 @@ +{{ $nginxProducts := slice + (dict "title" "NGINX One Console" "url" "/nginx-one" "type" "nginx-one") + (dict "title" "NGINX Plus" "url" "/nginx" "type" "nginx-one") + (dict "title" "NGINX Instance Manager" "url" "/nginx-instance-manager" "type" "nginx-one") + (dict "title" "NGINX Ingress Controller" "url" "/nginx-ingress-controller" "type" "nginx-one") + (dict "title" "NGINX Gateway Fabric" "url" "/nginx-gateway-fabric" "type" "nginx-one") + (dict "title" "NGINX Open Source" "url" "https://nginx.org/en/docs/" "type" "nginx-one") + (dict "title" "NGINX Agent" "url" "/nginx-agent" "type" "nginx-one") + (dict "title" "NGINX App Protect WAF" "url" "/nginx-app-protect-waf" "type" "nginx-app-protect") + (dict "title" "NGINX App Protect DoS" "url" "/nginx-app-protect-dos" "type" "nginx-app-protect") + (dict "title" "NGINX as a Service for Azure" "url" "/nginxaas/azure/" "type" "nginx-as-a-service") + (dict "title" "NGINX Unit" "url" "https://unit.nginx.org/" "type" "nginx-other") +}} +{{ $productMap := dict }} +{{ range $nginxProducts }} + {{ $productId := index (split .url "/") 1 }} + {{ $productMap = merge $productMap (dict $productId .title) }} +{{ end }} +{{ $relPermalink := .RelPermalink }} +{{ $productIdentifier := index ((split $relPermalink "/")) 1 }} +{{ $productName := index $productMap $productIdentifier }}
- {{ $nginxProducts := slice - (dict "title" "NGINX One Console" "url" "/nginx-one" "type" "nginx-one") - (dict "title" "NGINX Plus" "url" "/nginx" "type" "nginx-one") - (dict "title" "NGINX Instance Manager" "url" "/nginx-instance-manager" "type" "nginx-one") - (dict "title" "NGINX Ingress Controller" "url" "/nginx-ingress-controller" "type" "nginx-one") - (dict "title" "NGINX Gateway Fabric" "url" "/nginx-gateway-fabric" "type" "nginx-one") - (dict "title" "NGINX Open Source" "url" "https://nginx.org/en/docs/" "type" "nginx-one") - (dict "title" "NGINX Agent" "url" "/nginx-agent" "type" "nginx-one") - (dict "title" "NGINX App Protect WAF" "url" "/nginx-app-protect-waf" "type" "nginx-app-protect") - (dict "title" "NGINX App Protect DoS" "url" "/nginx-app-protect-dos" "type" "nginx-app-protect") - (dict "title" "NGINX as a Service for Azure" "url" "/nginxaas/azure/" "type" "nginx-as-a-service") - (dict "title" "NGINX Unit" "url" "https://unit.nginx.org/" "type" "nginx-other") - }} {{ $groupedProducts := dict "nginx-one" (where $nginxProducts "type" "nginx-one") "nginx-app-protect" (where $nginxProducts "type" "nginx-app-protect")