From 16052517a80843e07b07adcfc8e513a77314fac8 Mon Sep 17 00:00:00 2001 From: Luke Billington Date: Mon, 12 Feb 2024 09:34:27 -0800 Subject: [PATCH] Add toggle-able sidebar button (#47) * feat: Initial sidebar modification to support expand/collapse * feat: add resize * feat: add default resize * fix: fix widths of content * fix: Fix redoc widths * feat: Add aria attributes * fix: fixed issue with content width on safari * fix: added fix to weird seam when scrollbar always is set in mac settings --------- Co-authored-by: Luke Billington Co-authored-by: Lam Nguyen --- assets/css/f5-hugo.css | 1478 ++++++++++++++++++++---------------- assets/js/sidebar.js | 120 ++- layouts/_default/docs.html | 13 +- 3 files changed, 935 insertions(+), 676 deletions(-) diff --git a/assets/css/f5-hugo.css b/assets/css/f5-hugo.css index 3b014af..5268e87 100644 --- a/assets/css/f5-hugo.css +++ b/assets/css/f5-hugo.css @@ -1,398 +1,496 @@ :root { - --nginx-green: #009639; -} - -.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto { - padding-right: 8px; - padding-left: 8px; + --nginx-green: #009639; +} + +.col, +.col-1, +.col-10, +.col-11, +.col-12, +.col-2, +.col-3, +.col-4, +.col-5, +.col-6, +.col-7, +.col-8, +.col-9, +.col-auto, +.col-lg, +.col-lg-1, +.col-lg-10, +.col-lg-11, +.col-lg-12, +.col-lg-2, +.col-lg-3, +.col-lg-4, +.col-lg-5, +.col-lg-6, +.col-lg-7, +.col-lg-8, +.col-lg-9, +.col-lg-auto, +.col-md, +.col-md-1, +.col-md-10, +.col-md-11, +.col-md-12, +.col-md-2, +.col-md-3, +.col-md-4, +.col-md-5, +.col-md-6, +.col-md-7, +.col-md-8, +.col-md-9, +.col-md-auto, +.col-sm, +.col-sm-1, +.col-sm-10, +.col-sm-11, +.col-sm-12, +.col-sm-2, +.col-sm-3, +.col-sm-4, +.col-sm-5, +.col-sm-6, +.col-sm-7, +.col-sm-8, +.col-sm-9, +.col-sm-auto, +.col-xl, +.col-xl-1, +.col-xl-10, +.col-xl-11, +.col-xl-12, +.col-xl-2, +.col-xl-3, +.col-xl-4, +.col-xl-5, +.col-xl-6, +.col-xl-7, +.col-xl-8, +.col-xl-9, +.col-xl-auto { + padding-right: 8px; + padding-left: 8px; } .code-copy { - color: #429345; - background-color: #fff; - border-color: #429345; - border: 1px solid; - border-radius: 4px 4px 0px 0px; - border-bottom: 0px; - display: block; - margin-left: auto; - margin-right: 0; - margin-bottom: -12px; - padding: 3px 8px; - font-size: 0.8em; + color: #429345; + background-color: #fff; + border-color: #429345; + border: 1px solid; + border-radius: 4px 4px 0px 0px; + border-bottom: 0px; + display: block; + margin-left: auto; + margin-right: 0; + margin-bottom: -12px; + padding: 3px 8px; + font-size: 0.8em; } .code-copy:hover { - cursor: pointer; - background-color: #429345; - color: #ffffff; - border-color: #429345!important; - border: 1px solid; - border-bottom: 0px; + cursor: pointer; + background-color: #429345; + color: #ffffff; + border-color: #429345 !important; + border: 1px solid; + border-bottom: 0px; } .code-copy:focus { - outline: 0px solid transparent; - background-color: #e6e6e6; + outline: 0px solid transparent; + background-color: #e6e6e6; } .code-copy:active { - background-color: #d9d9d9; + background-color: #d9d9d9; } .button { - text-transform: uppercase; - font-size: 14px; - font-weight: 600; -} - -a, abbr, acronym, applet, del, div, dl, fieldset, font, form, iframe, ins, label, legend, li, object, q, s, samp, span, strike, tbody, tfoot, thead, tr { - border: 0; - font-family: inherit; - font-size: 100%; - font-style: inherit; - font-weight: inherit; - margin: 0; - outline: 0; - padding: 0; - vertical-align: baseline; + text-transform: uppercase; + font-size: 14px; + font-weight: 600; +} + +a, +abbr, +acronym, +applet, +del, +div, +dl, +fieldset, +font, +form, +iframe, +ins, +label, +legend, +li, +object, +q, +s, +samp, +span, +strike, +tbody, +tfoot, +thead, +tr { + border: 0; + font-family: inherit; + font-size: 100%; + font-style: inherit; + font-weight: inherit; + margin: 0; + outline: 0; + padding: 0; + vertical-align: baseline; } a { - transition: all .1s ease; + transition: all 0.1s ease; } -ul, ol { - margin: 0px 0 10px 30px; - padding: 0; +ul, +ol { + margin: 0px 0 10px 30px; + padding: 0; } li { - padding-bottom: 8px!important; + padding-bottom: 8px !important; } ol > li { - list-style: decimal; - font-family: roboto-regular, Arial, Helvetica, sans-serif; - font-size: inherit; + list-style: decimal; + font-family: roboto-regular, Arial, Helvetica, sans-serif; + font-size: inherit; } ol > li > ol { - list-style: lower-alpha; - font-family: roboto-regular, Arial, Helvetica, sans-serif; - font-size: inherit; + list-style: lower-alpha; + font-family: roboto-regular, Arial, Helvetica, sans-serif; + font-size: inherit; } ul > li > ul, ul > li > ol, ol > li > ul, ol > li > ol { - padding-bottom: 8px; + padding-bottom: 8px; } .card-deck { - padding-bottom: 2em; - width: -webkit-fill-available; - width: -moz-available + padding-bottom: 2em; + width: -webkit-fill-available; + width: -moz-available; } .card-holder { - padding: 12px; + padding: 12px; } .card { - padding: 1.5em; - margin-top: 2em; - /*min-height: 330px;*/ - min-width: 40%; - max-width: 100%; - background: #FFFFFF; - border: 1px solid #EEEEEE; - box-sizing: border-box; - box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15); - border-radius: 2px; + padding: 1.5em; + margin-top: 2em; + /*min-height: 330px;*/ + min-width: 40%; + max-width: 100%; + background: #ffffff; + border: 1px solid #eeeeee; + box-sizing: border-box; + box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15); + border-radius: 2px; } .products-card { - color: #33444d; - background-color: #fff; - box-shadow: 0px 1px 4px 0px #4856653D; - box-shadow: 0px 4px 8px 0px #48566529; - padding: 24px 36px; - min-height: 180px; - border: 1px solid #f8f9f9; - box-sizing: border-box; - border-radius: 4px; - height: 100%; + color: #33444d; + background-color: #fff; + box-shadow: 0px 1px 4px 0px #4856653d; + box-shadow: 0px 4px 8px 0px #48566529; + padding: 24px 36px; + min-height: 180px; + border: 1px solid #f8f9f9; + box-sizing: border-box; + border-radius: 4px; + height: 100%; } .saas-card { - display: flex; + display: flex; } .saas-icon { - width: 46px; - margin-right: 5px; + width: 46px; + margin-right: 5px; } .saas-description { - flex: 75%; - + flex: 75%; } .saas-title { - overflow-wrap: normal; - padding-top: 4px; - padding-bottom: 4px; + overflow-wrap: normal; + padding-top: 4px; + padding-bottom: 4px; } h3.saas-title a { - color: #000; + color: #000; } h3.saas-title a:hover { - color: var(--nginx-green); + color: var(--nginx-green); } h3.saas-title { - font-style: normal; - font-weight: bold; - font-size: 24px; - line-height: 28px; + font-style: normal; + font-weight: bold; + font-size: 24px; + line-height: 28px; } - a.products-card { - display: block; - transition: transform 150ms ease-in-out; - color: #000; + display: block; + transition: transform 150ms ease-in-out; + color: #000; } a.products-card:hover { - opacity: 1; - /* transform: scale(1.03); */ - box-shadow: 0px 5px 10px 0px #4856650F; - box-shadow: 0px 12px 24px 0px #48566533; + opacity: 1; + /* transform: scale(1.03); */ + box-shadow: 0px 5px 10px 0px #4856650f; + box-shadow: 0px 12px 24px 0px #48566533; } .card-img { - background-repeat: no-repeat; + background-repeat: no-repeat; } .card-text-placeholder { - min-height: 35px; + min-height: 35px; } .list-card { - min-height: 40px; - padding: 1em; - border: 1px solid #eee; - margin: .5em; - box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15); + min-height: 40px; + padding: 1em; + border: 1px solid #eee; + margin: 0.5em; + box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15); } .list-page { - margin: 0 auto; - max-width: 1200px; + margin: 0 auto; + max-width: 1200px; } .list-page .page-header { - margin-top: 20px; + margin-top: 20px; } .list-page .page-header.center { - text-align: center; + text-align: center; } .section-index .entry { - padding: .75rem; + padding: 0.75rem; } .section-index h5 { - margin-bottom: 0; - font-size: 1.5rem; + margin-bottom: 0; + font-size: 1.5rem; } .card-small { - padding: 2em; - min-height: fit-content; + padding: 2em; + min-height: fit-content; } .card-empty { - box-shadow: none !important; - border: none !important; + box-shadow: none !important; + border: none !important; } -.card-img, .card-img-top { - width: auto; - height: 40px; - color: var(--nginx-green); - margin-right: 5px; +.card-img, +.card-img-top { + width: auto; + height: 40px; + color: var(--nginx-green); + margin-right: 5px; } .card-img.list { - width: auto; - height: 40px; + width: auto; + height: 40px; } .img-large { - width: 100px !important; + width: 100px !important; } .card-title { - overflow-wrap: normal; - + overflow-wrap: normal; } .products-card > .card-title { - padding-left: 52px; - text-indent: -52px; + padding-left: 52px; + text-indent: -52px; } - - h3.card-title a { - color: #000; + color: #000; } h3.card-title a:hover { - color: var(--nginx-green); + color: var(--nginx-green); } h3.card-title { - font-style: normal; - font-weight: bold; - font-size: 24px; - line-height: 28px; + font-style: normal; + font-weight: bold; + font-size: 24px; + line-height: 28px; } .card-text { - font-style: normal; - font-weight: normal; - font-size: 14px; - line-height: 18px; - /* or 129% */ - font-feature-settings: 'case' on; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 18px; + /* or 129% */ + font-feature-settings: "case" on; } .card-description { - padding-left: 52px; + padding-left: 52px; } .card-list { - list-style-type: square; - margin-left: 15px; + list-style-type: square; + margin-left: 15px; } .card-list > li { - padding-bottom: 6px; - font-weight: 400; + padding-bottom: 6px; + font-weight: 400; } -#f5-related, #nginx-products { - width: 100%; - padding: 50px; - position: relative; +#f5-related, +#nginx-products { + width: 100%; + padding: 50px; + position: relative; } #f5-related { - color: #f1f1f1; - background: #F7F8FA; + color: #f1f1f1; + background: #f7f8fa; } #search-bar { - width: 100%; - background-color: #222222!important; + width: 100%; + background-color: #222222 !important; } -.navbar-dark, .bg-dark { - background-color: #222222!important; +.navbar-dark, +.bg-dark { + background-color: #222222 !important; } .navbar-img { - height: 56px; - padding: 4px 48px; + height: 56px; + padding: 4px 48px; } -ul.navbar-nav>li { - list-style: none; +ul.navbar-nav > li { + list-style: none; } .nav-item { - color: #f1f1f1; - text-transform: uppercase; - font-size: 16px; - padding-right: 1.4rem; - font-weight: 400; + color: #f1f1f1; + text-transform: uppercase; + font-size: 16px; + padding-right: 1.4rem; + font-weight: 400; } a.dropdown-item { - color: #FFFFFF; + color: #ffffff; } a.dropdown-item:hover { - color: #000; + color: #000; } .dropdown-item { - font-size: 1.4rem; - margin-bottom: 0; - padding: 1rem; - padding-right: 1.2rem; + font-size: 1.4rem; + margin-bottom: 0; + padding: 1rem; + padding-right: 1.2rem; } #nx_masthead.nx-site-header { - top: 0; - z-index: 150; - position: fixed; - width: 100%; - -webkit-transition: all .2s ease-in-out; - transition: all .2s ease-in-out; + top: 0; + z-index: 150; + position: fixed; + width: 100%; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; } main { - padding-top: 24px!important; - padding-left: 24px; + padding-top: 24px !important; + padding-left: 24px; } .main { - background: #FFFFFF; -} - -address, blockquote, dd, ol, p, table, ul { - border: 0; - font-family: inherit; - font-style: normal; - font-weight: 300; - font-size: 16px; - line-height: 20px; - outline: 0; - padding: 0; + background: #ffffff; +} + +address, +blockquote, +dd, +ol, +p, +table, +ul { + border: 0; + font-family: inherit; + font-style: normal; + font-weight: 300; + font-size: 16px; + line-height: 20px; + outline: 0; + padding: 0; } .section-heading { - padding-top: 20px; + padding-top: 20px; } .form-inline .form-control { - width: 580px; + width: 580px; } #footer { - width: 100%; - position: relative; - background: #32302F; - padding: 8px 48px; + width: 100%; + position: relative; + background: #32302f; + padding: 8px 48px; } #footer .row { - padding-top: 24px; - padding-bottom: 32px; - border-bottom: 1px solid #595959; + padding-top: 24px; + padding-bottom: 32px; + border-bottom: 1px solid #595959; } footer ul { - list-style-type: none; - margin: 0 0 10px 0px; - align-items: center; + list-style-type: none; + margin: 0 0 10px 0px; + align-items: center; } footer a:link, @@ -402,200 +500,205 @@ footer a:hover, #footer .site-info.footer-text a, #footer .site-info.footer-text a:active, #footer .site-info.footer-text a:hover { - color: #CCCCCC; + color: #cccccc; } .footer-text, .footer-text li, .footer-social li { - font-style: normal; - font-size: 14px; - line-height: 20px; - font-weight: 300; - /* identical to box height */ - color: #CCCCCC; + font-style: normal; + font-size: 14px; + line-height: 20px; + font-weight: 300; + /* identical to box height */ + color: #cccccc; } .site-info { - padding: 24px 0px; + padding: 24px 0px; } .site-info.footer-text p { - font-weight: 300; - font-size: 12px; - line-height: 16px; + font-weight: 300; + font-size: 12px; + line-height: 16px; } .footer-head { - font-weight: 700; - color: #CCCCCC; - font-size: 14px; - line-height: 20px; + font-weight: 700; + color: #cccccc; + font-size: 14px; + line-height: 20px; } .nginx-logo-footer { - height: 116px; - padding-top: 24px; - padding-bottom: 24px; + height: 116px; + padding-top: 24px; + padding-bottom: 24px; } .footer-social i { - color: #9A9A9A; - padding-right: 8px; + color: #9a9a9a; + padding-right: 8px; } .footer-social li, #footer ul li, .footer-head { - margin: 8px 0 0 0; + margin: 8px 0 0 0; } .breadcrumb { - background: #343434; - margin-bottom: 0 !important; - padding: 4px 27px; - font-weight: 400; - font-size: 16px; - line-height: 26px; - color: #FFFFFF; - border: none!important; - border-radius: 0px; + background: #343434; + margin-bottom: 0 !important; + padding: 4px 27px; + font-weight: 400; + font-size: 16px; + line-height: 26px; + color: #ffffff; + border: none !important; + border-radius: 0px; } .breadcrumb a { - color: #FFFFFF; + color: #ffffff; } .breadcrumb a:hover { - color: #11BD8D; + color: #11bd8d; } ol.breadcrumb { - margin-left: 0px; - margin-bottom: 0px; - font-size: 14px; + margin-left: 0px; + margin-bottom: 0px; + font-size: 14px; } -.breadcrumb>li { - display: inline-block; +.breadcrumb > li { + display: inline-block; } -.breadcrumb>li>i.fas.fa-chevron-right { - padding-right: 8px; - padding-left: 8px; +.breadcrumb > li > i.fas.fa-chevron-right { + padding-right: 8px; + padding-left: 8px; } .hero { - padding-top: 2rem; + padding-top: 2rem; } ul.pagination > li { - color: var(--nginx-green); - display: inline-block; + color: var(--nginx-green); + display: inline-block; } ul.pagination .prev { - margin-right: 1em; + margin-right: 1em; } ul.pagination .prev:before { - content: "\00ab"; - padding-right: .5em; + content: "\00ab"; + padding-right: 0.5em; } ul.pagination .next { - margin-left: 1em; + margin-left: 1em; } ul.pagination .next:after { - content: "\00bb"; - padding-left: 1em; + content: "\00bb"; + padding-left: 1em; } /* Callouts */ blockquote { - border-radius: 4px; - padding: 8px; - background: #F8F9F9; - margin: 0 8px 12px 0; - float: none!important; + border-radius: 4px; + padding: 8px; + background: #f8f9f9; + margin: 0 8px 12px 0; + float: none !important; } .caution { - border-left: 4px solid #f29a36; + border-left: 4px solid #f29a36; } .note { - border-left: 4px solid #62c026; + border-left: 4px solid #62c026; } -.tip, .beta { - border-left: 4px solid #1d9cd3; - +.tip, +.beta { + border-left: 4px solid #1d9cd3; } -.warning, .important { - border-left: 4px solid #c20025; +.warning, +.important { + border-left: 4px solid #c20025; } div.main ul > li, div.main ol > li { - clear: both; + clear: both; } /* Feature States */ -.beta, .stable, .alpha, .deprecated { - border-left: 4px solid transparent; - border-radius: 4px; +.beta, +.stable, +.alpha, +.deprecated { + border-left: 4px solid transparent; + border-radius: 4px; } .beta { - color: #0c5c8d; - border-color: #7cc0eb; + color: #0c5c8d; + border-color: #7cc0eb; } .stable { - color: #438c15; - border-color: #a4e171; + color: #438c15; + border-color: #a4e171; } .alpha { - color: #343434; - border-color: #bd7421; + color: #343434; + border-color: #bd7421; } .deprecated { - color: #343434; - border-color: #f1f1f1; + color: #343434; + border-color: #f1f1f1; } /* /// ReDoc API customizations */ -.redoc-json>code { - background: #11181A; - color: #fbfbfb; - font-size: 100%; - font-family: Consolas, Monaco, courier new, monospace; +.redoc-json > code { + background: #11181a; + color: #fbfbfb; + font-size: 100%; + font-family: Consolas, Monaco, courier new, monospace; } /* / Override ReDoc font settings */ -redoc, .redoc-wrap { - font-family: Arial, Helvetica, serif !important; +redoc, +.redoc-wrap { + font-family: Arial, Helvetica, serif !important; } .menu-content { - top: 66px !important; - height: calc(100vh - 66px) !important; + top: 66px !important; + height: calc(100vh - 66px) !important; } redoc .search-icon { - display: none; + display: none; } /* @@ -603,7 +706,7 @@ redoc .search-icon { */ .lpeYvY { - font-weight: 600; + font-weight: 600; } /* @@ -611,25 +714,22 @@ redoc .search-icon { */ redoc { - overflow-anchor: auto; - overscroll-behavior-y: none; -} - -.nginx-docs-api-container { - width: 100%; + overflow-anchor: auto; + overscroll-behavior-y: none; } .nginx-docs-api-container button { - border-color: inherit; - box-shadow: none!important; + border-color: inherit; + box-shadow: none !important; } -.nginx-docs-api-container>#operation>button:hover, .nginx-docs-api-container .button:hover { - filter: brightness(85%)!important; +.nginx-docs-api-container > #operation > button:hover, +.nginx-docs-api-container .button:hover { + filter: brightness(85%) !important; } .api-content * { - font-family: "Roboto-Regular", "Helvetica Neue", Arial, sans-serif; + font-family: "Roboto-Regular", "Helvetica Neue", Arial, sans-serif; } /* @@ -637,219 +737,225 @@ redoc { */ .label { - display: inline-block; - cursor: default; + display: inline-block; + cursor: default; } .my-collapse-custom { - margin-bottom: 24px; + margin-bottom: 24px; } .collapse-box { - margin-bottom: 8px; - margin-top: 8px; + margin-bottom: 8px; + margin-top: 8px; } .my-collapse-custom-header { - float: right; - display: block; + float: right; + display: block; } /* Tooltip container */ .tooltip { - position: relative; - display: inline-block; + position: relative; + display: inline-block; } /* Tooltip text */ .tooltip .tooltiptext { - visibility: hidden; - width: fit-content; - background-color: #555; - color: #fff; - text-align: center; - padding: 10px 20px; - border-radius: 4px; - /* Position the tooltip text */ - position: absolute; - z-index: 1; - bottom: 125%; - left: 0%; - margin-left: -60px; - /* Fade in tooltip */ - opacity: 0; - transition: opacity 0.3s; + visibility: hidden; + width: fit-content; + background-color: #555; + color: #fff; + text-align: center; + padding: 10px 20px; + border-radius: 4px; + /* Position the tooltip text */ + position: absolute; + z-index: 1; + bottom: 125%; + left: 0%; + margin-left: -60px; + /* Fade in tooltip */ + opacity: 0; + transition: opacity 0.3s; } /* Tooltip arrow */ .tooltip .tooltiptext::after { - content: ""; - position: absolute; - top: 100%; - left: 50%; - margin-left: -5px; - border-width: 5px; - border-style: solid; - border-color: #555 transparent transparent transparent; + content: ""; + position: absolute; + top: 100%; + left: 50%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: #555 transparent transparent transparent; } /* Show the tooltip text when you mouse over the tooltip container */ .tooltip:hover .tooltiptext { - visibility: visible; - opacity: 1; + visibility: visible; + opacity: 1; } -div pre>code { - white-space: pre; +div pre > code { + white-space: pre; } .content { - background-color: #FFFFFF; - padding-top: 32px; - padding-left: 24px; - padding-right: 16px; + background-color: #ffffff; + padding-top: 32px; + padding-left: 24px; + padding-right: 16px; } body { - margin: 0; - color: #222222; - background: #F8F9F9; - text-align: left; - font-size: 14px; - line-height: 20px; - font-weight: normal; - cursor: auto; + margin: 0; + color: #222222; + background: #f8f9f9; + text-align: left; + font-size: 14px; + line-height: 20px; + font-weight: normal; + cursor: auto; } -h3.bd-links, #TableOfContents ul li a { - color: #343434; +h3.bd-links, +#TableOfContents ul li a { + color: #343434; } .bd-links { - display: block; - border: none; + display: block; + border: none; } .bd-links ul > li:last-child { - padding-bottom: 0px !important; - margin-bottom: 0px !important; + padding-bottom: 0px !important; + margin-bottom: 0px !important; } -.bd-links ul > li > ul:last-child{ - padding-bottom: 0px !important; +.bd-links ul > li > ul:last-child { + padding-bottom: 0px !important; } .page { - background-color: #FFFFFF; + background-color: #ffffff; } .bg-md-gray { - background-color: #e6e6e6; + background-color: #e6e6e6; } .bg-dk-gray { - background-color: #343434; -} + background-color: #343434; +} .highlight { - margin: 12px 0; + margin: 12px 0; } pre code { - font-size: 14px; - background: transparent; + font-size: 14px; + background: transparent; } pre { - max-width: 100%; - margin: 0; - overflow: auto; - padding: 8px; - tab-size: 4; - -moz-tab-size: 4; - -o-tab-size: 4; - border-radius: 4px; - white-space: pre-wrap; + max-width: 100%; + margin: 0; + overflow: auto; + padding: 8px; + tab-size: 4; + -moz-tab-size: 4; + -o-tab-size: 4; + border-radius: 4px; + white-space: pre-wrap; } pre.chroma { - border-radius: 4px 0px 4px 4px; + border-radius: 4px 0px 4px 4px; } code { - font-family: Courier; - color: #343434; - font-style: normal; - font-weight: 400; - line-height: 24px; - letter-spacing: 0em; - text-align: left; - font-size: inherit; - white-space: nowrap; - padding: 1px 0px; - background: #f1f1f1; - border-radius: 4px; + font-family: Courier; + color: #343434; + font-style: normal; + font-weight: 400; + line-height: 24px; + letter-spacing: 0em; + text-align: left; + font-size: inherit; + white-space: nowrap; + padding: 1px 0px; + background: #f1f1f1; + border-radius: 4px; } -a>code:hover { - color: #11BD8D; +a > code:hover { + color: #11bd8d; } .min-page-height { - min-height: 100vh; + min-height: 100vh; } /* bootstrap overrides/tweaks */ .alert { - display: flex; + display: flex; } .alert > p { - margin-bottom: 0; + margin-bottom: 0; } .beta-icon { - margin: 5px 10px 0 0; -} - -.navbar-button, .footer-button, input[type=submit] { - padding: 16px; - height: 32px; - background: #1d9cd3; - border-radius: 4px; - color: #FFFFFF; - margin: 0px 6px; - font-size: 14px; - line-height: 20px; - - /* Auto Layout */ - display: flex; - flex-direction: row; - align-items: center; - text-align: center; - font-feature-settings: 'tnum' on, 'lnum' on; - /* Inside Auto Layout */ - flex: none; - order: 1; - flex-grow: 0; - margin: 0px 8px; -} - -button, input[type=button], input[type=reset], input[type=submit] { - box-shadow: none; - text-shadow: none; - border: none; - font-feature-settings: 'tnum' on, 'lnum' on; - /* identical to box height, or 133% */ - display: flex; - align-items: center; - text-align: center; - font-weight: normal; + margin: 5px 10px 0 0; +} + +.navbar-button, +.footer-button, +input[type="submit"] { + padding: 16px; + height: 32px; + background: #1d9cd3; + border-radius: 4px; + color: #ffffff; + margin: 0px 6px; + font-size: 14px; + line-height: 20px; + + /* Auto Layout */ + display: flex; + flex-direction: row; + align-items: center; + text-align: center; + font-feature-settings: "tnum" on, "lnum" on; + /* Inside Auto Layout */ + flex: none; + order: 1; + flex-grow: 0; + margin: 0px 8px; +} + +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + box-shadow: none; + text-shadow: none; + border: none; + font-feature-settings: "tnum" on, "lnum" on; + /* identical to box height, or 133% */ + display: flex; + align-items: center; + text-align: center; + font-weight: normal; } .navbar .button > a, @@ -859,286 +965,379 @@ button, input[type=button], input[type=reset], input[type=submit] { .footer-button a:hover, .footer-button a:active, .footer-button a:link, -.button a:hover { - color: #FFFFFF; +.button a:hover { + color: #ffffff; } .footer-button { - min-width: 122px; + min-width: 122px; } .next-prev-icon { - display: flex; - list-style-type: none; - padding: 2%; + display: flex; + list-style-type: none; + padding: 2%; } #sidebar ul { - list-style-type: none; - display: list-item; - padding-left: 0; - margin-left: 0rem; - margin-bottom: 0 !important; + list-style-type: none; + display: list-item; + padding-left: 0; + margin-left: 0rem; + margin-bottom: 0 !important; } .sidebar-l1-padding { - padding-left: 7px !important; + padding-left: 7px !important; } .sidebar-l2-padding { - padding-left: 8px !important; + padding-left: 8px !important; } .sidebar-reg-padding { - padding-left: 7px !important; + padding-left: 7px !important; } .sidebar-il-border { - border-left: 1px solid #C5CCD3; - padding-left: 10px !important; + border-left: 1px solid #c5ccd3; + padding-left: 10px !important; } - #sidebar ul:not(:first-child) { - display: list-item; - padding-left: 0px; - font-size: 95%; - -} + display: list-item; + padding-left: 0px; + font-size: 95%; +} #sidebar > .l2 ul li:last-child, #sidebar > .l2 ul li ul li:last-child, #sidebar > .l3 ul li:last-child, -#sidebar > .l3 ul li ul li:last-child { - padding-bottom: 8px; +#sidebar > .l3 ul li ul li:last-child { + padding-bottom: 8px; } -#sidebar .l3{ - padding-left: 21px; +#sidebar .l3 { + padding-left: 21px; } #sidebar a { - color: inherit; - text-align: left; - padding: 0; - font-weight: 300; -} + color: inherit; + text-align: left; + padding: 0; + font-weight: 300; +} #sidebar a:hover, #TableOfContents a:hover { - color: inherit; - background-color: transparent; - color: #11BD8D; + color: inherit; + background-color: transparent; + color: #11bd8d; } main a:hover { - color: #11BD8D; + color: #11bd8d; } .sidebar-title { - font-size: 22px; - font-weight: 600 !important; + font-size: 22px; + font-weight: 600 !important; } #sidebar > h3 > a:hover { - color: #000; + color: #000; } #sidebar > ul li { - padding-bottom: 8px !important; - padding-top: 8px !important; + padding-bottom: 8px !important; + padding-top: 8px !important; } #sidebar > ul ul li { - padding-left: 0px; + padding-left: 0px; +} + +#sidebar-wrapper { + width: 100%; + background: #f8f9f9; + padding-left: 24px; + padding-right: 24px; + padding-top: 20px; + min-height: 100%; + top: 0; + overflow-y: scroll; +} + +#sidebar-wrapper.sidebar-toggle-animate { + transition: transform 0.25s cubic-bezier(0.075, 0.82, 0.165, 1); +} + +#sidebar-toggle-button { + position: absolute; + width: 2.4rem; + height: 2.4rem; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + z-index: 200 !important; + border-radius: 0; + padding: 0; +} + +#sidebar-toggle-button > i { + padding: 0 !important; +} + +#sidebar-toggle-button:hover { + background-color: var(--nginx-green); + color: white; +} + +.sidebar-toggle-collapsed { + transform: translateX(calc(-100% + 2.4rem)); +} + +.sidebar-toggle-collapsed #sidebar-content { + transform: translate(-100%); + display: none; +} + +.sidebar-visible-collapsed { + display: none; +} + +.sidebar-toggle-collapsed .sidebar-visible-collapsed { + display: initial; +} + +.sidebar-toggle-collapsed .sidebar-visible-expanded { + display: none; +} + +.sidebar-col-collapsed-width { + max-width: 2.4rem; +} + +.content-no-toc { + max-width: 100%; +} + +.content-has-toc { + max-width: 50%; + width: 50%; +} + +.hide-sidebar-border { + scrollbar-width: none; /* Firefox */ +} + +.hide-sidebar-border::-webkit-scrollbar { + width: 0px; /* Chrome, Safari */ +} + +.sidebar-toggle-collapsed::-webkit-scrollbar { + width: 0px; /* Chrome, Safari */ +} + +.sidebar-content-collapsed-width { + max-width: 100% !important; +} + +.sidebar-redoc-collapsed-width { + max-width: calc(100% + 2.4rem) !important; +} + +@media (min-width: 768px) { + .sidebar-redoc-collapsed-width { + max-width: 100% !important; + } } .nginx-toc { - display: block; - background: #F8F9F9; - padding-top: 24px; - padding-bottom: 32px; - font-size: 14px; - line-height: 20px; -} + display: block; + background: #f8f9f9; + padding-top: 24px; + padding-bottom: 32px; + font-size: 14px; + line-height: 20px; +} .nginx-toc-link.l1, .nginx-toc-link.l1 > a { - font-weight: 700; - font-size: 18px; - line-height: 26px; - letter-spacing: -0.11px; - color: #111922; + font-weight: 700; + font-size: 18px; + line-height: 26px; + letter-spacing: -0.11px; + color: #111922; } .nginx-toc-link.l2, .nginx-toc-link.l2 > a { - color: #111922; - font-size: 18px; - line-height: 26px; - letter-spacing: -0.11px; + color: #111922; + font-size: 18px; + line-height: 26px; + letter-spacing: -0.11px; } .nginx-toc-link.l3, .nginx-toc-link.l3 > a { - color: #111922; - font-size: 18px; - line-height: 26px; - letter-spacing: -0.11px; + color: #111922; + font-size: 18px; + line-height: 26px; + letter-spacing: -0.11px; } .nginx-toc > .bd-links { - position: sticky; - top: 0rem; - align-self: start; - min-height: 100vh; + position: sticky; + top: 0rem; + align-self: start; + min-height: 100vh; } -.l2, .l2 > a { - padding-left: 14px; - font-weight: normal; - line-height: 20px; +.l2, +.l2 > a { + padding-left: 14px; + font-weight: normal; + line-height: 20px; } -.l3, .l3 > a { - padding-left: 15px; - font-weight: normal; - line-height: 20px; +.l3, +.l3 > a { + padding-left: 15px; + font-weight: normal; + line-height: 20px; } - - .sidenav { - background: #f8f9f9; - padding-left: 24px; - padding-top: 20px; - position: sticky; - top: 0rem; - align-self: start; - height: 100vh; + position: sticky; + top: 0rem; + align-self: start; + height: 100vh; + padding: 0; } #sidebar { - display: block; - font-size: 1.2em; - overflow: auto; -} + display: block; + font-size: 1.2em; + overflow: auto; +} #sidebar.content > h3 { - font-weight: 600; + font-weight: 600; } nav#TableOfContents > ul > li { - margin-bottom: 10px; - font-size: 16px; - font-weight: 400; + margin-bottom: 10px; + font-size: 16px; + font-weight: 400; } #TableOfContents ul { - list-style-type: none; - margin-left: 16px; - margin-right: 10px; + list-style-type: none; + margin-left: 16px; + margin-right: 10px; } -nav#TableOfContents li>ol, -nav#TableOfContents li>ul { - margin-bottom: 0; - margin-left: 0.5em; +nav#TableOfContents li > ol, +nav#TableOfContents li > ul { + margin-bottom: 0; + margin-left: 0.5em; } -nav#TableOfContents > ul > li > ul > li { - margin-bottom: 10px; - font-weight: 300; - margin-top: 6px; +nav#TableOfContents > ul > li > ul > li { + margin-bottom: 10px; + font-weight: 300; + margin-top: 6px; } nav#TableOfContents > ul:not(:first-child) { - margin-left: 12px; - padding-top: 10px; - + margin-left: 12px; + padding-top: 10px; } #sidebar.content > ul > li.nginx-toc-link.has-subnav:before { - content: "3"; - font-family: "nginx-font" !important; - font-style: normal !important; - font-weight: normal !important; - font-variant: normal !important; - text-transform: none !important; - line-height: 1; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - position: absolute; - left: -31px; - top: 0px; - -webkit-font-smoothing: antialiased; - -webkit-text-stroke: 1px #f7f7f7; - font-size: 30px; - cursor: pointer; - color: #898787; -} - -a[aria-expanded=true] .fa-chevron-right { - display: none; -} -a[aria-expanded=false] .fa-chevron-down { - display: none; + content: "3"; + font-family: "nginx-font" !important; + font-style: normal !important; + font-weight: normal !important; + font-variant: normal !important; + text-transform: none !important; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + position: absolute; + left: -31px; + top: 0px; + -webkit-font-smoothing: antialiased; + -webkit-text-stroke: 1px #f7f7f7; + font-size: 30px; + cursor: pointer; + color: #898787; +} + +a[aria-expanded="true"] .fa-chevron-right { + display: none; +} +a[aria-expanded="false"] .fa-chevron-down { + display: none; } a.headerlink { - font-size: 2rem; - vertical-align: super; - color: #e6e6e6; - opacity: 75%; + font-size: 2rem; + vertical-align: super; + color: #e6e6e6; + opacity: 75%; } a.headerlink:hover { - opacity: 100%; + opacity: 100%; } /* custom-styles shortcode additions */ h2 { - margin-top: 30px; - margin-bottom: 10px; + margin-top: 30px; + margin-bottom: 10px; } main h3 { - margin-top: 30px; - margin-bottom: 10px; - font-weight: 300; - font-size: 1.8em; + margin-top: 30px; + margin-bottom: 10px; + font-weight: 300; + font-size: 1.8em; } main h4 { - margin-top: 20px; - font-size: 1.5em; - font-weight: 300; + margin-top: 20px; + font-size: 1.5em; + font-weight: 300; } h5 { - margin-top: 30px; + margin-top: 30px; } hr { - margin-top: 40px; - margin-bottom: 20px; + margin-top: 40px; + margin-bottom: 20px; } td hr { - margin-top: 10px; - margin-bottom: 10px; + margin-top: 10px; + margin-bottom: 10px; } summary { - margin-bottom: 20px; - margin-top: 20px; - font-weight: 300; - font-size: 15px; - color: green; + margin-bottom: 20px; + margin-top: 20px; + font-weight: 300; + font-size: 15px; + color: green; } .fa-circle-check { - color: green; + color: green; } /* end custom-styles shortcode additions */ @@ -1148,32 +1347,31 @@ summary { https://discourse.gohugo.io/t/bootstrap-4-pagination-some-added-functionality/11393 */ /* This is css styling for the page numbers */ -.pagination > .page-item-number.active > a { - background-color: #898787; - border-color: #898787; - color: #fff; +.pagination > .page-item-number.active > a { + background-color: #898787; + border-color: #898787; + color: #fff; } .page-item-first a, .page-item-previous a, .page-item-ellipse, .page-item-next a, .page-item-last a { - color: #898787; + color: #898787; } /*.page-item-number {}*/ - /* end credit to Randy_Lough */ .form-group > label { - padding-bottom: 8px; - font-size: 2rem; - color: #000!important; + padding-bottom: 8px; + font-size: 2rem; + color: #000 !important; } .form-group > textarea { - font-size: 16px; + font-size: 16px; } /* style all input elements with a required attribute */ @@ -1183,8 +1381,8 @@ summary { */ input:required:focus, textarea:required:focus { - border: .25px solid red; - outline: none; + border: 0.25px solid red; + outline: none; } /** @@ -1193,120 +1391,122 @@ textarea:required:focus { */ input:required:hover, textarea:required:hover { - opacity: 1; + opacity: 1; } .btn-outline-success:hover { - background-color: var(--nginx-green); - border-color: var(--nginx-green); + background-color: var(--nginx-green); + border-color: var(--nginx-green); } .btn-outline-success { - color: var(--nginx-green); - border-color: var(--nginx-green); + color: var(--nginx-green); + border-color: var(--nginx-green); } .dk-border-bottom { - border-bottom: 1px solid #595959; - margin: 0 0 32px 0; + border-bottom: 1px solid #595959; + margin: 0 0 32px 0; } .text-semibold { - font-weight: 500; + font-weight: 500; } .align-right { - text-align: end; + text-align: end; } .align-center { - text-align: center; + text-align: center; } ol.breadcrumb > li > a, ol.breadcrumb > li:last-child { - padding: 0 4px; + padding: 0 4px; } ol.breadcrumb > li:first-child { - padding-left: 0px; + padding-left: 0px; } -.fa, .far, .fas { - padding-right: 4px; +.fa, +.far, +.fas { + padding-right: 4px; } /* tabs css */ .nav { - margin-left: 0; + margin-left: 0; } .nav-item { - border: 1px solid #dee2e6; - background: none; - border-radius: 5px 5px 0 0; - position: relative; - padding-bottom: 0!important; + border: 1px solid #dee2e6; + background: none; + border-radius: 5px 5px 0 0; + position: relative; + padding-bottom: 0 !important; } .nav-item-explore { - background: none; - position: relative; - padding-bottom: 0!important; + background: none; + position: relative; + padding-bottom: 0 !important; } li.nav-item a.nav-link { - color: #898787; - font-weight: 300; - border: none; + color: #898787; + font-weight: 300; + border: none; } .nav-item:has(.active) { - border: 1px solid #429345; - border-bottom: none; - background-color: #ffffff; - border-color: #429345; - box-shadow: 5px -2px 2px 1px #d1d0d0aa; - z-index: 6; - margin-bottom: -1px; + border: 1px solid #429345; + border-bottom: none; + background-color: #ffffff; + border-color: #429345; + box-shadow: 5px -2px 2px 1px #d1d0d0aa; + z-index: 6; + margin-bottom: -1px; } .nav-item .nav-link:focus { - outline: none; + outline: none; } .nav-item:not(:has(.active)) > .nav-link:hover, -.nav-item:not(:has(.active)) > .nav-link:focus { - color: #11bd8d; +.nav-item:not(:has(.active)) > .nav-link:focus { + color: #11bd8d; } .nav-item:not(:has(.active)):hover { - border: 1px solid #11bd8d; + border: 1px solid #11bd8d; } .nav-item:not(:has(.active)) > .nav-link:focus { - outline: none; + outline: none; } .nav-item:not(:has(.active)):focus-within { - border: 1px solid #11bd8d; + border: 1px solid #11bd8d; } .nav-item .nav-link { - background: none!important; + background: none !important; } .nav-tabs .nav-link.active { - border: 1px; - color: #429345; - font-weight: bold; + border: 1px; + color: #429345; + font-weight: bold; } .nav-tabs { - border-bottom: none; + border-bottom: none; } .tab-content { - border-top: 1px solid #429345; - margin-bottom: 10px; + border-top: 1px solid #429345; + margin-bottom: 10px; } diff --git a/assets/js/sidebar.js b/assets/js/sidebar.js index 1cf2879..dfa1278 100644 --- a/assets/js/sidebar.js +++ b/assets/js/sidebar.js @@ -1,34 +1,92 @@ +const LOCAL_STORAGE_COLLAPSE_KEY = "sidebar-collapsed"; + +function handleInitialCollapse() { + const collapsed = localStorage.getItem(LOCAL_STORAGE_COLLAPSE_KEY); + + if (collapsed === "true") { + $("#sidebar-toggle-button").attr({ + "aria-expanded": "false", + title: "Show sidebar navigation", + }); + $("#sidebar-wrapper").addClass("sidebar-toggle-collapsed"); + $(".sidenav").addClass("sidebar-col-collapsed-width"); + $(".content").addClass("sidebar-content-collapsed-width"); + $(".nginx-docs-api-container").addClass("sidebar-redoc-collapsed-width"); + } else { + $("#sidebar-toggle-button").attr({ + "aria-expanded": "true", + title: "Hide sidebar navigation", + }); + $("#sidebar-wrapper").addClass("hide-sidebar-border"); + } +} + +function handleSetCollapse() { + $("#sidebar-wrapper").addClass("sidebar-toggle-animate"); + + const collapsed = localStorage.getItem(LOCAL_STORAGE_COLLAPSE_KEY); + + if (collapsed === "false") { + $("#sidebar-toggle-button").attr({ + "aria-expanded": "false", + title: "Show sidebar navigation", + }); + $("#sidebar-wrapper").addClass("sidebar-toggle-collapsed"); + $(".sidenav").addClass("sidebar-col-collapsed-width"); + $(".content").addClass("sidebar-content-collapsed-width"); + $(".nginx-docs-api-container").addClass("sidebar-redoc-collapsed-width"); + localStorage.setItem(LOCAL_STORAGE_COLLAPSE_KEY, true); + } else { + $("#sidebar-toggle-button").attr({ + "aria-expanded": "true", + title: "Hide sidebar navigation", + }); + $("#sidebar-wrapper").addClass("hide-sidebar-border"); + $("#sidebar-wrapper").removeClass("sidebar-toggle-collapsed"); + $(".sidenav").delay(500).removeClass("sidebar-col-collapsed-width"); + $(".content").removeClass("sidebar-content-collapsed-width"); + $(".nginx-docs-api-container").removeClass("sidebar-redoc-collapsed-width"); + localStorage.setItem(LOCAL_STORAGE_COLLAPSE_KEY, false); + } +} + // This code makes the sidebar remember which sections has been clicked when using the sidebar $(document).ready(function () { - $(".sidebar .nginx-toc-link a").each(function(i,item) { - if (item.dataset.menuId == $(".main").data("menuId")) { - $(item).css("color", "#429345"); - $(item).css("font-weight", "500"); - - // Remove "collapsed" class and set aria-expanded to "true" for the current item - $(item).removeClass("collapsed"); - $(item).attr("aria-expanded", "true"); - - // Capture data-target value - var targetId = $(item).data("target"); - if (!targetId) { - var hrefValue = $(item).attr("href"); - // Add "show" class to the corresponding divs with matching id - var targetDivs = $("div[id='" + hrefValue.replace("#", "") + "']"); - targetDivs.addClass("show"); - } else { - $(targetId).addClass("show"); - } - - // Expand parents - $(item).parents(".collapse").each(function(i,el) { - var col = new bootstrap.Collapse(el, { - toggle: false - }); - col.show(); - }); - - $(item).next(".accordion-body").find(".collapse").addClass("show"); - } + // sidebar toggle navigation logic + handleInitialCollapse(); + $("#sidebar-toggle-button").on("click", handleSetCollapse); + + $(".sidebar .nginx-toc-link a").each(function (i, item) { + if (item.dataset.menuId == $(".main").data("menuId")) { + $(item).css("color", "#429345"); + $(item).css("font-weight", "500"); + + // Remove "collapsed" class and set aria-expanded to "true" for the current item + $(item).removeClass("collapsed"); + $(item).attr("aria-expanded", "true"); + + // Capture data-target value + var targetId = $(item).data("target"); + if (!targetId) { + var hrefValue = $(item).attr("href"); + // Add "show" class to the corresponding divs with matching id + var targetDivs = $("div[id='" + hrefValue.replace("#", "") + "']"); + targetDivs.addClass("show"); + } else { + $(targetId).addClass("show"); + } + + // Expand parents + $(item) + .parents(".collapse") + .each(function (i, el) { + var col = new bootstrap.Collapse(el, { + toggle: false, + }); + col.show(); }); -}); \ No newline at end of file + + $(item).next(".accordion-body").find(".collapse").addClass("show"); + } + }); +}); diff --git a/layouts/_default/docs.html b/layouts/_default/docs.html index cd9f216..40989c9 100644 --- a/layouts/_default/docs.html +++ b/layouts/_default/docs.html @@ -1,16 +1,17 @@ {{ define "main" }} -
-