Add navbar and switch to sass. Fixes #2
This commit is contained in:
Tulir Asokan
parent
28c7d2f1a2
commit
9a06d63ee9
112
web/index.css
112
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; }
|
||||
|
||||
37
web/index.js
37
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`<div class="main spinner"><${Spinner} size=${80} green /></div>`
|
||||
return html`<main class="spinner"><${Spinner} size=${80} green /></main>`
|
||||
} else if (this.state.error) {
|
||||
return html`<div class="main error">
|
||||
return html`<main class="error">
|
||||
<h1>Failed to load packs</h1>
|
||||
<p>${this.state.error}</p>
|
||||
</div>`
|
||||
</main>`
|
||||
} else if (this.state.packs.length === 0) {
|
||||
return html`<div class="main empty"><h1>No packs found :(</h1></div>`
|
||||
return html`<main class="empty"><h1>No packs found :(</h1></main>`
|
||||
}
|
||||
return html`<div class="main pack-list">
|
||||
${this.state.packs.map(pack => html`<${Pack} id=${pack.id} ...${pack}/>`)}
|
||||
</div>`
|
||||
return html`<main>
|
||||
<nav>
|
||||
${this.state.packs.map(pack => html`<${NavBarItem} id=${pack.id} pack=${pack}/>`)}
|
||||
</nav>
|
||||
<div class="pack-list" ref=${elem => this.packListRef = elem}>
|
||||
${this.state.packs.map(pack => html`<${Pack} id=${pack.id} pack=${pack}/>`)}
|
||||
</div>
|
||||
</main>`
|
||||
}
|
||||
}
|
||||
|
||||
const Pack = ({ title, stickers }) => html`<div class="stickerpack">
|
||||
<h1>${title}</h1>
|
||||
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 Pack = ({ pack }) => html`<section class="stickerpack" id=${`pack-${pack.id}`}>
|
||||
<h1>${pack.title}</h1>
|
||||
<div class="sticker-list">
|
||||
${stickers.map(sticker => html`
|
||||
${pack.stickers.map(sticker => html`
|
||||
<${Sticker} key=${sticker["net.maunium.telegram.sticker"].id} content=${sticker}/>
|
||||
`)}
|
||||
</div>
|
||||
</div>`
|
||||
</section>`
|
||||
|
||||
const Sticker = ({ content }) => html`<div class="sticker" onClick=${() => sendSticker(content)}>
|
||||
<img data-src=${makeThumbnailURL(content.url)} alt=${content.body} />
|
||||
|
||||
82
web/index.sass
Normal file
82
web/index.sass
Normal file
@ -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
|
||||
Loading…
Reference in New Issue
Block a user