web/notify.moe
Code Issues Pull Requests Activity

Redesign

Browse Source
This commit is contained in:
Eduard Urbach 2017-11-04 11:09:19 +01:00
parent 33d7ce593c
commit b12c4130ba
9 changed files with 175 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
mixins/SoundTrack.pixy
View File

@ -1,10 +1,6 @@
component SoundTrack(track *arn.SoundTrack) component SoundTrack(track *arn.SoundTrack)
SoundTrackMedia(track, track.Media[0]) 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) component SoundTrackMedia(track *arn.SoundTrack, media *arn.ExternalMedia)
.sound-track.mountable(id=track.ID) .sound-track.mountable(id=track.ID)
SoundTrackContent(track, media) SoundTrackContent(track, media)

11
pages/anime/anime.go
View File

@ -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 // Open Graph
description := anime.Summary description := anime.Summary
@ -100,5 +109,5 @@ func Get(ctx *aero.Context) string {
ctx.Data = openGraph ctx.Data = openGraph
return ctx.HTML(components.Anime(anime, friends, friendsAnimeListItems, user)) return ctx.HTML(components.Anime(anime, tracks, friends, friendsAnimeListItems, user))
} }

216
pages/anime/anime.pixy
View File

@ -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
.anime-main-column .anime-main-column
AnimeMainColumn(anime, user) AnimeMainColumn(anime, tracks, user)
.anime-side-column .anime-side-column
AnimeSideColumn(anime, friends, listItems, user) 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) .anime-header(data-id=anime.ID)
if anime.Image.Large != "" if anime.Image.Large != ""
.anime-image-container.mountable .anime-image-container.mountable
@ -47,85 +47,116 @@ component AnimeMainColumn(anime *arn.Anime, user *arn.User)
Icon("plus") Icon("plus")
span Add to collection span Add to collection
//- h3.anime-section-name Ratings AnimeCharacters(anime)
//- .anime-rating-categories AnimeRelations(anime, user)
//- .anime-rating-category(title=toString(anime.Rating.Overall)) AnimeTracks(anime, tracks)
//- 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)
//- //- 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 if anime.Relations() != nil && len(anime.Relations().Items) > 0
section.anime-section.mountable section.anime-section.mountable
h3.anime-section-name Relations h3.anime-section-name Relations
.anime-relations .anime-relations
each relation in anime.Relations().Items 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)) img.anime-relation-image.lazy(data-src=relation.Anime().Image.Tiny, alt=relation.Anime().Title.ByUser(user))
.anime-relation-type= relation.HumanReadableType() .anime-relation-type= relation.HumanReadableType()
.anime-relation-year .anime-relation-year
if relation.Anime().StartDate != "" if relation.Anime().StartDate != ""
span= relation.Anime().StartDate[:4] 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) component AnimeTrailer(anime *arn.Anime)
if len(anime.Trailers) > 0 && anime.Trailers[0].Service == "Youtube" && anime.Trailers[0].ServiceID != "" if len(anime.Trailers) > 0 && anime.Trailers[0].Service == "Youtube" && anime.Trailers[0].ServiceID != ""
section.anime-section.mountable
h3.anime-section-name Trailer h3.anime-section-name Trailer
.anime-trailer.video-container .anime-trailer.video-container
iframe.video(src="https://www.youtube.com/embed/" + anime.Trailers[0].ServiceID + "?showinfo=0", allowfullscreen="allowfullscreen") iframe.video(src="https://www.youtube.com/embed/" + anime.Trailers[0].ServiceID + "?showinfo=0", allowfullscreen="allowfullscreen")
@ -139,6 +170,7 @@ component AnimeFriends(friends []*arn.User, listItems map[*arn.User]*arn.AnimeLi
.user-avatars .user-avatars
each friend in friends each friend in friends
if friend.Nick != "" if friend.Nick != ""
.mountable(data-mountable-type="friend")
if friend.IsActive() if friend.IsActive()
FriendEntry(friend, listItems) FriendEntry(friend, listItems)
else else
@ -149,44 +181,44 @@ component AnimeInformation(anime *arn.Anime)
section.anime-section.mountable section.anime-section.mountable
h3.anime-section-name Information h3.anime-section-name Information
table.anime-info-table table.anime-info-table
tr tr.mountable(data-mountable-type="info")
td Type: td.anime-info-key Type:
td= anime.TypeHumanReadable() td.anime-info-value= anime.TypeHumanReadable()
if anime.EpisodeCount != 0 if anime.EpisodeCount != 0
tr tr.mountable(data-mountable-type="info")
td Episodes: td.anime-info-key Episodes:
td= anime.EpisodeCount td.anime-info-value= anime.EpisodeCount
if anime.EpisodeLength != 0 if anime.EpisodeLength != 0
tr tr.mountable(data-mountable-type="info")
td Episode length: td.anime-info-key Episode length:
td= strconv.Itoa(anime.EpisodeLength) + " min." td.anime-info-value= strconv.Itoa(anime.EpisodeLength) + " min."
tr tr.mountable(data-mountable-type="info")
td Status: td.anime-info-key Status:
td= anime.StatusHumanReadable() td.anime-info-value= anime.StatusHumanReadable()
if anime.StartDate == anime.EndDate && anime.StartDate != "" && anime.EndDate != "" if anime.StartDate == anime.EndDate && anime.StartDate != "" && anime.EndDate != ""
if anime.StartDate != "" if anime.StartDate != ""
tr tr.mountable(data-mountable-type="info")
td Airing date: td.anime-info-key Airing date:
td= anime.StartDate td.anime-info-value= anime.StartDate
else else
if anime.StartDate != "" if anime.StartDate != ""
tr tr.mountable(data-mountable-type="info")
td Start date: td.anime-info-key Start date:
td= anime.StartDate td.anime-info-value= anime.StartDate
if anime.EndDate != "" if anime.EndDate != ""
tr tr.mountable(data-mountable-type="info")
td End date: td.anime-info-key End date:
td= anime.EndDate td.anime-info-value= anime.EndDate
if anime.FirstChannel != "" if anime.FirstChannel != ""
tr tr.mountable(data-mountable-type="info")
td Channel: td.anime-info-key Channel:
td= anime.FirstChannel td.anime-info-value= anime.FirstChannel
component FriendEntry(friend *arn.User, listItems map[*arn.User]*arn.AnimeListItem) 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") 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")

39
pages/anime/anime.scarlet
View File

@ -38,8 +38,11 @@
.anime-info-table .anime-info-table
margin 0 margin 0
width 100% // width 100%
max-width 600px // max-width 600px
.anime-info-value
text-align right
.anime-section .anime-section
margin-top 1rem margin-top 1rem
@ -112,25 +115,25 @@
bottom 0 bottom 0
right content-padding right content-padding
.anime-rating-categories // .anime-rating-categories
horizontal // horizontal
width 100% // width 100%
.anime-rating-category // .anime-rating-category
ui-element // ui-element
flex 1 // flex 1
text-align center // text-align center
margin 0.5rem // margin 0.5rem
.anime-rating-category-name // .anime-rating-category-name
font-size 1.3rem // font-size 1.3rem
margin-top 0.5rem // margin-top 0.5rem
.anime-rating // .anime-rating
margin 0.5rem // margin 0.5rem
letter-spacing 3px // letter-spacing 3px
font-size 1.3rem // font-size 1.3rem
color link-color // color link-color
.anime-widget .anime-widget
margin-top 0.6rem margin-top 0.6rem

2
pages/anime/characters.pixy
View File

@ -7,5 +7,5 @@ component AnimeCharacters(anime *arn.Anime)
.characters .characters
each character in anime.Characters().Items each character in anime.Characters().Items
if character.Role == "main" && character.Character() != nil if character.Role == "main" && character.Character() != nil
.mountable .mountable(data-mountable-type="character")
Character(character.Character()) Character(character.Character())

8
pages/anime/tracks.pixy
View File

@ -1,7 +1,9 @@
component AnimeTracks(anime *arn.Anime, tracks []*arn.SoundTrack) component AnimeTracks(anime *arn.Anime, tracks []*arn.SoundTrack)
AnimeTabs(anime) //- AnimeTabs(anime)
if len(tracks) > 0
.anime-section.mountable
h3.anime-section-name Tracks h3.anime-section-name Tracks
.sound-tracks .anime-soundtracks
each track in tracks each track in tracks
SoundTrack(track) ExternalMedia(track.Media[0])

2
pages/profile/followers.scarlet
View File

@ -1,2 +1,2 @@
.inactive-user .inactive-user
opacity 0.25 // opacity 0.25

6
styles/include/dark.scarlet
View File

@ -7,14 +7,14 @@ saturation = 100%
// Derived colors // Derived colors
text-color = hsl(0, 0%, 90%) text-color = hsl(0, 0%, 90%)
bg-color = hsl(0, 0%, 24%) bg-color = hsl(0, 0%, 24%)
link-color = hsl(hue, saturation, 56%) link-color = hsl(hue, saturation, 66%)
link-hover-color = hsl(hue, saturation, 66%) link-hover-color = hsl(hue, saturation, 76%)
ui-background = hsla(0, 0%, 8%, 0.5) ui-background = hsla(0, 0%, 8%, 0.5)
theme-white = bg-color theme-white = bg-color
theme-black = text-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 main-color = link-color
link-active-color = link-hover-color link-active-color = link-hover-color

2
styles/light-button.scarlet
View File

@ -10,5 +10,5 @@
font-size 0.9rem font-size 0.9rem
:hover :hover
color white !important color theme-white !important
background-color link-hover-color background-color link-hover-color