From 7860a544066b0cd7cfd144fae88497141ad3d4b2 Mon Sep 17 00:00:00 2001
From: Eduard Urbach <e.urbach@gmail.com>
Date: Fri, 13 Apr 2018 13:39:03 +0200
Subject: [PATCH] Improved lyrics view

---
 pages/soundtrack/lyrics.pixy    | 39 ++++++++++++++++++---------------
 pages/soundtrack/lyrics.scarlet | 16 +++++++++++++-
 styles/base.scarlet             |  3 +++
 3 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/pages/soundtrack/lyrics.pixy b/pages/soundtrack/lyrics.pixy
index f8f90b44..ca392167 100644
--- a/pages/soundtrack/lyrics.pixy
+++ b/pages/soundtrack/lyrics.pixy
@@ -1,28 +1,31 @@
 component SoundTrackLyricsPage(track *arn.SoundTrack, user *arn.User)
 	SoundTrackTabs(track, user)
 
-	.soundtrack-full-page
-		if track.Title.ByUser(user) == ""
-			h1.mountable untitled
-		else
-			h1.mountable= track.Title.ByUser(user)
-	
-	.widget-form
+	if track.Title.ByUser(user) == ""
+		h1.mountable untitled
+	else
+		h1.mountable= track.Title.ByUser(user)
+
+	.soundtrack-lyrics
 		if !track.HasLyrics()
 			p.no-data.mountable No lyrics available for this track.
 		else
-			if track.Lyrics.Romaji != ""
-				.widget
-					h3.widget-title.mountable Romaji
-					RenderLyrics(track.Lyrics.Romaji)
-			
 			if track.Lyrics.Native != ""
-				.widget
-					h3.widget-title.mountable Native
-					RenderLyrics(track.Lyrics.Native)
+				.lyrics-column
+					h3.widget-title.mountable(data-mountable-type="native") Native
+					RenderLyrics(track.Lyrics.Native, "native")
+			
+			if track.Lyrics.Romaji != ""
+				.lyrics-column
+					h3.widget-title.mountable(data-mountable-type="romaji") Romaji
+					RenderLyrics(track.Lyrics.Romaji, "romaji")
 
-component RenderLyrics(text string)
+component RenderLyrics(text string, mountType string)
 	each paragraph in strings.Split(text, "\n\n")
-		p.lyrics-paragraph.mountable
+		p.lyrics-paragraph
 			each line in strings.Split(paragraph, "\n")
-				span.lyrics-line= line
\ No newline at end of file
+				if mountType == "native"
+					.lyrics-line.mountable(data-mountable-type=mountType)
+						Japanese(line)
+				else
+					.lyrics-line.mountable(data-mountable-type=mountType)= line
\ No newline at end of file
diff --git a/pages/soundtrack/lyrics.scarlet b/pages/soundtrack/lyrics.scarlet
index 73ee6e49..1bb59714 100644
--- a/pages/soundtrack/lyrics.scarlet
+++ b/pages/soundtrack/lyrics.scarlet
@@ -1,2 +1,16 @@
+.soundtrack-lyrics
+	horizontal-wrap
+	justify-content center
+
+.lyrics-column
+	flex 1
+	max-width 500px
+	padding calc(content-padding / 2)
+
+.lyrics-paragraph
+	margin 1rem 0
+
 .lyrics-line
-	display block
\ No newline at end of file
+	border-radius ui-element-border-radius
+	padding 0 0.25rem
+	height 1.9rem
\ No newline at end of file
diff --git a/styles/base.scarlet b/styles/base.scarlet
index 373e4c62..43729d61 100644
--- a/styles/base.scarlet
+++ b/styles/base.scarlet
@@ -39,6 +39,9 @@ img
 	backface-visibility hidden
 	color transparent
 
+rt
+	user-select none
+
 .hidden
 	display none !important