From e6f47662374ae2b6985cccc86cb9842ff82cd7f7 Mon Sep 17 00:00:00 2001 From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com> Date: Tue, 1 Apr 2025 14:06:51 +0100 Subject: [PATCH] Responsive: Fix callout handling and default side Use `minmax` to manage content and side-callout column Remove device specific media queries --- assets/css/v2/style.css | 105 ++++++------------ .../call-out/call-out-code-blocks.md | 26 ++++- .../call-out/call-out-code-lists.md | 16 ++- .../test-product/call-out/call-out-side.md | 51 +++++++++ layouts/shortcodes/call-out.html | 6 +- 5 files changed, 129 insertions(+), 75 deletions(-) create mode 100644 exampleSite/content/test-product/call-out/call-out-side.md diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index bc53871b..6bc1f338 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -32,6 +32,13 @@ --color-callout-important-primary: 0.36 0 0; --color-callout-important-shadow: 0.23 0 0 / 7.06%; + /* vars for the primary grid setup */ + --grid-sidebar: 24rem; + --grid-content: minmax(34rem, 50rem); + --grid-content-mobile: minmax(20rem, 50rem); + --grid-side-callout: minmax(18rem, 26rem); + --grid-column-gutter: 3.5rem; + --code-copy-icon-height: 1rem; --code-copy-icon-width: 1rem; --breadcrumb-max-height: 54px; @@ -48,10 +55,6 @@ --table-min-column-spacing-wide: 0.75rem; --table-header-bottom-spacing: 1rem; --table-line-height: 1px; - --text-content-width-iphone-13: 30rem; - --text-content-width-mbp-14: 40rem; - --text-content-width-mbp-16: 50rem; - --text-content-width-4k-display: 60rem; --codeblock-comment-diff: 2rem; --codeblock-comment-space-between: 10px; --codeblock-horizontal-line-length: 2rem; @@ -59,7 +62,6 @@ --codeblock-border-thickness: 1px; --codeblock-code-section-padding-left: 1rem; --codeblock-line-box-side-length: 4px; - --component-gap: 3.5rem; --overflow-gutter-extension: 1rem; --flow-gap: 1rem; @@ -134,7 +136,7 @@ h6 { /* header */ p { - font-weight: 400; + font-weight: 350; } ul, @@ -304,7 +306,7 @@ nav { .content-layout { display: grid; - grid-template-columns: var(--text-content-width-iphone-13) 1fr; + grid-template-columns: 1fr 1fr; grid-template-rows: var(--breadcrumb-max-height) 1fr; z-index: 1; margin-top: 2rem; @@ -340,6 +342,7 @@ nav { grid-column: 1 / -1; } +/* The default main-layout */ .main-layout { display: grid; grid-template-columns: 1fr; @@ -353,10 +356,12 @@ nav { .text-content { grid-column: 1 / -1; display: grid; - grid-template-columns: var(--text-content-width-iphone-13) 1fr; + grid-template-columns: var(--grid-content-mobile); + column-gap: var(--grid-column-gutter); margin-top: 2rem; grid-auto-rows: max-content; - grid-gap: var(--flow-gap); + row-gap: var(--flow-gap); + justify-content: center; } .text-content > :not(.wide) { @@ -371,33 +376,29 @@ nav { width: 100%; } -@media (min-width: 1185px) { - .main-layout { +@media (max-width: 88rem) { + .base-layout { display: grid; - grid-template-columns: var(--sidebar-width) 1fr; - column-gap: var(--component-gap); + grid-template-rows: repeat(2, auto); + column-gap: var(--grid-column-gutter); } -} -@media (max-width: 1184px) { + .sidebar-layout { display: none; } } -@media (min-width: 1512px) { - /* Macbook Pro 14 */ +@media (min-width: 88em) { .base-layout { display: grid; grid-template-rows: repeat(2, auto); - column-gap: var(--component-gap); + column-gap: var(--grid-column-gutter); max-width: 100%; } .text-content { - grid-template-columns: var(--text-content-width-mbp-14) var( - --side-gutter-width - ); - column-gap: var(--component-gap); + grid-template-columns: var(--grid-content) var(--grid-side-callout); + column-gap: var(--grid-column-gutter); } .text-content > :not(.wide) { @@ -407,15 +408,13 @@ nav { .main-layout { display: grid; grid-template-columns: var(--sidebar-width) 1fr; - column-gap: var(--component-gap); + column-gap: var(--grid-column-gutter); } .content-layout { display: grid; - grid-template-columns: var(--text-content-width-mbp-14) var( - --side-gutter-width - ); - column-gap: var(--component-gap); + grid-template-columns: var(--grid-content) var(--grid-side-callout); + column-gap: var(--grid-column-gutter); } .content-layout .side-gutter { @@ -423,43 +422,6 @@ nav { } } -@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); - } - - .text-content { - grid-template-columns: var(--text-content-width-mbp-16) var( - --side-gutter-width - ); - column-gap: var(--component-gap); - align-items: start; - } -} - -@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); - } - - .text-content { - grid-template-columns: var(--text-content-width-4k-display) var( - --side-gutter-width - ); - column-gap: var(--component-gap); - } -} - .list-page { --flow-gap: .5rem; @@ -934,7 +896,7 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon { /* content */ main { flex: 1; - min-width: 30rem; + min-width: 20rem; margin: 0 2rem 2rem 2rem; } @@ -1100,9 +1062,12 @@ blockquote p:last-child { margin: 0 auto; } -blockquote.side-callout { - grid-column: 2 !important; - grid-row: span 2; +/* Maintain the split column for as long as possible */ +@media (min-width: 67rem) { + blockquote.side-callout { + grid-column: 2 !important; + align-self: start; + } } blockquote > div > * { @@ -1114,6 +1079,10 @@ blockquote ul { margin: 0 0 1rem 1rem; } +li > blockquote { + margin: var(--flow-gap) 0 0 0; +} + blockquote.call-out { padding: 0.5rem; diff --git a/exampleSite/content/test-product/call-out/call-out-code-blocks.md b/exampleSite/content/test-product/call-out/call-out-code-blocks.md index ec75f601..7a8e1957 100644 --- a/exampleSite/content/test-product/call-out/call-out-code-blocks.md +++ b/exampleSite/content/test-product/call-out/call-out-code-blocks.md @@ -6,7 +6,28 @@ weight: 200 --- -## Code Block Multi line +## Code Block Multi line with callout + + +Start the Docker container to connect it to NGINX One. Replace `YOUR_NGINX_ONE_DATA_PLANE_KEY_HERE` with your data plane key and `VERSION_TAG` with the version tag you pulled. + +**For NGINX Plus R33 or later**: + +- Use the `NGINX_LICENSE_JWT` variable to pass your JWT license. Replace `YOUR_JWT_HERE` with your JWT. + +For more details, see About subscription licenses + +```sh +sudo docker run \ +--env=NGINX_LICENSE_JWT="YOUR_JWT_HERE" \ +--env=NGINX_AGENT_SERVER_GRPCPORT=443 \ +--env=NGINX_AGENT_SERVER_HOST=agent.connect.nginx.com \ +--env=NGINX_AGENT_SERVER_TOKEN="YOUR_NGINX_ONE_DATA_PLANE_KEY_HERE" \ +--env=NGINX_AGENT_TLS_ENABLE=true \ +--restart=always \ +--runtime=runc \ +-d private-registry.nginx.com/nginx-plus/agent: +``` {{}} To start the container with the `debian` image: @@ -27,12 +48,11 @@ sudo docker run \ ## Code Block Single line -{{}} + How to read load nginx config ```sh nginx -s reload ``` -{{}} diff --git a/exampleSite/content/test-product/call-out/call-out-code-lists.md b/exampleSite/content/test-product/call-out/call-out-code-lists.md index a1fbfce5..ec5f45e5 100644 --- a/exampleSite/content/test-product/call-out/call-out-code-lists.md +++ b/exampleSite/content/test-product/call-out/call-out-code-lists.md @@ -29,4 +29,18 @@ weight: 200 - Add a configuration to the config sync group, so all instances inherit it. - Add the instances in a separate operation. - Your instances should synchronize with your desired configuration within 30 seconds. {{< /note >}} \ No newline at end of file + Your instances should synchronize with your desired configuration within 30 seconds. {{< /note >}} + + +## Callout within list + +1. Open the JSON Web Token file you downloaded from [MyF5](https://my.f5.com/manage/s/subscriptions) and copy its contents. + + {{}} Make sure there are **no extra characters or spaces** when copying the contents of the JWT token: they can invalidate the token and cause 401 errors during authentication.{{}} + +2. Log in to the Docker registry using the contents of the JSON Web Token file: + + ```bash + docker login private-registry.nginx.com --username= --password=none + ``` + diff --git a/exampleSite/content/test-product/call-out/call-out-side.md b/exampleSite/content/test-product/call-out/call-out-side.md new file mode 100644 index 00000000..497d318d --- /dev/null +++ b/exampleSite/content/test-product/call-out/call-out-side.md @@ -0,0 +1,51 @@ +--- +description: Callout - Side +title: Callout - Side +weight: 200 +--- + +## Text is longer than callout +This is some text that should be along the left of the call out. +This assumes the callout text is shorter than the text in the callout. +If the text in the paragraph is shorter than the callout, it's likely +the content needs to be re-written. + +{{}} +I am some call out text. Look at me go! +{{}} + +## Text is shorter than callout + +This is some text that should be along the left of the call out. +This assumes the callout text is shorter than the text in the callout. +If the text in the paragraph is shorter than the callout, it's likely +the content needs to be re-written. + +{{}} +I am some call out text. Look at me go! +{{}} + +## Very long callout with short text + +Short Text + +{{}} +If you add multiple instances to a single config sync group, simultaneously (with automation), follow these steps. Your instances will inherit your desired configuration: + +Create a config sync group. +Add a configuration to the config sync group, so all instances inherit it. +Add the instances in a separate operation. +Your instances should synchronize with your desired configuration within 30 seconds. +{{}} + + +## Non-side call out + +This is some text that should be along the left of the call out. +This assumes the callout text is shorter than the text in the callout. +If the text in the paragraph is shorter than the callout, it's likely +the content needs to be re-written. + +{{}} +I am some call out text. Look at me go! +{{}} \ No newline at end of file diff --git a/layouts/shortcodes/call-out.html b/layouts/shortcodes/call-out.html index 1efd53e7..5aa0a1a9 100644 --- a/layouts/shortcodes/call-out.html +++ b/layouts/shortcodes/call-out.html @@ -2,9 +2,9 @@ {{ $sideOption := "side-callout" }} {{ $inlineOption := "inline-callout" }} - -{{ if and (not (strings.Contains $class $inlineOption)) (not (strings.Contains $class $sideOption)) }} -{{ $class = printf "%s %s" $class $inlineOption }} + +{{ if and (not (strings.Contains $class $sideOption)) (not (strings.Contains $class $inlineOption)) }} +{{ $class = printf "%s %s" $class $sideOption }} {{ end }}