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

16
index.html
View File

@ -1215,6 +1215,16 @@
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 = {}
async function renderArticle(articleID, firstLoad = true) {
const frag = document.createDocumentFragment()
@ -1225,7 +1235,8 @@
getRef('published_time').textContent = `Published ${getFormattedTime(published, 'date-only')}${updated ? `, Updated ${relativeTime.from(updated)}` : ''}`
getRef('reading_time').textContent = `${readTime} Min read`
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 headingID = `s${floCrypto.randString(8)}`
heading.id = headingID
@ -1235,6 +1246,9 @@
})
getRef('article_map_container').innerHTML = ''
getRef('article_map_container').append(frag)
allHeadings.forEach(heading => {
headingObserver.observe(heading.nextElementSibling)
})
contributors.forEach(id => {
frag.append(createElement('a', {