Redesign anime pages

This commit is contained in:
Eduard Urbach 2017-11-03 12:02:13 +01:00
parent 2b51baf236
commit a459f2aa9a
18 changed files with 118 additions and 210 deletions

View File

@ -13,7 +13,7 @@ component Admin(user *arn.User, platform, family, platformVersion, kernelVersion
AdminTabs AdminTabs
.widgets .admin
//- .widget.mountable //- .widget.mountable
//- h3.widget-title Usage //- h3.widget-title Usage

View File

@ -3,7 +3,7 @@ component WebDev
h1.page-title WebDev h1.page-title WebDev
.widgets .webdev
.widget.mountable .widget.mountable
h3.widget-title Tests h3.widget-title Tests

View File

@ -1,5 +1,5 @@
component Anime(anime *arn.Anime, friends []*arn.User, listItems map[*arn.User]*arn.AnimeListItem, user *arn.User) component Anime(anime *arn.Anime, friends []*arn.User, listItems map[*arn.User]*arn.AnimeListItem, user *arn.User)
AnimeTabs(anime) //- AnimeTabs(anime)
.anime-header(data-id=anime.ID) .anime-header(data-id=anime.ID)
if anime.Image.Small != "" if anime.Image.Small != ""
@ -18,9 +18,6 @@ component Anime(anime *arn.Anime, friends []*arn.User, listItems map[*arn.User]*
.anime-info .anime-info
h1.anime-title(title=anime.Type)= anime.Title.ByUser(user) h1.anime-title(title=anime.Type)= anime.Title.ByUser(user)
//- if user && user.titleLanguage === "japanese"
//- span.second-title(title=anime.Title.English !== anime.Title.Romaji ? anime.Title.English : null)= anime.Title.Romaji
//- else
if anime.Title.Japanese != anime.Title.Canonical if anime.Title.Japanese != anime.Title.Canonical
h2.anime-alternative-title h2.anime-alternative-title
Japanese(anime.Title.Japanese) Japanese(anime.Title.Japanese)
@ -44,198 +41,94 @@ component Anime(anime *arn.Anime, friends []*arn.User, listItems map[*arn.User]*
Icon("plus") Icon("plus")
span Add to collection span Add to collection
h3.anime-section-name Ratings //- h3.anime-section-name Ratings
.anime-rating-categories //- .anime-rating-categories
.anime-rating-category(title=toString(anime.Rating.Overall)) //- .anime-rating-category(title=toString(anime.Rating.Overall))
if anime.Status == "upcoming" //- if anime.Status == "upcoming"
.anime-rating-category-name Hype //- .anime-rating-category-name Hype
else //- else
.anime-rating-category-name Overall //- .anime-rating-category-name Overall
Rating(anime.Rating.Overall, user) //- Rating(anime.Rating.Overall, user)
.anime-rating-category(title=toString(anime.Rating.Story)) //- .anime-rating-category(title=toString(anime.Rating.Story))
.anime-rating-category-name Story //- .anime-rating-category-name Story
Rating(anime.Rating.Story, user) //- Rating(anime.Rating.Story, user)
.anime-rating-category(title=toString(anime.Rating.Visuals)) //- .anime-rating-category(title=toString(anime.Rating.Visuals))
.anime-rating-category-name Visuals //- .anime-rating-category-name Visuals
Rating(anime.Rating.Visuals, user) //- Rating(anime.Rating.Visuals, user)
.anime-rating-category(title=toString(anime.Rating.Soundtrack)) //- .anime-rating-category(title=toString(anime.Rating.Soundtrack))
.anime-rating-category-name Soundtrack //- .anime-rating-category-name Soundtrack
Rating(anime.Rating.Soundtrack, user) //- Rating(anime.Rating.Soundtrack, user)
if len(friends) > 0 //- if len(friends) > 0
h3.anime-section-name Friends //- h3.anime-section-name Friends
.anime-friends //- .anime-friends
.user-avatars //- .user-avatars
each friend in friends //- each friend in friends
if friend.Nick != "" //- if friend.Nick != ""
if friend.IsActive() //- if friend.IsActive()
.mountable //- .mountable
FriendEntry(friend, listItems) //- FriendEntry(friend, listItems)
else //- else
.mountable //- .mountable
.inactive-user //- .inactive-user
FriendEntry(friend, listItems) //- FriendEntry(friend, listItems)
if anime.Relations() != nil && len(anime.Relations().Items) > 0 //- if anime.Relations() != nil && len(anime.Relations().Items) > 0
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))
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]
if len(anime.Trailers) > 0 && anime.Trailers[0].Service == "Youtube" && anime.Trailers[0].ServiceID != ""
h3.anime-section-name Video
.anime-trailer.video-container
iframe.video(src="https://www.youtube.com/embed/" + anime.Trailers[0].ServiceID + "?showinfo=0", allowfullscreen="allowfullscreen")
//- if anime.Tracks != nil && anime.Tracks.Opening != nil
//- h3.anime-section-name Tracks
//- iframe.anime-track(src="https://w.soundcloud.com/player/?url=" + anime.Tracks.Opening.URI + "?auto_play=false&hide_related=true&show_comments=true&show_user=true&show_reposts=false&visual=true")
//- if user && friendsWatching && friendsWatching.length > 0
//- include ../messages/avatar.pug
//- h3.anime-section-name Watching
//- .user-list
//- each watcher in friendsWatching
//- +avatar(watcher)
//- if len(anime.Relations) > 0
//- h3.anime-section-name Relations //- h3.anime-section-name Relations
//- .relations //- .anime-relations
//- each relation in anime.Relations //- each relation in anime.Relations().Items
//- a.relation.ajax(href="/anime/" + toString(relation.ID), title=relation.Anime().Title.Romaji) //- a.anime-relation.ajax(href=relation.Anime().Link(), title=relation.Anime().Title.ByUser(user))
//- img.anime-image.relation-image(src=relation.Anime().Image, alt=relation.Anime().Title.Romaji) //- img.anime-relation-image.lazy(data-src=relation.Anime().Image.Tiny, alt=relation.Anime().Title.ByUser(user))
//- .relation-type= arn.Capitalize(relation.Type) //- .anime-relation-type= relation.HumanReadableType()
//- .anime-relation-year
//- if relation.Anime().StartDate != ""
//- span= relation.Anime().StartDate[:4]
//- if len(anime.Genres) > 0 //- if len(anime.Trailers) > 0 && anime.Trailers[0].Service == "Youtube" && anime.Trailers[0].ServiceID != ""
//- h3.anime-section-name Genres //- h3.anime-section-name Video
//- .light-button-group //- .anime-trailer.video-container
//- each genre in anime.Genres //- iframe.video(src="https://www.youtube.com/embed/" + anime.Trailers[0].ServiceID + "?showinfo=0", allowfullscreen="allowfullscreen")
//- if genre != ""
//- a.light-button.ajax(href="/genres/" + arn.GetGenreIDByName(genre))
//- Icon(arn.GetGenreIcon(genre))
//- span= genre
//- if len(anime.Studios) > 0 //- h3.anime-section-name Popularity
//- h3.anime-section-name Studios //- .anime-rating-categories
//- .light-button-group //- .anime-rating-category
//- each studio in anime.Studios //- .anime-rating-category-name Watching
//- a.light-button(href="https://anilist.co/studio/" + toString(studio.ID), target="_blank") //- .anime-rating= anime.Popularity.Watching
//- Icon("building") //- .anime-rating-category
//- span= studio.Name //- .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
//- //-if crunchy //- //- h3.anime-section-name Reviews
//- //- h3.anime-section-name Episodes //- //- p Coming soon.
//- if canEdit
//- #staff-info
//- h3.anime-section-name Links //- h3.anime-section-name Links
//- table //- .light-button-group
//- tbody //- //- if anime.Links != nil
//- tr //- //- each link in anime.Links
//- td MyAnimeList //- //- a.light-button(href=link.URL, target="_blank")
//- td //- //- Icon("external-link")
//- input.save-on-change(id="MyAnimeList", type="text", value=providers.MyAnimeList ? providers.MyAnimeList.providerId : ", disabled=(providers.MyAnimeList && providers.MyAnimeList.similarity === 1) ? true : false) //- //- span= link.Title
//- td //- a.light-button(href="https://kitsu.io/anime/" + anime.ID, target="_blank", rel="noopener")
//- a(href="https://www.google.co.jp/search?q=site:myanimelist.net/anime+" + anime.title.romaji.replace(/ /g, "+"), target="_blank")
//- .fa.fa-search
//- td
//- tr
//- td HummingBird
//- td
//- input.save-on-change(id="HummingBird", type="text", value=providers.HummingBird ? providers.HummingBird.providerId : ", disabled=(providers.HummingBird && providers.HummingBird.similarity === 1) ? true : false)
//- td
//- a(href="https://www.google.co.jp/search?q=site:hummingbird.me/anime+" + anime.title.romaji.replace(/ /g, "+"), target="_blank")
//- .fa.fa-search
//- td
//- tr
//- td AnimePlanet
//- td
//- input.save-on-change(id="AnimePlanet", type="text", value=providers.AnimePlanet ? providers.AnimePlanet.providerId : ", disabled=(providers.AnimePlanet && providers.AnimePlanet.similarity === 1) ? true : false)
//- td
//- a(href="https://www.google.co.jp/search?q=site:anime-planet.com/anime+" + anime.title.english.replace(/ /g, "+"), target="_blank")
//- .fa.fa-search
//- td
//- - var title = providers.Nyaa ? providers.Nyaa.title : "
//- - var proposedTitle = nyaa.buildNyaaTitle(anime.title.romaji)
//- tr
//- td Nyaa
//- td
//- input.save-on-change(id="Nyaa", type="text", value=title, placeholder=proposedTitle)
//- td
//- a(href="https://www.nyaa.se/?page=search&cats=1_37&filter=0&sort=2&term=" + (title ? title.replace(/ /g, "+") : proposedTitle), target="_blank")
//- .fa.fa-search
//- td
//- if providers.Nyaa && providers.Nyaa.episodes !== undefined
//- span(class=providers.Nyaa.episodes === 0 ? "entry-error" : "entry-ok")= providers.Nyaa.episodes + " eps"
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") //- Icon("external-link")
//- span= link.Title //- span Kitsu
a.light-button(href="https://kitsu.io/anime/" + anime.ID, target="_blank", rel="noopener")
Icon("external-link")
span Kitsu
each mapping in anime.Mappings //- each mapping in anime.Mappings
a.light-button(href=mapping.Link(), target="_blank", rel="noopener") //- a.light-button(href=mapping.Link(), target="_blank", rel="noopener")
Icon("external-link") //- Icon("external-link")
span= mapping.Name() //- span= mapping.Name()
//- if providers.HummingBird //- .footer
//- a.light-button(href="https://hummingbird.me/anime/" + providers.HummingBird.providerId, target="_blank") HummingBird //- span Powered by Kitsu.
//- if providers.MyAnimeList
//- a.light-button(href="http://myanimelist.net/anime/" + providers.MyAnimeList.providerId, target="_blank") MyAnimeList
//- if providers.AnimePlanet
//- a.light-button(href="http://www.anime-planet.com/anime/" + providers.AnimePlanet.providerId, target="_blank") AnimePlanet
.footer
//- if user != nil && user.Role == "admin"
//- a(href="/api/anime/" + anime.ID) Anime API
//- span |
span Powered by Kitsu.
//- if descriptionSource
//- span= " Summary by " + summarySource + "."
//- //-
//- h3.anime-section-name Synonyms
//- if anime.title.synonyms
//- ul.anime-synonyms
//- li.anime-japanese-title= anime.title.japanese
//- each synonym in anime.title.synonyms
//- li= synonym
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")

View File

@ -20,7 +20,8 @@
margin-top 0.5rem margin-top 0.5rem
.anime-cover-image .anime-cover-image
width 142px // width 142px
width 180px
height auto height auto
border-radius 3px border-radius 3px

View File

@ -1,7 +1,7 @@
component Dashboard(schedule []*arn.UpcomingEpisode, posts []arn.Postable, soundTracks []*arn.SoundTrack, following []*arn.User, user *arn.User) component Dashboard(schedule []*arn.UpcomingEpisode, posts []arn.Postable, soundTracks []*arn.SoundTrack, following []*arn.User, user *arn.User)
h1.page-title Dashboard h1.page-title Dashboard
.widgets .dashboard
.widget.mountable .widget.mountable
h3.widget-title Schedule h3.widget-title Schedule

View File

@ -1,7 +1,7 @@
component ProfileStats(stats *utils.UserStats, viewUser *arn.User, user *arn.User, uri string) component ProfileStats(stats *utils.UserStats, viewUser *arn.User, user *arn.User, uri string)
ProfileHeader(viewUser, user, uri) ProfileHeader(viewUser, user, uri)
.widgets .stats
each pie in stats.PieCharts each pie in stats.PieCharts
.widget.mountable .widget.mountable
h3.widget-title h3.widget-title

View File

@ -1,7 +1,7 @@
component SearchResults(term string, users []*arn.User, animeResults []*arn.Anime, postResults []*arn.Post, threadResults []*arn.Thread) component SearchResults(term string, users []*arn.User, animeResults []*arn.Anime, postResults []*arn.Post, threadResults []*arn.Thread)
h1.page-title= "Search: " + term h1.page-title= "Search: " + term
.widgets .search
.widget .widget
h3.widget-title h3.widget-title
Icon("user") Icon("user")

View File

@ -1,7 +1,7 @@
component Settings(user *arn.User) component Settings(user *arn.User)
h1.page-title Settings h1.page-title Settings
.widgets .settings
.widget.mountable(data-api="/api/user/" + user.ID) .widget.mountable(data-api="/api/user/" + user.ID)
h3.widget-title h3.widget-title
Icon("user") Icon("user")

View File

@ -3,7 +3,7 @@ component Shop(user *arn.User, items []*arn.Item)
h1.page-title Shop h1.page-title Shop
.widgets.shop-items .shop-items
each item in items each item in items
ShopItem(item) ShopItem(item)

View File

@ -4,7 +4,6 @@ component Statistics(pieCharts []*arn.PieChart)
StatisticsHeader StatisticsHeader
.statistics .statistics
.widgets
each pie in pieCharts each pie in pieCharts
.widget .widget
h3.widget-title= pie.Title h3.widget-title= pie.Title

View File

@ -1,4 +1,5 @@
.statistics .statistics
horizontal-wrap-center
text-align center text-align center
.pie-chart .pie-chart

View File

@ -1,4 +1,6 @@
// package main package main
func main() {}
// import ( // import (
// "time" // "time"

View File

@ -25,8 +25,8 @@ input-focus-border-color = rgb(248, 165, 130)
// Button // Button
button-hover-color = white button-hover-color = white
button-hover-background = link-hover-color button-hover-background = link-hover-color
forum-tag-hover-color = #225db5 tab-hover-background = #225db5
// forum-tag-hover-color = rgb(46, 85, 160) // tab-hover-background = rgb(46, 85, 160)
// Forum // Forum
forum-width = 830px forum-width = 830px

View File

@ -3,12 +3,16 @@ text-color = hsl(0, 0%, 90%)
bg-color = hsl(0, 0%, 24%) bg-color = hsl(0, 0%, 24%)
link-color = hsl(81, 100%, 56%) link-color = hsl(81, 100%, 56%)
link-hover-color = hsl(81, 100%, 66%) link-hover-color = hsl(81, 100%, 66%)
ui-background = hsl(0, 0%, 18%) ui-background = hsla(0, 0%, 18%, 0.5)
tab-hover-background = link-hover-color
theme-white = bg-color
theme-black = text-color
link-hover-text-shadow = 0 0 8px hsla(81, 100%, 56%, 0.5) link-hover-text-shadow = 0 0 8px hsla(81, 100%, 56%, 0.5)
main-color = link-color main-color = link-color
link-active-color = link-hover-color link-active-color = link-hover-color
button-hover-color = bg-color button-hover-color = link-hover-color
button-hover-background = link-hover-color button-hover-background = hsla(0, 0%, 12%, 0.5)
loading-anim-color = link-color loading-anim-color = link-color

View File

@ -9,6 +9,10 @@ mixin horizontal-wrap
display flex display flex
flex-flow row wrap flex-flow row wrap
mixin horizontal-wrap-center
horizontal-wrap
justify-content center
mixin vertical mixin vertical
display flex display flex
flex-direction column flex-direction column
@ -17,6 +21,10 @@ mixin vertical-wrap
display flex display flex
flex-flow column wrap flex-flow column wrap
mixin vertical-wrap-center
horizontal-wrap
align-items center
mixin noise-light mixin noise-light
background-image url("/images/elements/noise-light.png") background-image url("/images/elements/noise-light.png")

View File

@ -44,7 +44,7 @@ sidebar-spacing-y = 0.7rem
&.active &.active
.sidebar-button .sidebar-button
// background forum-tag-hover-color // background tab-hover-background
// color white // color white
color link-color color link-color
text-shadow link-hover-text-shadow text-shadow link-hover-text-shadow

View File

@ -22,4 +22,4 @@
.info-message .info-message
color white color white
background-color forum-tag-hover-color background tab-hover-background

View File

@ -14,8 +14,8 @@
transform none transform none
&.active &.active
background-color forum-tag-hover-color background tab-hover-background
color white color theme-white
:first-child :first-child
border-left ui-border border-left ui-border