Skip to content
Extraits de code Groupes Projets
Valider d698f058 rédigé par Tulir Asokan's avatar Tulir Asokan
Parcourir les fichiers

Make scrolling less hacky

parent 9a06d63e
Aucune branche associée trouvée
Aucune étiquette associée trouvée
Aucune requête de fusion associée trouvée
* {
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 {
display: none; }
nav div.sticker {
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; }
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;
......
......@@ -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}>
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>`
</a>
`
const Pack = ({ pack }) => html`<section class="stickerpack" id=${`pack-${pack.id}`}>
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>`
</section>
`
const Sticker = ({ content }) => html`<div class="sticker" onClick=${() => sendSticker(content)}>
const Sticker = ({ content }) => html`
<div class="sticker" onClick=${() => sendSticker(content)}>
<img data-src=${makeThumbnailURL(content.url)} alt=${content.body} />
</div>`
</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
......
0% Chargement en cours ou .
You are about to add 0 people to the discussion. Proceed with caution.
Veuillez vous inscrire ou vous pour commenter