yuuki/taiko-web
1
0
Fork 0
mirror of https://github.com/yuukiwww/taiko-web.git synced 2024-06-30 08:19:29 +02:00
Code Issues Packages Projects Releases Wiki Activity

Improve appearance on mobile

Browse Source
This commit is contained in:
KatieFrogs 2022-02-26 00:05:43 +03:00
parent 7372b617b0
commit d44a4a1ce2
4 changed files with 103 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/assets/img/img.css
View File

@ -25,8 +25,8 @@
} }
#song-search{ #song-search{
background: linear-gradient(to top, rgb(245 246 252 / 8%), #ff5963), url("bg_search.png"); background: linear-gradient(to top, rgb(245 246 252 / 8%), #ff5963), url("bg_search.png");
background-size: 3.12vmax; background-size: 3.12em;
background-position: -1.2vmax; background-position: -1.2em;
} }
.song-search-result-course::before{ .song-search-result-course::before{
background-image: url("difficulty.png"); background-image: url("difficulty.png");

135
public/src/css/search.css
View File

@ -1,5 +1,5 @@
#song-search-container { #song-search-container {
position: fixed; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
top: 0; top: 0;
@ -8,45 +8,58 @@
bottom: 0; bottom: 0;
background-color: rgba(0,0,0,0.5); background-color: rgba(0,0,0,0.5);
z-index: 2; z-index: 2;
display: flex;
justify-content: center;
align-items: center;
font-size: 21px;
} }
#song-search { #song-search {
position: absolute; position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 60vmax; width: 60em;
height: 80vmin; height: 80%;
border-radius: 0.8vmax; border-radius: 0.8em;
border: 0.35vmax solid #8C0C42; border: 0.35em solid #8C0C42;
color: #fff; color: #fff;
padding: 1vmax 1vmax 0 1vmax; padding: 1em 1em 0 1em;
z-index: 1; 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 { #song-search-input {
width: 100%; width: 100%;
font-size: 2vmax; font-size: 1.8em;
padding: 0.8vmax 1.2vmax; padding: 0.5em 0.7em;
border-radius: 0.3vmax; border-radius: 0.2em;
border: 0.25vmax black solid; border: 0.13em black solid;
font-family: TnT; font-family: TnT;
box-sizing: border-box; box-sizing: border-box;
-webkit-box-sizing:border-box; -webkit-box-sizing:border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
outline: none; outline: none;
} }
#song-search-input:focus { #song-search-input:focus {
border: 0.25vmax #fff923 solid; border-color: #fff923;
} }
#song-search-results { #song-search-results {
margin-top: 0.5vmax; margin-top: 0.5em;
overflow-y: scroll; overflow-y: scroll;
-ms-overflow-style: none; -ms-overflow-style: none;
scrollbar-width: none; scrollbar-width: none;
@ -59,14 +72,14 @@
.song-search-result { .song-search-result {
display: flex; display: flex;
height: 3.2vmax; height: 3.2em;
margin: 0.2vmax; margin: 0.2em;
padding: 0.7vmax; padding: 0.7em;
flex-direction: row; flex-direction: row;
text-align: center; text-align: center;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 0.3vmax black solid; border: 0.3em black solid;
position: relative; position: relative;
} }
@ -82,25 +95,25 @@
} }
.song-search-result:last-of-type { .song-search-result:last-of-type {
margin-bottom: 1vmax; margin-bottom: 1em;
} }
.song-search-result-info { .song-search-result-info {
flex: 10; flex: 10;
font-size: 1.2vmax; font-size: 1.2em;
margin: 0.3vmax; margin: 0.3em;
text-align: left; text-align: left;
z-index: 0; z-index: 0;
position: relative; position: relative;
white-space: nowrap; white-space: nowrap;
padding-left: 0.2vmax; padding-left: 0.2em;
overflow-x: clip; overflow-x: clip;
} }
.song-search-result-subtitle { .song-search-result-subtitle {
display: block; display: block;
font-size: 0.8vmax; font-size: 0.8em;
margin-top: 0.5vmax; margin-top: 0.5em;
} }
.song-search-result-title::before, .song-search-result-title::before,
@ -114,9 +127,9 @@
flex: 1; flex: 1;
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0.2vmax; margin: 0.2em;
font-size: 1.2vmax; font-size: 1.2em;
border-radius: 0.3vmax; border-radius: 0.3em;
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
@ -143,8 +156,8 @@
height: 100%; height: 100%;
opacity: 0.5; opacity: 0.5;
z-index: -1; z-index: -1;
background-size: 6vmax; background-size: 4.8em;
border-radius: 0.3vmax; border-radius: 0.3em;
} }
.song-search-result-stars { .song-search-result-stars {
@ -152,8 +165,8 @@
background: rgb(0 0 0 / 47%); background: rgb(0 0 0 / 47%);
position: absolute; position: absolute;
width: 100%; width: 100%;
padding: 0.1vmax 0; padding: 0.1em 0;
border-radius: 0 0 0.3vmax 0.3vmax; border-radius: 0 0 0.3em 0.3em;
} }
.song-search-result-easy { .song-search-result-easy {
@ -161,8 +174,8 @@
} }
.song-search-result-easy::before { .song-search-result-easy::before {
background-position-x: -1.1vmax; background-position-x: center;
background-position-y: -0.7vmax; background-position-y: -0.6em;
} }
.song-search-result-normal { .song-search-result-normal {
@ -170,8 +183,8 @@
} }
.song-search-result-normal::before { .song-search-result-normal::before {
background-position-x: -1.2vmax; background-position-x: center;
background-position-y: -6.4vmax; background-position-y: -5.1em;
} }
.song-search-result-hard { .song-search-result-hard {
@ -179,8 +192,8 @@
} }
.song-search-result-hard::before { .song-search-result-hard::before {
background-position-x: -1.1vmax; background-position-x: center;
background-position-y: -11.4vmax; background-position-y: -9.1em;
} }
.song-search-result-oni { .song-search-result-oni {
@ -188,8 +201,8 @@
} }
.song-search-result-oni::before { .song-search-result-oni::before {
background-position-x: -1.2vmax; background-position-x: center;
background-position-y: -16.5vmax; background-position-y: -13.1em;
} }
.song-search-result-ura { .song-search-result-ura {
@ -197,48 +210,48 @@
} }
.song-search-result-ura::before { .song-search-result-ura::before {
background-position-x: -1.2vmax; background-position-x: center;
background-position-y: -21.6vmax; background-position-y: -17.2em;
} }
.song-search-result-crown { .song-search-result-crown {
background-size: 1.9vmax; background-size: 1.4em;
background-position-x: 0.82vmax; background-position-x: center;
background-repeat: repeat-y; background-repeat: repeat-y;
width: 100%; width: 100%;
position: absolute; position: absolute;
height: 2vmax; height: 2em;
} }
.song-search-result-gold { .song-search-result-gold {
background-position-y: 5.15vmax; background-position-y: 4.1em;
} }
.song-search-result-silver { .song-search-result-silver {
background-position-y: 7.6vmax; background-position-y: 6.1em;
} }
.song-search-result-noclear { .song-search-result-noclear {
background-position-y: 0.15vmax; background-position-y: 0.15em;
} }
#song-search-tip { #song-search-tip {
font-size: 1vmax; font-size: 1em;
margin-top: 1vmax; margin-top: 1em;
text-align: center; text-align: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: top; background-position: top;
background-size: 10vmax; background-size: 10em;
background-color: #00000087; background-color: #00000087;
border-radius: 0.5vmax; border-radius: 0.5em;
padding: 1vmax; padding: 1em;
} }
#song-search-close { #song-search-close {
position: absolute; position: absolute;
right: -0.77vmax; right: -0.5em;
top: -1.26vmax; top: -0.8em;
font-size: 2vmax; font-size: 2em;
font-family: TnT; font-family: TnT;
cursor: pointer; cursor: pointer;
} }
@ -248,5 +261,5 @@
} }
.song-search-tip-error { .song-search-tip-error {
height: 8vmax; height: 8em;
} }

5
public/src/js/main.js
View File

@ -38,7 +38,8 @@ function toggleFullscreen(){
} }
function resizeRoot(){ function resizeRoot(){
if(lastHeight !== innerHeight){ if((noResizeRoot ? lastWidth !== innerWidth : true) && lastHeight !== innerHeight){
lastWidth = innerWidth
lastHeight = innerHeight lastHeight = innerHeight
root.style.height = innerHeight + "px" root.style.height = innerHeight + "px"
} }
@ -70,6 +71,7 @@ var snd = {}
var p2 var p2
var disableBlur = false var disableBlur = false
var cancelTouch = true var cancelTouch = true
var lastWidth
var lastHeight var lastHeight
var debugObj = { var debugObj = {
state: "closed", state: "closed",
@ -92,6 +94,7 @@ var account = {}
var gpicker var gpicker
var db var db
var plugins var plugins
var noResizeRoot = false
pageEvents.add(root, ["touchstart", "touchmove", "touchend"], event => { pageEvents.add(root, ["touchstart", "touchmove", "touchend"], event => {
if(event.cancelable && cancelTouch && event.target.tagName !== "SELECT"){ if(event.cancelable && cancelTouch && event.target.tagName !== "SELECT"){

30
public/src/js/songselect.js
View File

@ -1105,6 +1105,16 @@ class SongSelect{
var screen = this.state.screen var screen = this.state.screen
var selectedWidth = this.songAsset.width 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(this.wheelScrolls !== 0 && !this.state.locked && ms >= this.wheelTimer + 20) {
if(p2.session){ if(p2.session){
this.moveToSong(this.wheelScrolls) this.moveToSong(this.wheelScrolls)
@ -2768,11 +2778,14 @@ class SongSelect{
this.search = {results: []} this.search = {results: []}
this.search.div = document.createElement("div") this.search.div = document.createElement("div")
this.search.div.innerHTML = assets.pages["search"] 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"), this.search.input = this.search.div.querySelector(":scope #song-search-input")
["mousedown", "touchstart"], this.searchClick.bind(this))
this.search.input = this.search.div.querySelector("#song-search-input")
this.search.input.setAttribute("placeholder", strings.search.searchInput) this.search.input.setAttribute("placeholder", strings.search.searchInput)
pageEvents.add(this.search.input, ["input"], this.searchInput.bind(this)) pageEvents.add(this.search.input, ["input"], this.searchInput.bind(this))
@ -2780,6 +2793,7 @@ class SongSelect{
loader.screen.appendChild(this.search.div) loader.screen.appendChild(this.search.div)
this.setSearchTip() this.setSearchTip()
cancelTouch = false cancelTouch = false
noResizeRoot = true
setTimeout(() => { setTimeout(() => {
this.search.input.focus() this.search.input.focus()
@ -2792,13 +2806,14 @@ class SongSelect{
this.playSound("se_cancel") 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"]) ["mousedown", "touchstart"])
pageEvents.remove(this.search.input, ["input"]) pageEvents.remove(this.search.input, ["input"])
this.search.div.remove() this.search.div.remove()
delete this.search delete this.search
cancelTouch = true 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)] 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 = "" resultsDiv.innerHTML = ""
this.search.results = [] this.search.results = []
this.search.tip = document.createElement("div") this.search.tip = document.createElement("div")
this.search.tip.setAttribute("id", "song-search-tip") this.search.tip.setAttribute("id", "song-search-tip")
this.search.tip.innerText = 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){ if(error){
this.search.tip.classList.add("song-search-tip-error") this.search.tip.classList.add("song-search-tip-error")
@ -3190,5 +3205,6 @@ class SongSelect{
delete this.selectable delete this.selectable
delete this.ctx delete this.ctx
delete this.canvas delete this.canvas
delete this.searchContainer
} }
} }