Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix top margin for example in list item #200

Merged
merged 1 commit into from
Oct 27, 2023
+20 −184
Merged

fix top margin for example in list item #200

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
200 changes: 18 additions & 182 deletions preview-src/example.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,187 +132,23 @@ neo4j@system> SHOW DATABASES;
----
====

== Source Blocks with title

If a title is provided to the example block, it will show up in an additional blue header above the code:
== Example block inside a list

[source,adoc]
----
.This example has a title
[source,adoc]
Play with me!
----

.This example has a title
[source,adoc]
Play with me!

== Copy Button

The **Copy To Clipboard** button will appear on all code blocks:

[source,adoc]
----
[source,adoc]
Copy me!
----

Unless you add `role=nocopy`:

[source,adoc,role=nocopy]
----
[source,adoc,role=nocopy]
Don't copy me!
----

== Reference lines (Callouts)

You can add number bubbles to reference specific lines by appending `<n>` to a line. It is advised to put them behind a line comment for the language the code is in.

[source,ruby]
----
require 'sinatra' <1>

get '/hi' do <2> <3>
"Hello World!"
end
----
<1> Library import
<2> URL mapping
<3> Response block

[source]
----
line of code // <1>
line of code # <2>
line of code ;; <3>
line of code <!--4-->
----
<1> A callout behind a line comment for C-style languages.
<2> A callout behind a line comment for Ruby, Python, Perl, etc.
<3> A callout behind a line comment for Clojure.
<4> A callout behind a line comment for XML or SGML languages like HTML.


== Expand code block

Code blocks longer than 15 lines (+5 of tolerance) are collapsed, unless you add `role=nocollapse`

[source,adoc]
----
[source,js]
...
----

[source,js]
----
// Collapse/Expand long blocks
var codeMaxLines = 15 // lines
var codeTolerance = 5 // lines
var codeLineHeight = parseFloat(window.getComputedStyle(
document.getElementsByClassName('highlight')[0], null)
.getPropertyValue('line-height'))
var codeMaxHeight = codeLineHeight*codeMaxLines
var maskImage = 'linear-gradient(to bottom, black 0px, transparent ' +
(codeMaxHeight + 100) + 'px)'

var codeBlockLinesNum = function (code) {
var paddingTop = parseFloat(window.getComputedStyle(code, null).getPropertyValue('padding-top'))
var paddingBottom = parseFloat(window.getComputedStyle(code, null).getPropertyValue('padding-bottom'))
var height = code.clientHeight-paddingTop-paddingBottom;
var lines = Math.ceil(height / codeLineHeight)
var hiddenLines = Math.ceil(lines - codeMaxLines)
return hiddenLines
}

var expandCollapseBlock = function (e) {
e.preventDefault()
var showMore = e.target
var pre = showMore.parentNode
var code = pre.querySelector('code')

if (pre.style.overflow === 'hidden') {
window.sessionStorage.setItem('scrollpos', window.scrollY)
pre.style.maxHeight = pre.scrollHeight + 'px'
pre.style.overflow = 'visible'
code.style.webkitMaskImage = ''
code.style.maskImage = ''
showMore.innerHTML = '&uarr;' // show less
} else {
// Scoll back to where you where before expanding
var scrollpos = window.sessionStorage.getItem('scrollpos')
if (scrollpos) {
window.scrollTo({
top: scrollpos,
behavior: 'auto',
})
}
window.sessionStorage.removeItem('scrollpos')

var hiddenLines = codeBlockLinesNum(code)
pre.style.maxHeight = codeMaxHeight + 'px'
pre.style.overflow = 'hidden'
code.style.webkitMaskImage = maskImage
code.style.maskImage = maskImage
showMore.innerHTML = '&darr; View all (' + hiddenLines + ' lines more) &darr;'
}
}

// Collapse long blocks on load
var collapseCodeBlock = function (pre) {
var dotContent = pre.parentNode
var listingBlock = dotContent.parentNode
var code = pre.querySelector('code')

if (!listingBlock.classList.contains('nocollapse') &&
pre.offsetHeight > (codeMaxLines+codeTolerance)*codeLineHeight) {
pre.style.maxHeight = codeMaxHeight + 'px'
pre.style.overflow = 'hidden'
code.style.webkitMaskImage = maskImage
code.style.maskImage = maskImage

var hiddenLines = codeBlockLinesNum(code)
var showMore = createElement('a', 'show-more')
showMore.innerHTML = '&darr; View all (' + hiddenLines + ' lines more) &darr;'
showMore.addEventListener('click', expandCollapseBlock)
pre.appendChild(showMore)
}
}

// Apply collapseCodeBlock
document.querySelectorAll('.highlight')
.forEach(collapseCodeBlock)

----

[source,adoc]
----
[source,js,role=nocollapse]
...
----

[source,js,role=nocollapse]
----
// Collapse/Expand long blocks
var codeBlockMaxHeight = 300 // px
var styleMaskImage = 'linear-gradient(to bottom, black 0px, transparent ' + (codeBlockMaxHeight+100) + 'px)'

var expandCollapseBlock = function (e) {
e.preventDefault();
var showMore = e.target
var pre = showMore.parentNode
var codeBlock = pre.querySelector('code')

if (pre.st.style.webkitMaskImage = styleMaskImage
codeBlock.style.maskImage = styleMaskImage
showMore.innerHTML = '&darr;' // show more
//codeBlock.scrollIntoView({behavior: 'smooth'})
}
}
if (pre.st.style.webkitMaskImage = styleMaskImage
codeBlock.style.maskImage = styleMaskImage
showMore.innerHTML = '&darr;' // show more
//codeBlock.scrollIntoView({behavior: 'smooth'})
}
}
----
. List item
+
.An Example
====
Lorem ipsum
====
+
. List item
. List item
. List item
+
.An Example
====
Lorem ipsum
====
+
. List item
4 changes: 2 additions & 2 deletions src/css/doc.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -627,8 +627,8 @@ body {
margin-bottom: 0.5rem;
}

.doc .olist li div:first-of-type,
.doc .ulist li div:first-of-type {
.doc .olist li > div:first-of-type,
.doc .ulist li > div:first-of-type {
margin-top: 1.5rem;
}

Expand Down
Loading