diff --git a/web/index.css b/web/index.css index 1ff2fc4..1a5b589 100644 --- a/web/index.css +++ b/web/index.css @@ -1,64 +1,62 @@ -/* -Copyright (c) 2020 Tulir Asokan - -This Source Code Form is subject to the terms of the Mozilla Public -License, v. 2.0. If a copy of the MPL was not distributed with this -file, You can obtain one at http://mozilla.org/MPL/2.0/. -*/ - * { - font-family: sans-serif; -} + font-family: sans-serif; } html { - scrollbar-width: none; -} + scrollbar-width: none; } + html::-webkit-scrollbar { + display: none; } body { - margin: 0; -} - -.main:not(.pack-list) { - margin: 2rem; -} - -.main.empty { - text-align: center; -} - -.stickerpack > .sticker-list { - display: flex; - flex-wrap: wrap; -} - -.stickerpack > h1 { - margin: .75rem; -} - -.sticker { - display: flex; - padding: 4px; - cursor: pointer; - position: relative; - width: 25vw; - height: 25vw; - box-sizing: border-box; -} - -.sticker:hover { - background-color: #eee; -} - -.sticker > img { - display: none; - width: 100%; - object-fit: contain; -} - -.sticker > img.visible { - display: initial; -} + margin: 0; } h1 { - font-size: 1rem; -} + font-size: 1rem; } + +main.spinner, main.error, main.empty { + margin: 2rem; } + +main.empty { + text-align: center; } + +nav { + display: flex; + overflow-x: auto; + scrollbar-width: none; + position: fixed; + top: 0; + left: 0; + right: 0; + height: 12vw; + background-color: white; + z-index: 10; } + nav::-webkit-scrollbar { + display: none; } + nav div.sticker { + width: 12vw; + height: 12vw; } + +section.stickerpack { + padding-top: 12vw; + margin-top: -12vw; } + section.stickerpack > div.sticker-list { + display: flex; + flex-wrap: wrap; } + section.stickerpack > h1 { + margin: .75rem; } + +div.sticker { + display: flex; + padding: 4px; + cursor: pointer; + position: relative; + width: 25vw; + height: 25vw; + box-sizing: border-box; } + div.sticker:hover { + background-color: #eee; } + div.sticker > img { + display: none; + width: 100%; + object-fit: contain; } + div.sticker > img.visible { + display: initial; } diff --git a/web/index.js b/web/index.js index 86aac06..bc478af 100644 --- a/web/index.js +++ b/web/index.js @@ -24,6 +24,7 @@ class App extends Component { error: null, } this.observer = null + this.packListRef = null } observeIntersection = intersections => { @@ -67,7 +68,7 @@ class App extends Component { } componentDidUpdate() { - for (const elem of document.getElementsByClassName("sticker")) { + for (const elem of this.packListRef.getElementsByClassName("sticker")) { this.observer.observe(elem) } } @@ -78,29 +79,41 @@ class App extends Component { render() { if (this.state.loading) { - return html`
<${Spinner} size=${80} green />
` + return html`
<${Spinner} size=${80} green />
` } else if (this.state.error) { - return html`
+ return html`

Failed to load packs

${this.state.error}

-
` + ` } else if (this.state.packs.length === 0) { - return html`

No packs found :(

` + return html`

No packs found :(

` } - return html`
- ${this.state.packs.map(pack => html`<${Pack} id=${pack.id} ...${pack}/>`)} -
` + return html`
+ +
this.packListRef = elem}> + ${this.state.packs.map(pack => html`<${Pack} id=${pack.id} pack=${pack}/>`)} +
+
` } } -const Pack = ({ title, stickers }) => html`
-

${title}

+const NavBarItem = ({ pack }) => html` +
+ ${pack.stickers[0].body} +
+
` + +const Pack = ({ pack }) => html`
+

${pack.title}

- ${stickers.map(sticker => html` + ${pack.stickers.map(sticker => html` <${Sticker} key=${sticker["net.maunium.telegram.sticker"].id} content=${sticker}/> `)}
-
` +` const Sticker = ({ content }) => html`
sendSticker(content)}> ${content.body} diff --git a/web/index.sass b/web/index.sass new file mode 100644 index 0000000..fe73eb8 --- /dev/null +++ b/web/index.sass @@ -0,0 +1,82 @@ +// Copyright (c) 2020 Tulir Asokan +// +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. + +* + font-family: sans-serif + +html + scrollbar-width: none + + &::-webkit-scrollbar + display: none + +body + margin: 0 + +h1 + font-size: 1rem + +main + &.spinner, &.error, &.empty + margin: 2rem + + &.empty + text-align: center + +nav + display: flex + overflow-x: auto + 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 + +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 + + > div.sticker-list + display: flex + flex-wrap: wrap + + > h1 + margin: .75rem + +div.sticker + display: flex + padding: 4px + cursor: pointer + position: relative + width: 25vw + height: 25vw + box-sizing: border-box + + &:hover + background-color: #eee + + > img + display: none + width: 100% + object-fit: contain + + &.visible + display: initial