From b12c4130ba398011a2c5c25612e65c6b2f8af6c1 Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Sat, 4 Nov 2017 11:09:19 +0100 Subject: [PATCH] Redesign --- mixins/SoundTrack.pixy | 4 - pages/anime/anime.go | 11 +- pages/anime/anime.pixy | 230 ++++++++++++++++++-------------- pages/anime/anime.scarlet | 39 +++--- pages/anime/characters.pixy | 2 +- pages/anime/tracks.pixy | 12 +- pages/profile/followers.scarlet | 2 +- styles/include/dark.scarlet | 6 +- styles/light-button.scarlet | 2 +- 9 files changed, 175 insertions(+), 133 deletions(-) diff --git a/mixins/SoundTrack.pixy b/mixins/SoundTrack.pixy index fa96421a..865c648d 100644 --- 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) diff --git a/pages/anime/anime.go b/pages/anime/anime.go index 0277f053..fd1eee5f 100644 --- 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)) } diff --git a/pages/anime/anime.pixy b/pages/anime/anime.pixy index e07cb0a8..78134249 100644 --- 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") diff --git a/pages/anime/anime.scarlet b/pages/anime/anime.scarlet index 0e6e152c..274f9e50 100644 --- 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 diff --git a/pages/anime/characters.pixy b/pages/anime/characters.pixy index 48a8d9f6..8700c1f4 100644 --- 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()) \ No newline at end of file diff --git a/pages/anime/tracks.pixy b/pages/anime/tracks.pixy index f1a7bea2..01449484 100644 --- 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) \ No newline at end of file + if len(tracks) > 0 + .anime-section.mountable + h3.anime-section-name Tracks + .anime-soundtracks + each track in tracks + ExternalMedia(track.Media[0]) \ No newline at end of file diff --git a/pages/profile/followers.scarlet b/pages/profile/followers.scarlet index 2550fa2b..adf658da 100644 --- a/pages/profile/followers.scarlet +++ b/pages/profile/followers.scarlet @@ -1,2 +1,2 @@ .inactive-user - opacity 0.25 \ No newline at end of file + // opacity 0.25 \ No newline at end of file diff --git a/styles/include/dark.scarlet b/styles/include/dark.scarlet index bfa78661..e02ea6ff 100644 --- 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 diff --git a/styles/light-button.scarlet b/styles/light-button.scarlet index 23308078..dbcc2bb8 100644 --- 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 \ No newline at end of file