Skip to content

Commit

Permalink
Rewrite
Browse files Browse the repository at this point in the history
  • Loading branch information
@chasenlehara
chasenlehara committed Aug 16, 2024
1 parent 48251cc commit fdbcc51
Show file tree
Hide file tree
Showing 3 changed files with 129 additions and 101 deletions.
100 changes: 43 additions & 57 deletions static/static.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,57 +22,25 @@ window.PACKAGES = packages;
})();

(function () {
var articleContainer = document.querySelector("article.main");
/*
The bit-docs-html-toc package will listen for scrolls to the element specified
by heading-container-selector, but with our CSS this will only work when the
document scroll events are listened to.
*/
var highlight = debounce((function () {
document.querySelector("bit-toc").highlight();

if (articleContainer && window.history) {
var windowLoaded = false;
var pageScrollTimer;
var elementToScroll = document.querySelector(".content-nav");
var article = document.querySelector(".main");
var distance = (window.scrollY + article.offsetHeight / 2) / document.body.scrollHeight;
elementToScroll.scrollTop = (elementToScroll.scrollHeight * distance) - (elementToScroll.offsetHeight / 2);
}).bind(this), 1);

// the page can change its layout up until load
window.addEventListener("load", function () {
windowLoaded = true;
});
// only wait 1 second at most
setTimeout(function () {
windowLoaded = true;
}, 1000);

function setArticleScroll() {
var articleScroll =
window.history.state && window.history.state.articleScroll;
if (articleScroll) {
articleContainer.scrollTop = articleScroll;
} else if (window.location.hash) {
//if there’s no state before and the URL has a hash eg. #collecting-data
//then let’s scroll to #collecting-data element
var element = document.querySelector(window.location.hash);
if (element) {
articleContainer.scrollTop = element.offsetTop - 60; // ~60px for the navigation height
window.history.pushState({ articleScroll: element.offsetTop - 60 });
}
// need to push to window.history.state otherwise scroll eventListener will reference null and fail to run
window.history.pushState({ articleScroll: 0 });
}
}
setArticleScroll();

// If there’s a scroll before page load, we ignore saving the spot
// and instead try to force the original position
articleContainer.addEventListener("scroll", function () {
if (windowLoaded) {
clearTimeout(pageScrollTimer);
pageScrollTimer = setTimeout(function () {
window.history.replaceState(
{ articleScroll: articleContainer.scrollTop },
null,
window.location.href
);
}, 50);
} else {
setArticleScroll();
}
});
}
// Listen for scroll events
document.addEventListener("scroll", highlight);

// Update the highlighting immediately on page load
highlight();
})();

(function () {
Expand Down Expand Up @@ -101,15 +69,11 @@ window.PACKAGES = packages;
const modal = document.getElementById("email-modal");
modal.style.display = "block";
// Close modal when clicking backdrop
Array.from(modal.querySelectorAll(".email-modal-backdrop")).forEach(
(element) => {
element.addEventListener("click", academyContactEmailSubmitted);
}
);
Array.from(modal.querySelectorAll('.email-modal-backdrop')).forEach(element => {
element.addEventListener("click", academyContactEmailSubmitted);
});
// Close modal when clicking close icon in upper right
document
.getElementById("email-modal-close")
.addEventListener("click", academyContactEmailSubmitted);
document.getElementById("email-modal-close").addEventListener("click", academyContactEmailSubmitted);
modal.focus();

hbspt.forms.create({
Expand Down Expand Up @@ -138,3 +102,25 @@ window.PACKAGES = packages;
}
}
})();

function debounce(func, wait) {
var timeout;

return function executedFunction() {
var context = this;
var args = arguments;

var later = function() {
timeout = null;
func.apply(context, args);
};

clearTimeout(timeout);

timeout = setTimeout(later, wait);

if (!timeout) {
func.apply(context, args);
}
};
}
128 changes: 85 additions & 43 deletions static/styles/styles.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,9 +72,19 @@ header, footer {
}

.content {
flex-grow: 1;
overflow-x: hidden;
overflow-y: hidden;
display: grid;
grid-template-areas: "sidebar" "toc" "main";
grid-template-columns: 1fr;

@media (min-width: 1024px) {
grid-template-areas: "sidebar main toc";
grid-template-columns: max-content 1fr fit-content(25%);
}

// display: flex;
// // flex-grow: 1;
// overflow-x: hidden;
// overflow-y: hidden;
// Navigation list will be flush with parent

.sidebar:extend(.container) {
Expand All @@ -96,7 +106,9 @@ header, footer {
}

.main:extend(.container) {
overflow-x: hidden; // fix to hide <pre> code overflow
// display: flex;
// overflow-x: hidden; // fix to hide <pre> code overflow
// padding-bottom: 0;

// Collapse <p> for parameters, returns, and non-nested options
.parameters, .returns, div.options {
Expand Down Expand Up @@ -143,35 +155,35 @@ Desktop:
└──────────────────────────────────────────────────────┘
*/

@media @desktops {
@media (min-width: 1024px) {
// Flex elements will fill html/body space and scroll themselves
html, body {
width: 100%;
height: 100%;
// width: 100%;
// height: 100%;
}

body {
.flex-column;
// .flex-column;
}

header, footer {
.flex-none; // fit to content height
// .flex-none; // fit to content height
}

.content {
.flex-auto; // fill remaining height
.flex-row;
// .flex-auto; // fill remaining height
// .flex-row;

// Note: Don’t add border, padding or margin to a flex-row or flex-column, // because IE 10-11 incorrectly assumes content-box sizing for flex-basis.

.sidebar {
.flex-none; // fit to content width
overflow-y: auto;
// .flex-none; // fit to content width
// overflow-y: auto;
}

.main {
.flex-auto; // fill remaining width
overflow-y: auto;
// .flex-auto; // fill remaining width
// overflow-y: auto;
}
}
}
Expand Down Expand Up @@ -463,15 +475,32 @@ a {



.sidebar-left, .sidebar-right {
align-self: start;
grid-area: toc;

@media (min-width: 1024px) {
max-height: ~"calc(100vh - 57px)";// 57px should not be hard-coded and should be flexible with the .header
overflow: auto;
position: sticky;
top: 0;
}
}


// Sidebar Left

.sidebar-left {
grid-area: sidebar;

// align-self: flex-start;
// flex-shrink: 0;
// height: 100%;
// overflow-y: auto;
// position: sticky;
// top: 0;
padding: 15px;
white-space: nowrap;
overflow-y: auto;
flex-shrink: 0;
@media (max-width: 768px) {
padding-bottom: 0;
}
Expand Down Expand Up @@ -530,16 +559,15 @@ a {
// Course Content

.main {
padding: 15px 30px;
@media (max-width: 768px) {
padding-top: 0;
}
display: contents;

// @media (max-width: 768px) {
// padding-top: 0;
// }
}
.main-content {
padding-right: 250px;
@media (max-width: 1200px) {
padding-right: 0;
}
grid-area: main;
padding: 15px;
}
.main-content .title h1 {
font-size: 28px;
Expand Down Expand Up @@ -599,34 +627,48 @@ hr:first-of-type {
// Sidebar Right

.sidebar-right {
position: fixed;
top: 85px;
right: 30px;
bottom: 0px;
width: 240px;
margin-left: 30px;
padding: 0 10px;
grid-area: toc;

// align-self: flex-start;
// flex-shrink: 0;
// height: 100%;
// overflow-y: auto;
// position: sticky;
// top: 0;
// max-width: 250px;

// overflow-x: hidden;

// position: fixed;
// top: 85px;
// right: 30px;
// bottom: 0px;
// width: 240px;
// margin-left: 30px;
padding: 15px;
display: flex;
flex-direction: column;
@media (max-width: 1200px) {
display: none;
}
// @media (max-width: 1200px) {
// display: none;
// }
}
.sidebar-right .content-nav {
display: flex;
flex-direction: column;
}
.content-nav .list-items {
flex-grow: 1;
flex-shrink: 1;
overflow-x: hidden;
overflow-x: auto;
padding-top: 15px;

/* Hide the scrollbar */
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
.content-nav .list-items {
flex-grow: 1;
flex-shrink: 1;
// overflow-x: hidden;
}
.sidebar-right .pullout {
border-bottom: 1px solid #eee;
margin: 5px 0;
Expand All @@ -652,9 +694,9 @@ hr:first-of-type {

.content-nav {
border-bottom: 1px solid #eee;
margin-top: 22px;
padding-bottom: 15px;
min-height: 45px;
// margin-top: 22px;
// padding-bottom: 15px;
// min-height: 45px;
}
.content-nav h6 {
font-size: 15px;
Expand Down
2 changes: 1 addition & 1 deletion templates/content.mustache
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
<div class="content-nav on-this-page-container">
<h6>On this page...</h6>
<div class="list-items" id="scroll-toc">
<bit-toc heading-container-selector="article.main" scroll-selector="#scroll-toc"></bit-toc>
<bit-toc heading-container-selector="article.main" scroll-selector=".content-nav"></bit-toc>
</div>
</div>
<div class="pullout discord">
Expand Down

0 comments on commit fdbcc51

Please sign in to comment.