From 855671422816fd618d99bc5c5ea95f187d744e4e Mon Sep 17 00:00:00 2001
From: Eduard Urbach <e.urbach@gmail.com>
Date: Mon, 4 Dec 2017 15:32:59 +0100
Subject: [PATCH] Started working on new episodes

---
 pages/anime/episode.scarlet | 35 ++++++++++++++++-----
 pages/anime/episodes.pixy   | 63 +++++++++++++++++++++++--------------
 styles/input.scarlet        | 19 ++++++-----
 3 files changed, 79 insertions(+), 38 deletions(-)

diff --git a/pages/anime/episode.scarlet b/pages/anime/episode.scarlet
index e84bdd8e..f721843f 100644
--- a/pages/anime/episode.scarlet
+++ b/pages/anime/episode.scarlet
@@ -1,19 +1,40 @@
 .episodes
-	max-width 100%
+	vertical
+
+> 700px
+	.episodes
+		horizontal-wrap
 
 .episode
-	horizontal
+	ui-element
+	vertical
+	button-hover
+	flex 0
+	flex-basis 150px
+	margin 0.5rem
+	padding 0.5rem
+
+	// :hover
+	// 	background-color table-row-hover-background
 
 .episode-number
-	flex-basis 3.2rem
-	// text-align right
+	display flex
+	justify-content center
+	align-items center
+	font-size 2rem
+	line-height 1.7em
 
 .episode-title
-	flex 1
+	text-align center
+	font-size 0.7rem
+	opacity 0.8
+	clip-long-text
 
 .episode-airing-date-start
-	flex-basis 150px
-	text-align right
+	display flex
+	justify-content center
+	font-size 0.8rem
+	opacity 0.6
 
 < 800px
 	.episode-airing-date-start
diff --git a/pages/anime/episodes.pixy b/pages/anime/episodes.pixy
index 9f8dabd3..7b38658a 100644
--- a/pages/anime/episodes.pixy
+++ b/pages/anime/episodes.pixy
@@ -2,26 +2,43 @@ component AnimeEpisodes(episodes []*arn.AnimeEpisode, user *arn.User)
 	if len(episodes) > 0
 		.anime-section.mountable
 			h3.anime-section-name Episodes
-			table.episodes
-				tbody
-					each episode in episodes
-						tr.episode.mountable(data-mountable-type="episode")
-							td.episode-number
-								if episode.Number != -1
-									span= episode.Number
-							td.episode-title
-								if episode.Title.Japanese != ""
-									Japanese(episode.Title.Japanese)
-								else
-									span -
-							if user != nil && user.Location.CountryName != "Japan"
-								td.episode-actions
-									for name, link := range episode.Links
-										a(href=link, target="_blank", rel="noopener", title="Watch episode " + toString(episode.Number) + " on " + name)
-											RawIcon("eye")
-									//- a(href="https://translate.google.com/#ja/en/" + episode.Title.Japanese, target="_blank", rel="noopener")
-									//- 	RawIcon("google")
-							if validator.IsValidDate(episode.AiringDate.Start)
-								td.episode-airing-date-start.utc-airing-date(data-start-date=episode.AiringDate.Start, data-end-date=episode.AiringDate.End, data-episode-number=episode.Number)= episode.AiringDate.StartDateHuman()
-							else
-								td.episode-airing-date-start
\ No newline at end of file
+			.episodes
+				each episode in episodes
+					.episode.mountable(data-mountable-type="episode")
+						.episode-number
+							if episode.Number != -1
+								span= episode.Number
+						
+						.episode-title= episode.Title.Japanese
+							//- if episode.Title.Japanese != ""
+							//- 	Japanese(episode.Title.Japanese)
+							//- else
+							//- 	span -
+						
+						if validator.IsValidDate(episode.AiringDate.Start)
+							.episode-airing-date-start.utc-airing-date(data-start-date=episode.AiringDate.Start, data-end-date=episode.AiringDate.End, data-episode-number=episode.Number)= episode.AiringDate.StartDateHuman()
+			
+			
+			//- table.episodes
+			//- 	tbody
+			//- 		each episode in episodes
+			//- 			tr.episode.mountable(data-mountable-type="episode")
+			//- 				td.episode-number
+			//- 					if episode.Number != -1
+			//- 						span= episode.Number
+			//- 				td.episode-title
+			//- 					if episode.Title.Japanese != ""
+			//- 						Japanese(episode.Title.Japanese)
+			//- 					else
+			//- 						span -
+			//- 				if user != nil && user.Location.CountryName != "Japan"
+			//- 					td.episode-actions
+			//- 						for name, link := range episode.Links
+			//- 							a(href=link, target="_blank", rel="noopener", title="Watch episode " + toString(episode.Number) + " on " + name)
+			//- 								RawIcon("eye")
+			//- 						//- a(href="https://translate.google.com/#ja/en/" + episode.Title.Japanese, target="_blank", rel="noopener")
+			//- 						//- 	RawIcon("google")
+			//- 				if validator.IsValidDate(episode.AiringDate.Start)
+			//- 					td.episode-airing-date-start.utc-airing-date(data-start-date=episode.AiringDate.Start, data-end-date=episode.AiringDate.End, data-episode-number=episode.Number)= episode.AiringDate.StartDateHuman()
+			//- 				else
+			//- 					td.episode-airing-date-start
\ No newline at end of file
diff --git a/styles/input.scarlet b/styles/input.scarlet
index dc11f471..c21400e6 100644
--- a/styles/input.scarlet
+++ b/styles/input.scarlet
@@ -4,6 +4,16 @@ mixin input-focus
 		// TODO: Replace with alpha(main-color, 20%) function
 		box-shadow 0 0 6px rgba(248, 165, 130, 0.2) !important
 
+mixin button-hover
+	:hover,
+	&.active
+		cursor pointer
+		color button-hover-color
+		background button-hover-background
+
+	:active
+		transform translateY(3px)
+
 input, textarea, button, .button, select
 	ui-element
 	font-family inherit
@@ -34,14 +44,7 @@ button, .button
 	color link-color
 	align-items center
 
-	:hover,
-	&.active
-		cursor pointer
-		color button-hover-color
-		background button-hover-background
-
-	:active
-		transform translateY(3px)
+	button-hover
 
 select
 	appearance none