diff --git a/web/index.css b/web/index.css
index 1a5b5899b1dc66a555cc168034e19a532439a0b0..df7d3674b37ef4411e45d4e5022a2b56bde71f7d 100644
--- a/web/index.css
+++ b/web/index.css
@@ -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;
diff --git a/web/index.js b/web/index.js
index bc478af0a8534f630e381a2635a2743f0c614488..dbd5e5cc1ad44d158bf1305888cee97e3b83c06c 100644
--- a/web/index.js
+++ b/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}/>
- `)}
- </div>
-</section>`
+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>`
+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)
diff --git a/web/index.sass b/web/index.sass
index fe73eb8c0633bcd1690fc6bb83125c0181040746..300c0c0a403779933b6e755860ef1917ab64c806 100644
--- a/web/index.sass
+++ b/web/index.sass
@@ -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