Make number of stickers per row configurable

This commit is contained in:
Tulir Asokan 2020-09-10 17:00:17 +03:00
parent ed2b9f7e64
commit 74cd8d82fe
3 changed files with 31 additions and 6 deletions

View File

@ -27,6 +27,7 @@ class App extends Component {
packs: [], packs: [],
loading: true, loading: true,
error: null, error: null,
stickersPerRow: parseInt(localStorage.mauStickersPerRow || "4"),
frequentlyUsed: { frequentlyUsed: {
id: "frequently-used", id: "frequently-used",
title: "Frequently used", title: "Frequently used",
@ -61,6 +62,15 @@ class App extends Component {
localStorage.mauFrequentlyUsedStickerCache = JSON.stringify(stickers.map(sticker => [sticker.id, sticker])) localStorage.mauFrequentlyUsedStickerCache = JSON.stringify(stickers.map(sticker => [sticker.id, sticker]))
} }
setStickersPerRow(val) {
localStorage.mauStickersPerRow = val
document.documentElement.style.setProperty("--stickers-per-row", localStorage.mauStickersPerRow)
this.setState({
stickersPerRow: val,
})
this.packListRef.scrollTop = this.packListRef.scrollHeight
}
reloadPacks() { reloadPacks() {
this.imageObserver.disconnect() this.imageObserver.disconnect()
this.sectionObserver.disconnect() this.sectionObserver.disconnect()
@ -97,6 +107,7 @@ class App extends Component {
} }
componentDidMount() { componentDidMount() {
document.documentElement.style.setProperty("--stickers-per-row", this.state.stickersPerRow.toString())
this._loadPacks() this._loadPacks()
this.imageObserver = new IntersectionObserver(this.observeImageIntersections, { this.imageObserver = new IntersectionObserver(this.observeImageIntersections, {
rootMargin: "100px", rootMargin: "100px",
@ -189,6 +200,12 @@ const Settings = ({ app }) => html`
<h1>Settings</h1> <h1>Settings</h1>
<div class="settings-list"> <div class="settings-list">
<button onClick=${app.reloadPacks}>Reload</button> <button onClick=${app.reloadPacks}>Reload</button>
<div>
<label for="stickers-per-row">Stickers per row: ${app.state.stickersPerRow}</label>
<input type="range" min=2 max=10 id="stickers-per-row" id="stickers-per-row"
value=${app.state.stickersPerRow}
onInput=${evt => app.setStickersPerRow(evt.target.value)} />
</div>
</div> </div>
</section> </section>
` `

View File

@ -1 +1 @@
*{font-family:sans-serif}body{margin:0}h1{font-size:1rem}main.spinner{margin-top:5rem}main.error,main.empty{margin:2rem}main.empty{text-align:center}main.has-content{position:fixed;top:0;left:0;right:0;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}nav>a>div.sticker.icon>img{width:70%;height:70%;padding:15%}div.pack-list,nav{scrollbar-width:none}div.pack-list::-webkit-scrollbar,nav::-webkit-scrollbar{display:none}div.pack-list{overflow-y:auto}div.pack-list.ios-safari-hack{position:fixed;top:calc(12vw + 2px);bottom:0;left:0;right:0;-webkit-overflow-scrolling:touch}section.stickerpack{margin-top:.75rem}section.stickerpack>div.sticker-list{display:flex;flex-wrap:wrap}section.stickerpack>h1{margin:0 0 0 .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}div.settings-list{display:flex}div.settings-list button{width:100%;margin:.5rem;padding:.5rem;border-radius:.25rem} *{font-family:sans-serif}body{margin:0}h1{font-size:1rem}:root{--stickers-per-row: 4;--sticker-size: calc(100vw / var(--stickers-per-row))}main.spinner{margin-top:5rem}main.error,main.empty{margin:2rem}main.empty{text-align:center}main.has-content{position:fixed;top:0;left:0;right:0;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}nav>a>div.sticker.icon>img{width:70%;height:70%;padding:15%}div.pack-list,nav{scrollbar-width:none}div.pack-list::-webkit-scrollbar,nav::-webkit-scrollbar{display:none}div.pack-list{overflow-y:auto}div.pack-list.ios-safari-hack{position:fixed;top:calc(12vw + 2px);bottom:0;left:0;right:0;-webkit-overflow-scrolling:touch}section.stickerpack{margin-top:.75rem}section.stickerpack>div.sticker-list{display:flex;flex-wrap:wrap}section.stickerpack>h1{margin:0 0 0 .75rem}div.sticker{display:flex;padding:4px;cursor:pointer;position:relative;width:var(--sticker-size);height:var(--sticker-size);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}div.settings-list{display:flex;flex-direction:column}div.settings-list>*{margin:.5rem}div.settings-list button{padding:.5rem;border-radius:.25rem}div.settings-list input{width:100%}

View File

@ -13,7 +13,10 @@ body
h1 h1
font-size: 1rem font-size: 1rem
$sticker-size: 25vw \:root
--stickers-per-row: 4
--sticker-size: calc(100vw / var(--stickers-per-row))
$nav-sticker-size: 12vw $nav-sticker-size: 12vw
$nav-bottom-highlight: 2px $nav-bottom-highlight: 2px
$nav-height: calc(#{$nav-sticker-size} + #{$nav-bottom-highlight}) $nav-height: calc(#{$nav-sticker-size} + #{$nav-bottom-highlight})
@ -91,8 +94,8 @@ div.sticker
padding: 4px padding: 4px
cursor: pointer cursor: pointer
position: relative position: relative
width: $sticker-size width: var(--sticker-size)
height: $sticker-size height: var(--sticker-size)
box-sizing: border-box box-sizing: border-box
&:hover &:hover
@ -108,9 +111,14 @@ div.sticker
div.settings-list div.settings-list
display: flex display: flex
flex-direction: column
> *
margin: .5rem
button button
width: 100%
margin: .5rem
padding: .5rem padding: .5rem
border-radius: .25rem border-radius: .25rem
input
width: 100%