yuuki/taiko-web
1
0
Fork 0
mirror of https://github.com/yuukiwww/taiko-web.git synced 2024-10-22 17:05:49 +02:00
Code Issues Packages Projects Releases Wiki Activity

Squish text, fix keyboard navigation

Browse Source
This commit is contained in:
KatieFrogs 2022-02-26 05:49:05 +03:00
parent 76736a35bf
commit 0f142b5386
2 changed files with 41 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -110,18 +110,12 @@
width: calc(100% - (var(--course-width) + 0.4em) * 5 - 0.6em); width: calc(100% - (var(--course-width) + 0.4em) * 5 - 0.6em);
} }
.song-search-result-info::after { .song-search-result-title,
content: ""; .song-search-result-subtitle {
display: block; transform-origin: left;
position: absolute;
top: 0;
right: 0;
width: 2em;
height: 100%;
} }
.song-search-result-subtitle { .song-search-result-subtitle {
display: block;
font-size: 0.8em; font-size: 0.8em;
margin-top: 0.5em; margin-top: 0.5em;
} }

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

@ -99,7 +99,6 @@ class SongSelect{
document.styleSheets[0].insertRule('.song-search-' + stripped + '::before { border: 0.4em solid ' + skin.border[0] + ' ; border-bottom-color: ' + skin.border[1] + ' ; border-right-color: ' + skin.border[1] + ' }') document.styleSheets[0].insertRule('.song-search-' + stripped + '::before { border: 0.4em solid ' + skin.border[0] + ' ; border-bottom-color: ' + skin.border[1] + ' ; border-right-color: ' + skin.border[1] + ' }')
document.styleSheets[0].insertRule('.song-search-' + stripped + ' .song-search-result-title::before { -webkit-text-stroke: 0.4em ' + skin.outline + ' }') document.styleSheets[0].insertRule('.song-search-' + stripped + ' .song-search-result-title::before { -webkit-text-stroke: 0.4em ' + skin.outline + ' }')
document.styleSheets[0].insertRule('.song-search-' + stripped + ' .song-search-result-subtitle::before { -webkit-text-stroke: 0.4em ' + skin.outline + ' }') document.styleSheets[0].insertRule('.song-search-' + stripped + ' .song-search-result-subtitle::before { -webkit-text-stroke: 0.4em ' + skin.outline + ' }')
document.styleSheets[0].insertRule('.song-search-' + stripped + ' .song-search-result-info::after { background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), ' + skin.background + ' 90%) }')
}) })
this.font = strings.font this.font = strings.font
@ -2695,7 +2694,7 @@ class SongSelect{
return addedSong return addedSong
} }
createSearchResult(song){ createSearchResult(song, resultsDiv){
var title = this.getLocalTitle(song.title, song.title_lang) var title = this.getLocalTitle(song.title, song.title_lang)
var subtitle = this.getLocalTitle(title === song.title ? song.subtitle : "", song.subtitle_lang) var subtitle = this.getLocalTitle(title === song.title ? song.subtitle : "", song.subtitle_lang)
@ -2751,12 +2750,30 @@ class SongSelect{
resultDiv.appendChild(courseDiv) resultDiv.appendChild(courseDiv)
}) })
resultsDiv.appendChild(resultDiv)
var computedStyle = getComputedStyle(resultInfoDiv)
var padding = parseFloat(computedStyle.paddingLeft.slice(0, -2)) + parseFloat(computedStyle.paddingRight.slice(0, -2))
var titleRatio = (resultInfoDiv.offsetWidth - padding) / resultInfoTitle.offsetWidth
if(titleRatio < 1){
resultInfoTitle.style.display = "block"
resultInfoTitle.style.transform = "scale(" + titleRatio + ", 1)"
}
if(subtitle){
var subtitleRatio = (resultInfoDiv.offsetWidth - padding) / resultInfoSubtitle.offsetWidth
if(subtitleRatio < 1){
resultInfoSubtitle.style.transform = "scale(" + subtitleRatio + ", 1)"
}
resultInfoSubtitle.style.display = "block"
}
return resultDiv return resultDiv
} }
searchSetActive(idx){ searchSetActive(idx){
this.playSound("se_ka") this.playSound("se_ka")
var active = this.search.div.querySelector(".song-search-result-active") var active = this.search.div.querySelector(":scope .song-search-result-active")
if(active){ if(active){
active.classList.remove("song-search-result-active") active.classList.remove("song-search-result-active")
} }
@ -2769,10 +2786,26 @@ class SongSelect{
var el = this.search.results[idx] var el = this.search.results[idx]
this.search.input.blur() this.search.input.blur()
el.classList.add("song-search-result-active") el.classList.add("song-search-result-active")
el.scrollIntoView(); this.scrollTo(el)
this.search.active = idx this.search.active = idx
} }
scrollTo(element){
var parentNode = element.parentNode
var selected = element.getBoundingClientRect()
var parent = parentNode.getBoundingClientRect()
var scrollY = parentNode.scrollTop
var selectedPosTop = selected.top - selected.height / 2
if(Math.floor(selectedPosTop) < Math.floor(parent.top)){
parentNode.scrollTop += selectedPosTop - parent.top
}else{
var selectedPosBottom = selected.top + selected.height * 1.5 - parent.top
if(Math.floor(selectedPosBottom) > Math.floor(parent.height)){
parentNode.scrollTop += selectedPosBottom - parent.height
}
}
}
displaySearch(fromButton=false){ displaySearch(fromButton=false){
if(this.search){ if(this.search){
@ -3017,8 +3050,7 @@ class SongSelect{
resultsDiv.innerHTML = "" resultsDiv.innerHTML = ""
this.search.results = [] this.search.results = []
new_results.forEach(song => { new_results.forEach(song => {
var result = this.createSearchResult(song) var result = this.createSearchResult(song, resultsDiv)
resultsDiv.appendChild(result)
this.search.results.push(result) this.search.results.push(result)
}) })
} }