diff --git a/site/themes/arangodb-docs-theme/static/css/theme.css b/site/themes/arangodb-docs-theme/static/css/theme.css index a082f9cf37..95a40caccf 100644 --- a/site/themes/arangodb-docs-theme/static/css/theme.css +++ b/site/themes/arangodb-docs-theme/static/css/theme.css @@ -235,7 +235,7 @@ ul ul, ul ol, ol ul, ol ol { margin: 0; padding: 2px; word-break: break-word; - border-radius: 0px; + border-radius: 0; background: var(--gray-100); box-shadow: none; color: var(--gray-950); @@ -252,7 +252,6 @@ ul ul, ul ol, ol ul, ol ol { text-decoration: none; } - hr { width: 100%; height: 4px; @@ -263,7 +262,6 @@ hr { border: none; } - pre { margin-bottom: 2rem; background-color: var(--CODEBLOCK-BACKGROUND-COLOR); @@ -407,11 +405,11 @@ table.fixed code { } /* .card:hover { - box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px; + box-shadow: rgb(149 157 165 / 20%) 0 8px 24px; } */ .cards > a.card-link { - border-bottom: 0px; + border-bottom: 0; } @media screen and (max-width: 768px) { @@ -489,8 +487,8 @@ a.section-link { .loader{ position: fixed; - left: 0px; - top: 0px; + left: 0; + top: 0; width: 100%; height: 100%; z-index: 9999; @@ -521,7 +519,8 @@ a.section-link { position: relative; max-width: 300px; background-color: transparent; - border: 0px; + border: 0; + border-radius: 0; text-decoration: none; white-space: nowrap; overflow: hidden; @@ -537,9 +536,9 @@ a.section-link { .tab-nav-button.selected::after { content: ""; position: absolute; - left: 0px; - right: 0px; - bottom: 0px; + left: 0; + right: 0; + bottom: 0; height: 2px; background-color: var(--HEADERS-COLOR) } @@ -567,7 +566,7 @@ body .page-container { 'header header' 'sidenav contents' 'sidenav footer'; - grid-template-columns: minmax(0px, auto) 4fr; + grid-template-columns: minmax(0, auto) 4fr; grid-template-rows: 4rem 1fr; background: var(--CONTENT-BACKGROUND-COLOR); } @@ -637,7 +636,7 @@ body .page-container { vertical-align: middle; font-weight: 900; font-size: 18px; - padding-top: 0px; + padding-top: 0; color: var(--gray-100); } @@ -702,7 +701,7 @@ body .page-container { position: relative; height: 64px; align-items: center; - padding: 6px 10px 0px 10px; + padding: 6px 10px 0 10px; } header .logo { @@ -980,7 +979,7 @@ header .logo { vertical-align: middle; font-weight: 900; font-size: 10px; - padding-top: 0px; + padding-top: 0; color: var(--gray-300); } @@ -992,7 +991,7 @@ header .logo { vertical-align: middle; font-weight: 900; font-size: 10px; - padding-top: 0px; + padding-top: 0; color: var(--gray-300); } @@ -1081,7 +1080,7 @@ header .logo { } #breadcrumbs > ol { - margin: 5px 0px 0px 80px; + margin: 5px 0 0 80px; white-space: normal; } @@ -1142,7 +1141,7 @@ header .logo { text-decoration: none; color: #444; background: 0 0; - border-bottom: 0px; + border-bottom: 0; } .edit-page > .edit-page-icon:after { @@ -1423,7 +1422,7 @@ article > h3 > code, article > h4 > code, article > h5 > code, article > h6 > code { - padding-top: 0px; + padding-top: 0; white-space: normal; } @@ -1456,7 +1455,7 @@ h6:hover .header-link { /* Codeblocks */ pre { - border-radius: 0px; + border-radius: 0; background: var(--gray-100); box-shadow: none; position: relative; @@ -1470,7 +1469,7 @@ code, p code { padding: 2px; word-break: break-word; white-space: pre-wrap; - border-radius: 0px; + border-radius: 0; background: var(--gray-100); box-shadow: none; color: var(--gray-950); @@ -1529,7 +1528,7 @@ li > code { color: var(--green-700); } -.copy-to-clipboard > .copy-to-clipboard-code { +pre > code { margin: 0; word-break: break-word; white-space: break-spaces; @@ -1537,16 +1536,19 @@ li > code { font-family: Consolas,liberation mono,Menlo,Courier,monospace; padding: 28px; font-size: 1rem; - max-height: calc(17 * 1.8rem); +} + +.code-long { + max-height: calc(15 * 1.8rem); overflow: hidden; } -.copy-to-clipboard:hover > .copy-to-clipboard-button { - display: flex; +.code-long.expanded { + max-height: unset; } -.copy-to-clipboard > .copy-to-clipboard-code.expanded { - max-height: 100%; +.copy-to-clipboard:hover > .copy-to-clipboard-button { + display: flex; } pre > .code-show-more { @@ -1562,7 +1564,7 @@ pre > .code-show-more { position: absolute; bottom: 12px; right: 10px; - letter-spacing: 0px; + letter-spacing: 0; } pre > .code-show-more:hover{ @@ -1675,7 +1677,7 @@ div.box.security > .box-content-container > .box-content > i { } div > .box-content-container { - padding: 0px 0px 0px 12px; + padding: 0 0 0 12px; } .box-text { @@ -1772,8 +1774,8 @@ blockquote p { display: flex; flex-direction: column; - margin: 0px; - padding: 0px; + margin: 0; + padding: 0; overflow: hidden; letter-spacing: normal; color: var(--fg); @@ -1969,7 +1971,7 @@ details[open] > .openapi-prop::before { display: inline-block; padding: 6px 16px; font-size: var(--font-size-small); - outline: 0px; + outline: 0; line-height: 1; text-align: center; white-space: nowrap; @@ -1977,7 +1979,7 @@ details[open] > .openapi-prop::before { transition: background-color 0.2s ease 0s; user-select: none; cursor: pointer; - box-shadow: rgb(0 0 0 / 12%) 0px 1px 3px, rgb(0 0 0 / 24%) 0px 1px 2px; + box-shadow: rgb(0 0 0 / 12%) 0 1px 3px, rgb(0 0 0 / 24%) 0 1px 2px; } .response-code.clicked { @@ -2033,7 +2035,7 @@ nav.pagination .next { } .nav-prev > i { - padding: 17px 15px 0px 0px; + padding: 17px 15px 0 0; } .nav-prev:hover, @@ -2051,7 +2053,7 @@ nav.pagination .next { } .nav-next > i { - padding: 17px 0px 0px 15px; + padding: 17px 0 0 15px; } /* */ @@ -2148,7 +2150,7 @@ nav.pagination .next { display: flex; align-items: center; flex-wrap: wrap; - padding: 20px 0px; + padding: 20px 0; border-radius: 4px; margin-bottom: 36px; background: url("/images/bottom-cta-background.jpg") no-repeat center center; diff --git a/site/themes/arangodb-docs-theme/static/js/codeblocks.js b/site/themes/arangodb-docs-theme/static/js/codeblocks.js index ad0fbfb7a7..18d109a25e 100644 --- a/site/themes/arangodb-docs-theme/static/js/codeblocks.js +++ b/site/themes/arangodb-docs-theme/static/js/codeblocks.js @@ -1,31 +1,30 @@ +function addShowMoreButton(parentElem) { + $(parentElem).find("pre > code").each(function() { + code = $(this); + // n-times line-height * root em, larger than to-be-applied max-height to always reveal some lines + // False for currently collapsed code ("Show output" with display: none) + if (!code.hasClass('code-long') && code.prop('scrollHeight') > 20 * 1.8 * 16 ) { + code.addClass('code-long'); + var showMore = $(''); + code.after(showMore); + } + }); +} + function initCopyToClipboard() { - $('code').each(function() { - var code = $(this); - var parent = code.parent(); - var inPre = parent.prop('tagName') == 'PRE'; + $('article pre > code').each(function() { + code = $(this); + code.addClass('copy-to-clipboard-code'); + code.parent().addClass( 'copy-to-clipboard' ); - if (inPre) { - code.addClass('copy-to-clipboard-code'); - if( inPre ){ - parent.addClass( 'copy-to-clipboard' ); - } - else{ - code.replaceWith($('', {'class': 'copy-to-clipboard'}).append(code.clone() )); - code = parent.children('.copy-to-clipboard').last().children('.copy-to-clipboard-code'); - } - var span = $('').addClass("copy-to-clipboard-button").attr("title", window.T_Copy_to_clipboard).attr("onclick", "copyCode(event);") - code.before(span); - if ( code.text().split(/\r\n|\r|\n/).length > 16) { - var showMore = $('') - code.after(showMore); - } + var span = $('').addClass("copy-to-clipboard-button").attr("title", window.T_Copy_to_clipboard).attr("onclick", "copyCode(event);") + code.before(span); - span.mouseleave( function() { - setTimeout(function(){ - span.removeClass("tooltipped"); - },1000); + span.mouseleave(function() { + setTimeout(function() { + span.removeClass("tooltipped"); + }, 1000); }); - } }); } diff --git a/site/themes/arangodb-docs-theme/static/js/theme.js b/site/themes/arangodb-docs-theme/static/js/theme.js index f90c3f8ef4..cf6e186757 100644 --- a/site/themes/arangodb-docs-theme/static/js/theme.js +++ b/site/themes/arangodb-docs-theme/static/js/theme.js @@ -18,9 +18,8 @@ function menuToggleClick(event) { toggleMenuItem(event); } - function menuEntryClickListener() { - $('.menu-link').click(function(event) { + $('.menu-link').on("click", function(event) { event.preventDefault(); if (event.target.pathname == window.location.pathname) { toggleMenuItem(event) @@ -42,7 +41,7 @@ function renderVersion() { entry.style.display = 'none'; } } -}; +} function closeAllEntries() { $(".dd-item.active").removeClass("active"); @@ -183,7 +182,7 @@ function loadPage(target) { } function internalLinkListener() { - $('.link').click(function(event) { + $('.link').on("click", function(event) { if (event.target.getAttribute("target")) { // external link return; @@ -192,18 +191,18 @@ function internalLinkListener() { updateHistory(event.target.getAttribute('href')) }); - $('.card-link').click(function(event) { + $('.card-link').on('click', function(event) { event.preventDefault(); updateHistory(this.getAttribute('href')) }); } function codeShowMoreListener() { - $('.code-show-more').click(function(event) { + $('article').on('click', '.code-show-more', function(event) { var t = $(event.target) t.toggleClass("expanded") t.prev().toggleClass("expanded") - }) + }); } function trackPageView(title, urlPath) { @@ -222,6 +221,7 @@ function trackPageView(title, urlPath) { function initArticle(url) { restoreTabSelections(); initCopyToClipboard(); + addShowMoreButton('article'); initClickHandlers(); goToTop(); styleImages(); @@ -324,6 +324,7 @@ function switchTab(tabGroup, tabId, event) { allTabItems.removeClass("selected"); targetTabItems.addClass("selected"); + addShowMoreButton(targetTabItems); if (event) { // Keep relative offset of tab in viewport to avoid jumping content var topAfter = clickedTab.getBoundingClientRect().top; @@ -395,7 +396,7 @@ function aliazeLinks(parentSelector, linkSelector) { $(parentSelector).find(linkSelector).each(function() { $(this).attr("href", function(index, old) { - if (old == undefined) return old; + if (old == undefined || old.startsWith("#")) return old; let splitLink = old.split("/"); let linkVersion = splitLink[1]; let alias = nameAliasMapping[linkVersion] || linkVersion; @@ -508,14 +509,14 @@ function hideEmptyOpenapiDiv() { function initClickHandlers() { hideEmptyOpenapiDiv(); - $(".openapi-prop").click(function(event) { + $(".openapi-prop").on("click", function(event) { if (this === event.target) { $(event.target).toggleClass("collapsed"); $(event.target).find('.openapi-prop-content').first().toggleClass("hidden"); } }); - $(".openapi-table.show-children").click(function(event) { + $(".openapi-table.show-children").on("click", function(event) { $(event.target).toggleClass("collapsed"); $(event.target).next(".openapi-table").toggleClass("hidden"); });