From 0f142b5386b65cc125cd11fbc7a47a7f1b8ac164 Mon Sep 17 00:00:00 2001
From: KatieFrogs <23621460+KatieFrogs@users.noreply.github.com>
Date: Sat, 26 Feb 2022 05:49:05 +0300
Subject: [PATCH] Squish text, fix keyboard navigation

---
 public/src/css/search.css   | 12 +++-------
 public/src/js/songselect.js | 44 ++++++++++++++++++++++++++++++++-----
 2 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/public/src/css/search.css b/public/src/css/search.css
index d353b2d..ca28094 100644
--- a/public/src/css/search.css
+++ b/public/src/css/search.css
@@ -110,18 +110,12 @@
 	width: calc(100% - (var(--course-width) + 0.4em) * 5 - 0.6em);
 }
 
-.song-search-result-info::after {
-	content: "";
-	display: block;
-	position: absolute;
-	top: 0;
-	right: 0;
-	width: 2em;
-	height: 100%;
+.song-search-result-title,
+.song-search-result-subtitle {
+	transform-origin: left;
 }
 
 .song-search-result-subtitle {
-    display: block;
     font-size: 0.8em;
     margin-top: 0.5em;
 }
diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js
index 10db167..ed80fd5 100644
--- a/public/src/js/songselect.js
+++ b/public/src/js/songselect.js
@@ -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 + ' .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-info::after { background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), ' + skin.background + ' 90%) }')
 		})
 
 		this.font = strings.font
@@ -2695,7 +2694,7 @@ class SongSelect{
 		return addedSong
 	}
 
-	createSearchResult(song){
+	createSearchResult(song, resultsDiv){
 		var title = this.getLocalTitle(song.title, song.title_lang)
 		var subtitle = this.getLocalTitle(title === song.title ? song.subtitle : "", song.subtitle_lang)
 
@@ -2751,12 +2750,30 @@ class SongSelect{
 			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
 	}
 
 	searchSetActive(idx){
 		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){
 			active.classList.remove("song-search-result-active")
 		}
@@ -2769,10 +2786,26 @@ class SongSelect{
 		var el = this.search.results[idx]
 		this.search.input.blur()
 		el.classList.add("song-search-result-active")
-		el.scrollIntoView();
+		this.scrollTo(el)
 
 		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){
 		if(this.search){
@@ -3017,8 +3050,7 @@ class SongSelect{
 		resultsDiv.innerHTML = ""
 		this.search.results = []
 		new_results.forEach(song => {
-			var result = this.createSearchResult(song)
-			resultsDiv.appendChild(result)
+			var result = this.createSearchResult(song, resultsDiv)
 			this.search.results.push(result)
 		})
 	}