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
.widgets
.admin
//- .widget.mountable
//- h3.widget-title Usage

View File

@ -3,7 +3,7 @@ component WebDev
h1.page-title WebDev
.widgets
.webdev
.widget.mountable
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)
AnimeTabs(anime)
//- AnimeTabs(anime)
.anime-header(data-id=anime.ID)
if anime.Image.Small != ""
@ -18,9 +18,6 @@ component Anime(anime *arn.Anime, friends []*arn.User, listItems map[*arn.User]*
.anime-info
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
h2.anime-alternative-title
Japanese(anime.Title.Japanese)
@ -44,198 +41,94 @@ component Anime(anime *arn.Anime, friends []*arn.User, listItems map[*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)
//- 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)
if len(friends) > 0
h3.anime-section-name Friends
//- if len(friends) > 0
//- h3.anime-section-name Friends
.anime-friends
.user-avatars
each friend in friends
if friend.Nick != ""
if friend.IsActive()
.mountable
FriendEntry(friend, listItems)
else
.mountable
.inactive-user
FriendEntry(friend, listItems)
//- .anime-friends
//- .user-avatars
//- each friend in friends
//- if friend.Nick != ""
//- if friend.IsActive()
//- .mountable
//- FriendEntry(friend, listItems)
//- else
//- .mountable
//- .inactive-user
//- FriendEntry(friend, listItems)
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
//- if anime.Relations() != nil && len(anime.Relations().Items) > 0
//- h3.anime-section-name Relations
//- .relations
//- each relation in anime.Relations
//- a.relation.ajax(href="/anime/" + toString(relation.ID), title=relation.Anime().Title.Romaji)
//- img.anime-image.relation-image(src=relation.Anime().Image, alt=relation.Anime().Title.Romaji)
//- .relation-type= arn.Capitalize(relation.Type)
//- .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.Genres) > 0
//- h3.anime-section-name Genres
//- .light-button-group
//- each genre in anime.Genres
//- if genre != ""
//- a.light-button.ajax(href="/genres/" + arn.GetGenreIDByName(genre))
//- Icon(arn.GetGenreIcon(genre))
//- span= genre
//- 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 len(anime.Studios) > 0
//- h3.anime-section-name Studios
//- .light-button-group
//- each studio in anime.Studios
//- a.light-button(href="https://anilist.co/studio/" + toString(studio.ID), target="_blank")
//- Icon("building")
//- span= studio.Name
//- 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
//- //-if crunchy
//- //- h3.anime-section-name Episodes
//- //- h3.anime-section-name Reviews
//- //- p Coming soon.
//- if canEdit
//- #staff-info
//- h3.anime-section-name Links
//- table
//- tbody
//- tr
//- td MyAnimeList
//- td
//- input.save-on-change(id="MyAnimeList", type="text", value=providers.MyAnimeList ? providers.MyAnimeList.providerId : ", disabled=(providers.MyAnimeList && providers.MyAnimeList.similarity === 1) ? true : false)
//- td
//- 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
//- 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
//- - 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"
//- each mapping in anime.Mappings
//- a.light-button(href=mapping.Link(), target="_blank", rel="noopener")
//- Icon("external-link")
//- span= mapping.Name()
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()
//- if providers.HummingBird
//- a.light-button(href="https://hummingbird.me/anime/" + providers.HummingBird.providerId, target="_blank") HummingBird
//- 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
//- .footer
//- span Powered by Kitsu.
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")

View File

@ -20,7 +20,8 @@
margin-top 0.5rem
.anime-cover-image
width 142px
// width 142px
width 180px
height auto
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)
h1.page-title Dashboard
.widgets
.dashboard
.widget.mountable
h3.widget-title Schedule

View File

@ -1,7 +1,7 @@
component ProfileStats(stats *utils.UserStats, viewUser *arn.User, user *arn.User, uri string)
ProfileHeader(viewUser, user, uri)
.widgets
.stats
each pie in stats.PieCharts
.widget.mountable
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)
h1.page-title= "Search: " + term
.widgets
.search
.widget
h3.widget-title
Icon("user")

View File

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

View File

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

View File

@ -4,11 +4,10 @@ component Statistics(pieCharts []*arn.PieChart)
StatisticsHeader
.statistics
.widgets
each pie in pieCharts
.widget
h3.widget-title= pie.Title
PieChart(pie.Slices)
each pie in pieCharts
.widget
h3.widget-title= pie.Title
PieChart(pie.Slices)
.footer
p Data is collected for statistical purposes only. We respect user privacy and we will never display or sell critical data to 3rd party services.

View File

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

View File

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

View File

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

View File

@ -3,12 +3,16 @@ text-color = hsl(0, 0%, 90%)
bg-color = hsl(0, 0%, 24%)
link-color = hsl(81, 100%, 56%)
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)
main-color = link-color
link-active-color = link-hover-color
button-hover-color = bg-color
button-hover-background = link-hover-color
button-hover-color = link-hover-color
button-hover-background = hsla(0, 0%, 12%, 0.5)
loading-anim-color = link-color

View File

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

View File

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

View File

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

View File

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