Redesign

2017-11-04 11:09:19 +01:00 · 2017-11-04 11:09:19 +01:00 · b12c4130ba
commit b12c4130ba
parent 33d7ce593c
9 changed files with 175 additions and 133 deletions
--- a/mixins/SoundTrack.pixy
+++ b/mixins/SoundTrack.pixy
@ -1,9 +1,5 @@
 component SoundTrack(track *arn.SoundTrack)
 	SoundTrackMedia(track, track.Media[0])
-	
-component SoundTrackAllMedia(track *arn.SoundTrack)
-	each media in track.Media
-		SoundTrackMedia(track, media)

 component SoundTrackMedia(track *arn.SoundTrack, media *arn.ExternalMedia)
 	.sound-track.mountable(id=track.ID)
--- a/pages/anime/anime.go
+++ b/pages/anime/anime.go
@ -70,6 +70,15 @@ func Get(ctx *aero.Context) string {
 		})
 	}

+	// Soundtracks
+	tracks, err := arn.FilterSoundTracks(func(track *arn.SoundTrack) bool {
+		return !track.IsDraft && len(track.Media) > 0 && arn.Contains(track.Tags, "anime:"+anime.ID)
+	})
+
+	if err != nil {
+		return ctx.Error(http.StatusNotFound, "Error fetching soundtracks", err)
+	}
+
 	// Open Graph
 	description := anime.Summary

@ -100,5 +109,5 @@ func Get(ctx *aero.Context) string {

 	ctx.Data = openGraph

-	return ctx.HTML(components.Anime(anime, friends, friendsAnimeListItems, user))
+	return ctx.HTML(components.Anime(anime, tracks, friends, friendsAnimeListItems, user))
 }
--- a/pages/anime/anime.pixy
+++ b/pages/anime/anime.pixy
@ -1,11 +1,11 @@
-component Anime(anime *arn.Anime, friends []*arn.User, listItems map[*arn.User]*arn.AnimeListItem, user *arn.User)
+component Anime(anime *arn.Anime, tracks []*arn.SoundTrack, friends []*arn.User, listItems map[*arn.User]*arn.AnimeListItem, user *arn.User)
 	.anime
 		.anime-main-column
-			AnimeMainColumn(anime, user)
+			AnimeMainColumn(anime, tracks, user)
 		.anime-side-column
 			AnimeSideColumn(anime, friends, listItems, user)

-component AnimeMainColumn(anime *arn.Anime, user *arn.User)
+component AnimeMainColumn(anime *arn.Anime, tracks []*arn.SoundTrack, user *arn.User)
 	.anime-header(data-id=anime.ID)
 		if anime.Image.Large != ""
 			.anime-image-container.mountable
@ -47,88 +47,119 @@ component AnimeMainColumn(anime *arn.Anime, user *arn.User)
 					Icon("plus")
 					span Add to collection

-	//- h3.anime-section-name Ratings
-	//- .anime-rating-categories
-	//- 	.anime-rating-category(title=toString(anime.Rating.Overall))
-	//- 		if anime.Status == "upcoming"
-	//- 			.anime-rating-category-name Hype
-	//- 		else
-	//- 			.anime-rating-category-name Overall
-	//- 		Rating(anime.Rating.Overall, user)
-	//- 	.anime-rating-category(title=toString(anime.Rating.Story))
-	//- 		.anime-rating-category-name Story
-	//- 		Rating(anime.Rating.Story, user)
-	//- 	.anime-rating-category(title=toString(anime.Rating.Visuals))
-	//- 		.anime-rating-category-name Visuals
-	//- 		Rating(anime.Rating.Visuals, user)
-	//- 	.anime-rating-category(title=toString(anime.Rating.Soundtrack))
-	//- 		.anime-rating-category-name Soundtrack
-	//- 		Rating(anime.Rating.Soundtrack, user)
+	AnimeCharacters(anime)
+	AnimeRelations(anime, user)
+	AnimeTracks(anime, tracks)
+	
+	//- //- h3.anime-section-name Reviews
+	//- //- p Coming soon.

+	//- .footer
+	//- 	span Powered by Kitsu.
+
+component AnimeRatings(anime *arn.Anime, user *arn.User)
+	section.anime-section.mountable
+		h3.anime-section-name Ratings
+
+		table.anime-info-table
+			tr.mountable(data-mountable-type="info")
+				td.anime-info-key
+					if anime.Status == "upcoming"
+						span Hype:
+					else
+						span Overall:
+				td.anime-info-value
+					Rating(anime.Rating.Overall, user)
+
+			if anime.Rating.Story > 0
+				tr.mountable(data-mountable-type="info")
+					td.anime-info-key Story:
+					td.anime-info-value
+						Rating(anime.Rating.Story, user)
+
+			if anime.Rating.Visuals > 0
+				tr.mountable(data-mountable-type="info")
+					td.anime-info-key Visuals:
+					td.anime-info-value
+						Rating(anime.Rating.Visuals, user)
+
+			if anime.Rating.Soundtrack > 0
+				tr.mountable(data-mountable-type="info")
+					td.anime-info-key Soundtrack:
+					td.anime-info-value
+						Rating(anime.Rating.Soundtrack, user)
+
+component AnimePopularity(anime *arn.Anime)
+	if anime.Popularity.Total() > 0
+		section.anime-section.mountable
+			h3.anime-section-name Popularity
+
+			table.anime-info-table
+				if anime.Popularity.Watching > 0
+					tr.mountable(data-mountable-type="info")
+						td.anime-info-key Watching:
+						td.anime-info-value= anime.Popularity.Watching
+
+				if anime.Popularity.Completed > 0
+					tr.mountable(data-mountable-type="info")
+						td.anime-info-key Completed:
+						td.anime-info-value= anime.Popularity.Completed
+				
+				if anime.Popularity.Planned > 0
+					tr.mountable(data-mountable-type="info")
+						td.anime-info-key Planned:
+						td.anime-info-value= anime.Popularity.Planned
+
+				if anime.Popularity.Hold > 0
+					tr.mountable(data-mountable-type="info")
+						td.anime-info-key On hold:
+						td.anime-info-value= anime.Popularity.Hold
+
+				if anime.Popularity.Dropped > 0
+					tr.mountable(data-mountable-type="info")
+						td.anime-info-key Dropped:
+						td.anime-info-value= anime.Popularity.Dropped
+
+component AnimeLinks(anime *arn.Anime)
+	section.anime-section.mountable
+		h3.anime-section-name Links
+		.light-button-group
+			a.light-button(href="https://kitsu.io/anime/" + anime.ID, target="_blank", rel="noopener")
+				Icon("external-link")
+				span Kitsu
+			
+			each mapping in anime.Mappings
+				a.light-button(href=mapping.Link(), target="_blank", rel="noopener")
+					Icon("external-link")
+					span= mapping.Name()
+
+component AnimeSideColumn(anime *arn.Anime, friends []*arn.User, listItems map[*arn.User]*arn.AnimeListItem, user *arn.User)
+	AnimeTrailer(anime)
+	AnimeInformation(anime)
+	AnimeRatings(anime, user)
+	AnimePopularity(anime)
+	AnimeFriends(friends, listItems)
+	AnimeLinks(anime)
+
+component AnimeRelations(anime *arn.Anime, user *arn.User)
 	if anime.Relations() != nil && len(anime.Relations().Items) > 0
 		section.anime-section.mountable
 			h3.anime-section-name Relations
 			.anime-relations
 				each relation in anime.Relations().Items
-					a.anime-relation.ajax(href=relation.Anime().Link(), title=relation.Anime().Title.ByUser(user))
+					a.anime-relation.mountable.ajax(href=relation.Anime().Link(), title=relation.Anime().Title.ByUser(user), data-mountable-type="relation")
 						img.anime-relation-image.lazy(data-src=relation.Anime().Image.Tiny, alt=relation.Anime().Title.ByUser(user))
 						.anime-relation-type= relation.HumanReadableType()
 						.anime-relation-year
 							if relation.Anime().StartDate != ""
 								span= relation.Anime().StartDate[:4]

-	AnimeCharacters(anime)
-
-	//- h3.anime-section-name Popularity
-	//- .anime-rating-categories
-	//- 	.anime-rating-category
-	//- 		.anime-rating-category-name Watching
-	//- 		.anime-rating= anime.Popularity.Watching
-	//- 	.anime-rating-category
-	//- 		.anime-rating-category-name Completed
-	//- 		.anime-rating= anime.Popularity.Completed
-	//- 	.anime-rating-category
-	//- 		.anime-rating-category-name Planned
-	//- 		.anime-rating= anime.Popularity.Planned
-	//- 	.anime-rating-category
-	//- 		.anime-rating-category-name Hold
-	//- 		.anime-rating= anime.Popularity.Hold
-	//- 	.anime-rating-category
-	//- 		.anime-rating-category-name Dropped
-	//- 		.anime-rating= anime.Popularity.Dropped
-	
-	//- //- h3.anime-section-name Reviews
-	//- //- p Coming soon.
-
-	//- h3.anime-section-name Links
-	//- .light-button-group
-	//- 	//- if anime.Links != nil
-	//- 	//- 	each link in anime.Links
-	//- 	//- 		a.light-button(href=link.URL, target="_blank")
-	//- 	//- 			Icon("external-link")
-	//- 	//- 			span= link.Title
-	//- 	a.light-button(href="https://kitsu.io/anime/" + anime.ID, target="_blank", rel="noopener")
-	//- 		Icon("external-link")
-	//- 		span Kitsu
-		
-	//- 	each mapping in anime.Mappings
-	//- 		a.light-button(href=mapping.Link(), target="_blank", rel="noopener")
-	//- 			Icon("external-link")
-	//- 			span= mapping.Name()
-
-	//- .footer
-	//- 	span Powered by Kitsu.
-
-component AnimeSideColumn(anime *arn.Anime, friends []*arn.User, listItems map[*arn.User]*arn.AnimeListItem, user *arn.User)
-	AnimeTrailer(anime)
-	AnimeInformation(anime)
-	AnimeFriends(friends, listItems)
-
 component AnimeTrailer(anime *arn.Anime)
 	if len(anime.Trailers) > 0 && anime.Trailers[0].Service == "Youtube" && anime.Trailers[0].ServiceID != ""
-		h3.anime-section-name Trailer
-		.anime-trailer.video-container
-			iframe.video(src="https://www.youtube.com/embed/" + anime.Trailers[0].ServiceID + "?showinfo=0", allowfullscreen="allowfullscreen")
+		section.anime-section.mountable
+			h3.anime-section-name Trailer
+			.anime-trailer.video-container
+				iframe.video(src="https://www.youtube.com/embed/" + anime.Trailers[0].ServiceID + "?showinfo=0", allowfullscreen="allowfullscreen")

 component AnimeFriends(friends []*arn.User, listItems map[*arn.User]*arn.AnimeListItem)
 	if len(friends) > 0
@ -139,54 +170,55 @@ component AnimeFriends(friends []*arn.User, listItems map[*arn.User]*arn.AnimeLi
 				.user-avatars
 					each friend in friends
 						if friend.Nick != ""
-							if friend.IsActive()
-								FriendEntry(friend, listItems)
-							else
-								.inactive-user
+							.mountable(data-mountable-type="friend")
+								if friend.IsActive()
 									FriendEntry(friend, listItems)
+								else
+									.inactive-user
+										FriendEntry(friend, listItems)

 component AnimeInformation(anime *arn.Anime)
 	section.anime-section.mountable
 		h3.anime-section-name Information
 		table.anime-info-table
-			tr
-				td Type:
-				td= anime.TypeHumanReadable()
+			tr.mountable(data-mountable-type="info")
+				td.anime-info-key Type:
+				td.anime-info-value= anime.TypeHumanReadable()

 			if anime.EpisodeCount != 0
-				tr
-					td Episodes:
-					td= anime.EpisodeCount
+				tr.mountable(data-mountable-type="info")
+					td.anime-info-key Episodes:
+					td.anime-info-value= anime.EpisodeCount

 			if anime.EpisodeLength != 0
-				tr
-					td Episode length:
-					td= strconv.Itoa(anime.EpisodeLength) + " min."
+				tr.mountable(data-mountable-type="info")
+					td.anime-info-key Episode length:
+					td.anime-info-value= strconv.Itoa(anime.EpisodeLength) + " min."

-			tr
-				td Status:
-				td= anime.StatusHumanReadable()
+			tr.mountable(data-mountable-type="info")
+				td.anime-info-key Status:
+				td.anime-info-value= anime.StatusHumanReadable()
 			
 			if anime.StartDate == anime.EndDate && anime.StartDate != "" && anime.EndDate != ""
 				if anime.StartDate != ""
-					tr
-						td Airing date:
-						td= anime.StartDate
+					tr.mountable(data-mountable-type="info")
+						td.anime-info-key Airing date:
+						td.anime-info-value= anime.StartDate
 			else
 				if anime.StartDate != ""
-					tr
-						td Start date:
-						td= anime.StartDate
+					tr.mountable(data-mountable-type="info")
+						td.anime-info-key Start date:
+						td.anime-info-value= anime.StartDate

 				if anime.EndDate != ""
-					tr
-						td End date:
-						td= anime.EndDate
+					tr.mountable(data-mountable-type="info")
+						td.anime-info-key End date:
+						td.anime-info-value= anime.EndDate

 			if anime.FirstChannel != ""
-				tr
-					td Channel:
-					td= anime.FirstChannel
+				tr.mountable(data-mountable-type="info")
+					td.anime-info-key Channel:
+					td.anime-info-value= anime.FirstChannel

 component FriendEntry(friend *arn.User, listItems map[*arn.User]*arn.AnimeListItem)
 	CustomAvatar(friend, listItems[friend].Link(friend.Nick), friend.Nick + " => " + listItems[friend].Status + " | " + toString(listItems[friend].Episodes) + " eps | " + fmt.Sprintf("%.1f", listItems[friend].Rating.Overall) + " rating")
--- a/pages/anime/anime.scarlet
+++ b/pages/anime/anime.scarlet
@ -38,8 +38,11 @@

 .anime-info-table
 	margin 0
-	width 100%
-	max-width 600px
+	// width 100%
+	// max-width 600px
+
+.anime-info-value
+	text-align right

 .anime-section
 	margin-top 1rem
@ -112,25 +115,25 @@
 		bottom 0
 		right content-padding

-.anime-rating-categories
-	horizontal
-	width 100%
+// .anime-rating-categories
+// 	horizontal
+// 	width 100%

-.anime-rating-category
-	ui-element
-	flex 1
-	text-align center
-	margin 0.5rem
+// .anime-rating-category
+// 	ui-element
+// 	flex 1
+// 	text-align center
+// 	margin 0.5rem

-.anime-rating-category-name
-	font-size 1.3rem
-	margin-top 0.5rem
+// .anime-rating-category-name
+// 	font-size 1.3rem
+// 	margin-top 0.5rem

-.anime-rating
-	margin 0.5rem
-	letter-spacing 3px
-	font-size 1.3rem
-	color link-color
+// .anime-rating
+// 	margin 0.5rem
+// 	letter-spacing 3px
+// 	font-size 1.3rem
+// 	color link-color

 .anime-widget
 	margin-top 0.6rem
--- a/pages/anime/characters.pixy
+++ b/pages/anime/characters.pixy
@ -7,5 +7,5 @@ component AnimeCharacters(anime *arn.Anime)
 			.characters
 				each character in anime.Characters().Items
 					if character.Role == "main" && character.Character() != nil
-						.mountable
+						.mountable(data-mountable-type="character")
 							Character(character.Character())
--- a/pages/anime/tracks.pixy
+++ b/pages/anime/tracks.pixy
@ -1,7 +1,9 @@
 component AnimeTracks(anime *arn.Anime, tracks []*arn.SoundTrack)
-	AnimeTabs(anime)
+	//- AnimeTabs(anime)

-	h3.anime-section-name Tracks
-	.sound-tracks
-		each track in tracks
-			SoundTrack(track)
+	if len(tracks) > 0
+		.anime-section.mountable
+			h3.anime-section-name Tracks
+			.anime-soundtracks
+				each track in tracks
+					ExternalMedia(track.Media[0])
--- a/pages/profile/followers.scarlet
+++ b/pages/profile/followers.scarlet
@ -1,2 +1,2 @@
 .inactive-user
-	opacity 0.25
+	// opacity 0.25
--- a/styles/include/dark.scarlet
+++ b/styles/include/dark.scarlet
@ -7,14 +7,14 @@ saturation = 100%
 // Derived colors
 text-color = hsl(0, 0%, 90%)
 bg-color = hsl(0, 0%, 24%)
-link-color = hsl(hue, saturation, 56%)
-link-hover-color = hsl(hue, saturation, 66%)
+link-color = hsl(hue, saturation, 66%)
+link-hover-color = hsl(hue, saturation, 76%)
 ui-background = hsla(0, 0%, 8%, 0.5)

 theme-white = bg-color
 theme-black = text-color

-link-hover-text-shadow = 0 0 8px hsla(hue, saturation, 56%, 0.5)
+link-hover-text-shadow = 0 0 8px hsla(hue, saturation, 66%, 0.5)

 main-color = link-color
 link-active-color = link-hover-color
--- a/styles/light-button.scarlet
+++ b/styles/light-button.scarlet
@ -10,5 +10,5 @@
 	font-size 0.9rem

 	:hover
-		color white !important
+		color theme-white !important
 		background-color link-hover-color