From 74cd8d82fe7721ca5dfb6eea7fbe457b857b19fd Mon Sep 17 00:00:00 2001 From: Tulir Asokan Date: Thu, 10 Sep 2020 17:00:17 +0300 Subject: [PATCH] Make number of stickers per row configurable --- web/src/index.js | 17 +++++++++++++++++ web/style/index.css | 2 +- web/style/index.sass | 18 +++++++++++++----- 3 files changed, 31 insertions(+), 6 deletions(-) diff --git a/web/src/index.js b/web/src/index.js index 815f321..e81bfd1 100644 --- a/web/src/index.js +++ b/web/src/index.js @@ -27,6 +27,7 @@ class App extends Component { packs: [], loading: true, error: null, + stickersPerRow: parseInt(localStorage.mauStickersPerRow || "4"), frequentlyUsed: { id: "frequently-used", title: "Frequently used", @@ -61,6 +62,15 @@ class App extends Component { 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() { this.imageObserver.disconnect() this.sectionObserver.disconnect() @@ -97,6 +107,7 @@ class App extends Component { } componentDidMount() { + document.documentElement.style.setProperty("--stickers-per-row", this.state.stickersPerRow.toString()) this._loadPacks() this.imageObserver = new IntersectionObserver(this.observeImageIntersections, { rootMargin: "100px", @@ -189,6 +200,12 @@ const Settings = ({ app }) => html`

Settings

+
+ + app.setStickersPerRow(evt.target.value)} /> +
` diff --git a/web/style/index.css b/web/style/index.css index 607770b..68cec7b 100644 --- a/web/style/index.css +++ b/web/style/index.css @@ -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%} diff --git a/web/style/index.sass b/web/style/index.sass index d36e3f0..d7884d6 100644 --- a/web/style/index.sass +++ b/web/style/index.sass @@ -13,7 +13,10 @@ body h1 font-size: 1rem -$sticker-size: 25vw +\:root + --stickers-per-row: 4 + --sticker-size: calc(100vw / var(--stickers-per-row)) + $nav-sticker-size: 12vw $nav-bottom-highlight: 2px $nav-height: calc(#{$nav-sticker-size} + #{$nav-bottom-highlight}) @@ -91,8 +94,8 @@ div.sticker padding: 4px cursor: pointer position: relative - width: $sticker-size - height: $sticker-size + width: var(--sticker-size) + height: var(--sticker-size) box-sizing: border-box &:hover @@ -108,9 +111,14 @@ div.sticker div.settings-list display: flex + flex-direction: column + + > * + margin: .5rem button - width: 100% - margin: .5rem padding: .5rem border-radius: .25rem + + input + width: 100%