Skip to content

[sticky otp/toc] Builds on elastic/docs #2478 #1

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

Merged
merged 5 commits into from
Jul 21, 2022
Merged

[sticky otp/toc] Builds on elastic/docs #2478 #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2fbbf75
sticky toc, updated toc style, refine otp highlighting
colleenmcginnis Jul 20, 2022
1fd5b27
adjust otp styles
colleenmcginnis Jul 21, 2022
658759f
add book_title styles
colleenmcginnis Jul 21, 2022
cfbf107
remove book title div
colleenmcginnis Jul 21, 2022
dd2b376
Update resources/web/template.html
bmorelli25 Jul 21, 2022
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
22 changes: 15 additions & 7 deletions resources/web/docs_js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import "../../../../../node_modules/url-search-params-polyfill";
export function init_headers(sticky_content, lang_strings) {
// Add on-this-page block
var this_page = $('<div id="this_page"></div>').prependTo(sticky_content);
this_page.append('<p id="otp">' + lang_strings('On this page') + '</p>');
this_page.append('<p id="otp" class="aside-heading">' + lang_strings('On this page') + '</p>');
var ul = $('<ul></ul>').appendTo(this_page);
var items = 0;
var baseHeadingLevel = 0;
Expand Down Expand Up @@ -57,7 +57,7 @@ export function init_headers(sticky_content, lang_strings) {
.remove();
var text = title_container.html();
const adjustedLevel = hLevel - baseHeadingLevel;
const li = '<li id="otp-text" class="heading-level-' + adjustedLevel + '"><a href="#' + this.id + '">' + text + '</a></li>';
const li = '<li id="otp-text-' + i + '" class="otp-text heading-level-' + adjustedLevel + '"><a href="#' + this.id + '">' + text + '</a></li>';
ul.append(li);
}
}
Expand Down Expand Up @@ -171,16 +171,24 @@ function init_toc(lang_strings) {
}

function highlight_otp() {
let visibileHeadings = []
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
const id = entry.target.getAttribute('id');
const element = document.querySelector(`#sticky_content #this_page a[href="#${id}"]`);

let element = document.querySelector(`#sticky_content #this_page a[href="#${id}"]`);
let itemId = $(element).parent().attr('id')
if (entry.intersectionRatio > 0){
console.log("ir", entry.intersectionRatio)
element.classList.add('active');
visibileHeadings.push(itemId);
} else {
element.classList.remove('active');
const position = visibileHeadings.indexOf(itemId);
visibileHeadings.splice(position, position + 1)
}
if (visibileHeadings.length > 0) {
visibileHeadings.sort()
// Remove existing active classes
$('a.active').removeClass("active");
// Add active class to the first visible heading
$('#' + visibileHeadings[0] + ' > a').addClass('active')
}
})
})
Expand Down
54 changes: 48 additions & 6 deletions resources/web/style/base_styles.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,15 +31,57 @@
margin-bottom: 1.15em;
}

#otp {
.content-container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
@media screen and (min-width: 769px) {
max-width: 760px;
}
@media screen and (min-width: 992px) {
padding: 0px 10px;
max-width: 972px;
}
@media screen and (min-width: 1200px) {
padding: 0px 20px;
max-width: 1160px;
}
@media screen and (min-width: 1560px) {
max-width: 1500px;
}
}

.h-almost-full {
height: 95vh;
}

#this_page {
display: block;
border-bottom: 1px solid #dee2e6;
height:60vh;
overflow: scroll;
@media screen and (max-width: 992px) {
display: none;
}
}

#left_col {
overflow: scroll;
}

.aside-heading {
font-weight: 600;
padding-top: 20px;
margin-top: 10px;
margin-top: 20px;
margin-bottom: 10px;
font-size: 85%;
}

#otp-text {
font-size: 85%;
.media-type {
opacity: 0.6;
text-transform: uppercase;
font-size: 80%;
font-weight: 400;
margin-bottom: 0px;
}
}
2 changes: 1 addition & 1 deletion resources/web/style/link.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
#guide {
a {
color: #00a9e5;
color: #0077CC;
font-weight: normal;
text-decoration: none;
outline: none;
Expand Down
10 changes: 8 additions & 2 deletions resources/web/style/on_this_page.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,22 @@

.heading-level-1 {
display: block;
padding-left: 1.5em !important;
a {
font-size: 0.85rem;
}
}

.heading-level-2 {
display: block;
padding-left: 3em !important;
padding-left: 1em !important;
}

.heading-level-3 {
display: block;
padding-left: 4.5em !important;
}

.otp-text {
font-size: 85%;
}
}
4 changes: 1 addition & 3 deletions resources/web/style/rtpcontainer.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,7 @@
* on the rtpcontainer in general. */
#rtpcontainer {
.mktg-promo {
margin: 55px 0 30px;
padding: 32px;
border: 1px solid #d4dae5;
padding: 12px;
}
h3 {
margin: 5px 0;
Expand Down
40 changes: 26 additions & 14 deletions resources/web/style/toc.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
#guide {
.book-title {
font-size: 120%;
font-weight: 600;
margin: 20px 0px 20px 20px;
}
.toc {
ul {
margin: 0 0 1em 0;
padding: 0;
border: 1px solid #ddd;
ul {
/* Hide all sub-toc elements by default. See rules with `.show` that
* show specific sub-toc elements. */
Expand All @@ -14,6 +18,9 @@
margin: 0;
padding: 0;
list-style: none;
a {
color: rgb(52, 55, 65) !important;
}
ul {
border: none;
}
Expand All @@ -30,21 +37,20 @@
}

.collapsible.show {

> ul {
display: block;
}
> span {
background-image: inline("img/minus.png");
background-color: white;
background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoaded" focusable="false" role="img" aria-hidden="true"><path fill-rule="non-zero" d="M8 7V3.5a.5.5 0 00-1 0V7H3.5a.5.5 0 000 1H7v3.5a.5.5 0 101 0V8h3.5a.5.5 0 100-1H8zm-.5 8a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path></svg>');
border-bottom: 1px solid white;
}
}
.collapsible {
> span {
background-repeat: no-repeat;
background-image: inline("img/plus.png");
background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoaded" focusable="false" role="img" aria-hidden="true"><path fill-rule="non-zero" d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"></path></svg>');
&:hover {
background-color: #fafafa;
cursor: pointer;
}
}
Expand All @@ -53,15 +59,13 @@
/* Customize each level of the TOC, mostly so it looks "indented". */
> li {
> span {
background-color: #efefef;
border-bottom: 1px solid #ddd;
font-size: 1em;
background-position: 0 11px;
padding-left: 20px;
}
> ul > li {
> span {
padding-left: 40px;
padding-left: 30px;
background-position: 20px 8px;
}
> ul > li {
Expand Down Expand Up @@ -107,14 +111,22 @@
}

#book_title {
color: #2b4590;
color: rgb(52, 55, 65);
font-weight: 600;
display: block;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #dee2e6;

select {
background-color: #fcfcfc;
border: none;
margin-left: 1px;
color: #2b4590;
width: 150px;
width: 100%;
display: block;
color: #495057;
background-color: #fff;
border: 1px solid #495057;
border-radius: 5px;
padding: 3px;
margin-top: 6px;
}
#other_versions {
/* We'll show it if you click "other versions". */
Expand Down
44 changes: 28 additions & 16 deletions resources/web/template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,32 +82,44 @@
<div class="content-wrapper">

<section id="guide" <!-- DOCS LANG -->>
<div class="container">
<div class="content-container">
<div class="row">

<div class="col-12 order-2 col-sm-3 order-sm-1 col-md-3 order-md-1" id="left_col">
<div id="rtpcontainer" style="display: block;">
<div class="mktg-promo">
<h3>Most Popular</h3>
<ul class="icons">
<li class="icon-elasticsearch-white"><a href="https://www.elastic.co/webinars/getting-started-elasticsearch?baymax=default&elektra=docs&storm=top-video">Get Started with Elasticsearch: Video</a></li>
<li class="icon-kibana-white"><a href="https://www.elastic.co/webinars/getting-started-kibana?baymax=default&elektra=docs&storm=top-video">Intro to Kibana: Video</a></li>
<li class="icon-logstash-white"><a href="https://www.elastic.co/webinars/introduction-elk-stack?baymax=default&elektra=docs&storm=top-video">ELK for Logs & Metrics: Video</a></li>
</ul>
</div>
</div>
<div class="col-12 order-2 col-sm-3 order-sm-1 col-md-3 order-md-1 col-lg-3 sticky-top h-almost-full" id="left_col">
<!-- The TOC is appended here -->
</div>

<div class="col-12 order-1 col-sm-9 order-sm-2 col-md-7 order-md-2 guide-section">
<div class="col-12 order-1 col-sm-9 col-lg-7 order-lg-2 guide-section">
<!-- start body -->
<!-- DOCS BODY -->
<!-- end body -->
</div>

<div class="col-12 order-3 col-sm-12 order-sm-3 col-md-2 order-md-3" id="right_col">
<div class="sticky-top" id="sticky_content">
<div class="col-12 order-3 col-lg-2 order-lg-3 sticky-top h-almost-full" id="right_col">
<div id="sticky_content">
<!-- The OTP is appended here -->
<div id="rtpcontainer">
<div class="mktg-promo">
<p class="aside-heading">Most Popular</p>
<div class="pb-2">
<p class="media-type">Video</p>
<a href="https://www.elastic.co/webinars/getting-started-elasticsearch?baymax=default&elektra=docs&storm=top-video">
<p class="mb-0">Get Started with Elasticsearch</p>
</a>
</div>
<div class="pb-2">
<p class="media-type">Video</p>
<a href="https://www.elastic.co/webinars/getting-started-kibana?baymax=default&elektra=docs&storm=top-video">
<p class="mb-0">Intro to Kibana</p>
</a>
</div>
<div class="pb-2">
<p class="media-type">Video</p>
<a href="https://www.elastic.co/webinars/introduction-elk-stack?baymax=default&elektra=docs&storm=top-video">
<p class="mb-0">ELK for Logs & Metrics</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
Expand Down