From ac0daaeee65abf022e695552c25564f51a17dd5a Mon Sep 17 00:00:00 2001
From: Eduard Urbach <e.urbach@gmail.com>
Date: Mon, 16 Apr 2018 19:02:40 +0200
Subject: [PATCH] Improved AMV design & layout

---
 pages/amv/amv.pixy    | 43 +++++++++++++++++++++++++++----------------
 pages/amv/amv.scarlet | 31 +++++++++++++++++++++++--------
 2 files changed, 50 insertions(+), 24 deletions(-)

diff --git a/pages/amv/amv.pixy b/pages/amv/amv.pixy
index f1182bcb..39c54919 100644
--- a/pages/amv/amv.pixy
+++ b/pages/amv/amv.pixy
@@ -1,33 +1,44 @@
 component AMVPage(amv *arn.AMV, user *arn.User)
 	AMVTabs(amv, user)
 	
-	.amv-page
+	.widget-form.amv-page
 		if amv.Title.String() == ""
-			h1.mountable untitled
+			h1.amv-page-title.mountable untitled
 		else
-			h1.mountable= amv.Title.ByUser(user)
+			h1.amv-page-title.mountable= amv.Title.ByUser(user)
 		
 		if amv.File != ""
 			AMV(amv, user)
 		
 		if amv.MainAnimeID != "" || len(amv.ExtraAnimeIDs) > 0
-			h3.mountable Anime
+			.widget
+				h3.widget-title.mountable Anime
 
-			if amv.MainAnimeID != ""
-				.amv-main-anime.mountable
-					AnimeGrid([]*arn.Anime{amv.MainAnime()}, user)
-			
-			if len(amv.ExtraAnimeIDs) > 0
-				.amv-extra-anime.mountable
-					AnimeGridSmall(amv.ExtraAnime(), user)
+				if amv.MainAnimeID != ""
+					.amv-main-anime.mountable
+						AnimeGrid([]*arn.Anime{amv.MainAnime()}, user)
+				
+				if len(amv.ExtraAnimeIDs) > 0
+					.amv-extra-anime.mountable
+						AnimeGridSmall(amv.ExtraAnime(), user)
 		
 		if len(amv.Links) > 0
-			//- h3.mountable Links
+			.widget
+				h3.widget-title.mountable Links
 
-			ul.amv-links
-				each link in amv.Links
-					li.amv-link.mountable
-						a(href=link.URL)= link.Title
+				.light-button-group.amv-links
+					each link in amv.Links
+						a.light-button.amv-link.mountable(href=link.URL)
+							Icon("external-link")
+							span= link.Title
+		
+		if len(amv.Tags) > 0
+			.widget
+				h3.widget-title.mountable Tags
+
+				.tags.mountable
+					each tag in amv.Tags
+						.tag.mountable= tag
 
 component AnimeGridSmall(animes []*arn.Anime, user *arn.User)
 	each anime in animes
diff --git a/pages/amv/amv.scarlet b/pages/amv/amv.scarlet
index ed2e0c7c..22fc7dfd 100644
--- a/pages/amv/amv.scarlet
+++ b/pages/amv/amv.scarlet
@@ -13,14 +13,23 @@
 
 .amv-page
 	vertical
-	align-items center
+	align-items flex-start
+
+	.widget
+		justify-content flex-start
+		width 100%
+
+.amv-page-title
+	width 100%
+	text-align center
 
 .amv-main-anime
+	display flex
 	margin-bottom 1rem
 
 .amv-extra-anime
 	horizontal-wrap
-	justify-content center
+	justify-content left
 
 	a
 		display block
@@ -30,12 +39,10 @@
 		border-radius ui-element-border-radius
 
 .amv-links
-	margin-top 1rem
+	//
 
 .amv-link
-	list-style none
-	margin-left 0
-	text-align center
+	//
 
 > 500px
 	.amvs
@@ -44,5 +51,13 @@
 		margin-top 0
 
 	.amv
-		max-width 380px
-		margin calc(content-padding / 2)
\ No newline at end of file
+		max-width 200px
+		margin calc(content-padding / 2)
+
+	.amvs
+		.amv
+			max-width 520px
+
+	.amv-page
+		.amv
+			max-width 854px
\ No newline at end of file