mirror of
https://github.com/yuukiwww/taiko-web.git
synced 2024-06-27 14:59:30 +02:00
Improve appearance on mobile
This commit is contained in:
KatieFrogs
parent
7372b617b0
commit
d44a4a1ce2
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"){
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user