From d44a4a1ce201df8869747bf6771b13868c47e32c Mon Sep 17 00:00:00 2001 From: KatieFrogs <23621460+KatieFrogs@users.noreply.github.com> Date: Sat, 26 Feb 2022 00:05:43 +0300 Subject: [PATCH] Improve appearance on mobile --- public/assets/img/img.css | 4 +- public/src/css/search.css | 135 ++++++++++++++++++++---------------- public/src/js/main.js | 5 +- public/src/js/songselect.js | 30 ++++++-- 4 files changed, 103 insertions(+), 71 deletions(-) diff --git a/public/assets/img/img.css b/public/assets/img/img.css index 2f3b5c7..ee3f1a3 100644 --- a/public/assets/img/img.css +++ b/public/assets/img/img.css @@ -25,8 +25,8 @@ } #song-search{ background: linear-gradient(to top, rgb(245 246 252 / 8%), #ff5963), url("bg_search.png"); - background-size: 3.12vmax; - background-position: -1.2vmax; + background-size: 3.12em; + background-position: -1.2em; } .song-search-result-course::before{ background-image: url("difficulty.png"); diff --git a/public/src/css/search.css b/public/src/css/search.css index 044a41f..1024e68 100644 --- a/public/src/css/search.css +++ b/public/src/css/search.css @@ -1,5 +1,5 @@ #song-search-container { - position: fixed; + position: absolute; width: 100%; height: 100%; top: 0; @@ -8,45 +8,58 @@ bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 2; + display: flex; + justify-content: center; + align-items: center; + font-size: 21px; } #song-search { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - margin: auto; + position: relative; display: flex; flex-direction: column; - width: 60vmax; - height: 80vmin; - border-radius: 0.8vmax; - border: 0.35vmax solid #8C0C42; + width: 60em; + height: 80%; + border-radius: 0.8em; + border: 0.35em solid #8C0C42; color: #fff; - padding: 1vmax 1vmax 0 1vmax; + padding: 1em 1em 0 1em; z-index: 1; } +#song-search-container.touch-enabled{ + font-size: calc(3 * var(--vmin, 1vmin)); +} +@media (max-width: 950px){ + #song-search-container:not(.touch-enabled){ + font-size: calc(3 * var(--vmin, 1vmin)); + } +} +@media (max-height: 650px){ + #song-search-container:not(.touch-enabled){ + font-size: calc(2 * var(--vmin, 1vmin)); + } +} + #song-search-input { width: 100%; - font-size: 2vmax; - padding: 0.8vmax 1.2vmax; - border-radius: 0.3vmax; - border: 0.25vmax black solid; + font-size: 1.8em; + padding: 0.5em 0.7em; + border-radius: 0.2em; + border: 0.13em black solid; font-family: TnT; box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing: border-box; - outline: none; + outline: none; } #song-search-input:focus { - border: 0.25vmax #fff923 solid; + border-color: #fff923; } #song-search-results { - margin-top: 0.5vmax; + margin-top: 0.5em; overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; @@ -59,14 +72,14 @@ .song-search-result { display: flex; - height: 3.2vmax; - margin: 0.2vmax; - padding: 0.7vmax; + height: 3.2em; + margin: 0.2em; + padding: 0.7em; flex-direction: row; text-align: center; align-items: center; justify-content: center; - border: 0.3vmax black solid; + border: 0.3em black solid; position: relative; } @@ -82,25 +95,25 @@ } .song-search-result:last-of-type { - margin-bottom: 1vmax; + margin-bottom: 1em; } .song-search-result-info { flex: 10; - font-size: 1.2vmax; - margin: 0.3vmax; + font-size: 1.2em; + margin: 0.3em; text-align: left; z-index: 0; position: relative; white-space: nowrap; - padding-left: 0.2vmax; + padding-left: 0.2em; overflow-x: clip; } .song-search-result-subtitle { display: block; - font-size: 0.8vmax; - margin-top: 0.5vmax; + font-size: 0.8em; + margin-top: 0.5em; } .song-search-result-title::before, @@ -114,9 +127,9 @@ flex: 1; width: 100%; height: 100%; - margin: 0.2vmax; - font-size: 1.2vmax; - border-radius: 0.3vmax; + margin: 0.2em; + font-size: 1.2em; + border-radius: 0.3em; position: relative; z-index: 1; } @@ -143,8 +156,8 @@ height: 100%; opacity: 0.5; z-index: -1; - background-size: 6vmax; - border-radius: 0.3vmax; + background-size: 4.8em; + border-radius: 0.3em; } .song-search-result-stars { @@ -152,8 +165,8 @@ background: rgb(0 0 0 / 47%); position: absolute; width: 100%; - padding: 0.1vmax 0; - border-radius: 0 0 0.3vmax 0.3vmax; + padding: 0.1em 0; + border-radius: 0 0 0.3em 0.3em; } .song-search-result-easy { @@ -161,8 +174,8 @@ } .song-search-result-easy::before { - background-position-x: -1.1vmax; - background-position-y: -0.7vmax; + background-position-x: center; + background-position-y: -0.6em; } .song-search-result-normal { @@ -170,8 +183,8 @@ } .song-search-result-normal::before { - background-position-x: -1.2vmax; - background-position-y: -6.4vmax; + background-position-x: center; + background-position-y: -5.1em; } .song-search-result-hard { @@ -179,8 +192,8 @@ } .song-search-result-hard::before { - background-position-x: -1.1vmax; - background-position-y: -11.4vmax; + background-position-x: center; + background-position-y: -9.1em; } .song-search-result-oni { @@ -188,8 +201,8 @@ } .song-search-result-oni::before { - background-position-x: -1.2vmax; - background-position-y: -16.5vmax; + background-position-x: center; + background-position-y: -13.1em; } .song-search-result-ura { @@ -197,48 +210,48 @@ } .song-search-result-ura::before { - background-position-x: -1.2vmax; - background-position-y: -21.6vmax; + background-position-x: center; + background-position-y: -17.2em; } .song-search-result-crown { - background-size: 1.9vmax; - background-position-x: 0.82vmax; + background-size: 1.4em; + background-position-x: center; background-repeat: repeat-y; width: 100%; position: absolute; - height: 2vmax; + height: 2em; } .song-search-result-gold { - background-position-y: 5.15vmax; + background-position-y: 4.1em; } .song-search-result-silver { - background-position-y: 7.6vmax; + background-position-y: 6.1em; } .song-search-result-noclear { - background-position-y: 0.15vmax; + background-position-y: 0.15em; } #song-search-tip { - font-size: 1vmax; - margin-top: 1vmax; + font-size: 1em; + margin-top: 1em; text-align: center; background-repeat: no-repeat; background-position: top; - background-size: 10vmax; + background-size: 10em; background-color: #00000087; - border-radius: 0.5vmax; - padding: 1vmax; + border-radius: 0.5em; + padding: 1em; } #song-search-close { position: absolute; - right: -0.77vmax; - top: -1.26vmax; - font-size: 2vmax; + right: -0.5em; + top: -0.8em; + font-size: 2em; font-family: TnT; cursor: pointer; } @@ -248,5 +261,5 @@ } .song-search-tip-error { - height: 8vmax; + height: 8em; } diff --git a/public/src/js/main.js b/public/src/js/main.js index 2f8ed2b..702d29c 100644 --- a/public/src/js/main.js +++ b/public/src/js/main.js @@ -38,7 +38,8 @@ function toggleFullscreen(){ } function resizeRoot(){ - if(lastHeight !== innerHeight){ + if((noResizeRoot ? lastWidth !== innerWidth : true) && lastHeight !== innerHeight){ + lastWidth = innerWidth lastHeight = innerHeight root.style.height = innerHeight + "px" } @@ -70,6 +71,7 @@ var snd = {} var p2 var disableBlur = false var cancelTouch = true +var lastWidth var lastHeight var debugObj = { state: "closed", @@ -92,6 +94,7 @@ var account = {} var gpicker var db var plugins +var noResizeRoot = false pageEvents.add(root, ["touchstart", "touchmove", "touchend"], event => { if(event.cancelable && cancelTouch && event.target.tagName !== "SELECT"){ diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index f874317..d6e18a9 100644 --- a/public/src/js/songselect.js +++ b/public/src/js/songselect.js @@ -1105,6 +1105,16 @@ class SongSelect{ var screen = this.state.screen var selectedWidth = this.songAsset.width + if(this.search && this.searchContainer){ + var vmin = Math.min(innerWidth, lastHeight) / 100 + if(this.vmin !== vmin){ + this.searchContainer.style.setProperty("--vmin", vmin + "px") + this.vmin = vmin + } + }else{ + this.vmin = null + } + if(this.wheelScrolls !== 0 && !this.state.locked && ms >= this.wheelTimer + 20) { if(p2.session){ this.moveToSong(this.wheelScrolls) @@ -2768,11 +2778,14 @@ class SongSelect{ this.search = {results: []} this.search.div = document.createElement("div") this.search.div.innerHTML = assets.pages["search"] + + this.searchContainer = this.search.div.querySelector(":scope #song-search-container") + if(this.touchEnabled){ + this.searchContainer.classList.add("touch-enabled") + } + pageEvents.add(this.searchContainer, ["mousedown", "touchstart"], this.searchClick.bind(this)) - pageEvents.add(this.search.div.querySelector("#song-search-container"), - ["mousedown", "touchstart"], this.searchClick.bind(this)) - - this.search.input = this.search.div.querySelector("#song-search-input") + this.search.input = this.search.div.querySelector(":scope #song-search-input") this.search.input.setAttribute("placeholder", strings.search.searchInput) pageEvents.add(this.search.input, ["input"], this.searchInput.bind(this)) @@ -2780,6 +2793,7 @@ class SongSelect{ loader.screen.appendChild(this.search.div) this.setSearchTip() cancelTouch = false + noResizeRoot = true setTimeout(() => { this.search.input.focus() @@ -2792,13 +2806,14 @@ class SongSelect{ this.playSound("se_cancel") } - pageEvents.remove(this.search.div.querySelector("#song-search-container"), + pageEvents.remove(this.search.div.querySelector(":scope #song-search-container"), ["mousedown", "touchstart"]) pageEvents.remove(this.search.input, ["input"]) this.search.div.remove() delete this.search cancelTouch = true + noResizeRoot = false } } @@ -2812,14 +2827,14 @@ class SongSelect{ tip = strings.search.tip + " " + strings.search.tips[Math.floor(Math.random() * strings.search.tips.length)] } - var resultsDiv = this.search.div.querySelector("#song-search-results") + var resultsDiv = this.search.div.querySelector(":scope #song-search-results") resultsDiv.innerHTML = "" this.search.results = [] this.search.tip = document.createElement("div") this.search.tip.setAttribute("id", "song-search-tip") this.search.tip.innerText = tip - this.search.div.querySelector("#song-search").appendChild(this.search.tip) + this.search.div.querySelector(":scope #song-search").appendChild(this.search.tip) if(error){ this.search.tip.classList.add("song-search-tip-error") @@ -3190,5 +3205,6 @@ class SongSelect{ delete this.selectable delete this.ctx delete this.canvas + delete this.searchContainer } }