From d7fb490c8a11929e71f99bec10065bbccf35e07f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Scott=20Rayapoull=C3=A9?= <soulcramer@gmail.com>
Date: Sun, 30 Sep 2018 02:00:28 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Display=20the=20trailers=20with?=
 =?UTF-8?q?=20a=20better=20visual=20and=20responsive.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/anime/trailers.pixy    |  9 ++++-----
 pages/anime/trailers.scarlet | 27 +++++++++++----------------
 2 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/pages/anime/trailers.pixy b/pages/anime/trailers.pixy
index a529d3a6e..cbde2b046 100644
--- a/pages/anime/trailers.pixy
+++ b/pages/anime/trailers.pixy
@@ -1,13 +1,12 @@
 component AnimeTrailers(anime *arn.Anime, user *arn.User)
+	h1.mountable
+		a(href=anime.Link())= anime.Title.ByUser(user)
 	if anime.Trailers != nil && len(anime.Trailers) > 0
 		.anime-section.mountable
 			h3.anime-section-name
 				a(href=anime.TrailersLink()) Trailers
-
-			.trailers.anime-trailers
+			.anime-trailers
 				each trailer in anime.Trailers
 					if trailer.ServiceID != ""
 						.trailer.mountable(data-mountable-type="trailer")
-							.anime-trailer.video-container
-								//iframe.video(src="https://www.youtube.com/embed/" + trailer.ServiceID + "?showinfo=0", allowfullscreen)
-								ExternalMedia(trailer)
\ No newline at end of file
+							iframe.lazy(data-src=trailer.EmbedLink(), allowfullscreen)
\ No newline at end of file
diff --git a/pages/anime/trailers.scarlet b/pages/anime/trailers.scarlet
index d6f06fd20..3a7843c1e 100644
--- a/pages/anime/trailers.scarlet
+++ b/pages/anime/trailers.scarlet
@@ -1,27 +1,22 @@
 .anime-trailers
-	vertical
+	horizontal-wrap
+	justify-content space-around
 	.trailer
 		margin 1rem 0
-		border-bottom-left-radius ui-element-border-radius !important
-		border-top-left-radius ui-element-border-radius !important
 		box-shadow shadow-light
-		min-height 200px
+		min-height 180px
 		border-radius ui-element-border-radius
+		width 320px
 		overflow hidden
+		display flex
 
 		iframe
 			width 100%
 
->
-500px
-.anime-trailers
-	horizontal-wrap
-	justify-content flex-start
+> 500px
+	.anime-trailers
+		justify-content flex-start
 
-.trailer
-	max-width 200px
-	margin calc(content-padding / 2)
-	min-height 112px
-	height 112px
-	margin soundtrack-margin
-	margin-bottom media-bottom-margin
\ No newline at end of file
+		.trailer
+			margin calc(content-padding / 2)
+			margin-bottom media-bottom-margin
\ No newline at end of file