Show relations

pages/anime/anime.pixy

@@ -36,6 +36,14 @@ component Anime(anime *arn.Anime)
 		//- 		each watcher in friendsWatching
 		//- 			+avatar(watcher)
 
+		if len(anime.Relations) > 0
+			h3.anime-header Relations
+			.relations
+				each relation in anime.Relations
+					a.relation.ajax(href="/anime/" + toString(relation.ID), title=relation.Anime().Title.Romaji)
+						img.anime-image.relation-image(src=relation.Anime().Image, alt=relation.Anime().Title.Romaji)
+						span= arn.Capitalize(relation.Type)
+
 		if len(anime.Genres) > 0
 			h3.anime-header Genres
 			.light-button-group

pages/anime/anime.styl

@@ -117,16 +117,32 @@
 	display flex
 	flex-flow row wrap
 	justify-content flex-start
-	font-size 0.9em
+	font-size 0.9rem
 
 .light-button
 	display inline-block
-	padding 0.5em 1em
+	padding 0.5rem 1rem
 	border-radius 3px
 	&:hover
 		color white !important
 		background-color linkHoverColor
 
+.relations
+	float left
+	display flex
+	flex-flow row wrap
+
+.relation
+	display flex
+	flex-flow column
+	font-size 0.9rem
+	align-items center
+	padding 0.5rem
+
+.relation-image
+	width 100px
+	height 141px
+
 .entry-error
 	color red !important