diff --git a/resources/web/docs_js/index.js b/resources/web/docs_js/index.js
index ae63cbf44b8b1..6bdb631e021cd 100644
--- a/resources/web/docs_js/index.js
+++ b/resources/web/docs_js/index.js
@@ -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 = $('').prependTo(sticky_content);
- this_page.append('' + lang_strings('On this page') + '
');
+ this_page.append('' + lang_strings('On this page') + '
');
var ul = $('').appendTo(this_page);
var items = 0;
var baseHeadingLevel = 0;
@@ -57,7 +57,7 @@ export function init_headers(sticky_content, lang_strings) {
.remove();
var text = title_container.html();
const adjustedLevel = hLevel - baseHeadingLevel;
- const li = '' + text + '';
+ const li = '' + text + '';
ul.append(li);
}
}
@@ -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')
}
})
})
diff --git a/resources/web/style/base_styles.pcss b/resources/web/style/base_styles.pcss
index c935e8d54e5a5..b655e6a3e0c49 100644
--- a/resources/web/style/base_styles.pcss
+++ b/resources/web/style/base_styles.pcss
@@ -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;
}
}
diff --git a/resources/web/style/link.pcss b/resources/web/style/link.pcss
index 81af3d48cea82..d83e8bb423895 100644
--- a/resources/web/style/link.pcss
+++ b/resources/web/style/link.pcss
@@ -1,6 +1,6 @@
#guide {
a {
- color: #00a9e5;
+ color: #0077CC;
font-weight: normal;
text-decoration: none;
outline: none;
diff --git a/resources/web/style/on_this_page.pcss b/resources/web/style/on_this_page.pcss
index 93ae336d65c55..51871f768f6af 100644
--- a/resources/web/style/on_this_page.pcss
+++ b/resources/web/style/on_this_page.pcss
@@ -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%;
+ }
}
\ No newline at end of file
diff --git a/resources/web/style/rtpcontainer.pcss b/resources/web/style/rtpcontainer.pcss
index 942d3a800cb94..3b9e2660f3ca4 100644
--- a/resources/web/style/rtpcontainer.pcss
+++ b/resources/web/style/rtpcontainer.pcss
@@ -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;
diff --git a/resources/web/style/toc.pcss b/resources/web/style/toc.pcss
index 36bb2c5ccd0e6..65edef833c2f5 100644
--- a/resources/web/style/toc.pcss
+++ b/resources/web/style/toc.pcss
@@ -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. */
@@ -14,6 +18,9 @@
margin: 0;
padding: 0;
list-style: none;
+ a {
+ color: rgb(52, 55, 65) !important;
+ }
ul {
border: none;
}
@@ -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,');
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,');
&:hover {
- background-color: #fafafa;
cursor: pointer;
}
}
@@ -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 {
@@ -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". */
diff --git a/resources/web/template.html b/resources/web/template.html
index 9125c1d95dc6b..60e94d15f1638 100644
--- a/resources/web/template.html
+++ b/resources/web/template.html
@@ -82,32 +82,44 @@