Added genres to anime pages

pages/anime/anime.pixy

@@ -20,7 +20,9 @@ component AnimeMainColumn(anime *arn.Anime, tracks []*arn.SoundTrack, episodes [
 
 			p.anime-summary.mountable= anime.Summary
 
-			AnimeActions(anime, user)
+			.anime-summary-footer
+				AnimeGenres(anime)
+				AnimeActions(anime, user)
 
 	AnimeCharacters(anime)
 	AnimeRelations(anime, user)
@@ -128,6 +130,12 @@ component AnimeLinks(anime *arn.Anime)
 					Icon("external-link")
 					span= mapping.Name()
 
+component AnimeGenres(anime *arn.Anime)
+	.anime-genres
+		each genre in anime.Genres
+			a.anime-genre.mountable.ajax(href="/genre/" + strings.ToLower(genre))
+				span= genre
+
 component AnimeRelations(anime *arn.Anime, user *arn.User)
 	if anime.Relations() != nil && len(anime.Relations().Items) > 0
 		section.anime-section.mountable

pages/anime/anime.scarlet

@@ -38,15 +38,18 @@
 	.anime-alternative-title
 		text-align left
 
-	.anime-actions
-		flex 1
-		justify-content flex-end
-		align-items flex-end
+	.anime-summary-footer
+		display flex
+		justify-content space-between
+		align-items center
+		// flex 1
+		// justify-content flex-end
+		// align-items flex-end
 
 		button,
 		.button
-			margin-right 0
-			margin-bottom 0
+			margin 0
+			margin-left 0.5rem
 
 .anime-info-table
 	margin 0

pages/anime/genres.scarlet

@@ -0,0 +1,25 @@
+.anime-genres
+	horizontal-wrap
+	justify-content center
+
+.anime-genre
+	default-transition
+	padding 0.25rem 0.75rem
+	font-size 85%
+	color text-color
+	background hsla(0, 0%, 100%, 0.1)
+	border-radius ui-element-border-radius
+	margin 0.35rem
+
+	&.mounted
+		opacity 0.8
+
+	:hover
+		color text-color
+		opacity 1.0
+		text-shadow none
+		background hsla(0, 0%, 100%, 0.2)
+
+> 800px
+	.anime-genres
+		justify-content flex-start

styles/include/config.scarlet

@@ -87,7 +87,6 @@ content-padding-top = 1.6rem
 content-line-height = 1.7em
 hover-line-size = 3px
 typography-margin = 0.4rem
-// nav-height = 3.11rem
 
 // Timings
 fade-speed = 200ms