From a459f2aa9a6828704bced0c4c3d7fe0b762e0740 Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Fri, 3 Nov 2017 12:02:13 +0100 Subject: [PATCH] Redesign anime pages --- pages/admin/admin.pixy | 2 +- pages/admin/webdev.pixy | 2 +- pages/anime/anime.pixy | 267 +++++++---------------- pages/anime/anime.scarlet | 3 +- pages/dashboard/dashboard.pixy | 2 +- pages/profile/stats.pixy | 2 +- pages/search/search.pixy | 2 +- pages/settings/settings.pixy | 2 +- pages/shop/shop.pixy | 2 +- pages/statistics/statistics.pixy | 9 +- pages/statistics/statistics.scarlet | 1 + patches/export-aero-db/export-aero-db.go | 4 +- styles/include/config.scarlet | 4 +- styles/include/dark.scarlet | 10 +- styles/include/mixins.scarlet | 8 + styles/sidebar.scarlet | 2 +- styles/status-message.scarlet | 2 +- styles/tabs.scarlet | 4 +- 18 files changed, 118 insertions(+), 210 deletions(-) diff --git a/pages/admin/admin.pixy b/pages/admin/admin.pixy index f12146f5..d8fcb7c3 100644 --- a/pages/admin/admin.pixy +++ b/pages/admin/admin.pixy @@ -13,7 +13,7 @@ component Admin(user *arn.User, platform, family, platformVersion, kernelVersion AdminTabs - .widgets + .admin //- .widget.mountable //- h3.widget-title Usage diff --git a/pages/admin/webdev.pixy b/pages/admin/webdev.pixy index 0be46d3a..f7795b0a 100644 --- a/pages/admin/webdev.pixy +++ b/pages/admin/webdev.pixy @@ -3,7 +3,7 @@ component WebDev h1.page-title WebDev - .widgets + .webdev .widget.mountable h3.widget-title Tests diff --git a/pages/anime/anime.pixy b/pages/anime/anime.pixy index 9efa25f4..3946fc4f 100644 --- a/pages/anime/anime.pixy +++ b/pages/anime/anime.pixy @@ -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") + + //- 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 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 Reviews + //- //- p Coming soon. - //- //-if crunchy - //- //- h3.anime-section-name Episodes - - //- 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 - - //- - 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") - //- span= link.Title - a.light-button(href="https://kitsu.io/anime/" + anime.ID, target="_blank", rel="noopener") - Icon("external-link") - span Kitsu + //- 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() + //- 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") diff --git a/pages/anime/anime.scarlet b/pages/anime/anime.scarlet index 85dc661b..7e2f260f 100644 --- a/pages/anime/anime.scarlet +++ b/pages/anime/anime.scarlet @@ -20,7 +20,8 @@ margin-top 0.5rem .anime-cover-image - width 142px + // width 142px + width 180px height auto border-radius 3px diff --git a/pages/dashboard/dashboard.pixy b/pages/dashboard/dashboard.pixy index de34ab12..a40b6bd8 100644 --- a/pages/dashboard/dashboard.pixy +++ b/pages/dashboard/dashboard.pixy @@ -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 diff --git a/pages/profile/stats.pixy b/pages/profile/stats.pixy index 82e1366f..8954e756 100644 --- a/pages/profile/stats.pixy +++ b/pages/profile/stats.pixy @@ -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 diff --git a/pages/search/search.pixy b/pages/search/search.pixy index ca32fef6..caae73aa 100644 --- a/pages/search/search.pixy +++ b/pages/search/search.pixy @@ -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") diff --git a/pages/settings/settings.pixy b/pages/settings/settings.pixy index 5521671e..a42c422c 100644 --- a/pages/settings/settings.pixy +++ b/pages/settings/settings.pixy @@ -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") diff --git a/pages/shop/shop.pixy b/pages/shop/shop.pixy index 750616a4..db8edda8 100644 --- a/pages/shop/shop.pixy +++ b/pages/shop/shop.pixy @@ -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) diff --git a/pages/statistics/statistics.pixy b/pages/statistics/statistics.pixy index 7abdc72f..e4697f06 100644 --- a/pages/statistics/statistics.pixy +++ b/pages/statistics/statistics.pixy @@ -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. diff --git a/pages/statistics/statistics.scarlet b/pages/statistics/statistics.scarlet index f432ec2f..9416327d 100644 --- a/pages/statistics/statistics.scarlet +++ b/pages/statistics/statistics.scarlet @@ -1,4 +1,5 @@ .statistics + horizontal-wrap-center text-align center .pie-chart diff --git a/patches/export-aero-db/export-aero-db.go b/patches/export-aero-db/export-aero-db.go index 553e3c23..cb464a0d 100644 --- a/patches/export-aero-db/export-aero-db.go +++ b/patches/export-aero-db/export-aero-db.go @@ -1,4 +1,6 @@ -// package main +package main + +func main() {} // import ( // "time" diff --git a/styles/include/config.scarlet b/styles/include/config.scarlet index d24b7563..b3a3bf96 100644 --- a/styles/include/config.scarlet +++ b/styles/include/config.scarlet @@ -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 diff --git a/styles/include/dark.scarlet b/styles/include/dark.scarlet index bae6f9cc..f12ae59e 100644 --- a/styles/include/dark.scarlet +++ b/styles/include/dark.scarlet @@ -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 \ No newline at end of file diff --git a/styles/include/mixins.scarlet b/styles/include/mixins.scarlet index 8bde641d..02dc0861 100644 --- a/styles/include/mixins.scarlet +++ b/styles/include/mixins.scarlet @@ -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") diff --git a/styles/sidebar.scarlet b/styles/sidebar.scarlet index 5887abf2..cbd0dcf1 100644 --- a/styles/sidebar.scarlet +++ b/styles/sidebar.scarlet @@ -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 diff --git a/styles/status-message.scarlet b/styles/status-message.scarlet index d433119b..8a99505f 100644 --- a/styles/status-message.scarlet +++ b/styles/status-message.scarlet @@ -22,4 +22,4 @@ .info-message color white - background-color forum-tag-hover-color \ No newline at end of file + background tab-hover-background \ No newline at end of file diff --git a/styles/tabs.scarlet b/styles/tabs.scarlet index e6c78694..37793fc4 100644 --- a/styles/tabs.scarlet +++ b/styles/tabs.scarlet @@ -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