Make scrolling less hacky
This commit is contained in:
Tulir Asokan
parent
9a06d63ee9
commit
d698f058b5
@ -1,48 +1,58 @@
|
||||
* {
|
||||
font-family: sans-serif; }
|
||||
|
||||
html {
|
||||
scrollbar-width: none; }
|
||||
html::-webkit-scrollbar {
|
||||
display: none; }
|
||||
|
||||
body {
|
||||
margin: 0; }
|
||||
|
||||
h1 {
|
||||
font-size: 1rem; }
|
||||
|
||||
main.spinner, main.error, main.empty {
|
||||
main.spinner {
|
||||
margin-top: 5rem; }
|
||||
|
||||
main.error, main.empty {
|
||||
margin: 2rem; }
|
||||
|
||||
main.empty {
|
||||
text-align: center; }
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
main.has-content {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 12vw;
|
||||
background-color: white;
|
||||
z-index: 10; }
|
||||
nav::-webkit-scrollbar {
|
||||
bottom: 0;
|
||||
display: grid;
|
||||
grid-template-rows: calc(12vw + 2px) auto; }
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
height: calc(12vw + 2px);
|
||||
background-color: white; }
|
||||
nav > a {
|
||||
border-bottom: 2px solid transparent; }
|
||||
nav > a.visible {
|
||||
border-bottom-color: green; }
|
||||
nav > a > div.sticker {
|
||||
width: 12vw;
|
||||
height: 12vw; }
|
||||
|
||||
div.pack-list, nav {
|
||||
scrollbar-width: none; }
|
||||
div.pack-list::-webkit-scrollbar, nav::-webkit-scrollbar {
|
||||
display: none; }
|
||||
nav div.sticker {
|
||||
width: 12vw;
|
||||
height: 12vw; }
|
||||
|
||||
div.pack-list {
|
||||
overflow-y: auto; }
|
||||
|
||||
section.stickerpack {
|
||||
padding-top: 12vw;
|
||||
margin-top: -12vw; }
|
||||
margin-top: .75rem; }
|
||||
section.stickerpack > div.sticker-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap; }
|
||||
section.stickerpack > h1 {
|
||||
margin: .75rem; }
|
||||
margin: 0 0 0 .75rem; }
|
||||
|
||||
div.sticker {
|
||||
display: flex;
|
||||
|
||||
97
web/index.js
97
web/index.js
@ -23,23 +23,10 @@ class App extends Component {
|
||||
loading: true,
|
||||
error: null,
|
||||
}
|
||||
this.observer = null
|
||||
this.imageObserver = null
|
||||
this.packListRef = null
|
||||
}
|
||||
|
||||
observeIntersection = intersections => {
|
||||
for (const entry of intersections) {
|
||||
const img = entry.target.children.item(0)
|
||||
if (entry.isIntersecting) {
|
||||
img.setAttribute("src", img.getAttribute("data-src"))
|
||||
img.classList.add("visible")
|
||||
} else {
|
||||
img.removeAttribute("src")
|
||||
img.classList.remove("visible")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
fetch(`${PACKS_BASE_URL}/index.json`).then(async indexRes => {
|
||||
if (indexRes.status >= 400) {
|
||||
@ -61,20 +48,50 @@ class App extends Component {
|
||||
})
|
||||
}
|
||||
}, error => this.setState({ loading: false, error }))
|
||||
this.observer = new IntersectionObserver(this.observeIntersection, {
|
||||
|
||||
this.imageObserver = new IntersectionObserver(this.observeImageIntersection, {
|
||||
rootMargin: "100px",
|
||||
threshold: 0,
|
||||
})
|
||||
this.sectionObserver = new IntersectionObserver(this.observeSectionIntersection, {})
|
||||
}
|
||||
|
||||
observeImageIntersection = intersections => {
|
||||
for (const entry of intersections) {
|
||||
const img = entry.target.children.item(0)
|
||||
if (entry.isIntersecting) {
|
||||
img.setAttribute("src", img.getAttribute("data-src"))
|
||||
img.classList.add("visible")
|
||||
} else {
|
||||
img.removeAttribute("src")
|
||||
img.classList.remove("visible")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
observeSectionIntersection = intersections => {
|
||||
for (const entry of intersections) {
|
||||
const packID = entry.target.getAttribute("data-pack-id")
|
||||
const navElement = document.getElementById(`nav-${packID}`)
|
||||
if (entry.isIntersecting) {
|
||||
navElement.classList.add("visible")
|
||||
} else {
|
||||
navElement.classList.remove("visible")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
for (const elem of this.packListRef.getElementsByClassName("sticker")) {
|
||||
this.observer.observe(elem)
|
||||
this.imageObserver.observe(elem)
|
||||
}
|
||||
for (const elem of this.packListRef.children) {
|
||||
this.sectionObserver.observe(elem)
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.observer.disconnect()
|
||||
this.imageObserver.disconnect()
|
||||
this.sectionObserver.disconnect()
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -86,9 +103,9 @@ class App extends Component {
|
||||
<p>${this.state.error}</p>
|
||||
</main>`
|
||||
} else if (this.state.packs.length === 0) {
|
||||
return html`<main class="empty"><h1>No packs found :(</h1></main>`
|
||||
return html`<main class="empty"><h1>No packs found 😿</h1></main>`
|
||||
}
|
||||
return html`<main>
|
||||
return html`<main class="has-content">
|
||||
<nav>
|
||||
${this.state.packs.map(pack => html`<${NavBarItem} id=${pack.id} pack=${pack}/>`)}
|
||||
</nav>
|
||||
@ -99,24 +116,30 @@ class App extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
const NavBarItem = ({ pack }) => html`<a href="#pack-${pack.id}" title=${pack.title}>
|
||||
<div class="sticker">
|
||||
<img src=${makeThumbnailURL(pack.stickers[0].url)}
|
||||
alt=${pack.stickers[0].body} class="visible" />
|
||||
</div>
|
||||
</a>`
|
||||
const NavBarItem = ({ pack }) => html`
|
||||
<a href="#pack-${pack.id}" id="nav-${pack.id}" data-pack-id=${pack.id} title=${pack.title}>
|
||||
<div class="sticker">
|
||||
<img src=${makeThumbnailURL(pack.stickers[0].url)}
|
||||
alt=${pack.stickers[0].body} class="visible" />
|
||||
</div>
|
||||
</a>
|
||||
`
|
||||
|
||||
const Pack = ({ pack }) => html`<section class="stickerpack" id=${`pack-${pack.id}`}>
|
||||
<h1>${pack.title}</h1>
|
||||
<div class="sticker-list">
|
||||
${pack.stickers.map(sticker => html`
|
||||
<${Sticker} key=${sticker["net.maunium.telegram.sticker"].id} content=${sticker}/>
|
||||
`)}
|
||||
const Pack = ({ pack }) => html`
|
||||
<section class="stickerpack" id="pack-${pack.id}" data-pack-id=${pack.id}>
|
||||
<h1>${pack.title}</h1>
|
||||
<div class="sticker-list">
|
||||
${pack.stickers.map(sticker => html`
|
||||
<${Sticker} key=${sticker["net.maunium.telegram.sticker"].id} content=${sticker}/>
|
||||
`)}
|
||||
</div>
|
||||
</section>
|
||||
`
|
||||
|
||||
const Sticker = ({ content }) => html`
|
||||
<div class="sticker" onClick=${() => sendSticker(content)}>
|
||||
<img data-src=${makeThumbnailURL(content.url)} alt=${content.body} />
|
||||
</div>
|
||||
</section>`
|
||||
|
||||
const Sticker = ({ content }) => html`<div class="sticker" onClick=${() => sendSticker(content)}>
|
||||
<img data-src=${makeThumbnailURL(content.url)} alt=${content.body} />
|
||||
</div>`
|
||||
`
|
||||
|
||||
render(html`<${App} />`, document.body)
|
||||
|
||||
@ -7,67 +7,80 @@
|
||||
*
|
||||
font-family: sans-serif
|
||||
|
||||
html
|
||||
scrollbar-width: none
|
||||
|
||||
&::-webkit-scrollbar
|
||||
display: none
|
||||
|
||||
body
|
||||
margin: 0
|
||||
|
||||
h1
|
||||
font-size: 1rem
|
||||
|
||||
$sticker-size: 25vw
|
||||
$nav-sticker-size: 12vw
|
||||
$nav-bottom-highlight: 2px
|
||||
$nav-height: calc(#{$nav-sticker-size} + #{$nav-bottom-highlight})
|
||||
$nav-height-inverse: calc(-#{$nav-sticker-size} - #{$nav-bottom-highlight})
|
||||
|
||||
main
|
||||
&.spinner, &.error, &.empty
|
||||
&.spinner
|
||||
margin-top: 5rem
|
||||
|
||||
&.error, &.empty
|
||||
margin: 2rem
|
||||
|
||||
&.empty
|
||||
text-align: center
|
||||
|
||||
&.has-content
|
||||
position: fixed
|
||||
top: 0
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
|
||||
display: grid
|
||||
grid-template-rows: $nav-height auto
|
||||
|
||||
nav
|
||||
display: flex
|
||||
overflow-x: auto
|
||||
|
||||
height: $nav-height
|
||||
|
||||
background-color: white
|
||||
|
||||
> a
|
||||
border-bottom: $nav-bottom-highlight solid transparent
|
||||
&.visible
|
||||
border-bottom-color: green
|
||||
> div.sticker
|
||||
width: $nav-sticker-size
|
||||
height: $nav-sticker-size
|
||||
|
||||
div.pack-list, nav
|
||||
scrollbar-width: none
|
||||
|
||||
&::-webkit-scrollbar
|
||||
display: none
|
||||
|
||||
position: fixed
|
||||
top: 0
|
||||
left: 0
|
||||
right: 0
|
||||
height: 12vw
|
||||
|
||||
background-color: white
|
||||
z-index: 10
|
||||
|
||||
div.sticker
|
||||
width: 12vw
|
||||
height: 12vw
|
||||
div.pack-list
|
||||
overflow-y: auto
|
||||
|
||||
section.stickerpack
|
||||
// This is a slightly hacky hack so that we can simultaneously have:
|
||||
// * Anchor URLs scroll so the header is visible
|
||||
// * The scroll area is the whole document
|
||||
padding-top: 12vw
|
||||
margin-top: -12vw
|
||||
margin-top: .75rem
|
||||
|
||||
> div.sticker-list
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
|
||||
> h1
|
||||
margin: .75rem
|
||||
margin: 0 0 0 .75rem
|
||||
|
||||
div.sticker
|
||||
display: flex
|
||||
padding: 4px
|
||||
cursor: pointer
|
||||
position: relative
|
||||
width: 25vw
|
||||
height: 25vw
|
||||
width: $sticker-size
|
||||
height: $sticker-size
|
||||
box-sizing: border-box
|
||||
|
||||
&:hover
|
||||
|
||||
Loading…
Reference in New Issue
Block a user