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");
});