RanchiMall/rmtimes
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Article section shortcuts now show which section is currently in view

Browse Source
This commit is contained in:
sairaj mote 2022-02-01 22:04:14 +05:30
parent dbe59026f7
commit d829b7b1c5
4 changed files with 39 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
css/main.css
View File

@ -638,7 +638,7 @@ theme-toggle {
align-content: flex-start; align-content: flex-start;
display: grid; display: grid;
padding: 1.5rem; padding: 1.5rem;
gap: 1.5rem; gap: 2rem;
grid-template-columns: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
} }
@ -656,7 +656,7 @@ theme-toggle {
flex-shrink: 0; flex-shrink: 0;
align-items: center; align-items: center;
border-radius: 0.5rem; border-radius: 0.5rem;
width: 5rem; width: 5.2rem;
text-align: center; text-align: center;
background-color: rgba(var(--text-color), 0.02); background-color: rgba(var(--text-color), 0.02);
} }
@ -692,13 +692,13 @@ theme-toggle {
line-height: 1.4; line-height: 1.4;
} }
.article-card__category { .article-card__category {
border: solid thin rgba(var(--text-color), 0.5); background-color: rgba(var(--text-color), 0.06);
margin-right: 0.5rem; margin-right: 0.5rem;
border-radius: 0.3rem; border-radius: 0.2rem;
font-size: 0.8rem; font-size: 0.8rem;
padding: 0.3rem 0.6rem; padding: 0.2rem 0.4rem;
font-weight: 700; font-weight: 500;
color: rgba(var(--text-color), 0.6) !important; color: rgba(var(--text-color), 0.8);
justify-self: flex-start; justify-self: flex-start;
text-transform: capitalize; text-transform: capitalize;
} }
@ -788,6 +788,10 @@ theme-toggle {
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
} }
.heading-shortcut.active {
color: var(--accent-color) !important;
}
.hero-section { .hero-section {
display: grid; display: grid;
gap: 0.5rem; gap: 0.5rem;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

19
css/main.scss
View File

@ -602,7 +602,7 @@ theme-toggle {
align-content: flex-start; align-content: flex-start;
display: grid; display: grid;
padding: 1.5rem; padding: 1.5rem;
gap: 1.5rem; gap: 2rem;
grid-template-columns: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
} }
@ -619,7 +619,7 @@ theme-toggle {
flex-shrink: 0; flex-shrink: 0;
align-items: center; align-items: center;
border-radius: 0.5rem; border-radius: 0.5rem;
width: 5rem; width: 5.2rem;
text-align: center; text-align: center;
background-color: rgba(var(--text-color), 0.02); background-color: rgba(var(--text-color), 0.02);
.icon { .icon {
@ -655,13 +655,13 @@ theme-toggle {
line-height: 1.4; line-height: 1.4;
} }
&__category { &__category {
border: solid thin rgba(var(--text-color), 0.5); background-color: rgba(var(--text-color), 0.06);
margin-right: 0.5rem; margin-right: 0.5rem;
border-radius: 0.3rem; border-radius: 0.2rem;
font-size: 0.8rem; font-size: 0.8rem;
padding: 0.3rem 0.6rem; padding: 0.2rem 0.4rem;
font-weight: 700; font-weight: 500;
color: rgba(var(--text-color), 0.6) !important; color: rgba(var(--text-color), 0.8);
justify-self: flex-start; justify-self: flex-start;
text-transform: capitalize; text-transform: capitalize;
} }
@ -749,6 +749,11 @@ theme-toggle {
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
} }
} }
.heading-shortcut {
&.active {
color: var(--accent-color) !important;
}
}
.hero-section { .hero-section {
display: grid; display: grid;
gap: 0.5rem; gap: 0.5rem;

16
index.html
View File

@ -1215,6 +1215,16 @@
getRef('latest_articles_list').append(frag) getRef('latest_articles_list').append(frag)
} }
const headingObserver = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const allShortcuts = [...getRef('article_map_container').querySelectorAll('.heading-shortcut')]
allShortcuts.forEach(elem => elem.classList.remove('active'))
allShortcuts.find(elem => elem.dataset.headingId === entry.target.previousElementSibling.id).classList.add('active')
}
})
})
const openedArticles = {} const openedArticles = {}
async function renderArticle(articleID, firstLoad = true) { async function renderArticle(articleID, firstLoad = true) {
const frag = document.createDocumentFragment() const frag = document.createDocumentFragment()
@ -1225,7 +1235,8 @@
getRef('published_time').textContent = `Published ${getFormattedTime(published, 'date-only')}${updated ? `, Updated ${relativeTime.from(updated)}` : ''}` getRef('published_time').textContent = `Published ${getFormattedTime(published, 'date-only')}${updated ? `, Updated ${relativeTime.from(updated)}` : ''}`
getRef('reading_time').textContent = `${readTime} Min read` getRef('reading_time').textContent = `${readTime} Min read`
getRef('article_body').innerHTML = DOMPurify.sanitize(allArticles[articleID]) getRef('article_body').innerHTML = DOMPurify.sanitize(allArticles[articleID])
getRef('article_body').querySelectorAll('h3').forEach(heading => { const allHeadings = getRef('article_body').querySelectorAll('h3')
allHeadings.forEach(heading => {
const headingText = heading.textContent const headingText = heading.textContent
const headingID = `s${floCrypto.randString(8)}` const headingID = `s${floCrypto.randString(8)}`
heading.id = headingID heading.id = headingID
@ -1235,6 +1246,9 @@
}) })
getRef('article_map_container').innerHTML = '' getRef('article_map_container').innerHTML = ''
getRef('article_map_container').append(frag) getRef('article_map_container').append(frag)
allHeadings.forEach(heading => {
headingObserver.observe(heading.nextElementSibling)
})
contributors.forEach(id => { contributors.forEach(id => {
frag.append(createElement('a', { frag.append(createElement('a', {